Category Archives: TOS

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.

Cover Flow Interface – What’s Out There Now

For those of you who have used an iPod, I’m sure you’re familiar with the “Cover Flow” interface of using your albums (I’ve also heard it referred to as a Carousel interface). If you haven’t heard of it, you can check out one of the examples here to see what it is. One idea we had for the interface for the project is using an interface like this, so I was tasked with working on that. So here’s some HTML5 options for the CoverFlow interface.

Content Flow
http://www.jacksasylum.eu/ContentFlow/index.php
This looks like the best option for this. It’s compatible with pretty much everything out there. This looks great, and works pretty great from the demonstrations, however one thing that I don’t like about it is how it lacks the angled images that the iPod’s cover flow uses, it just makes those not in focus smaller.

zFlow
http://code.google.com/p/css-vfx/wiki/AboutZflow
zFlow looks like it’d be a bit more work to implement but I think it looks much nicer.

From the blog Five mvs of Doom by Chad Wade Day, Jr. and used with permission of the author. All other rights reserved by the author.

Use your worcester.edu account for Instant Messaging

Because we use Google Apps at our University, we can take advantage of this little known feature. Basically every Gmail account also gives you an XMPP account, which is an IM protocol that Google uses. There’s a lot of cool things you can do with it, such as XMPP transports to link it up with other IM accounts, but I won’t get into that. The main thing is, this could be useful for some people, especially in regards to keeping up with the project, so I’ll explain how to set it up.

When you log into your Worcester State Gmail account, it should already show up in the lower left corner. From there you can configure who shows up in your contact list, whether it’s online there, and other things. You can click on people’s names and chat with them in the browser as well.

I don’t really like browser-based Instant Messaging, so I found out you can use this through Pidgin. You can do this with other XMPP clients but I’ll just explain Pidgin here as it’s cross-platform and easy enough to use.

Install Pidgin if you haven’t already. If you’ve just installed it it should take you to the account management page automatically, but if you’ve been using it for a while already, you go to the Accounts menu and click Manage Accounts. Then in the Accounts window, click Add. You should fill in the Basic tab something like this:

  • Protocol: XMPP
  • Username: (your worcester state username; for example, mine is cdayjr)
  • Domain: worcester.edu
  • Resource: (put whatever you want here; usually this is the name of your machine, as XMPP allows people to IM you on specific machines if you’re logged into multiple ones)
  • Password: (your Worcester State password. For example, mine’s hunter2)
  • Remember Password: (check this if you want)
  • Local Alias: (Set this to whatever you want, usually your name)
  • other stuff doesn’t matter
Then head to the Advanced tab, and fill it in like this:
  • Connection Security: Require encryption
  • Connect port: 5222
  • Connect server: talk.google.com
  • everything else should be ok here, so click add
You should be all set. If you need any help, I’m sure I can help, just get in contact with me. While I was writing this I went through this and made sure everything worked, so if you follow my instructions you should be ok

From the blog Five mvs of Doom by Chad Wade Day, Jr. and used with permission of the author. All other rights reserved by the author.

CS 401 Blog – Week 3

This past week in class, we discussed as a group and with Tim about further details of the project, getting a more specific idea of what we are doing. After getting a set of tasks on the board, we split into groups, each tackling a different task. The group I’m in is in charge of the Puzzle app for kids on the iPad.

Most of this weeks work consisted of background research on the languages that will be used to code this part of the app, as well as setting up tools and plugins in Eclipse to create a coding environment for this project. My group members (Ryan and Kathleen,) and I shared links about different code examples we found that could provide resources down the road.

The project however has hit a slight snag due to the snowstorm, and our class won’t get a chance to meet at our normal time on Monday. However, Professor Wurst has set up an IRC (Internet Relay Chat) room to meet and discuss our ideas and hopefully that will fill everyone in on what the different groups have been doing. This will be a tough two weeks because next Monday there will not be an in class meeting as well due to President’s Day, so the class will be on it’s own for a bit. It’s still early on in the development process and hopefully the hiatus from meeting in person won’t end up being hurtful to the project.

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

More Practice with Eclipse & GitHub

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.

CS401 Learning and Progress First Task

This week’s meeting had us learning more specifics about the design and requirements for the project.  Also discussion on several issues.  It was decided that we will from the start plan on having this program be reusable for the museum.  It will be much easier to switch away from such a design if it is found unusable than trying to modify a one use program into reusable after all the code has been done.

We came up with a list of tasks and teams were chosen to work on each one.  The code we are doing now is more to get a feel for what is possible and not code to go into the final project.  So all the groups more or less testing the waters right now and seeing what we can do and hopefully some concept on how long things will take.

My task for this week was to do some research into two programs that we planned to use in this project.  The first being kiosk pro and the second being phonegap.  To see what their features are, what if any limitations they have, and finally if there was any cost or licensing issues with them.  I also spent time looking into possible alternatives for each if needed.

Kiosk Pro, I found that this program had all the functionality needed for the museum.  It is designed to work with HTML, CSS, and Javascript coding.  After a set idle time it will go back to it’s set homepage, it blocks all internet sites except for allowed domains (so even if they got to and address bar they wouldn’t be able to get anywhere), blocks use of hardware options(the home button), toggle off sleep/auto lock mode, show or hide address bar, navigation bar, and status bar.  This can all be done by their free version.

There is however two levels of paid versions.  The first at just $5 per iPad gives the likely needed capability to store files locally that it can seamlessly shift to if there is a loss of internet.  Also allows for settings of the program to be changed remotely and the app will send an e-mail if the kiosk looses connection to it’s power source and starts using battery power.  For the local files I would say this is likely the minimal needed for the project.

The third option is their Kiosk Pro Plus, at $40 per iPad it is significantly more expensive but does add some nice features to the app.  First it has power saving options, such as dimming on the home screen and the ability to have set times for the iPad to sleep and wake.  This would avoid the need to go in and turn on/off the iPads every day. as they can be set to not be active when the museum is closed.  Also this version has the ability to update and change of local content.  This means with this version once set the museum would have no real need to remove the iPads from their kiosk inclosures unless they needed actual maintenance or repair.

The negatives about Kiosk pro I don’t believe are very high but some that may or may not cause problems.  One is that for best usage it will require some money, though cost is minimal and a one time purchase cost.  Also I found that the program does not work with Flash, so we would have to avoid using Flash in any of the activities.  Finally, is that it can’t run other apps of any kind.  So we would not be using Phonegap to convert our coding.  This app is designed to work with websites.

Searching for alternatives to Kiosk Pro took a lot of time, mostly because there aren’t any.  There are other kiosk apps yes, but they either do not have near the functionality or they cost considerably more.  Most opinion online is that this is the best program, especially at our level of need.  If one of the drawbacks can’t be tolerated more research will need to be done to see which of these will give us at least basic functionality.

I did research on Phonegap still though not as extensive.  I found that it is free to use and there should be no licensing issues for our project.  Consensus seems to be this is the superior free program for what we need.  There were some worries about fees or limitations but I found these only applied to the version of phonegap that works with the Cloud.  If we were to do a conversion this does seem to be the program to go with.

My personal suggestion would be to use the Kiosk pro and leave the code as website.  The cost is minimal and purchase not monthly, and the functionality with the kiosk program is needed for what the museum wants.  I would also think that at least once we start working on definite code we will want at least one iPad to be loaded with the program so that the code can be tested as we go.  While I did not find any indications official or through comments of other restrictions, it would be best to test as we go instead of risking a large chunk of code being found unusable at the end of the project.

Unfortunately due to blizzard conditions the college will not be open for class tomorrow, and the following monday is a holiday.  The class will try to meet tomorrow through irc, hopefully this will lesson the impact this delay will have on our time table.

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

Getting started

This week was fairly productive. While I might not have to much to show for my work, I accomplished a good chunk!

I have created a very simple web page using HTML5, CSS, and JavaScript. I learned how to format the page and create a basic layout. I have also created my own github repo where my code is being stored and I can now access it using there software on my computers. I have tried and succeeded at creating the test phonegap app. However, I’m still having issues with phonegap.

Phonegap seems like it will be very helpful to get our job done. There are some weakness I can see from using it so far though, and coding hasn’t officially begun yet. Hopefully we’ll be able to avoid any headaches. The first issue that we should be able to fix soon is that we don’t have a key yet to compile down and test any app on an iPad. This is a major downside right now. The other issue is, I’m still having trouble getting phonegap to recognize files that need to be converted. All phonegap asks for is an HTML5 file to convert to an app, but I’m finding that it won’t compile mine. Maybe it is an issue with me syncing up my Github files. Also, once it is compiled I have no way of testing it now since we can’t use an iPad and I don’t own an Android tablet device.

More to come in the future! Hopefully the effects of the blizzard won’t get in the way of this week.

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

Development Week One

Hello again,

So it’s been a crazy week, I spent countless hours trying to figure out how this whole html5, css, and javascript project thing works.  Who would have thought it would be so confusing, just trying to figure out how to set up a test project?  To only then realize you were foolish for ever thinking it was difficult.  Great, right.  I guess what I am trying to say is things are progressing steadily though perhaps not as smoothly as  I had originally intended.  
    This past week, I scoured the internet for every fragment of information involving coloring to an html5 canvas I could find.  Ah, that reminds me, this week we chose teams for our Worcester Art Museum project; I chose to be on the coloring book team because I thought it would be challenging but fun as well.  I am delighted to say there are a vast amount of web development resources available on the Internet.  I found a tutorial that helped me work through some of the html5 canvas basics, but after detailed study into a few of the subtopics, I opted to change a vast majority of the code I started with.  
    One choice I have made is to avoid jQuery, I know what your thinking why?  jQuery is so useful.  Especially know that I have learned “how all the cool kids call jQuery” a quote taken from some random site, for an idea which they in turn took from the widely known boilerplate template.  Let me explain; it may come as a surprise to some, perhaps not many, but jQuery is nothing more than a javascript file with a vast amount of helpful tools; about ten thousand lines of tools, uncompressed.  However if you only need a very small portion of the library it make more sense to make up your own solution, rather than sacrifice load time.  Or at the very least just take what you want from the jQuery library.  Probably no big deal if your on your own laptop, but everyone browses the internet on their phone know so performance is key.
    Any way now to the progress.  This week, I designed a very simple coloring web page based on html5 css javascript and jQuery, which I later discarded for the homegrown solution, no jQuery.  Thus far, as of friday night 2/8/13 I have a fully functional drawing to app which draws whether you click the mouse or not, functionality lost to the abandonment of jQuery, but soon to come back, …just saying. With a palette of nine colors and an eraser I call the refresh button lol, me and Beto; my team partner a poised to strike a blow in the name of free source code.  
    I must say it is nice to finally work on a project that has a value to the public.  I suppose the only thing that brought my pure jubilation of having a working webpage back to reality, was when I gave it to my daughter to test. Within ten seconds she asked where is the eraser, to which I replied just hit the refresh button and be quiet.  She’s five.

Till next week.

Jason

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