After writing quite a bit of code, both for the arduinos and the python to lace things together, one of the things that I am dreading is writing the interface to bring it together. I always seem to have these grandiose plans on what I want to do, as opposed to what I can do, and time to do it.
So I sat down and did some research. I know what Id love to do, but I have to be practical in what I need to start off with. I have decided to stick with the web interface, primarily though Im not a huge fan of HTML, I have to admit that diving into HTML5 has changed my opinion of things somewhat. I am now a huge fan of using canvases. I simply love the work that Gerrit Grunwald has done using JavaFX, and even some of the work that he has done using javascript and his SteelSeries of meters, LCD readouts and other things with his own libraries. Id LOVE to incorporate all of that into a java app, but that going to require me to study even more code and procedures. SO.....for now Im going to stick with HTML5, and some simple javascript.
Im wanting to make a page, where I can quickly look at the thing smonitored and get a handle on whats doing what. I want to make a web page for controlling things, and having updated statues, but also a " Engineering page" where I can look at temperatures, and graphs, something that might not look " pretty" but gets the job done. There are several open source free jsp libraries out there that can be used. I found one I liked called RGraph. Its a simple yet pretty robust javascript graphing library set that doesnt have a huge learning curve, and actually if you dont mind tinkering with it, is kinda fun to play with.....
So I started the coding process after learning more about canvas, with HTML5....its pretty easy and a lot of fun to mess with. Here is a snipplet of the code...........
$(document).ready(function ()
{
var gaugeEXCH = new RGraph.Gauge('cvs', 0, 1000, 300)
.set('centerx', 425)
.set('centery', 225)
.set('radius' , 100)
.set('title.top', 'EXCH')
.set('title.top.size', 10)
.set('tickmarks.big',5)
.set('title.bottom', 'Degrees')
.set('title.bottom.color', '#fff')
.set('title.bottom.size', 8)
.set('background.color', '#00008B')
.set('background.gradient', 'True')
.set('border.outer', '#2F4F4F')
.set('tickmarks.small.color' , 'FFF')
.set('tickmarks.big.color' , 'FFF')
.set('text.color' , 'FFF')
.set('title.top.color', 'FFF')
.set('border.inner', '#FF0000')
.set('centerpin.color', 'gray')
.set('needle.type' , 'triangle')
.set('border.gradient' , 'True')
.draw();
var gaugeHCORE = new RGraph.Gauge('cvs', 0,150,45)
.set('centerx', 650)
.set('centery', 225)
.set('radius' , 100)
.set('title.top', 'H-CORE')
.set('title.top.size', 10)
.set('tickmarks.big',5)
.set('title.bottom', 'Degrees')
.set('title.bottom.color', '#fff')
.set('title.bottom.size', 8)
.set('background.color', '#2F4F4F ')
.set('background.gradient', 'True')
.set('border.outer', '#2F4F4F')
.set('tickmarks.small.color' , 'FFF')
.set('tickmarks.big.color' , 'FFF')
.set('text.color' , 'FFF')
.set('title.top.color', 'FFF')
.set('border.inner', '#FF0000')
.set('centerpin.color', 'gray')
.set('needle.type' , 'triangle')
.set('border.gradient' , 'True')
.draw();
var gaugeSOLAR = new RGraph.Gauge('cvs', 0,200,13)
.set('centerx', 875)
.set('centery', 225)
.set('radius' , 100)
.set('title.top', 'SOLAR')
.set('title.top.size', 10)
.set('tickmarks.big',5)
.set('title.bottom', 'Degrees')
.set('title.bottom.color', '#fff')
.set('title.bottom.size', 8)
.set('background.color', '#9400D3 ')
.set('background.gradient', 'True')
.set('border.outer', '#2F4F4F')
.set('tickmarks.small.color' , 'FFF')
.set('tickmarks.big.color' , 'FFF')
.set('text.color' , 'FFF')
.set('title.top.color', 'FFF')
.set('border.inner', '#FF0000')
.set('centerpin.color', 'gray')
.set('needle.type' , 'triangle')
.set('border.gradient' , 'True')
.draw();
var gaugeGEO = new RGraph.Gauge('cvs', 50, 70, 53)
I also found that i have a new best friend when it comes to plain old text editors. I find its easier than trying to use something like a free HTML editor, but I might give one a try, its Notepad++ version 6.4. With the added plug-ins, its really easy to use, but functional.
The code snipplet is just for a couple of meters. Im making a temperature monitoring page with in the Engineering page. Once you figure out the modifications you can make, putting meters on a web page is fun. Im also looking into the way to get as close to "real time" data as I can to be fed to them. So the learning continues. Im almost to the point that I can start mocking up the wiring, and installing the arduinos around the house. In the mean time, the programming continues. The snipplet gives you a page similiar to this one, which is obviously a work in progress.....
In the meantime, between school, kids track practice, and work the coding continues
More to come!
