Website

-
I've finished coding the website! I used the Material Design Lite Dashboard template (https://getmdl.io), and made significant theme and content changes (including creating a dark theme, based on the two main colours in our logo - #1A1A1A & 006DCC). The dashboard now looks like this:


It depends on the following resources:
  • Material Design (material.min.js, material-theme.min.css)
  • Material Icons (material-icons.css)
  • jQuery (jquery.min.js)
  • Morris JS (morris.min.js, morris.css)
    • Raphaël (raphael.min.js)
  • Palette JS (palette.js)
jQuery CSV is used to retrieve the data from CSV files on the local server, and Morris JS (which depends on Raphaël) is for the charts that are created from the CSV data, and Palette JS is used to create an array of colours forming a rainbow for each doughnut chart. The charts are configured to update every second; the code is all available open-source on GitHub.

We are yet to implement the AI tips service, and are in the process of organising navigation of the site - including how different datasets are accessed.

To preview how the site would look in your home, please see our demo site; all of our code is available open-source on GitHub.

Comments

Post a Comment

Thanks for commenting! We'll get back to you as soon as we can.

Please ensure that your comment isn't offensive or inappropriate.

Popular posts from this blog

Move From XML To CSV

-
Recently, we were discussing our file structure and realised that XML files are unnecessarily complex - we were using the following structure: <livehousewaterusage> <appliance> <appname>sink</appname> <room>kitchen</room> <rate>55</rate> </appliance> <appliance> <appname>sink</appname> <room>bathroom</room> <rate>75</rate> </appliance> <appliance> <appname>toilet</appname> <room>bathroom</room> <rate>85</rate> </appliance> <appliance> <appname>bath</appname> <room>bathroom</room> <rate>80</rate> </appliance> <appliance> <appname>shower</appname> <room>bathroom</room> <rate>100</rate> </appliance> <appliance> <appname>shower</appname> <room>bathroom</room> <rate>...
Read more

Hub & Outlet Housing

-
Image
We recently mocked-up the housings for both the hub & outlets - feast your eyes! Hub: Outlets: These housings will be fully waterproof. To preview how the site would look in your home, please see our demo site ; all of our code is available open-source on GitHub .
Read more

AI Tips

-
AI tips have finally made their way onto our test site, after having spent some time coding the hub to process the received data each second (using Python) and read from the files produced by this process when the tips dialog box is opened. The adjusted Python code for the hub is as follows: import os, pause from datetime import datetime def updateTips(): messages = ["outlet,message\n"] bad_usage = [] amazing_usage = [] rising_usage = [] lowering_usage = [] for file in os.listdir(os.fsencode("rates/daily")): outlet = os.fsdecode(file).replace(".csv", "") now = datetime.datetime.now() with open("totals/daily.csv", 'r') as file: data = file.readlines() line_number = [index for index, item in enumerate(data) if (outlet + ",") in item] daily_value = float(data[line_number[0]]) with open("totals/weekly.csv", 'r'...
Read more