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!
- 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!