Category Archives: cs-wsu

Week ending 3/2/13, part 2 (ScreenSaver & Slideshow)

So I think I found how to make it so that after some idle time, it will go into the screensaver.

We can do that with the function setTimeOut() as described in here, http://stackoverflow.com/questions/13907894/how-to-create-screensaver-like-screen-in-html-jquery

Also, I was thinking that maybe after the app goes into the screensaver, it should return to the homepage instead of the current page?

I also found this blog here that shows many different jquery plug-ins for slideshow, http://vandelaydesign.com/blog/web-development/jquery-slideshow/

So I think I have an idea of what to do now. I hope I can get something done so I can show the class tomorrow.

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

Weekending 3/2/13, part 1 (Git)

First of all, I apologize for not blogging last week. I completely forgot about it.

—————————————————————————————————–

So for last week, I was asked by the professor to make some notes on Git and think about how to organize our code repository. I am not exactly very knowledgeable about Git, but I know how to use it because of my internship at the UMass Lowell Robotics Lab. But at the lab work work in small teams and we contribute our code to the main repository, so I have the basic idea of how this works.

Also, I did not cover how to work with remote (not local) repository in my notes [Chapter 2 ProGit]

To add a remote repository to Git (to set up our CS401 Repo as a remote so you can push and pull updates to and from it), in the command-line, run

git remote add NameForYourRemote URL

So for example, git remote add cs401 https://github.com/CS-Worcester/CS401Spring2013.git

To push to the remote repo, git push NameForYourRemote branchName

ex. git push cs401 master

To fetch, git fetch NameForYourRemote

To pull, git pull NameForYourRemote

The difference between fetch and pull is that the “fetch” only get the new updates, but “pull” gets the update and then “merge” it to your branch.

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

Sleek, Chic and Geek

Image

Image

 

Hello again.

Not so much a busy week as much as a busy weekend, as far as the drawing app goes.  I did not have a single free moment to work on it during the week with the middle of the term upon us.  However last night, or should I say yesterday at about 2pm I began working on the app again and I did not stop until around 2:30am the following day only to sleep five hours and then continue working.  So despite hold backs throughout the week I have made some significant improvements to the drawing app. Oh and all the code is on GitHub at https://github.com/JasonHintlian/WArtMuseumColor  I will work this week to get this added as a branch of of our 401Project on GitHub, hopefully with all the  comments too.

There have been some major advancements in the User Interface UI this week including new cool buttons a new size selection menu and a few new ancient approved colors from the Worcester Art Museum WAM.  On top of that I have corrected the issue of thumbnails squishing which was nothing more than a quick change to some css and added a few arrows to symbolize a scrolling option.  I now that the WAM would like the button to disappear when the scroll reaches its end like many iOS application but that may not be so easy to do in a web application.  It will certainly be a topic for research this week.

So too the implementation.  First the new buttons just set there background to the current color, like the old color button but now they are overlaid with a partially transparent image.  This is achieved in css by setting the background to the desired image.  I creates the illusion of a wet paint brush and bubble styled sizes.  Next I built a new pop up canvas to hold the different sizes.  I chose this method as opposed to size buttons linked through html because it allows the user to easily expand or hide the menu.  In addition we can reference the x and y coordinates of a mouse-down event in order to set the size based on the position of our mouse.  There are six images that make up the size menu one permanent partially transparent background  and five different pointer images drawn with respect to the current size.  Though I am quite certain I can reduce this down to one pointer image and then just redraw it were necessary that will have to wait till next week.

The third new change this week is simply the proper sizing of the coloring images and  fe extra colors.  In addition I did add a few arrows to the scroll menu, but they have no functionality other than being a visual queue to the user that “this area can scroll”.  I would certainly like to add some functionality to those buttons so I will look into that this week.  Other than that all our coloring images are now the official images form WAM. That was a quick change, I did resize the images for the thumbnails but that should not make any difference visually but it goes a long way toward improving the smoothness of scrolling.

Overall this weeks effort was geared towards creating the UI that WAM wants so hopefully they approve of the newer buttons and the size selection menu.  There new set of colors made a nice addition to the app but I would like to find a copy of photoshop we can “legally” use to make a better looking color wheel with ultimately more color and shades to select.  So this weeks agenda will most likely be focused on scrolling and a better color wheel as well as creating a branch off of our 401Project repository.  Should all the UI expectations be met early enough I would also like to work on  a sub-pixel curve algorithm to create a smoother painting experience, but we will see how it goes.

Anyway 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.

CS-401

This past Monday, we had our first class meeting in a few weeks. We hadn’t met in a while due to snow days and holidays, so it was good to finally get to meet. This week, Tim Furman came in to take a look at some of the progress that we have made thus far, and to answer any questions that we might have. After showing some templates, and a puzzle activity, some more ideas, and changes were thrown around. Everybody had a chance to get Tim’s input on their part of the project. After Tim left, we talked about how to use GitHub, and we talked about making a sample one to learn how it works. Also, we discussed all of the parts that need to be done for the project, and we divided up into our actual groups. Things are moving forward more smoothly now that we have had some time as a class.

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

Page Viewer Concept 0.2

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

Slideshow is shaping up!

I’ve been working on the slideshow a little bit since Mondays class. I’ve been looking at and working off of Joe’s code. It has been very helpful! Thank you Joe! I suggest others to due so as well if they are building something with JQuery in mind.

Anyways, to get to the update. I’ve been able to keep Joe’s UI look with the home button and general aesthetic intact, although there might be a little color deviation. Based off of Joe’s article viewer I have have created an image viewer at the bottom of the screen with arrows and images. However, none of it is functional/working yet. It is just a general idea so far. I’m going to be working on it the rest of the week. I just figured I’d write an update so you can see what’s going on. I placed an image here as well so you can see it.

SlideshowPic

I would like to get this pushed to Github, but I still don’t know what I am doing there. However, I did create a new branch today. At least I think I did. This is a learning experience for me, so my code is a little messy, but others might want to look at it.

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

Slideshow is shaping up!

I’ve been working on the slideshow a little bit since Mondays class. I’ve been looking at and working off of Joe’s code. It has been very helpful! Thank you Joe! I suggest others to due so as well if they are building something with JQuery in mind.

Anyways, to get to the update. I’ve been able to keep Joe’s UI look with the home button and general aesthetic intact, although there might be a little color deviation. Based off of Joe’s article viewer I have have created an image viewer at the bottom of the screen with arrows and images. However, none of it is functional/working yet. It is just a general idea so far. I’m going to be working on it the rest of the week. I just figured I’d write an update so you can see what’s going on. I placed an image here as well so you can see it.

SlideshowPic

I would like to get this pushed to Github, but I still don’t know what I am doing there. However, I did create a new branch today. At least I think I did. This is a learning experience for me, so my code is a little messy, but others might want to look at it.

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

Page Viewer Concept

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.

Waiting on more resources

We ran into a snag!  We were focusing so much on Android and IOS friendly database technologies, we didn’t take into account that they were only optimized to work in a standalone fashion, not able to centrally manage the database through a server.  As it turns out, SQLite although robust, may not be our best option.

 In my experience, accessing SQL is best done through server side scripting.  However, Javascript is only designed to access SQLite using client side web database access, and accessing a access SQL database using javascript is not secure this way.   We were going to post all our findings on javascript functions to access SQLite, but it would end up confusing everyone if it ended up on the wiki for the class.

 So instead, we need to focus on the technology we will use based on the resources we will be given.  Kiosk Pro appears to be a solid solution to using a server based application on the iPads, but still maintain a local copy of the content.  I need to find out if we will be given a Windows server, in which I will focus on using SQL Server, and maybe PHP, or if we will be given a linux web server, in which we may be able to utilize a new server side use of javascript like node.js.

I don’t quite know where my group has gone.  A few of the members haven’t shown up to class, or the chat sessions.  I will need to spend some time meeting with them today.  More to be discussed in class.  

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

WAM App: Database Side

One of my group members suggested earlier in the week that we look into another method of deploying our database rather than hosting the database server side, and it looks like this might be able to be made a reality with correct utilization of the Javascript File Reader. As the name suggests it allows text to be read from an HTML-5 based site or storage location, however it looks like it is possible for it to read photos as well..but in most cases it seems to be a resource hog. Based on my preliminary findings i would have to say that hosting the application server side with a SQL back end would still be the most efficient way to go.

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