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.

Our current version of the gadget can be found here.

0 comments:

Post a Comment