Updating a plugin.



This week my focus of attention shifted somewhat towards updating a jQuery plugin called farbtastic.js; the code is on github at: https://github.com/mattfarina/farbtastic 

My interest in doing so stems from the fact that this plugin provides a nice and powerful implementation of a color wheel that, with minor modifications I have been able to successfully use in the sketchNcolor version of the coloring app. The idea is that, I can hopefully incorporate this color wheel into the current version of the app in the development branch and/or the final version, and in that way provide a much wider range of of available colors for selection to the end user.


As can be noticed on github, the plugin has not been maintained and updated in quite a while and, as it is, it works well with versions of jQuery up to 1.8. As soon as  more recent versions of jQuery(1.9 and on) are called, the plugin breaks. This is due to the fact that the jQuery 1.9 line introduced major changes, and plugins that have not yet been updated require the use of an additional jQuery Migrate plugin. More about that can be found here: http://jquery.com/upgrade-guide/1.9/#overview


As of the moment, using the Migrate plugin is an option that works. But updating the plugin would be much better, and great learning experience for sure. The update is not yet complete but, if I succeed, I will provide details about it in future blog post.


Until next time,


Beto Luna.

Light a the end of the tunnel?

Hello everyone,

 After some period of time waiting and slow progress, we’ve got a desired possible User Interface from the Worcester Art Museum. Two different concepts for the coloring app have been implemented, as usual they can both be tested, one in the development branch, and the other is in the web server’s user directory at http://cstest.worcester.edu/development/betoluna/sketchNcolor/

The only major change was the implementation of a coloring wheel that now allows to paint with all colors and all kinds of shades (this one is in the version in my user directory). No other major changes have been implemented. The code for this version can be cloned from https://github.com/betoluna/sketchNcolor

Now the challenge is to combine features from both versions as we have learned from our clients that is what they would like. This is a task we are going to start working on this week. Unfortunately, I have to say that, as of the time of this writing, and also this late in the semester, my partner and I don’t have a great deal of hope we are going to be able to accomplish such a merge of versions successfully. That said, we agreed we are going to give it a shot.


Well until next time.


Beto Luna.

ipad zooming or not…


After last Friday’s feedback from our clients at the museum, I worked in fixing two bugs noticed when they tested this particular versions of the coloring app (link). One issue was caused by the undesirables effects of zooming caused by I would say, accidentally double-tapping/pinching on the ipad, the other was a small delay for the first mark to appear after the very first drag of the mouse/finger. Even though being able to zoom-in in this fashion is a nice feature of the ipad and other mobile devices in general, it doesn’t necessarily seem to be the case in the context of the coloring app, at least as of these moment as it was causing more problems than helping in anything. That said, we could still consider including zooming capability later if at all desired for the app.

Now, there is a quick and simple way to disable zooming by double-tap/pinch on the ipad. Simply add this line : <meta name=”viewport” content=”user-scalable=no;”> to the head of the html file. For instance:

<!DOCTYPE html>



<meta charset=”US-ASCII”>

<title>Intro to Coloring App</title>

<meta name=”viewport” content=”user-scalable=no;”> 

<link rel=”stylesheet” href=”css/intro_page.css”>


There are other, not as simple solutions that would disable zooming and can be applied only to specific html elements (I would cover those in a later post). For the moment this solves the immediate problem.

 The other issue was a small delay for the first mark to show. That was actually caused by the size of the images. The images that we originally got from the museum and for the coloring app are 1536 x 1536 pixels and range from 60 to 120 kb each. For this app, the biggest image than we can fit in the ipad’s screen has to be reduced to about 800 x 800 pixels. At the beginning, I was a little bit reluctant about scaling (resizing) the images on our own and possibly sacrifice their quality, therefore I wanted the museum to provides us with images of the appropriate size and quality. Getting files from our clients has proven to be sometimes a slow process, so I was using the original large images and specifying the the size in the html code. That was not a good idea, the images showed the right size but caused the app to behave a little sluggish on the first click, probably to the fact that the images were taking long to load. Once I decided to resize the images so that the html wouldn’t be forced to adjust them, the issue went away. To resize the images I used Gimp, at the moment I wonder if a better job in preserving the quality could be accomplished using photoshop.

Well, that is all for now. Until next time.