So I spent this weekend buried in my laptop, redesigning my coloring app interface.  Originally, I had a few tool buttons and selection menus on the right hand side of the screen. The canvas for drawing was positioned in the the center of the page and the coloring page selection area was on the far right.   The new design compacts everything on the right hand side of the screen.  That means no more menus that open up over the drawing screen.  In addition to a new interface, I just couldn’t resist adding some new functionality.  I started with undo and redo buttons, then I added clear and finally a spray paint tool which helped to even out the look of the new UI.

Rearranging the UI took a bit of time but it was relatively simple. First, I added color buttons for the featured colors the Worcester Art Museum wants displayed.  Then I resized the size menu and shoved it over to the right.  After that I recoded the coloring page scroll window to be horizontal, shrunk it to size, and sent it to the right.  I rearranged all the buttons into the right side UI including new animated undo, redo, and clear buttons and that was that.  

Undo and Redo were a piece of cake and I have to give full credit to http://www.codicode.com/art/undo_and_redo_to_the_html5_canvas.aspx author Chtiwi Malek.  His methods for handling undo and redo for a drawing app specifically, worked so perfectly, I found it unnecessary to make any modifications other than those necessary to add it to my program.  His solution was to take a snapshot of the screen after each mouse event and then store those images in an array.  Then you can traverse the images in the array using undo and redo.  I am having am issue on the iPad where you have to click the undo and redo buttons twice before they fire.  This does not happen on the computer however and thus far I can find no reason for the problem.  Clear will not only clear the page currently but it will also refresh the undo redo array so you cannot undo clear.  I am debating whether or not it should refresh the array though because hitting clear on accident would not be so good.  After that I decided to tackle spray paint.

Spray paint was actually very easy to implement. You set up two arrays one with width multiples <= 1 and the other with alpha values <= 1. The larger widths have the lighter alpha values and the small widths have the darker values.  It creates the effect of a well faded tip.  However, I found for larger tips you must increase the number of widths you are using or else the different alpha values in the tip will be distinguishable to the eye.  The effect can create a sort of cool pattern but for a spray tool it was undesirable.

I almost forgot, I changed the color wheel to a smaller wheel with no shaded regions.  the color wheel menu is activated by the color palette button.  When activated it takes the place of the original paint colors.  I created a slider bar similar to a volume bar for selecting the shade of the color.  The slider works as far as animation goes but there is no logic for shading or lightening the current color yet.  Work for this week I suppose.

Anyway that just about wraps it up for this week.

Till next time.

Jason

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

In the class time this week, Tim told us more about how he wanted the screensaver to look like and how it works. Previously, we are asked to create a screensaver with pictures or video; and the screensaver will appear after a fixed amount of idle time. Then, touching the iPad’s screen will lead the user to the home page.

Now, before popping to the home page right after the touch , we were told to add a kind of slideshow/presentation with some pictures and short introducing texts, which will appears after the first touch. The second touch will pop up the home page.

So now, the work of screensaver has 3 parts: 

– making a screen saver appearing after a fixed idle time.

– making a kind of presentation with some pictures and introducing texts appearing right after the touch.

– linking the two parts above together.

The first part seems to be done so far. For this week, we are going to work on the second part.

From the blog daunguyen10&#039;s Blog » CS-WSU by daunguyen10 and used with permission of the author. All other rights reserved by the author.

Here is the new update of light box since last week, There is few issues I have make it improved.
The most significant improvement is that my original code would work for multiple pictures. And that gets improved.
Second, I added a close button on the top of the picture in the center.
Third, I added some shadow feature to the light box to make it looks pretty.
So for the rest of the week, hopefully I could meet up with Joe and James and let them add the light box into both article chapter and slide show chapter.

And since my code only work while have the pictures, so I will zip them and e-mail it out.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

Today during class each group got a chance to meet with Tim to discuss the progress of the current section everyone was working on. Tim liked the design so far of the puzzle section but had some ideas to improve on it. We decided it would be best to have a main screen which would have a simple message to the user and show a image of the sculpture broken into pieces. This then would have the user click the start button to begin the puzzle. From there they would complete the sculpture. Once it is finished they are prompted with a alert saying you won! From there they can return back to the main screen or restart the puzzle depending on the button they select. After re coding the design layout and getting everything working, I think this overall feel and look to the puzzle is better to the eye. We decided to take out the hard level difficulty because having so many small pieces would almost be impossible to the user to complete. Now the puzzle has one difficulty level and eventually will have multiple images to select from (Work in Progress…)

Here are 2 screen shots of the latest puzzle application.

Next step will be getting the images for the user to select depending on which one they want to build. If you would like to test this code, it is not up on the development branch yet but is on my user directory on the server.

More to come…

http://cstest.worcester.edu/development/rwilliams/newestPuzzle/index.html

From the blog rwilliams5262 » cs-wsu by rwilliams5262 rwilliams5 and used with permission of the author. All other rights reserved by the author.

Today during class each group got a chance to meet with Tim to discuss the progress of the current section everyone was working on. Tim liked the design so far of the puzzle section but had some ideas to improve on it. We decided it would be best to have a main screen which would have a simple message to the user and show a image of the sculpture broken into pieces. This then would have the user click the start button to begin the puzzle. From there they would complete the sculpture. Once it is finished they are prompted with a alert saying you won! From there they can return back to the main screen or restart the puzzle depending on the button they select. After re coding the design layout and getting everything working, I think this overall feel and look to the puzzle is better to the eye. We decided to take out the hard level difficulty because having so many small pieces would almost be impossible to the user to complete. Now the puzzle has one difficulty level and eventually will have multiple images to select from (Work in Progress…)

Here are 2 screen shots of the latest puzzle application.

Next step will be getting the images for the user to select depending on which one they want to build. If you would like to test this code, it is not up on the development branch yet but is on my user directory on the server.

More to come…

http://cstest.worcester.edu/development/rwilliams/newestPuzzle/index.html

From the blog rwilliams5262 » cs-wsu by rwilliams5262 rwilliams5 and used with permission of the author. All other rights reserved by the author.

I now have the working screensaver (a slideshow with art images).

So I have this little script that we would have to put in all of our pages so that after some idle time (now set to 15 sec just for testing), it would go to the screensaver

$(document).ready(function(){
    var timeout;
    $(document).on(“mousemove keydown click”, function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
             window.location = “./screensaver/screensaver.html”;
        },  1 * 15 * 1000);
    }).click();
});

I’ve only put this script in the “homepage” for now just to test that it works. And in my screensaver.html, I have this script,

$(document).ready(function(){
    $(document).on(“mousemove keydown click”, function() {
             window.location = “../index.html”;
    });
});

which will take us back to the homepage if there’s movement.

When I showed it to Tim, he said he likes how it looks. There’s also the possibility of putting videos as the screensaver too. After some reading i found that to put video in the slideshow, all I have to do is download jquery video plug-in and just put it as element of the slideshow (just like images). But I also want to do something like this, if we have really nice videos to show http://tympanus.net/Tutorials/BigVideoSlideshow/

But this is how the slideshow look right now,

Tim also gave me another feature to work on. So instead of “movement” would send us back from screensaver to homescreen, it would go into some kind of “introduction presentation” slideshow(?). So basically,

[idle] -> ScreenSaver -> [movement] -> IntroPage (user can skip) -> HomeScreen

I actually had some free time this afternoon, so I was working on this IntroPage and I think I got a lot done. I found a plug-in that will make it look similar to the Nike website. So far I got the background and textbox of each slide working, but I have problem positioning the second image on top of the background.

Will update again when I get this IntroPage fully functioning…

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.

I now have the working screensaver (a slideshow with art images).

So I have this little script that we would have to put in all of our pages so that after some idle time (now set to 15 sec just for testing), it would go to the screensaver

$(document).ready(function(){
    var timeout;
    $(document).on(“mousemove keydown click”, function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
             window.location = “./screensaver/screensaver.html”;
        },  1 * 15 * 1000);
    }).click();
});

I’ve only put this script in the “homepage” for now just to test that it works. And in my screensaver.html, I have this script,

$(document).ready(function(){
    $(document).on(“mousemove keydown click”, function() {
             window.location = “../index.html”;
    });
});

which will take us back to the homepage if there’s movement.

When I showed it to Tim, he said he likes how it looks. There’s also the possibility of putting videos as the screensaver too. After some reading i found that to put video in the slideshow, all I have to do is download jquery video plug-in and just put it as element of the slideshow (just like images). But I also want to do something like this, if we have really nice videos to show http://tympanus.net/Tutorials/BigVideoSlideshow/

But this is how the slideshow look right now,

Tim also gave me another feature to work on. So instead of “movement” would send us back from screensaver to homescreen, it would go into some kind of “introduction presentation” slideshow(?). So basically,

[idle] -> ScreenSaver -> [movement] -> IntroPage (user can skip) -> HomeScreen

I actually had some free time this afternoon, so I was working on this IntroPage and I think I got a lot done. I found a plug-in that will make it look similar to the Nike website. So far I got the background and textbox of each slide working, but I have problem positioning the second image on top of the background.

Will update again when I get this IntroPage fully functioning…

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.

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.

This week saw some major progress in the overall functionality of the complete app. After the results of the testing, teams went hard at work at optimizing their respective contributions to the app to create an even better deployable version. Sever problems were fixed and various bugs at different parts of the app were taken care of.

My teams focus, the puzzle app, saw a major bug in the testing in which the pieces could not be selected by the touch screen of the iPad. Through research, I found a very useful utility called Touch Punch. (http://touchpunch.furf.com/). What Touch Punch does is use simulated events that translate touch events into something that would have been a mouse event on a full size computer. It’s a 1 line fix that modifies some of jQuery’s core functionality. After implementing touch punch, the puzzle was fully operational on the iPad.

Another feature we are currently working on is adding a side bar of images, much like what the coloring team is using. This feature would allow the user to select from a vertical scroll bar of images for the puzzle while on the main page. This should be similar in style to the coloring team’s implementation to hold up the same style profile and give the app a better feeling overall.

From the blog ksabanty » cs-wsu by ksabanty and used with permission of the author. All other rights reserved by the author.