During the spring break I saw the email about the testing so far with the code we have. I noticed that the puzzle game was not working for dragging wise the pieces across the screen. Else the buttons worked with no issue. Kerry found on the web that there is a tool called touchPunch. How it works is it uses simulated events to map the touch events to their mouse event analogs. All this needs it to add the touchPunch.js tool to the index.html file after the defining of the jQuery UI package tool. Then from here it should allow you to move the pieces. 

Here is the link to touchPunch tool:

http://touchpunch.furf.com

We have implemented this into the code and and from testing wise through the web browser everything seems good. The next step is to test this on the iPad to see if this tool actually works or not. 

We have been working on implementing a main screen page which would allow the user to select the difficulty level of the puzzle, the image they would like to view (if have more than 1) and then a button that starts the puzzle. Once the user starts the puzzle they can complete the puzzle or click the button at the top left corner to go back to the main page. We figured it would be a good idea to have a main page which allows the user to select all the different options they wish to use inside the puzzle and then move onto a different page for the actual game. The issue we have come across is getting the button id values passed to the 2nd html file. The first puzzle application we had did this all within one main html page which we were able to pass the id value to the javascript from there inside. We are stuck on passing the value from one index page to another. If anyone has any idea how this is possible that would be greatly appreciated! 

Overall it has been a lot of learning and trying to find different ways to get this value passing for me over the past week. We are hoping to have theses new features added in soon once we get past this small bug we are stuck on. 

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

 Hello again

 The past two weeks have really been very eventful as far as the coloring app goes.

I have spent most of my spring break writing code and I am not the least bit regretful… well perhaps a little bit.  I at least managed to squeeze in a few flicks this week so not a total loss.  I started this week with a very slow flood fill algorithm a few minor inconsistencies with clicking and several other short comings.  As I mentioned In last week blog update though, I got the flood fill algorithm working very fast and I will explain how. Aside from that I have completely abandoned redraw because it is slow with flood fill.  In addition to all this I rewrote all the event to work with jQuery mobile and even rigged up new toggle button for tools and menus to fix issues on the iPad.  I also added fading scroll indication arrows to the scroll menu this week, cleaned up all the code and segmented each piece of functionality with comments.

 So lets start with redraw and why we are not going to use it.  Though I don’t doubt there is some way to make redraw efficient, I have found a much easier solution to the problem redraw had solved for me.  Originally I switched to redrawing each event click so I could avoid drawing over the coloring outline  by drawing after each click.  This allowed the flood fill to interact with the outline image and anything drawn to screen as well.  The problem was the redrawing of flood fill is very costly and after a few flood fills had been applied the code became sluggish.  The solution was actually quite simple in the end.  The flood fill algorithm has to check the canvas pixel memory directly during it process for speed, its very fast. The pixels data is divided into 4 bytes one for Red Green Blue and Alpha(Transparency).  The flood fill algorithm has to compare RGB values for the drawing canvas so it knows what to color, so why not make comparison to the outline canvas at the same time, it certainly would be more efficient than redrawing.  Well that’s exactly what I did, I wrote a simple method that just checks the alpha value for the outline canvas and added the necessary checks to the algorithm.

 That leads me to the topic of pixel memory access.  As it turns out, it’s easy to access the pixel memory it just can be a bit confusing.  So you can get pixel data by calling getImageData() on the context of your canvas.  This gives you a pixel at an x and y coordinates. The pixel memory is ordered top to bottom left to right.  Imagine a 9 pixel canvas ordered like this. 

 X and Y Memory Address

 00   01   02    0   12   24

10   11   12 = 4   16   28

20   21   22    8   20   32

 If you are at the pixel memory address of 12 you can traverse to 24 with (y * widthOfGrid + x) *4) because at memory address 12,  x and y = (0, 1) so you can see that(1* 3 + 0) * 4 = 12 so Our location + (y * widthOfGrid + x) *4) brings us to the pixel to our right and like wise you would subtract to move to the left.  That is the secret to fast flood fill algorithms in javascript.  That and don’t use recursion due to stack limitation but that’s a whole different topic.

 

A few other small changes where the size menu was set to close when you clicked the button but not the menu itself.  It was suggested that that would be better so that was fixed right away this week along with a few other changes to buttons. The Worcester Art Museum had also suggested disappearing scroll arrows would be nice for the coloring outline selection menu, so I did that this week too.  I found an easy tutorial at jsfiddle.net that worked quite well, I modified it to work with two arrows and that was that.  I also did a lot of work rigging and making toggle buttons for the tools size and color menus.

 

I think that about wraps it up, Next week spray paint!

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.

These past few weeks in CS 401 have had their moments of progress as well as a few setbacks. The main accomplishment was that a working web app, supported by a server to hold all of the different parts of the app, was completed. Even though it was mostly bare boned, it contains the functionality that we need to push out a completed project. The server is able to handle all necessary basic functions that need to be operational in order for the class to make more progress.

Due to the functionality of the server, the different parts of the app were able to be tested on the iPad which they will be run on. This was where a few setbacks occurred, as the iPad was not running a few aspects of the app as well as they were showing up on desktops. With the example of the puzzle, which Ryan, Kathleen, and myself are working on; The puzzle pieces show up on the screen, but are unable to be selected by touch. The shuffle function work and the pieces are correctly sized and shaped, but no actions can be taken on them. This is a bug that we will work on correcting throughout this next week. The sizing is also off on where the puzzle shows up on the screen, but this is a minor issue compared to the issue affecting the main functions of the puzzle, and will be a secondary task for the week.

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

Since this is the beginning of the project start, our class have being meet for three times. And We decided to use a web based to create the app. And we will use HTML, CSS and JAVA SCRIPT to write code on them. I was reading about a web : https://developer.mozilla.org/en-US/learn , given by the professor in general about how to install and basic function in these three area.
I have learn a couple useful things from the web:
To get start a JavaScript:
“Getting started with JavaScript is very easy. You don’t have to have complicated development programs installed. You don’t have to know how to use a shell, program Make or use a compiler. JavaScript is interpreted by your web browser. All you have to do is save your program as a text file and then open it up in your web browser. That’s it!”
To get start a HTML
” HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor. “
With these simple examples on the web, this week, I am being able to create a local web page.

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

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. 

 

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.

 

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.

So this will be a relatively short blog as I am deeply engrossed in coding the coloring page.  I have been working on a flood fill feature for the coloring page for four days now, It has not been an easy task.  The only way to make a fast flood fill method is to directly access the pixels memory.  I was lucky enough to find a flood fill javascript file that does this and I have been working to change my algorithm to do the same.  In light of this new fill feature multiple canvases seemed like they would be more of a hindrance than a benefit, so I have refactored the code to use a redraw method in order to keep the outline image untouched.  The concepts used where taken from a tutorial at http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/.

I am currently trying to address a pixel matching issue with my flood fill algorithm as well as finding a way to handle redrawing the fill feature.  There will be a long blog that will come hopefully soon if a figure all this out, that will explain flood fill and the redrawing method in detail.

UPDATE: I wanted to quickly update this blog to just let everyone know that I got my floodFill algorithm working and it is very fast.  I also got it working in the redraw method.  The next step will be to optimize redraw so it only redraws what it has to.

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.

I missed some blog posts, due to midterms and other distractions.  So this post will include information from the missed blogs as well as the current one this week.

First having nothing more to research for the group I joined the testing group to go over what other people were doing looking for any bugs, errors, or ideas I thought that could be useful.  My main goal was to be doing the testing on the iPad to make sure it worked, did what it was supposed to, and that there wasn’t any compatibility problems.  The first week on testing was slow, few things were ready for testing and those that had something it wasn’t complete so hard to do much.  The second week was a bit better but still not as progressive as I would like.  I came up with some suggestions but It was a question if any were viable.

This week, after a lot of delays was able to work on the iPad and make a lot of progress there.  Below is a detailed account but in short, there was some good and some not as good in my work.  The good, is the Kiosk Pro does seem to really deliver on it’s promises, also there is a lot of helpful information on the settings screen, and even links to online tutorials.  I’ll be going over some of these during the vacation break next week.  I believe that Kiosk Pro will work just fine as believed and there were some features that we might be able to use to cut down on the needed coding.

The bad, some of the features don’t work when I tested them.  Though I found out for the most part it seems to be the iPad not Kiosk pro in general, as the same errors came up when I viewed the project just in a regular browser.  The coloring and puzzle apps were the primary area this came into play (Details below).  So after finishing this blog post I’ll be sending out an e-mail to list with my findings so that people can start thinking about the new problems that have come up.  I’ll also be including a quick guide how to get into the Kiosk Pro to do the testing there.

Some questions also came up, features we may or may not use, and setting choices that will need WAM input (not a big rush on these as they don’t really need to be resolved until the iPads are ready to be set up).  As these items get resolved and I am able to get more of the settings on the iPad ready I will likely put together an easy to follow step by step guide on configuring the settings of Kiosk Pro, both in general and specifically to work with the kiosks and our program.  This way if WAM wishes to add more in the future or something needs to be changed but Tim is not around there will be an easy step by step to follow.

iPad Testing specifics

Note: I’ve split up the things I found into sections per what part they pertain to.  So if you just want to see the notes on your groups sections then you can look for it.  Also take a look at the general items as well as some may pertain to your group.  I’ll continue to use this format as I make future updates.

Overall Program: Partially Working

The ‘home’ link at the top right of the homepage, article page and slideshow does not work as a link, and on the iPad the house image shows up as a check mark instead.  This seems to be an issue with the new iPads as older ones still show the house image.

For all pages, had to use the Kiosk Pro built in back button to get back to the home page, as the pages either don’t have a working button, or none at all.

Touch control worked fine on all pages, was able to scroll and zoom without any troubles.

There is an idle timer set that will return to the home page if it is idle for 30seconds (This time is for testing purposes and can be changed later to whatever is decided would be best).  If there is a point that we don’t want the idle timer to activate, there is code for supplying a condition that will shut off the idle timer.  The code is below.

Function KioskShouldDisableTimer() {

            var shouldSkipAction = “NO”;

            if(someCondition) {

                        shouldSkipAction = “YES”;

            }

            return shouldSkipAction;

}

This is all the information it gives, but if there are problems I can help trying to figure out how to use this properly.  There is a demo on using this that I will be viewing over vacation or next week.

I looked at all the pages in both Portrait and landscape mode.  None of the pages seemed really squished in landscape, and the homepage does not work in portrait.   The messages and buttons within the boxes are not shown so you can’t navigate at all.

 

HOME PAGE: Working

The only issue currently for the homepage is that it is a bit to long, had to actually scroll down to see the entire page.  At the moment doesn’t matter as there is nothing on the navigation boxes, but as that changes it might not look good to have to scroll down to see.  I don’t know that it is possible to shrink the page, but if we just avoid using the bottom it would have the same effect.

 

Article: Working

When scrolling on the page, the images on the left don’t update until the scrolling action stops.  This isn’t a major issue and it is possible there isn’t a way to really change this as it may well be part of the iPad programming.

When I used the zoom feature to look at the text closer, the image box stayed partially on the screen blocking some of the text that the customer would be trying to read.  I’m not sure on a solution for this.

Besides the issues up above, all the buttons worked and the image box did change with that section reached the top of the screen.  I had no trouble scrolling through the images in the box on the left, or using the buttons in the text section.

 

Slideshow: Not working

The issues here I believe are all ones that are just in the works and not to do with the iPad in specific.

When the pictures are clicked get a blank page with ‘undefined’ at the top left.

have thumbnails of the pictures at the bottom which can be scrolled through, but top of the screen is blank so far.

 

Puzzle App: Not working – error

While it works on other systems, on the iPad (through kiosk pro or directly in browser) can’t select the puzzle pieces at all.  The shuffle button works find and the pieces are the correct puzzle shaped pieces but can’t move them around.

The example image takes up only a small portion of the screen at the top left, with the pieces scattered across the top half of the screen.  they actually go to the right enough that scrolling is needed to see all of them.  The bottom portion of the screen is completely unused.  Not major issues but something that right now gives a poor look to the app.

 

Coloring: Not working – error

Like the puzzle app there is a problem on the iPad (in kiosk pro or just in browser) that you can’t actually color the picture.  all other buttons and scrolling works just the coloring action doesn’t work.

When I go into the color select menu and select a color it closes the menu automatically, this is good I think.  However, the brush size menu, when a brush size is picked the menu doesn’t close, you have to click on the brush size menu button again to get it to close.

 

Screensaver: Not implemented yet

Some information, if we decided to use the built in video screensaver.

The iPad screen is a 4:3 aspect ratio, so to be true full screen the video will need to be the same.  If not Kiosk Pro will get it as close as possible and should fill in the rest of the screen not used with black.

It supports .mp4 and .mov as well as remote streaming video (.m3u8 format)

 

These are all my notes for the groups so far.  If there are any questions let me know and if any of the teams have something specific they want me to test for or want/need help in testing their stuff let me know.

 

General Questions

Kiosk Pro has it’s own navigation bar that can be customized, this might be usable but likely we will want to disable this once we have our own added.  As if we used this feature, and WAM released the program openly after the display of the statues, there would be no navigation buttons.

WAM needs to get screen protectors for the iPads, for now I’m going to bring in one of my touch screen cleaning cloths to keep it looking good while we have it.

I will be looking more into the local file information to make sure there will be no trouble backing up our program locally on the iPad to be used when there is no internet connection

I will also be looking into the Remote Monitoring features to be able to give a good explanation of how they work to WAM.

While I’ll be doing some things over the vacation time I likely will not make a blog post, so what I get done will be on the next week’s blog post.

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

For the last week, i learned how to work with Github basically. We saw on Sompop’s post before, there were some commands that we can use to clone, pull, push, fetch. After the class time on Monday, Sompop helped me know more about using git and Github. I’ll write all the commands i learned out now to be my record firstly, and it would be great if anyone finds it helpful.

1- cd, ls list and change your directory. In the terminal, using cd command to move to your desired directory, which is used to save your files from Github.

2- git clone  https://github.com/CS-Worcester/CS401Spring2013.git to clone the our class’s repo.

3- Now there is a sub-directory in your your desired one named CS401Spring2013. Change to that directory by using cd command.

4- git remote origin to remote the cloned repo.

5- git branch to list all the branches on the repo.

6- git branch <name of your new branch> to create a new branch.

7- git branch -D <name of your new branch> to delete your new branch.

8- git checkout <name of another branch> to switch to another branch.

9- git status to show which branch you’re on currently.

10- git pull origin to fetch then merge everything on the current branch to your local directory.

11- git push origin to push your files to the branch on Github.

12- git fetch origin to fetch everything on the current branch (just getting updates, not merge them to your local branch).

13- git pull origin <name of another branch (different from the branch you’re currently on)> to pull everything from another branch and merge to your current branch. With this command, you need to commit the merge before continuing by using: git commit .Then you need to commit again for the change you made to the current branch.

Here is a similar infer. for that kind of pull: http://stackoverflow.com/questions/1709177/git-pull-certain-branch-from-github

Similar to push and fetch.

14- git add < file name> to commit and let the tracker track the file for any change you make on it.

That is all i know about using Git and Github for now.

More on next post for this week….

 

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.