Brainstorming the Next Phase

We've taken a bit of a break from working on the HEEP widgets for a little while and decided to focus our time on creative ideas for the next round of design. Kevin and I had a few brainstorming sessions over Spring break to come up with ideas that would benefit the users of the HEEP website, the people of HEEP and the students who will be using the larger aspect of the project my team is working on The UH Dorm Energy Competition.

The Dorm Energy Android Application
The idea here is to make the competitors visually see how their dorm and floor is doing compared to other dorms and floors.
Let's put this into a story/scenario:
Sally grabs her Android phone and presses the UH Dorm icon on her home screen.
She sees a layout that displays many floors of a particular dorm. She swipes the screen to change which dorm that she wants more information about. When she gets to the dorm she wants to view, she sees numbers 1-6 on a building representing the floors. She wants to find out how her friend Mark is doing on the 4th floor of Freer (a Dorm at UH). She taps the number 6 on a vertical structure that represents a building. A pretty layout with live energy consumption and a simple one week graph is displayed.

The idea here is to not push too much information on the students and allow an alternative mobile vector for the competition. We believe a simple mobile application has that potential.

A Visual Javascript Application to Display Household Energy Data
This idea is still under the works. So far our idea is to create an application that can visually demonstrate a graphical depiction of Honolulu energy usage based on household data. There are many possibilities with this and we intend to explore them when the data becomes available. Currently we are looking forward to seeing what kind of infrastructure we can obtain to house the 1TB+ of data on a SQL server that obtains fresh data nightly. I predict the model will be based on OLAP and contain highly detailed information in the form of a Google Map overlay. More to come on this exciting project.

Milestone 2

We have completed 3 of our gadgets. I'd like to share what we have so far.

First off, let me mention that these gadgets are Google Gadgets for placement of your iGoogle homepage. They report information by querying a Google Spreadsheet from javascript and then displaying the appropriate visualization or dynamic content.

Our Don’t Waste Money iGoogle Gadget displays the HEEP Rebate + Money Saved. It gives the consumer a birds eye view of how much they will earn by choosing an EnergyStar model.

When you select a certain brand, it queries the spreadsheet for the relation between the brand, rebate and savings.

Our NegaWatt iGoogle Gadget displays the amount of watts saved for certain types of appliances.

The following graph displays the HCEI (Hawaii Clean Energy Initiative) goals for the projected years. It also shows real statistics for given years that have passed.

Here are two of them together on the iGoogle Page:



There are some things we would like to continue to work on in order to perfect them. Most of these have to do with white space surrounding the visualizations and other CSS refinement.

You can search for these gadgets on Google Gadgets Search or simply visit our project page:

http://wiki.github.com/remyb/heepoverflow/

Most Prototypes Complete

Today I'm glad to say that we have completed most of our prototypes based on the mock-ups I previously demonstrated.

Let's have a look:

Mock-up:

Prototype:


Mock-up:

Prototype:


After this iteration, we will be tweaking the CSS to make it look as clean as possible to a deliverable state. Next week the applications will be ready for HEEP to review.

On another note there is a quite a cool trick I found that I thought I'd share. You can use any font you like in CSS without any PHP or GD tricks. It will actually load a TTF into the client browsers memory. You can upload a TTF here:

http://www.fontsquirrel.com/fontface/generator

and get a few lines of code that will work on all browsers. Here is a cut out of what the TTF looks
like and what you would place in your CSS file.

@font-face {
 font-family: 'TizaRegular';
 src: url('tiza.eot');
 src: local('Tiza Regular'), local('Tiza'), url(data:font/truetype;charset=utf-8;
base64,AAEAAAASAQAABAAgRkZUTU5mIEMABZvIAAAAHEdERUYA2gAGAAWXPAAAACBHUE9T/ykFxgAFl3wAAAR
MR1NVQmyRdI8ABZdcAAAAIE9TLzKFzi0LAAABqAAAAGBjbWFwGBFXGwAABLwAAAHKY3Z0IAAwBj8AAAgUAAAA
EmZwZ20GWZw3AAAGiAAAAXNnYXNwABcACQAFlywAAAAQZ2x5ZrZ+zyUAAArgAAWF9GhlYWTzweoFAAABLAAAA
DZoaGVhCfIE9gAAAWQAAAAkaG10eDgKBEwAAAIIAAACtGxvY2ECplwQAAAIKAAAArhtYXhwBIou4AAAAYgAAA
AgbmFtZfXm/qwABZDUAAAE1HBvc3RZOs/WAAWVqAAAAYRwcmVwHP99nAAAB/wAAAAWAAEAAAABAABpZxRFXw8
89QAfA+gAAAAAx7FSegAAAADHsVJ6/7b/aAV2BMMAAAAIAAIAAQAAAAAAAQAABMP/aAAABcL/tv8eBXYAAQAA
AAAAAAAAAAAAAAAAAK0AAQAAAK0TpQDyE24A3gABAAAAAAAKAAACAAfLAAIAAQADA1EBkAAFAAQCvAKKAAAA
jAK8AooAAAHdADIA+gQBAgYIBwAAAAIABIAAACMAAAAAAAAAAAAAAABweXJzAEAAISAeAu7/BgAABMMAmAAA
AAEAAAAAA18DVgAAACAAAgH0AAAAAAAAAU0AAAH0AAABwwAbAv0AGwNdACIC4QAaAr8AGgPzABoBjAAbAd4A
FQH6ACECSwAVAokAJgFPACECBwAiAR8AIQKJAAgDQQAlAnQAIgPDAB8DQQAhA38AFQMfABkCuQAaA38AGgN/
ABsDNAAbAToAIQEtABsBrgAbAugAUwH0ABsCpAATAqQAGwSj//cD/f/5A9j/6QQI//MDvv/wA5X/+QQS/+UE
bv/zAln/+QLU//YERAAhA7UABAVL//cEO//zA5r/9gOuABsDcf/9BBL/+gN+AAAD1f//BDsAAARw//UFwv//
BB//6wOK//UDp//1AQj//QKJAA0BNAAOAr8AEwKyABUBkwAbBNX/9wP2//kDzP/pA83/8wPo//ADef/5BAj
/5QRu//MCHv/5Aqn/9gREACEDtQAEBTX/9wRm//MDnP/2A64AGwNd//0EBP/6A34AAAPV//8EOwAPBGX/9Q
XC//8EH//rA4r/9QOa//UBeAAVAVoAVQFHAB0BoQABAToAGwJ9ABUCkAAaA0EA1wKrABsCWP/+A0EAawGSA
AACWAACBKP/9wSj//cEo//3BKP/9wSj//cEo//3A9j/6QO+//ADvv/wA77/8AO+//ACWf/5Aln/+QJZ/+s
CWf/5A83/8wQ7//QDmv/2A5r/9gOa//YDmv/2A5r/9gQfAKwDmv/2BDsAAAQ7AAAEOwAABDsAAAOK//UEo
//3BKP/9wSj//cEo//3BKP/9wSj//cDzP/pA77/8AO+//AD6P/wA77/8AJZ//kCWf/5A0H/9wJZ//kEZv/
zA5z/9gOc//YDnP/2A5z/9gOc//YBOv+2A5z/9gQ7AA8EOwAPBDsADwQ7AA8Div/1A4r/9QNBAKYB4gAEA0
EABAES//wBJgAAAmwAAgKjAAMCjAAhAAAAAwAAAAMAAAAcAAEAAAAAAMQAAwABAAAAHAAEAKgAAAAkACAA
BAAEAH4AowCpAKsArgC0ALsAxQDdAOUA7wD9AP8C3CAUIBkgHv//AAAAIACgAKgAqwCuALQAuwDAAMcA4A
DnAPEA/wLcIBMgGCAc////4wAA/73/vP+6/7X/r/+r/6r/qP+n/6b/pf3J4JPgkOCOAAEAAAAiAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBiAGMAZAAAAQYAAAEAAAAAAAAAAQIAAAACAAAAAAAAAA
AAAAAAAAAAAQAAAAQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1
Njc4OTo7PD0+P0BBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV5fYGEAb3Bxc3uAhom
==) format('truetype');

Enjoy :)