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 :)

HEEP Update - Milestone 1

Today is the first milestone of our HEEP project. I think significant progress has been made as far as creative thinking and design has been concerned. It's like a paradigm shift from constructing from specifications to designing a project for the client. They have basically handed us the reigns to pursue what we think is best. I hope it ends that way as well.

Our plan is now to come up with as many ideas as we can think of, outside the box. We are no longer focusing solely on visualizations. We want to create applications that reflect what the user of the site would want, not necessarily what the organization would like for itself. For example, a report card for the organization is not really at the best interests of the organization, rather, a report card for products that it gives rebates on would be a wiser choice since the consumer will find that information much more useful.

Currently we have thought of a few calculators that will serve as applications in the tabs. These are being implemented in plain javascript with the use of google visualization api to fetch data from the spreadsheets into our function that does the calculations. The result is displayed for the user in an easy to interpret interface.

The Appliance Report Card

• Get top 5 Energy Star Efficient Models
• Get Cheapest Non-Energy Star Models
• All models must have similar specs
• Compare/Determine How Long Until Break Even
• Less Amount of Time is Better
• Grade Based on Time for Break Even

The Appliance Calculator

• User enters info in for 2 models
• Calculate Break Even Point
• Total Savings and amount of time (lifetime estimate)

The Cooling Degree Day Calculator

• User enters two years, their corresponding
  power usages, and a base temperature
  
• Calculates total change in power usage per cooling degree day and percent of change

The Cooling Degree vs Oahu Generation

• Power generation for two years are read
• Cooling Degree Data is read for corresponding years
• Calculates the amount of power generated per Cooling Degree Day and percent change

We expect to have 2 of these calculators available for demo in two days.

We also plan on giving HEEP a live demonstration so they can give feed back in 2 weeks.