Author Archives: betoluna1

Updating a plugin.

Hello,

 

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.

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

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.

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

ipad zooming or not…

Hello,

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>

<html>

<head>

<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.

Beto.

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

New version of the coloring app working on the Ipad

Hello again,

This little demo (someone had lots of fun producing it; not me since I have no drawing talent) was done on a new version of the coloring app I came up with. When you click on the index.html file, it features a slideshow as an intro to the app, it also focuses on a minimalistic User Interface where everything needed is on the screen and would provide immediate and intuitive interaction to users, specially children, who would be able to start sketching and coloring right away. Image

 

As I have mentioned before, while we have been waiting on a decision from the WAM on the ipad setup, the user interface for the coloring app (and maybe other parts of the main application), I spent some time playing around with some jquery plugins, namely slides.js http://slidesjs.com/ and sketch.js https://github.com/soulwire/sketch.js?utm_source=javascriptweekly&utm_medium=email

 

This app make use of these plugins and allows for (maybe) less, simpler code and smaller file size. The code is on github at https://github.com/betoluna/sketchNcolor , you can fork the repo, clone it and test it in your local machine, or even easier, go to the web server http://cstest.worcester.edu/development/betoluna/sketchNcolor/ and try it there, this will take you right to the intro page. I made some initial testing in the Ipad and it seems to be working without problems.

 

Until next time 

Beto.

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

Chaining links…

 

Hello,

As a curious note, this week while exploring some jquery plugins that would potentially find use in the coloring app, I encountered a situation in which I needed to be able to click on a link  -an <a></a> html element- and not only have the link do its job but, as a side effect also activate or click a second link with that had different purpose.

 

You may be wondering: why on earth would anyone want to do that? Well, for various different reasons. If you look around on the web and you will definitively find some. It turns out that in this particular case, sketch.js, the plugin I was testing, works by simply using links that work as tool buttons. The link’s href tag just has to point to the id of the canvas and will automatically be considered a tool link.

 

For the sake of simplicity in the functionality of the app, I wanted to chain links so that the first would act and then trigger the next. My first obvious thought was to nest links. Not good; it cannot be done. According to the World Wide Web Consortium (w3.org), nested links are illegal: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2 Of course there are workarounds for this but, as I was browsing around, I found solutions that were either elaborated or involved defining some jquery functions in which I didn’t want to spend too much time. I kept doing a little more research and was delighted when I bumped into a javascript solution that is beautiful in its simplicity.

 

As an example, clicking on the first link below, will also trigger the second link after that:

 

<a href=”#” onclick=”document.getElementById(‘anyId’).click();”></a>

<a id=”anyId” href=’#canvas’ “some javascript”></a>

 

And that is achieved by just adding: onclick=”document.getElementById(“anyId”).click()”  to the first link where “anyId” is of course the Id of the second link. Simple right? 

Well, if you ever want to chain links in this way, this simple line of code can save the day.

Until next week.

 

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

Intro to the coloring…

img1 img2

Hello,

No matter how much time you have put into a project, is good to keep an open mind about going back to the drawing board and making changes. There are always new ideas, new improvements, new and exiting add ons.  I say this because, during the first part of the semester, there has been, at times, a little bit of miscommunication  with our client, and thus some of our ideas have probably not gone totally in the right direction. Well, I guess that is part of any software development process and definitively a part of the learning process as well; fortunately is still early in the semester and there should be plenty of time to correct for this.

Last week, our clients suggested they would like to have a brief intro to the coloring book and the puzzle sections. The intro would say something like “These sculptures are white but back in the day they used to have colors. Help us color these”. In response to that, one idea is to have a small slideshow of floating images and a brief legend next to them. Once the user wants to start coloring, there is a button that takes to the main coloring app.

The slideshow and the link to the page are working now, and the idea could be adopted in the coloring app or maybe adapted somewhere else in the main program, in any case, it can be further stylized with css. The images here provided are just  snapshots but the code will be available hopefully soon in the CS401 server.

Until next week.

Beto

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

About multiple images and canvas…

Hello,

This week we have been dealing with loading and coloring on the images of the statues the Worcester Art Museum has provided. After filling the images backgrounds with transparency, which can be accomplished in any decent image editor(e.g Gimp a good alternative, and also free), we were able to color on the images. We still need to ask the client to provide us again with the images but this time they should have the same dimensions. As of the moment the ones we have have very high resolutions and differ in size. I don’t think we should manipulate the images because they have much better tools than the free ones we are probably using. 

Hopefully this week we’ll know wether they would only want the children to use specific colors or we are free to include any that we want.

Now, regarding the functionality of the coloring app, our team was thinking about maybe queuing canvases. As is the case with many coloring applications, hopefully we don’t need to implement something like that, and, instead just let the user click on a different image when they want to replace the current one using something like context.clearRect() before loading the new image or simply overwriting the current image with the new.

See you next week.

Beto.

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

betoluna » CS WSU 2013-02-05 22:35:13

Hello again,

If you are using a mac and have problems running an HTML5/JS project using the HTTP preview localhost to test internally within eclipse 4.2 Juno, do the following:

1. Choose the web perspective.

2.Create a new Static Web Project.

3.Type your project name and click in the new runtime tab. That should bring another dialog

with a list of servers (HTTP Preview, HTTP server, J2EE preview). The problem I referred to in my previous post was with the HTTP preview, for which there is a fix for another version of eclipse namely Helios. If you want to be able to test within Juno, select the “J2EE preview” and click the “Create a new local server” box, then click on finish.

Continue setting up your project as usual, and you should be able to run and test your app from within eclipse now.

Hopefully this helps.

 

 

for another version of eclipse (Helios)

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

Eclipse tools for HTML5/CSS and JS

Hello,

It’s been a fun week playing around with HTML/CSS this week, so far very little JavaScript.

Installing the tools in Eclipse was no problem, but making a simple project containing HTML5 and some javaScript work proved to be tricky, at least for me as a mac user. It turns out that in Eclipse IDE for Java EE Developers (Juno 4.2), trying to run a project that is making use of the: “HTTP preview at LocalHost”, encounters the following problem: “Could not find JRE executable”.

This does not occur and the same project runs fine in Eclipse IDE for JavaScript Web Developers (Helios), after patching bug 293398 which can be downloaded from: https://bugs.eclipse.org/bugs/.

Anyway, hopefully none of you encountered  this problem, and if you did, we’ll work around it this week. 

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

CS401 first post

Hello,

My name is Norberto Luna-Cano (please just call me “Beto”). I’m exited about starting this course. Because I have almost no experience with Javascript, HTML5 or CSS, I feel the reward at the end of the semester will be great.

I wish everybody a successful Spring semester.  

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.