Stoplight gadget 1.7

This week I am still working on the stoplight gadget. Hopefully, this will be the final touches on the stoplight gadget. The other two people in my group are working on the wattdepot monitor gadget. The modifications that we have made to the stoplight gadget this week are minor changes that will enhance the user experience while using the gadget.

The modifications are: for the gadget window to automatically adjust its height when the image size changes, the entire page does not refresh every time the reload time expires, and move the title of the gadget from the top of the gadget window to above the stoplight image. In our previous version (version 1.6), there is a lot of extra white space beneath the gadget when user would change the image size.

Luckily, this was very simple to fix since there is already a 'dynamic-height' feature in the google gadget api. So I only had to add a few lines of code.

The most tricky part of this weeks changes were getting the old values to change without changing the entire script. I originally thought that I would have had to add in some AJAX code to get the image, message, and units to all refresh without refreshing the entire page. I needed to find a way to trigger the event. Using the setTimeout() javascript function, I was able to get the images to reload without refreshing the entire page.

More stoplight modifications

After looking at our stoplight gadget again at our weekly meetings, we yet again found some bugs and fixes that we decided to make to our gadget. This time, we found that we mistakenly used parseInt() to parse our strings to numbers instead of parseFloat(). This was a simple fix and didn't take much time to fix. However, we also found that the way we handled retrieving the message from the message spreadsheets needed to be changed. Previously we had our message spreadsheets have the upper threshold, lower threshold, and message fields. Comparing the thresholds in this manner had a few problems that we decided to get rid of my changing the format of the spreadsheets. Our previous format looked like this:

The problem with having the spreadsheet in this manner allows for too much error. If the data source that the user is looking at has the value 20.5, the stoplight returned would be a blank one, since the value is between 20 and 21. So we decided to change the layout of the message spreadsheets to the following:The way the spreadsheet is now setup is pretty obvious after a small amount of explanation. The message would be 'low' if the value received from the data source is less than or equal to 10. The message would be 'medium' if the value received from the data source is less than or equal to 61. The message would be 'high' if the value received from the data source is less than or equal to 90. Finally, the message would be ' very high' if the value received from the data source is greater than 90. Having the spreadsheet formatted in this way removed the error that was previously discussed. This change, along with the parsing problem was fixed and is now implemented in the most current release of our stoplight project, version 1.6.

The stoplight gadget and any information about it can be found here.

Polishing Stoplight Gadget

This past week was an interesting week for our stoplight gadget group. Going into our weekly meetings, with professor Johnson and Robert, we believed that we were going to be finished with the stoplight gadget and were going to begin work on a new gadget. As we were demoing our stoplight gadget to professor Johnson and Robert, we decided to add a few new features to add to our gadget. We added a 'title' feature where the user will be able to input their own title for the gadget to help them differentiate between each stoplight when a user has multiple stoplight gadgets on their iGoogle page. Also, since I couldn't get the stoplight image to auto-scale within the google gadget, we decided to have a user preference that will allow users to pick a small, medium or large image to display. Doing these tasks were pretty simple and I was assigned to polish up our stoplight gadget, while the rest of my group was assigned to create a new gadget. I didn't run into any problem while working adding these two new user preferences and was able to accomplish both tasks over the week.

The most recent stoplight gadget can be found here.

The new gadget that our group is assigned to work on is a WattDepot Monitor. The WattDepot Monitor gadget will display the current power usage. This power usage data will also come from a spreadsheet just like our stoplight gadget.

Stoplight gadget 1.4

For our first milestone we got a majority of the gadget done. So for the past week we polished up our gadget for by adding some error handling, synchronized the image refresh with the message refresh, added a unit field, we automatically checked for threshold direction, and I tried to work on having the image auto-scaled. The threshold direction is just a small javascript code that checks if the red threshold value is lower than the green threshold value. This is for people who want high numbers to be green and low numbers to be red. We decided to automatically check for the this instead of letting the user choose another settings. We already have enough user preferences and do not want to add too many choices unless we really need to.

Having the image auto-scaled to always fit within the gadget boarders proved a challenge for me. First I had to research on AJAX to have the image refresh without reloading the entire page. After working on it for a couple of hours I was able to get the image to auto-scale locally. Using the "onresize" event within the body tag, I was able to get an image to auto-scale. Unfortunately, when I looked through our code, we used the 'div' tag within our visualizations. The "onresize" event didn't seem to work with the 'div' tags. So I added in the body tags into the visualization and set the 'div' tag that held our svg image to contain the id "stoplight". When I tried to implement the auto-scaling image with the gadget, the image did not auto-scale. This seemed to be because I was not able to get to the gadget width and height parameters. After all that work, we decided to just leave the image how we had it before.

Our current version of the gadget can be found here.

First Milestone

Tomorrow is our due date for our first milestone for our project. The past week has been very hectic as we had to make many changes to our stoplight gadget as well as many modifications to our Google project hosting site to get things ready for the first milestone. The goal for our first milestone was to get the stoplight gadget ready for people to begin using and developing.

Some of the modifications that we made to the stoplight gadget this week was using a better stoplight image, give the user an option to use auto page refresh, and we also added an option for the user to input their own messages for certain values. Our original image was too 'cartoony' and plain. Instead I was able to find a good svg stoplight image. I was assigned to get the new image. As easy as this task sounded, I ended up spening a lot of time on it since 1), it was my first time working with an svg file type and 2) I kept running into problem after problem. The image gave me many problems as I was the one to implement the new image. The first problem that I had was finding a good editor to modify the image. I ended up using the open source program Inkscape to modify svg images. I needed to use the program because i was only able to get the svg image with the red light and the svg image with all the lights. So I tinkered with the program and image to get the yellow light and green light images. I uploaded the images into our project host and then tried to use the files but encountered another problem. When I tried to embed the image in an html file using the files from our project host, the image would not appear. Instead the there would be a link that asked me to download the plugin to view the svg images. It turned out that the images mime type was not correct. I fixed this problem by changing the file's mime type through Tortoise. When I was finally able to get the image to appear, I ran into a formatting problem. I was only able to get a portion of the image to show when i messed with the parameters in the html <> command. Again after some research I was able to find out that the problem lied in the xml code that svg uses. I needed to change the parameters in the svg tag in the xml for the svg image file. I had to modify the width and height parameters to equal 100% and then add the code viewBox="0 0 1500 1000" to get the svg image to view properly.

A few changes we made to our project hosting site were cleaning up our project directory, adding user and developer wikis, and create a nice homepage. These changes were simple and easy and took only a hour or so to get done.

For our next version of our gadget, we plan on adding error handling, since our gadget still has some glitches. For example, if we remove the source URL then click save, the gadget will not run. Other things we might add is an option for users to use different types of stoplight images, in case the users do not like the one provided.

The project page for our stoplight gadget can be found here.

stoplight gadget 1.2

This week we planned to finish version 1.1 of the stoplight gadget. But after our weekly meeting with our professor, we decided to finish both version 1.1 and version 1.2 within the week since there wasn't much of a difference between the two versions. Thus, the jump to version 1.2.

Stoplight gadget version 1.0 only shows a number from a hard coded location. Version 1.2 of the stoplight gadget is now able to show a stoplight image. The first page that the user views when the stoplight gadget is first embedded tells the user to input values into the user preferences. After the user inputs the values in the 'Edit settings' portion of the gadget, a stoplight will appear either red light, yellow light, or green light on.

We still have some problems with the stoplight gadget that we hope we will fix by next week. We first have to figure out what we will show when the gadget is first loaded. Since we do not have any ideas yet, all the gadget does is tell the user that the gadget will needs inputted values in the user preferences. Right now, the gadget only allows for the user to input numbers to check against each other. By the next version of our stoplight, we will allow for the user to compare two strings to one another. We might also try to get the stoplight to be shown with a corresponding message from a different place on their data source.

The biggest problem that we need to address with our professor is the problem of users not being able to edit the settings of the gadget and manipulate the thresholds outside of iGoogle. When we tried to embed the gadget on our google code hosting page, we were not able to manipulate the settings there. Hopefully after doing more research we will find a suitable solution to this problem.

Since we have not published our google gadget yet, but you want to try out the gadget, add the gadget on iGoogle. Here is the URL to the gadget.

Stoplight Gadget Version 1.0

Originally, our group thought that we were making a stoplight gadget that would work with the Wattdepot server. Last Wednesday we had a meeting with our professor on exactly what he wanted us to implement in creating this stoplight gadget. This meeting cleared up a lot on confusion that we originally had. We found out that we will try to create a generic stoplight gadget that anyone can use by inputting their own thresholds. For instance a person might want to use the stoplight to help keep track of waveheights, where they could maybe set the stoplight to be green when the waves are above a certain height and red when the waves are small. So over the past week since our meeting, we got started on the stoplight gadget project.

Our version 1.0 of our project doesn't do much of anything. To make sure that we are able to get everything working together, version 1.0 of the stoplight project just returns a number that can be found on a spreadsheet from google docs. We first created a google visualization to run and retrieve the number from the spreadsheet. When we tried to simply move the code and copy the visualization into the google editor that we were using, we ran into a little bit of problems. For one thing, after we simply copied the code into the tags and saved in the google editor, we were not able to reopen the file from the google editor. To open the file in the google editor we had to open the file from a URL. After tinkering with the code for a few hours, we were able to get the code running as a google gadget. Our code can be found here.

We are looking into using an IDE that could help us with the google gadget editing since there are still some bugs with the google editor gadget online. We have just found that Eclipse has a plugin for google gadgets. We will hopefully decide to use the IDE for further development.

For version 1.1, we are planning to implement a picture stoplight with hard-coded thresholds. We also have to figure out where the user will get their data from that they will use with the stoplight gadget. We hope to get all that up and running by next week.