Playing with graphics

I'm pretty happy and have to show off a bit. We had a cold and rainy day so I spent some time working on new web-based panel for control and monitoring. The old panel was nice, but it only displayed data with no ability to set things directly. It was also static, so that you had to refresh the whole page to update the gauges. I dug out the JavaScript manuals and ended up with something that I'm pretty happy with. Here's what I like about it:

- The background can be any image at all. I chose my plumbing diagram for this example.

- All of the gauges, indicators, and readouts are 'live' - they update in the background (every 5 seconds at present) without redrawing the page.

- It can combine data from multiple controllers.

- Gauges, indicators, and readouts can be sized and placed anywhere on the page.

- The location, color, size, and connections for each gauge, indicator, and readout are specified in a text file - no coding required to make changes.

- All of the heavy lifting is done by the browser. There's almost no load on the controller at all.

- There are clickable indicators that directly set controller variables (or outputs). The 'Hot Tub Priority' and 'Oil Disable' buttons are examples. This allows single-click control of the system.

In the screenshot below, the panel is connected to a test unit on the bench in my lab with no sensors. The displayed values are live but random. The green / grey squares next to the zone valves and circulators indicate whether the device on or not.

Can't wait to finish it up and start using it!

DaveBP said:

I think this kind of graphical interface is going to increase the interest in computer control for home heating systems by at least an order of magnitude. (Beside just being cool).

Nice piece of work.

Any flashing (programmable) alarms in there?

Click to expand...

Thanks - my first really solid foray into AJAX and SVG programming. Had to do a consolidated control / status display for a hotel with several controllers. I decided to take a little extra time and create a general solution.

No flashing alarms, but it will play 'Come on baby light my fire' on the home stereo when storage gets low ;-)

UPDATE
If I have the firewall and router set up correctly, you can access the live display here. The 'Hot Tub Priority' button should cycle the top floor and hot tub zone valves as well as the tank circulator. Remember it will take up to 5 seconds for the display to update after a change. I'd be interested in feedback on responsiveness. It works with reasonably current versions of FireFox and Chrome, but WILL NOT work with Internet Explorer. If anyone can give me info on how it works with other browsers I'd be interested.

Thanks for the encouragement and the fix on the link. If I could only type I'd be a lot better off.

A big part of the controller saga has been the development of a solid software architecture that allows me to add new pieces without breaking the old pieces. The last one was PID control. Pretty nice for hardcore geeks, but not very pretty to look at. This one is a lot more exciting.

With the new rule types that I have, you can connect a gauge to a computed value - temperature difference or error, for instance.

Works on iPhone too!

Thanks again for the kind comments. Makes this a nice place to hang out.

All right, I think it should play Pink Floyd's 'Money' when it has to switch over to oil. Any other suggestions?

I really enjoy figuring out solutions for this kind of problem. Sometimes the problem has to gestate for a while, but it's always fun when it comes time to hatch a new idea.

For anyone new to this whole topic, this is another part of the soon-to-be-legendary NoFossil Control System (NFCS). The NFCS is a collaborative effort involving several Hearth members and others. It's the evolution of the controller that I originally put together when I added storage to my system. I've made the hardware design and all of the software available for anyone who wants to build one, and a few Hearth members have done so. I've also built a bunch for sale, purely by word of mouth. There are a couple dozen of them in the field now, from Idaho to Ontario to Maryland to Maine. Looks like I'll be spinning of an L3C corporation to manage them - it's getting out of hand.

Anyone who built or bought one can use this new control panel. I really need to get an email out to everyone, but life is just too busy.

Kris (and anyone else who'd like to test it): I'll have an alpha version in a few days. It will require a hand-edited text file for configuration. Not too bad, but expect to spend a bit of time with your graphic image (for the background) and a list of the data elements from your NFCS. Here's a snippet of the actual configuration file for the current demo:

Thanks again for all the support. It really helps. It's amazing to look back at where this started. This forum has provided invaluable support and ideas from the very beginning. It's not all that long ago that I was a newbie myself, learning about gasification, storage, inlet temp protection, and so on. I'm glad to be able to pay back some of what I've gained from this community.

If anyone out there is a JavaScript jockey (or knows someone who is), I'd really like comments and suggestions on my implementation. This is not my strong suit and I expect that there are better ways to do it. The source for the JavaScript is here. I may also be looking for a volunteer or college intern type to do some additional coding. PM me if you know someone.

For anyone wanting to do testing, I think I'm ready. There's a testing thread on my forum, and I'd love to see results posted here as well. For a teaser, here's the entire HTML source for my control panel:

EDIT: Oops - the forum filter massacred my code. Fixed now....

And here's a photo of the first NoFossil Control System prototype. It's been quite a journey.

.... and one more example. This shows a display based on a photo of a setup on my test bench. In this example, I have a PID loop using a variable speed output to drive a light bulb to maintain a lamp shade temperature of 120 degrees.

The 'Heater' shows the percentage of full output being delivered to the light bulb.

The PID algorithm estimates the starting power based on room temperature (pretty cool in the lab this morning).

The red button on the base of the lamp is clickable - it enables / disables the PID loop.

The NFCS calculates error - the difference between the setpoint and the actual shade temperature.

If I set it up correctly, this link should be live (for as long as I leave it running).