I’ve had the same basic home page for this domain since I set it up. It was never meant to last, it was just there until I got wordpress set up to host the blog.
I was playing with the Google Webmaster tools last week and it pointed out some broken links on the home page so I decided it was time to finally update it.
The old version shows just how badly I understood the HTML box model and lack in graphic design skills. Also widgets are very old.
Rather than work out how to do it all properly these days there are any number of frameworks that will do it all for you. I’ve picked Bootstrap which supports responsive layouts which should mean that it should look good no matter what the screen size of the device that views it. The old version really didn’t work on phone/tablet screens.
I wanted to keep the live feed from the power meter and weather centre, but it was time to update them from the dojo and Google charts versions to something a bit newer. The line charts are now Rickshaw/D3JS. I’ve used D3JS before for a things like my MQTT topic tree viewer.
The wind direction indicator is just a background image with a ‘↑’ character at a large font size rotated using CSS transforms.
All the data comes in as a set of subscriptions to the MQTT broker running on my box via Websockets.
You can see the results for real here.