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.

Hello all,

This week I worked on and off with Sean on trying to move the picture finder to the bottom of the screen, we made slight progress at first but were later proved to be unsuccessful. We may end up needing a little extra help on this, even if its just for brainstorming ideas on how to implement it in the code. Next, we need to figure out why when we try to test on the server, we just get an infinite loading bar.

From the blog CS:401 » CS-WSU by dcarlin2013 and used with permission of the author. All other rights reserved by the author.

This week I tested not only the new code in the program, to include new puzzle and coloring activities, but I also did a stress test for all the current code.  This including things like rapidly pressing the given buttons and menus, quick swiping, swiping several directions at once, and similar tests to see if I could get the program to crash or stop working properly.

Overall it turned out very well, actually better then I had expected.  I found only one error that made the program unusable, and even with that the idle timer reset still worked and returned the program to the home page and worked fine.  That error like several others I encountered I was not able to duplicate despite spending significant time trying.  Such a problem will rarely if ever happen in normal use so doesn’t seem to be anything to be concerned about.

All other areas of the program worked out well and dealt with the testing well, except for the coloring program.  Testing the newest update on the server ran into trouble that even without doing the stress testing and just normal testing it was running into errors.  The menus coming up when they shouldn’t, the picture blanking out and more.  One problem found was the menus would flicker and be unable to close.  This would last several seconds and longer if the menu was clicked while it was happening.  Though I found out that this problem and most of the picture blanking was due to using the zoom feature and when testing the program with the zoom disabled it did do better.

If zooming is not needed anywhere on our program then we might want to disable it completely, some of the other errors or weaknesses I found were related to zooming as well.  This next week should be able to get some more testing in as well as start getting together my power point instruction slide.  I can’t finish it yet but I can start putting it together.  I will also find out what, if any, settings I need the WAM’s input on before they can be set.  

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

Happy Easter Everyone,

It was an awesome weekend, had a big party at my house with the whole family… 30+ people.  Food was great mimosa was even better… haha.  So I spent I bit of time testing  my drawing app on the iPad.  I was trying to fix a page bouncing issue.  Obviously, this is a problem that has come up before for other developers.  I started working on the tests pretty late so I probably overlooked the obvious due to being a bit tired but this is what happened.  

The Worcester Art Museum tested our coloring app this week, but when the user drags on the screen you just get a page bounce effect.  According to all my research, the way to fix this problem is very simple: you just add the event.preventDefault(); to your touchmove event.  However, I tested this fix several times and it did not work.  The problem I believe, that when I updated our repository it also updated our testing server… this is not the case.  I will be waiting to get access from our Server team so that I can debug my code on the iPad.   I think the fix will be very simple once I can access the server for testing.  Spray paint will have to wait for now.

Till next time.

Jason Hintlian.

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

This week, I am working on the java script Light Box foe both article chapter and slide show chapter. I have find an example online to do such a thing. And by simply add my code to both chapters index will make the light box function work!
And here is my code:

Quick Simple Light Box

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
z-index:50;
display:none;
}

.box
{
position:absolute;
top:5%;
left:25%;
background: #000;
z-index:51;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:0px 0px 15px #444444;
-webkit-box-shadow:0px 0px 15px #444444;
box-shadow:0px 0px 15px #444444;
display:none;

}
}

$(document).ready(function(){

$(‘.lightbox’).click(function(){
$(‘.backdrop, .box’).animate({‘opacity’:’.50′}, 300, ‘linear’);
$(‘.box’).animate({‘opacity’:’1.00′}, 300, ‘linear’);
$(‘.backdrop, .box’).css(‘display’, ‘block’);
});

$(‘.close’).click(function(){
close_box();
});

$(‘.backdrop’).click(function(){
close_box();
});

});

function close_box()
{
$(‘.backdrop, .box’).animate({‘opacity’:’0′}, 300, ‘linear’, function(){
$(‘.backdrop, .box’).css(‘display’, ‘none’);
});
}

This is Quick Simple Light Box

Realized that the picture I use in the web page is called 1.jpg and 1-mini.jpg. These two picture have different size. So before we upload the picture, I will need to smaller the regular size pictures and then it should work prefect.

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

After few weeks of study JQuery and research on the light up box, I decided to use the example from web named demozoom. The picture will be enlarged if the user click on it as the picture shown.I have got the code running. So the next week I have to figure out the way to make the code runable on the existing code I have.

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