This version has had the following changes done:
Images now take up the entire image viewing portion of the page.
The image no long scroll they just appear, in addition to now having a position for captions.
The scroll triggers have been removed, the focus change is now all touch.
Added links in the footer to acknowledgements and back to the chapter page viewer.
Font size has also been increase.

The images now have a different function to change:

function swapImage(){

$(‘#image-display’).css(“background-image”, “url(images/”+article+”/p_”+currentRow+”_thumb.jpg)”);

}

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

One of the clients tested the article viewing concept and had a few suggestions:

The first suggestion was only having a fixed footer and removing the header as well as the previous and next buttons above the article. This was implemented with relative ease, the only issue was the footer which would disappear whenever a function was called that did animation. I learned that this is a default setting for jQuery mobile when you make the footer fixed.
Here is the code for the footer div so that it didn’t move when an animation or click was executed:

<div data-role=”footer” data-position=”fixed” data-mini=”false” data-tap-toggle=”false” class=”ui-footer ui-bar-a ui-footer-fixed slideup” id=”footer” role=”contentinfo”>
</div>

Then i just added the home button, the previous button and the next button. In place of the old buttons I placed the title of the current chapter in a header tag.

The second suggestion which was a solution to a problem in the design of the scroll to switch focus concepts. If there is no where to scroll the user can’t change focus and therefor can’t view the other images. This suggestion was a touch the paragraph to execute the animation and focus changes. This was a very simple and elegant solution; all I added was an if statement that was essentially if the page is not scrolling implement a click function on the p tag to execute the same focus change functions. However in the else statement I also added a function that would allow the clicking on the p tag but it was implemented by scrolling the page, not directly changing the focus. 
In essence: If(no scolling){ p.click -> execute focus change functions} else{ keep scroll functions p.click -> scroll to the proper section}

This worked without any issues and I was a relaly big fan of the touch to change focus solution!
Here is a screen shot of the new setup!

Until next time!
-Joe

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

The content viewer is referred to the article viewer now, there have been some additions and removals since the last update!
Here is an outline:
A link to the next article or chapter at  the top of the paragraphs.
New focus on paragraph div that is behind the paragraphs.
Scroll to change focus on image and paragraph.

Here is a screenshot of the final 0.1 product:

Linking was as simple as creating simple jQuery mobile buttons buttons.

Creating a “focus” on the current div per request of the client was a little more interesting.
So I didn’t want to create a simple function that would change the background color of the current paragraph tag because that isn’t elegant and just didn’t seem appropriate! So I created a stand alone div that would move and change height based on the height of the paragraph it was supposed to be highlighting! I also places this div behind the paragraphs so it wouldn’t interfere with the font settings. All of this was accomplished with the animate function and basic CSS selectors and attribute functions for jQuery. Here is a screenshot showing the function in action!

Here is the function that accomplishes the animation:

function animateActive(){

$(‘#active’).stop().animate({‘top’ : $(‘#article-display p:eq(‘+currentRow+’)’).position().top+10+’px’,

‘height’ : ($(‘#article-display p:eq(‘+currentRow+’)’).height()+20)+’px’}, animationTime);

}

The #active div is an absolutely positioned element that gets it height and width from the p attributes. it is completely dynamic with regard to sizing and position.

The other interesting part of this version is the trigger for that function; the function is activated by scrolling! the initial proff of concept for this was not a viable option because I created the function to animate based on when the top of the page passed the top of the P tag, this doesn’t work for sections that are  a the bottom of the page so I created the following function:

$(window).scroll(function(){

if($(window).scrollTop() == $(‘.ui-page’).height()-window.innerHeight){ //potential null value if numRow does not divide nicely into the page height-windowInnerView

currentRow = numRow-1;

Uncaught ReferenceError: numRow is not defined (repeated 2 times)

animateActive();

slideY($(‘#row-wrapper’), -currentRow*imageHeight, animationTime);

}

else if(currentRow != Math.floor(($(window).scrollTop())/scrollSwap)){

currentRow = Math.floor($(window).scrollTop()/scrollSwap);

animateActive();

slideY($(‘#row-wrapper’), -currentRow*imageHeight, animationTime);

}

});

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

There was a minor issue with animation speed which we attempted to remove, the new page viewer also implements 2 new functions for specific pages.

Attempting to improve performance in only kiosk pro’s browser consisted of removing opacity from the animations. This made a very minor difference with regard to sluggish animation. The animation speed works fine in other browsers on the iPad which leads me to believe this is indicative of an issue with kiosk pro. However removing the opacity will remain in the application even with the negligible performance enhancement.

the two new functions added were from the main page and chapter viewing page:

Main Page:
The primary addition here was the combining of the screensaver function with the main page, it is not sure yet if this will make it to release.

Chapter Viewer:
per request of the Worcester Art Museum we implemented a menu for the chapters. This was done using jQuery Mobile’s built in grouped buttons. These buttons now animate the page viewer to the respective preview. Example: if chapter 2 is clicked the application will animate to the chapter 2 instantly for quick access.
Here is a screenshot:

That wraps up the additions and modifications to the page viewer, until next time!
-Joe

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

So the page view has made it into the final production! The goal with the page viewer is to have it function as the main menu for the user to access the content.
With this acceptance into the final product and detailed requests from the art museum we tailored 0.2 to fit the requirements.
First off the project will consist of a main menu and sub-menus:
The main menu will consist of 3 links to sub-menus:

1. “Story of the Orantes”
2. Photo Galley
3. Activities

Story of the Orantes Sub Menu:

1 ARCHAEOLOGY
2 WHAT ARE ORANTES?
3 ORANTES IN THIS EXHIBITION
4 HISTORY OF ORANTES AT THE MUSEUM
5 MATERIALS AND CONSTRUCTION
6 CONSERVATION
7 TECHNICAL AND SCIENTIFIC ANALYSIS OF THE WORCESTER ORANTES
8 WHY IS THE HEAD MISSING?

Photo Gallery is a direct link

Activities sub menu:

1 COLORING
2 PUZZLE

The sub-menu links will go directly to other groups applications.
With the new specifications for the application we removed all dynamic content and buttons for the menus and replaced the with images.

Here is a screenshot of the “main menu”

Until next time!
-Joe

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

We had our class meeting for the firs time in 3 weeks, it was very productive since it produced many action items. Overall I would say the project is it a bit of a hump so I’m focusing my attention on the development of the User Interface so we have something to call our product. This starts with the home page, it was decided at the meeting that this would be integrated with the content frames and reclassified as the user interface.

So my concept for the page viewer will substitute for the home page, this of course meant it required some polishing.
This first revision my goals were:

• Relative sizing – based on screen resolution
• Actual content in the ‘pages’ frames
• Naming concept
• Mild animation polishing
• Swipe functionality

Relative Sizing:
The one minor setback is the lack of an iPad, the best solution to this problem is of course development with a relative content display in mind. Meaning the use of percentages over explicit sizing of elements. With the page view specifically this created a minor issue which was solved with the use of JavaScript. The first issue with relative sizing was the width of #article-wrapper, the reason this could not be solved with modifying CSS/HTML is the page construction concept, in which the wrapper is meant to extend past the end of the page. (See article viewer concept) This meant when i set the width of any child within #article-wrapper based on a % it would go by the width of this div which by design will be wider than the page. To solve this issue I simply used window.innerWidth which is a built in JavaScript function, this solution has worked flawlessly especially since the user will be unable to move the iPad.  All I did was went in and refactored all referenced to X% and changed it to pageWidth*0.x+’px’. This solution works however it might be a good idea to seek an alternative when we get more into the project. So this problem was solved and everything with regard to displaying relative to the window; while it might seem like a solution to a problem that wouldn’t exist if we had iPads I believe this kind of development will yield a better end product, if this web application can be ported to other devices it has the potential to be more beneficial.

Actual Content:
So if you had to opportunity to look at the initial proof of concept for the page viewer you would notice that the text inside the ‘page’ or ‘article’ divs would wrap when the size got smaller. This was obviously a proof of concept and for the final concept we would prefer having some nice content in these areas. The goal to accomplishing this was to use a nested div inside of the previous divs that would hold the real content and have no animations directly called on them. I named these the ‘.article-preview’ and what nesting these means is that the content would not be modified with regard to sizing, that it would always maintain its ‘actual width’ which in relative terms was 59% of the page. This was accomplished using the same technique in the previous section, using pageWidth. This worked as there was already a proof of concept in article viewer.

Naming Concept:
If you looked at the initial concept the pages were just there, and it was assumed that each page was based on the navigation title. I didn’t think this was enough as some users might not want to use the navigation and instead use swipe navigation which will be cover in another section. So, my goal was to create a relatively appealing naming concept that would be visible to users who may ignore or fail to notice the navigation. So this concept was basic CSS3 and HTML which rotated the text, here is a screenshot (I also added icons to show the potential this had.)
The only useful thing this offer is that the text can be dynamic.

Animation Polishing:
I was really just modifying the animation concept to also modify the height and top margin, you can see outcome in the image above.

Swipe Functionality:
This was pretty easy, especially after making the article viewer concept, I used the .live() function with the virutal events ‘swiperight’ and ‘swipeleft’. This made for a really cool effect, the only issue I ran into was updating the current article according to the navigation, all I had to do with this is the inverse of what I did with the clicking on the navigation. I took the current article index, removed the classes ‘ui-btn-active ui-state-persist’ and then incremented the curArticle respectively (++ for swipe left, and — for swipe right) then added classes ‘ui-btn-active ui-state-persist’ on the new curArticle. I also had to create a check for the last article and first article, which was pretty simple, if it was the first or last I would not execute the animation depending on what was swiped.

Overall this step from concept to potential production idea wasn’t overly challenging because I utilized a lot of the lessons learned during the article viewer concept development. I am somewhat pleased with the result, however I feel the input of others would yield a better product. The biggest take away from this updating is that applying lessons learned in previous programs seriously save you time, from idea to completion this took only 2-3 solid man hours.

This concludes my V 0.0 to V 0.2 update for the page viewer (there was a 0.1, I just like even numbers so I made changed); Until next time.
-Joe

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

I guess this article should be prefaced by my reason for creating this. As some of you may know, I am not a big fan of the ‘Apple’ marketing scheme or their copyrighting practices. Therefor I am really against directly simulating anything that they make,  however that isn’t to say I am against creating similar concepts while maintaining the integrity of being a somewhat original product. The only reason for this preface is that a web design colleague of mine criticized my concept of being very similar to apples album viewer (I think this was an attempt to ‘rustle my feather’ a bit, my WSU Duck agreed with me.) With that said, this is a mild offshoot of my article viewer, and it is a very basic concept that has potential to be a little prettier.
</justification rant>

So, what was my goal with this concept; ideally to create a smooth, original, and visually appealing page preview transition frame. It isn’t meant to contain a whole page it is more of a sample of each page. here is a screenshot of a basic layout concept that i started with.

so far.. we have… smooth? well since there is no functionality I guess not, but oh well. This is a very generic navigation concept, with the exception maybe of having the pages linearly placed next to each-other. If you have seen my article viewer you are probably thinking, ‘cool you just removed the article and the vertical transitions’. Allow me to retort with, …well there is now a nav bar.
You might have noticed that this concept did not really satisfy what my goals were with this project, so I addressed a few issues i had with this layout before I continued. The current page needs to be centered, and stand out more than the others. Centering was relatively easy, so all i really needed to do was come up with a way to make the center page stand out more. What could I do to make them look different as well as have a somewhat appealing transition effect; I came to the conclusion that modifying the Width and Opacity should do the trick!
Here is concept image:

Well that looks a little nicer, it is somewhat original in addition to being appealing (my opinion). So lets make it smooth, as per usual with my other projects this will be done in jQuery mobile, utilizing the jQuery libraries as well.
So what functions are we going to use you ask? .animate(), and .live() of course! The animate function will consist of 3 css modifications: Opacity, marginLeft, and Width. it looks a little like this

$('#frameContainer').animate({ 'marginLeft' : how much}, time)
$('.selectedPage').animate({ 'width': n+'px', 'opactiy' : n+'px'}, time);
$('.selectedPage:next , .selectedPage:previous').animate({ 'width': n+'px', 'opacity' : n+'px'}, time);

That’s a rough outline of the animation concept, don’t take it to the bank if you want to see the code checkout git! so, minor issues I ran into, stacking of animations creating undesired effects, oops you think i would have remembered that from the last project. easy fix with the .stop() function. other than that the concept really went of without a hitch, all that needed to be done was getting the margins to be accurate, I ran into inconsistencies due to padding and margin settings that were inherited from some of the jQuery Mobile styles, easy fix with an explicit CSS declaration to remove margins and padding. So let me know what you think of my concept, I hope it runs smoothly for anyone that tries it, comments and critiques always welcome!

Until next time,
-Joe

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

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&#039;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&#039;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&#039;s Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.