Showing posts with label ajax. Show all posts
Showing posts with label ajax. Show all posts

Friday, November 9, 2012

Dashboard once again

It's been more than a year since I last published about the dashboard. And that it because not much happened in that front.

Meanwhile, a friend gave me a tablet, cheap chinese thing, which I planned to use to display the dashboard in a visible place in the house.
The thing could even display the HTML5 and handle the AJAX calls and all, but it was unstable, sleep mode would spend the battery almost as fast as normal mode, slow to boot, bad touchscreen (resistive), and so on, and so on, so I quit on it, and consequently on the progress on the dashboard, as the experience while using it is, in my opinion, of great importance!

A few months later, my wife offered me an iPad, the new retina display model! so that rekindled my interest in the dashboard. I came back to iWeb, expanded the design a bit, and have spend a couple of evenings implementing the functionality...this is the result:


And for the explanation:

electricity and gas consumption: the pointers move, as the data is updated, and shake slightly when stable, to indicate that the thing is alive. The numbers are updated twice a minute.

House control: this interfaces mainly with the FHZ1000 part of the automation. It reads set, measure and desired temperatures, displays the measured, and makes the box green if the room is set for comfort temperature (even if it has not yet been reached) and blue for low temperature. The boxes turn orange is there is no reply.
The buttons for the awnings are toggle buttons: click to extend them and click to retract them, since the system has no idea of what their status is (they can be operated locally). They briefly blink through orange to give feedback that something happened!
climate limited: is a button to limit the maximum temperature to which any room can be set
holiday mode: should set all rooms to a low temperature and out of the standard program. this is the only button not yet functional (and therefore transparent).

Door events: list of the last 4 events on the RFID door.

System messages: reports errors on the system, like now, the weather station has stopped transmitting.

Agendas: list a few items (enough to fill the respective boxes) taken from google calendar. I have a google calendar for the house, where I put the garbage schedule, and other maintenance activities that need to take place.

Outside temperature: like the name says, displays the data from the weather station. Now it displays nothing, since the station stopped working - see system messages :)

And that is it! data is updated on timers, and the agendas on loading of the page.

There has been talk in the tubes about some mechanisms to update data in real-time. That should be the next development, but that might take another few years :) This is nice enough to show to my friends :)

AH! last but not the least, I found out that one can include some lines in an HTML page to make it a iPad app, so, by adding:

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

I can save the page onto the iPad desktop (is it what it is called?) and run it as any other app, without the safari address bar. Only the top bar with the clock and stuff is still visible, but that is even a plus, as it gives you a clock and iPad info!

I'll try to post a screenshot from the iPad soon!

Tuesday, October 18, 2011

New Dashboard

Progress of the OpenTherm interface is going very well! but that is not what I am here to report today. Today it is just a short post to share the prototype of the new design of my dashboard. My wife made the design, and I implemented the functionality. Still some rough edges to adjust. Here is a snapshot:



All information gets updated regularly via HTML5 and AJAX calls. Half of it is already working even, but there is still some to get done. I'll share the code once it is ready!

By the weekend I should report on the Opentherm!

Saturday, June 18, 2011

Home dashboard V2

Since the last post, not much has happened, but I have been busy with the dashboard.


I made some changes to it, so here it is:


The left dial is the electricity consumption, and the one on the right is the gas. They go from 0 to 5, so at the moment I took the snapshot, there was a very high electricity consumption - vacuum cleaner :)
The pointer indicates the instantaneous consumption, the white number the total for the last hour, the blue number (month) is the running total for the last 30 days, as well as the cost, which is simplz the number in blue multiplied by the average cost.

It is all made using HTML5 canvas, and AJAX (I think...). On the server side, php does the job of answering the requests. The thing updates every 5 seconds, and the temperature updates every couple of minutes. The agenda fetches data from google calendar and does that only at the moment the page is loaded, so the plan is to reload the page every few hours (my agenda hardly changes...)

I now have to polish it a bit, to display properly in portable devices - it works in android 2.1 - and to lighten the load on the server...my database structure is far from ideal, and the requests take a very long time to process - 1 to 2 seconds - when most data doesn't change that fast.

Friday, May 6, 2011

Home dashboard


Here is my new dashboard for the house! this built with HTML5 and AJAX technologies (sorry if any of the terminology is incorrect, but it's hard to keep up with all these mash ups :)

This is a project that I have been thinking about for many years, and now I finally found the technologies to get it all together! And especially, the touch screens are becoming affordable, with all the tablets around, the final piece of technology will come together and I can finally stick a touch screen somewhere in the house, showing what the house is doing, and allowing control!

It became possible when I found out about RGraph, I then spent a night or two getting some graphs together, but they didn't look very slick, so I investigated, and I found a few nice dashboards, and then I almost copied one of them, this control4 energy, and after one night of iWeb, vi, php, and HTML5 coding, I got to the result above.

I think it looks really nice! I still have to make the whole interface language better and get labels closer to the fields, and that kind of usability stuff going on. This is an AJAX thing, fetches data every few seconds, and adapts the graphics and displayed information. The other pages, for gas and agenda, are not yet ready.
I am particularly proud of the pointer, which moves smoothly between the values, and keeps waving when it reaches a value, mimicking a real pointer on a car or analog meter - it's a pity I can not show it here...maybe I will do a movie...or put the html in here one day.

Hope you enjoy it!

As for the batteries of the RFID lock, they didn't last nearly as long as I had expected, so I am now powering them from a small adapter...will still consider powering them from a solar cell connected to rechargeable batteries.