This week had our weekly class meeting and we all decided it was time to get a working version of the iPad application we have all been working on. Even if it was the basic framework, it was just something that we could deploy and for Tim and others at the Worcester Art Museum to view.

That was one of our goals this week was to get the puzzle demo up on GitHub for the development branch. A working demo is now deployed on the development branch as of this morning. We where having difficulty this week trying to get the puzzle activity application to work. We before had a demo that would allow the user to move puzzle pieces as the shape of squares around, but Tim was looking for the actual jigsaw piece type. So we had to go back to the drawing board and figure out how this could be done. I found online there was a tool called kinetic.js which allowed you to move pieces around by creating kinetic.shapes, objects, etc. I thought it was a very cool tool. If any of you want to look at it for future projects down the road or just for fun to learn here is the link:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

We then found someone had an open source code that allowed the user to give it a image and it would separate them into many puzzle pieces that you could move. Unforutnatly we tried giving this a shot and every time the image would come out black. We asked another student in the class and they looked at it over night and still had no luck to get that to work. So this was then when we said we cannot use Kinetic.js any longer. Jason who looked at our puzzle activity code, pointed us to another open source code from Google that had everything we where exactly looking for. The link that he had sent out to us, I actually came across along my way at the beginning of researching how to create puzzles with HTML, JavaScript, and CSS. This one was using all of theses languages along with the jQuery UI tool. I think that was the key feature that we where missing. I had a feeling we where going to need to use jQuery at some point for this.

So after looking at the link for the open source code again, we had a working puzzle activity that can now be viewed by everyone on the CS401 Repository Development branch. Here is an screenshot of the layout:

It allows the user to move pieces all around on the screen, has a timer which I wanted to implement into the original first Demo we showed and tells you the number of movements. Along with bringing a nice frame around the puzzle. It has the snap feature so when the piece is in the correct location the frame lights up green and then snaps the piece there and you can move on to the next one.

That is all for this week. Looking forward to seeing this first deployment with everyone’s work together.

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

So we finally were able to have a class meeting after the 2 weeks of having to meet on IRC chat due to snow storm and no school. It gave us the chance to get a better view where everyone stands. We got a chance to show Tim a working demo of the puzzle application. He liked some of the features, but was hoping for the pieces to be jigsaw shaped instead of having pieces that were shaped as squares and move those around. So this week has been trying to figure out a way to creates pieces in that shape. I found a couple ideas that might work. There is a tool out there called kinetic.js which allows us to create drag able and moveable pieces. I found that somebody had created a puzzle with this feature and was looking at his code to get an idea how we could do this. We would have to change the code we have so far to get this to work. I still have had no luck with getting this up and running. I also was looking online finding ways to do it with jQuery UI and javascript. I have no experience working with jQuery tools. So I think I would need some help within that area to get this going. Overall a decent week but kind of stressful due to not knowing how to implement some of theses tools and hope for a working demo in the end. I will be bringing this up in our discussion tomorrow during class.

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

This week was a lot of continuing to improve the basic demo so far that has been built. I keep thinking of different ways to improve the GUI for the user thinking which way would be the best for them. I showed a couple people at work to test out the application and they thought it was a good working start. One of my goals for the week was to get the number of pieces taken to complete the puzzle outputted to the user. For now it outputs them onto the canvas when the puzzle is complete. I am working on getting it to show above the image so the user can see it increases as they play the puzzle. Another idea I came up with is to work on implementing a timer to see how long it takes the user to complete the puzzle. Kathleen came up with idea of having the image shown behind the puzzle pieces so the user could have some hints that way. So this is an idea we have started to look into. Overall this week was a good researching and making improvements to the code. Today we will be showing the demo to the class to get some feed back and we still are waiting on Tim’s advice and images from him to test with the puzzle game.

Will be posting again once I get the couple ideas I had in mind working.

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

As the week went on, I kept practicing using EGit with Eclipse to fetch and push scripts from my testing repository for my teams puzzle activity section for the app. Besides getting the base understanding for GitHub, I continuted to research ideas on the Puzzle. I have found a lot of open source code on concepts for creating images that move when the user selects them. Before class this week I was continuing my practice of HTML/CSS/JavaScript by just creating random web pages with simple tasks exploring the different methods and tools theses languages offered to us. Once after the meeting on Monday, my group was told to create a working demo for our next meeting of class. I finally got a basic frame work down that has a title for the page and a couple buttons. Theses buttons allow the user to start the puzzle, restart the puzzle and refresh the page. I also integrated a drop down list that allows the user to select a difficulty for that puzzle and the javaScript behind would set the difficulty by the users selection. We do have a working demo and will be shown at our next class meeting. The next key is getting in touch with Tim and getting the images for the puzzles so we can then create multiple puzzles to select and play instead of just having one single picture puzzle.

Overall this week has been very productive and I am very happy with the outcome of our progress. More to come with some updates over the weekend and into next week.

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

Today before our IRC Group Meeting for class (CS401) I spent some time getting the finishing touches on how retrieving and pushing files to GitHub works from Eclipse. Previously I was having trouble pushing the files to my repository that I created, but retrieving them with the fetch command was no problem.

I realized in order to push the files to my github repository I had to select the certain file I edited on my local directory or from the fetch from GitHub. When you right click on the file there is an option for add to stack. Then you can issue it a comment and commit that change. From there I would select the main repository and select Push… Inside there I would push from the HEAD repository and then push those files to the selected branch on my GitHub repository I created for my groups testing. Once I said yes to finish, my files where showing up on GitHub with the changes.

Took me a little to get the main idea down. But now it comes very easily and I can see how this will become very useful when our project starts to get under way and we can view everyone’s code instead of looking at there changes on there local computer.

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

Did a little more research and found someone created one using HTML5 and JavaScript to create a jigsaw puzzle for the web. I am thinking the best route will be using JavaScript and HTML5 because like in my last post JavaScript has the snapfit feature which will be helpful for younger children using the application.

If anyone is looking to use PHP (jQuery) in eclipse I downloaded Eclipse Helios PHP which has plugins for those librarys. I looked for plugins for jQuery on Eclipse Juno and was having no luck. I then found they had a Helios version and installed that to try it out. Just if anyone is thinking of using jQuery.

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

This week myself and 2 other classmates selected to work on the Puzzle section for the WAM Idea Lab Application. I started to do a little bit of researching on what it will take and what languages people have used to create similar application features such as puzzles etc. I noticed a lot of people used jQuery, JavaScript, and HTML5 to create this feature. Just going to describe some of the examples I found.

jQuery: After searching a couple different sites, I found that jQuery has a library such as: jqPuzzle. This library within jQuery lets you bring in any image as a .jpg and it will create a sliding image to make a puzzle. It seems pretty straight forward once you call the jqPuzzle library inside the code all you need to do is then apply the class to any image to use theses features. Basically this sort of library will allow you to slide images around inside the square until the image is complete. It is not like a jigsaw puzzle where you can move images anywhere you would like and they would have a snap fit when they are in the correct location.

(Ex: <img src = “apple.jpg” alt=”Apple Logo” class=”jqPuzzle”/>

http://www.jqueryplugins.com/plugin/81/

javaScript has a tool called snapfit.js. This tool could be used to snap the image to the correct location when they are in range. All you need to do is set the snapfit on the image. It is a fast and easy way to work with any image. This tool does not  need any other resources to run.

http://www.netzgesta.de/snapfit/

I think theses are some good tools to be used within the code for this feature and I feel that the snapFit feature will be the most efficient for the children using it because when the certain piece they are moving is close to the correct spot the piece would light up green and then snap to the location and if the image is in the incorrect spot it would highlight red and they will have to re try that piece again.

Just a couple ideas that should be thought about. I know we said we be using JavaScript, HTML5, and CSS for this application. But I think we will need to add in some jQuery libraries to be implemented with the JavaScript code.

Will post more when I get in touch with the rest of the group.

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

Tonight after our class meeting, I spent some time practicing with GitHub. I created a separate repository for my group to put up some of the code they start to write to figure out how we can design the puzzle activity for the app. I did not get to looking at code for how it would be developed, but started to get an understanding on how to push files from GitHub to my local machine and then push changes back up. I got it working once to make changes to one file pushed down from GitHub and then pushed back up.

Attempting another push and fetch attempt for a file created on GitHub.

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

First step is to open up Eclipse and go to the Help tab and click Install New Software. You will then see a Install Screen pop up. From here you will see at the top text: Work with: then a text box. At the end of the text box you can click the drop down menu and select this link:

Juno – http://download.eclipse.org/releases/juno

Then you will want to scroll down until you see this Name in the list:   Web, XML, Java EE and OSGi Enterprise Development. If you open the arrow to view the tool packages inside you can install all of them or there is a package called Eclipse Web Developer Tools. This has HTML, CSS, XHTML, etc. Inside this package when you select Next to install on the window, you can open the package and see JavaScript Tool is part of it as well. Then accept the terms and click Finish to Install the software.

To get GitHub installed with Eclipse, go back and open Install New Software in the help tab. From there select the same URL as posted above. You can then select Collaboration from the list below. Then you can see there is Eclipse EGit & Eclipse EGit Mylyn GitHub Feature. I selected both of those and installed them. Have not connected to our GitHub yet, but I am guessing those are the 2 plugins we will need.

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

This first week of class, we meet off campus at the Worcester Art Museum. Here we meet as a class to start the first discussions of our term project of developing an iPad application or possibly a website application to be viewed on the iPad. (To be determined in next class). We meet with a couple people that we got some really good information on what to start thinking about for the design to the app. The main 2 ones we will be in contact with throughout the semester are Tim, and Katrina. Both of them gave us an overall run down of what they already had in mind for the app along with opening it up to us for ideas.

Once our time was up talking about what the main purpose of the app was, they took us upstairs to meet with one of the lead people in charge of the conservatory lab where they do all of there restoration on old art paintings and sculptures. We meet up here for the remainder of the class, getting a background on the statues going to be used in the exhibition in June. This allowed us to get more information on the history of them, to be used within the app if Tim or Katrina want.

I felt that the overall meeting went very well and I think that it got us all thinking how we should come up with certain designs and features that should be put into the app.

After class was over throughout the week, I began to continue my learning of HTML5, CSS, and JavaScript. All of theses languages seem like they wont be to bad to code certain features to the main application. After doing some basic HTML at work, it will be cool to see how HTML5 adds on to putting in some more high effects for graphics, videos etc. Javascript reminded me a lot like basic Java programming, just a new formatting to learn and how it is applied inside the HTML body of those scripts. I think once we get a main idea at our next class meeting on what groups will take the role of what features or design we will have. We will then have a better base to start for scripting this to get a better feel with using all theses languages combined together.

Looking forward to hearing the discussion in class on Monday on the future of this app!

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