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.