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.

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.

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.

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.

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:

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.