Kukui Cup Billboard: Frame up, visuals in, a step up from mockup!

After drawing up the mock-ups for the Kukui cup billboard, we are now ready to implement our design ideas. There were some changes regarding the mock-ups such as combining the core visualizations into one page and to have them update on top of each other instead of showing three tables which then transitions to the other visualizations.

A screen shot of our new visualization design.

For this week, I played around with css. I have not used css since learning it from ICS 101 so I did some research since I felt a little rusty. Nevertheless, my goal was to implement the rounded corners look for the visualizations. After reviewing css from w3cSchools and researching some example implementations, I felt ready to tackle this goal. My initial research yielded different approaches. Some used images of rounded corners and then render the four corners through html/css and on some with javascript. But after researching some more I learned that the css3 implemented a 'border-radius' property, that does exactly what I intend to do which is easier to implement and customize than the previous method. This was done through css via -moz-border-radius property. Since, as a group, we decided to use Firefox with the kiosk plug-in as the browser to display the billboard, this accounts to the -moz in front of the property which will only render to a Firefox browser. There is another property, -webkit-border-radius, which does the same rounded corners for Safari browsers.

Here is a screen-shot of the rounded corners implementation with some gradient added to the header.

Lastly, I also tried to implement the ticker tape. The ticker tape is fed from the updates students submit such as commitments. Since Ed found a very good implementation of this function, http://www.mioplanet.com/rsc/newsticker_javascript.htm, I simply implemented their script to our billboard. What I like about this implementation besides its simplicity is that I can use css to apply the appropriate styles it requires to suit the look of our billboard.

To see my implementation of the rounded corners, ticker tape and Jarret's updating visualization, click here.
Our project hosting site can be accessed here.

Kukui Cup Billboard

Just after finishing up our gauge, we move on to a new project. We deviate from our usual Google gadgets and into something completely different, a status billboard. Our job is to create a status billboard of updates happening during the UH Dorm Energy Competition. Our current task is to create mock-ups of the type of information we want to display and to do some initial research on how we are going to proceed.

Here are some of our mock-ups.

This shows the Kukui Nut standing for participating dorms, its floors and its residents. It also shows the static title header and the ticker tape in the footer.

The contest prizes, tip of the day, and upcoming events. The today's event are meant to explain the who, what, where and when of the said event.

Besides creating mock-ups, we also did some research on the different things we're going to be using for this project. Since the billboard will be entirely web base, we decided to use javascript, html and css for ease of use. We initially decided on using Chrome to view our billboard in full screen after our initial testing with Firefox but we learned that our Firefox's full screen mode showed a little bar on top. So Jarret started looking around and found a plug-in for Firefox that fixes this problem and so we will be using Firefox instead.

Our goal for next week is to start implementing our mock-ups and any changes made to it. Our project hosting site can be accessed here.

My 3rd gadget for the 3rd milestone.

Our team just finished our 3rd gadget for our project, Stoplight, Monitor, and lately, the Gauge. The gauge gadget works like the other gadgets we've created but combines the different properties into one. The stoplight's thresholds and the monitor's Wattdepot implementation both find its way to the gauge's properties. The gauge displays Wattdepot energy related information using a user inputted host URL and a source and also uses the gauge visualization's option to add coloring to display threshold. Here is a screen shot of our gauge gadget.

Some of the new properties we've added on top of the previous version is the addition of the host URL field for the gadget settings, the data type and time stamp showing below the gauge, the units showing inside the gadget and the title on the gadget's heading. My job for the latest version is to implement the host url requirement and replace the data-type with the units that is shown within the gadget. I had to search for the right implementation from the visualization API in order to the add the units.

During our gauge development we didn't really have any problems it since my last post. I am still using Eclipse to edit the xml files. Other than that we didn't have any problems with the development of this gadget.

As for improvements, we are planning on adding basic error checking for the setting fields. We are also planning on making a better user experience by turning the host URL field into a drop down menu with the appropriate Wattdepot servers and do the same with the source list.
Our updated project host can be accessed here.

Wattdepot Gauge Gadget

After last week's initial preparation of the gauge gadget we are to implement and retrieve data from Wattdepot. This was not really a huge problem for us since we integrated wattdepot for the monitor gadget we created for the 2nd milestone. This task was delegated to me and Jarret the threshold and refresh.

The biggest problem that we had while working on this project was debugging our code. Both Jarret and I tried to find the problem as to why our gadget won't load the gauge visualization. After looking through the code for 3 hours we found out the problem and it was a typo. We were passing a different div id as a parameter from our div tag's id. This just shows our real need for a better editor and a better way on running our gadget for testing purposes. We had to commit to our trunk every time we need to correct our code no matter how minute. I am currently using Eclipse with the basic plug-in for xml to edit the gadget. This was problem was really not a big deal since it was meant for testing purposes. I started out with a requirement to enter the whole data source url as to test our gadget's ability to retrieve from a source, google spreadsheet. The div tag was later replaced by a different id later on when I implemented wattdepot, which only requires a source string not the url.

During our 3 hour mishaps we sifted through the code trying to figure out what was wrong. It was a good opportunity for me to learn more about the gauge visualization and also by looking through the visualization api.

Here is a screen shot of our Wattdepot Gauge Gadget with the Kailua House as its source and monitoring the power consumed of the said source. Our host site can be accessed here.

Gauge Gadget

For our new project, we are still working with gadgets but this time around, we are to use advance google visualization tools. The visualization that was delegated to our group is the gauge visualizations. Our first objective for this project is to get a simple gauge visualization working with hardcoded data to be evaluated and then create a gadget based on the that visualization. Other things that we had to do include when creating the gadget is to create a common look and feel for all the gadgets in the iGoogle page. Since we cant change other google gadgets' look, such as gmail, we are basing the look for our gadgets with those look. Prof. Johnson suggested that we install other google gadgets along with our gadgets to create the common look.


Some of the things that we are going to be working on is to decide what of information to use for the gauge. Another would be to fix the problem of overlapping gauges. The overlap occurs whenever the gadget size is adjusted.

Our project hosting site can be accessed here.

Two on Two: 2 Gadgets for 2nd Milestone

For our second milestone, our group has finished two gadgets. The Stoplight gadget, which is a universal gadget that takes a user input source and displays a stoplight image based on the a given threshold, and the Wattdepot-ui-monitorgadget, which is a monitor that connects to the Wattdepot web service and displays the power/energy consumed and the power/energy generated of a given source.

Stoplight Gadget

Features

• Automatic refresh
• Title feature
• Customizable image size
• Able to parse both integers and decimal values
  
• Error handling

Version 1.7 is the latest version of stoplight gadget. The most prominent feature of this version is the automatic refresh is much cleaner. During our meeting with Prof. Johnson, he noticed that our gadget will look a little more professional if our gadget refreshes only the relevant and dynamic information. As in the case for our stoplight gadget, the image, data and the message. These dynamic information will only refresh whenever the image or the data changes and the rest will stay the same . This means that we don't have to refresh all the information whenever one changes. It also eliminates the spinner icon for each information, which appears when the gadget retrieves data. Other functions include the adjustment of the gadget height. This was an aesthetic modification because our gadget allows users to change the image size and when the image is set to small there are extra whitespace below the message. Lastly, we changed the location of the gadget title from the gadget window itself to the top center section of the gadget main display frame.
For the full list of all the features visit our ReleaseNotes wiki.


Wattdepot-ui-monitorgadget

Features

• Automatic refresh
• Able to connect to Wattdepot web service
  
• Error handling

For our latest version of the Wattdepot monitor, we also implemented the new refresh function explained in the Stoplight section above. This feature is much more prominent in the Wattdepot monitor since each of the information displayed is a result of the retrieval of the proper data to be displayed. From the source name to the last checked time stamp, the spinner icon always shows up for each information displayed which turned out to be an eye sore. For the my milestone contribution, I added the error messages to be displayed as part of my error handling. One of the problems I encountered is the appearance of the spinner icon along with my error messages. This gives the user a false sense of anticipation for more information to show up. The solution to the problem is the implementation of the new refresh function itself. Since my error message is due to a missing user input, other information that needs to be displayed might be dependent to the missing input and therefore will show the spinner icon to no effect.
Since we only worked on the Wattdepot monitor for only a month, we only have 2 versions being version 1.2 as the latest.

After the 2nd milestone presentation, we are to change our group project for the second half of the semester. We had a chance to change project after the 1st milestone but I enjoyed creating gadgets that I stayed in this project. The group isn't decided yet but this is the reason why I signed up for the HEEP gadget team for the 3rd milestone.

Never say never: Improving Stoplight Gadget

We are closing in on our 2nd milestone , this day next week, and we are in confident on finishing the two gadgets in time. For this week, we are still working on the Stoplight gadget, a continuous work of improvement, as well as the Wattdepot gadget. The Stoplight gadget had a major rework in terms of the formatting of the data it retrieves from. During our weekly meeting, we agreed that our messageSourceUrl formatting was too error prone from the user end. A user might get confused on setting the upper and lower bounds that relates to the corresponding message to be displayed. Our solution is to create a new format. This new format differs by having two columns, one to include the integer values to be evaluated and the other with the corresponding messages.

A significant feature are the empty spaces to visually show the upper and lower bounds of the values to be evaluated. In conjunction with the format change, we also stopped parsing the value as integers and instead parsed them as floats to better represent values a user might use which includes decimal values. Jarret created an updated message script to facilitate these changes. The updated script can be seen here.

As for the Wattdepot gadget, the main improvement we did was that we've successfully got our gadget to connect to the Wattdepot server. We are mainly using tests information gathered from Wattdepot. Other changes includes changing the source into a user input source instead of drop down menu, lowering the retrieve interval from minutes to seconds and including the source and the type of data in the gadget itself. The type of data that a user can choose from are Power Generated, Energy Consumed, Power Generated, Power Consumed. The data types' description can be accessed to Wattdepot's site.