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.
Monday, February 22, 2010
Monday, February 15, 2010
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.
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.
Tuesday, February 9, 2010
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.
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.
Monday, February 1, 2010
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 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.
Subscribe to:
Posts (Atom)
