Category Archives: cs-wsu

Delving into a Database

We’ve been tasked with implementing a database to allow functionality for a content management system for the iPad application we’ll be developing for the Worcester Art Museum.  Our first thoughts were SQLite, integrated into our HTML5 based app utilizing JavaScript.  We began with a series of tasks:

  • Familarize ourselves with SQL technologies, specifically SQLite.
  • Investigate methods to implement SQLite into our HTML5 application.
  • Investigate our ability to store both text and also images
  • Test a basic application utilizing a database to store and display data.
  • Develop a method of storing database content centrally to be shared across clients.

Our tasks appeared to bring us to a very simple and linear path to success – but boy were we wrong!  The first 2 tasks were simple, and seemed to provide us promising results.  We googled and googled.  We read articles, blogs, and forums and found very straight forward information on developing simple JavaScript functions to initialize a SQLite database natively on Web SQL Database enabled browsers, which included the browsers on IOS and Android devices.  However, after starting on developing our own test code, we hit a brick wall.

SQLite databases utilized by browsers like Chrome or Safari are initialized in temporary locations at the start of the application.  This temporary location is isolated to the browser and cannot be initialzed from any other location.  This meant that the application running on the device would not be able to retrieve data from a centralized server, and would need to be created and pre-populated by the application itself.   This completely defeated the purpose using SQLite to centrally manage data across multiple devices.  In order to still utilize SQLite, we would need to further investigate different method to retrieve data from a server.

We looked into possible work-arounds, and discussed the possiblity of utilizing the Apple AppStore to upload an updated content database file, that would then be overwritten on the new device, however this is a very rudimentary method of deploying new content, and could also be done without the use of a database.

This all brings us back to the idea of utilizing a fully hosted server  application instead of a local iPad application.  It would give us the ability to centrally store our data on the server, and manage all changes centrally through a proper content management system.  The downside to this, is that it cannot be accessed if the iPads do not have access to Wifi, or if they intermittently lose connection.  However, there is the possibility of using an application called Kiosk Pro, which also has the ability to store a backup copy of the web application on the local device.  We simply do not know how it will handle a database driven application.  The only thing we can do at this point is more research.  Here are the next set of tasks:

  • Investigate a method to download server size SQL data into the local SQLite database.
  • Investigate using another method of connecting to server side database.
  • Investigate a method of retrieving data centrally without the use of a database (text files, and web directories)
  • And finally, testing a server side application with a SQL back end while utilizing an application like Kiosk Pro to test a local backup copy without internet connection.

Generally, the first 3 tasks are really for self-learning so that we understand other methods of storing/retrieving content and their pros vs. cons.  I am however biased, and believe that our fourth option is our best – which is why I believe it to be necessary to test all options before concluding.

Unfortunately, I won’t be able to test much without an Apple Developer account.  The web SQL database on Chrome and Android appear to be different than on an IOS device, so until I can test properly, I cannot make a conclusion.  If I’m unable to retrieve an Apple Developer account through Worcester State, I think I will pursue getting my company, The Training Associates, to invest in one since we will most likely want to release our own IOS apps after I’m done with this course.  More to come next week!

 

From the blog mikesaguirre » cs-wsu by mikeaguirre 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.

Slideshow

I have been working on the slideshow part of the app this week. Things have been going a little slower for me than I would have liked.

I currently have a small webpage with pictures on it, but am having some trouble implementing the slideshow portion since I am not to certain with the way it should look. Is categories a good idea? Should all the pictures be small and you click on one to maximize it (I’m thinking someone may have said to do this)? Should it just be a scroll through list?

So far I have been using a tutorial from here, http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/. Other groups have been researching JQuery as well. I’m thinking I might have to meet with some of them this week.

The code is not on Github yet. I will have to add that once it is a little further along. I should have a prototype for next weeks class.

Unfortunately I have not talked to Brandon yet. I should do that soon since a team member would be helpful.

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

Week 4, Slow but Steady

Image

 

It has been a slow week due to many other responsibilities taking precedence over the Coloring App.  I won’t bore you with the details but suffice it to say; it was not even close to as much fun.  Regardless I still managed to make some progress.  Though I was hoping to have implemented several major changes with comments and have them uploaded to Github it just was not possible with my busy schedule.  

I am a computer science tutor at Quinsigamond Community College as well as a volunteer teacher assistant; and I have become inundated with students now that we are five weeks into the semester. I am only a basic level tutor but students from data structures in c++ have requested my help because there is no advanced tutor. Consequently, I spent a good deal of time this week getting reacquainted with c++ syntax.  Perhaps I can work on the Coloring App more tomorrow.  Either way will comment and upload the changes soon to Github.

Well, now that I have partially explained why I did not accomplish nearly as much as I did last week; on to to the changes.  This week I implemented a new way to select colors, which in it self helped to usher in the use of multiple canvases.  A true life saver.  So earlier in the week I realized we would need to find some way to add more than nine colors to our app, obviously.  So after a bit searching I found a method that allows you to pull the color data directly from a pixel on canvas.  You can use this data to set the color of the paint.  So the basic idea is you can use any picture but we will use one with a variety of colors we can select from.  I am sure a color palette will be provided by the Worcester Art Museum, our client.  They have chosen to use specific colors that would have been similar to the paint colors one might find in ancient Greece.  In the mean time, I have added a temporary picture for testing that is opened and collapsed with click of a new paint button.

In the beginning of testing the canvas, it would push the other canvasses around the screen which is how I ended up learning how to use multiple layers of canvas.  Which turns out is very important.  Up until now the picture outline we are coloring was drawn to the screen over the users painting any time the mouse moved; so the user was unable to draw over the outline of the picture.  this is the same method used in many short drawing to canvas tutorials.  But, wouldn’t it be better if we did not have to worry about all that. Queue multiple canvases.  Now the picture is a canvas simply layered over the drawing Canvas, much simpler. Hopefully I don’t find some reason It won’t work down the road, like a fill paint feature.  I am still pondering how that will be handled.  On top of that I have functional buttons now for selecting different coloring book pages and switched to a more appropriate layout for our client.  However there are still a great many loose ends to tie up and comments to write.  I suppose there is no time like the present.

Till next week.

Jason Hintlian

 

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

360 Degree Image Viewer

Today I made a 360 Degree Image Viewer, it is really a glorified image slider. However if you use images that have the illusion of making the object rotate then it becomes a 360 degree viewer.

Unlike the article viewer I started this concept with the jQuery mobile framework. The inspiration for my design came from this jQuery Mobile form object the Slider. So in theory I wanted to assign 360 image and have the slider go through these! However I clearly wasn’t going to develop this slider to be limited to a 360 images, so it allows for any amount of images which is what makes it really a glorified image slider. The way it works is that the slider has a current numerical value based on its location. this numerical value will represent the image index, eg image 1 or 0 is the starting position. This was done by detecting a change in the slider, to accomplish this I utilized the .on() event handler to detect the event “change”.

$('#slider').on("change", function(event){/*function*/});

So now I have a function that executes every time the slider changes, however when I tested this it would execute the function even if the value didn’t completely change; instead it was detecting minor movements that were not resulting in a value change of the slider. To remedy this I created a var currentVal and created an if statement in the function:

if($(this).val() != currentVal){ /*execute function*/}

This was the only real ‘hurdle’ in this project, after I figured this out the function was very easy to make. I simply modified the background image based on a naming convention that was pre-defined by the user. var imageUrl = “base_name_”. I then simply appended the imageName with the  currentVal and ‘.jpg’ or the respective format:

 if($(this).val() != currentVal){
 currentVal = $(this).val();
 $('#image-viewer').css('background-image', 'url(' + imageUrl+currentVal +'.jpg)').text(currentVal);

and there you have it, a glorified image slider, here is an image of the current concept:

 

That wraps up this post, until next time.
-Joe

From the blog itsJoe's Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.

Spike Solutions

This concept that is used in agile development has really made this project an amazing experience for me so far. Being able to develop concepts independent of one another essentially allows a developer to pursue an idea without the burden of ensuring compatibility. I feel this concept works especially well with web development for two reasons.

One, because you are dealing with what is essentially cross-platform compatible by design even if the spike doesn’t make it to the final stage of the application doesn’t mean your time was wasted. You can take these spikes and apply them on a different project.

Two, as we were reminded by Tim the clients don’t always know the capabilities of current technology. This is a great way for you to showcase what can be done.

The biggest benefit I feel comes from this is that developers can just go off and create a potential solution for a part of the project without hindering the development of, or altering the ‘final’ product. This reminds me of the leadership concept in which you don’t limit the creativity of your people by being directive, however you give them the freedom to generate solutions and ideas. Given the opportunity you people will probably surprise you with what they create. One big take away from this, is that this development process fosters creativity and seems like a potentially great way to lead a project.

That is all for now, until next time!
-Joe

From the blog itsJoe's Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.

WAM App: Images & The Database update.

This week I researched if it is possible to store images in a SQLite database (since it is different from a SQL database), and I found that it is in fact possible to store them. After some digging I found that the general consensus is that the best way to do so is to store the reference to the images inside the database, instead of the actual images themselves. I was able to find a few tutorials online and a few different coding examples (including how to store the images in the application directory of the iOS). Here is a link to the most “complete” tutorial.

http://www.iphonesdkarticles.com/2009/02/sqlite-tutorial-saving-images-in.html

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

JavaScript Debugging Tips

Just thought I would share some very useful debugging tips that I have been using over the past two weeks to help with my portion of the CS401 project.
The most invaluable tool I use is Google Chromes developer tools: https://developers.google.com/chrome-developer-tools/docs/
The use of this is amazing for identifying issues not only with your JavaScript but also with CSS and HTML.
More specific to JavaScript are the following two tricks:

Console Logging

console.log("whatever you want to log"+ variables +"\n\t");

This is great for keeping track of variables and to notify when a function is called. This was a big help when I started implementing the swipe and jQuery Mobile styles.

Alerts

alert("whatever you want to log"+ variables +"\n\t");

This is an older technique that I still prefer when doing spot checks, the only problem I have run into with this is slowing down the reaction/smoothness of the functions being called. A benefit of this is that one does not need to view the JavaScript Console to see what is happening.

That’s all for now, I will definitely post more debugging tips if I come across any.

From the blog itsJoe's Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.

Puzzling Week…

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.

Article Viewing Concept

So this week I took a step back from jQuery Mobile to create a spike for the project. Sompop and I were tasked to create a starting point for the content frames or what I will refer to as the Article Viewer for the app.

We received some guidance with regard to concept from the WAM project leader, so our goal was to bring the concept to life. Since this wasn’t a jQuery Mobile specific task it does not include the mobile library.

The first step was a basic CSS and HTML template that was static and looked like the concept with no functionality. Here is a basic layout sketch, his example was obviously much more attractive however the core concepts are there.
Image of basic concept

So that was relatively easy to create in HTML/CSS, the only task was keeping the images in a static location (this was done with the CSS attribute “position: fixed”.
The next step was to add some functionality, how can we bring this to life! the first issue was having the ability to display many images in the image container. There are multiple ways that this can be done, one of which would be dynamically loading the images based on what link was clicked. This solution however would have potential for slow response time while the used was trying to view the images. Another solution i thought of was to have all the images displayed in a frame, but experience has taught me that use of frames is not a good thing. So my goal was to simulate a frame without actually using a frame! to accomplish this I essentially used the Image container as a window to underlying divs. here is the concept drawn out:Layout Concept

This was accomplished by simply nesting the divs inside of the image container div and applying the “Overflow:Hidden” CSS attribute. I found this to  be a nice solution because it essentially loads all the images in advance creating a seamless transition. The next step was how to make these transitions, which is surprisingly  easy with the jQuery animate function.

The transition is ended up deciding on was a slide, i accomplished this by animating a change in the margin. Essentially multiplying the image index in its respective row with the width of the images, the code looks like “$(this).animate({ “marginLeft” : -i*imageWidth+”px”}, 1000) ” what that does is animates a CSS change of the margin over the course of 1000ms or 1 second. this worked flawlessly, regardless of what image the user selects the animation always takes 1 second and is smooth based on the jQuery animate function. the same concept was used for rows except the CSS attribute modified was the marginTop.

Upon use it became noticeable and relatively irritating that when you switched rows it remained on the last viewed image, which i felt was an annoyance. To fix this I added a line of code that reset all rows margin-left to 0 except the one being view. This was a challenge since the rows programmed dynamically, however after looking into jQuery selectors this didn’t take long at all. I had issues with the :not selector working so I came up with an alternative method which was to modify all rows with and index greater than or less than that of the selected row. The code looks like this “$(imageRow:gt(rowIndex),imageRow:lt(rowIndex)).animate(…);”  this also worked seamlessly and in conjunction with the other animation. It actually created an interesting effect showing the rows resetting and the newly selected row being show and moving depending on the image selected.

Regardless of whether or not this is used in the final stage of production I had quiet a few take away’s. That wraps up my recent spike contribution to the git under “master/Spike/contentViewerConcept“

From the blog itsJoe's Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.