I have worked with Jean Collin to prepare a PHP and SVG based visual dashboard that displays the current values from his solar domestic hot water system at Villa Azul in Costa Rica. Jean uses an 8-bit microcontroller to measure the temperature of the solar system and control the circulator pump. The software we created allows the system to be monitored remotely using a web browser. You can view a live version of the Villa Azul Solar Dashboard here.

The solar dashboard works with any modern web browser with full SVG support. I especially like how it looks on an iPhone and iPod Touch Screen!

Hardware Details

I find Jean's solar hot water system very interesting because it uses a lot of custom modded electronics and open source software to work. Through the use of a low cost 8-bit microcontroller and a modified Linksys router he can run the system without using a lot of power or requiring a dedicated PC.

The serial port on the modified Linksys WRT54GL router acts as the interface between his microcontroller and the Pachube website. The microcontroller sends comma separated serial data to the dev/tts/1 port on the Linksys router. The router then sends the data samples to Pachube every 2 minutes. Pachube is a website that provides a web based data logging service that uses feeds to publicly share datastreams on the internet.

You can view the Pachube page for Jean's solar hot water system here:
http://pachube.com/feeds/24922

Jean's solar hot water system measures the temperature on the solar panel and the temperature at the top and bottom of his hot water storage tank. He also has an additional temperature sensor mounted next to his jacuzzi pump. Additionally Jean has a CT (Current Transformer) which he uses to measure his household electrical usage. The CT provides the data for the watt gauges in the dashboard.

On a sunny day the two solar panels have the ability to heat the domestic hot water above 40°C (104°F). This results in a direct reduction in electricity bills on days with nice weather.

On days without much sunlight there are two backup instantaneous electric shower hot water heaters that can come online when required. Each electric hot water heater consumes between 1600 watts on a medium shower setting to 2400 watts on a high shower setting and is controlled with relays. The backup electric hot water heater relays turn on automatically when the water temperature in the solar hot water storage tank drops below a comfortable shower temperature.

Jean Collin's first goal for the project was to reduce the amount of electricity used at Villa Azul for heating hot water. On any day that has nice sunny weather the solar system generates savings. This is good for the environment and makes financial sense too.

The 2nd goal was to be able to remotely monitor the system to ensure everything is working properly. Jean spends part of his year in Costa Rica and the other part of the year in the United Kingdom. Having the sensor data hosted on Pachube allows Jean to know that everything is working as expected and he can review the output of the system over time using graphs.

The Linksys router runs the dd-wrt Linux firmware and sends updates to Pachube using a BASH script and GNU wget. Jean & I experimented with several techniques to connect the MCU to the internet when developing his system. We tried using curl, nc, ser2net, and wget on the Linksys router. We found that the GNU wget ipkg was able to do the trick without using a lot of storage space on the router. Jean configured his Linksys WRT router to connect to his household WiFi using the dd-wrt wireless repeater mode. This skipped the need to run Ethernet cables to his utility room.

Pachube Notes

For the graphs I found that by using a median filter and oversampling the data points I was able to remove temporal aliasing artifacts that would occur when Pachube rounded the selected data record to the nearest preset interval period. These aliasing artifacts were especially evident on the long term graphs that had high frequency changes such as the Jacuzzi Pump graph. Without the median filtering the values tend to appear lower when the graphing period is changed to a longer duration.

I accessed the datastreams using the PHP fopen command with a URL like this:
http://$pachube_username:$pachube_password@api.pachube.com/v2/feeds/24922/datastreams/$pachube_data_stream.csv?duration=$duration&per_page=1000&interval=$interval"

Pachube currently appears to require an active account login to download data from a public datastream. $duration defines how many hours or days worth of data to download. $interval defines the granularity or the data in seconds. Currently Pachube supports accessing the datastreams with following intervals (listed in seconds): 0, 30, 60, 300, 900, 3600, 10800, 21600, 43200, 86400.

The regular Pachube accounts are currently limited to downloading a maximum of 100 records per request. The Pachube pro accounts allow more datastreams to be created and more records to be downloaded at once.

Creating the SVG Gauges

The gauges I created use PHP to access Jean's Pachube data feed which updates every 2 minutes. I learned a lot about programming with PHP and created my own dynamic SVG gauges from scratch for this project.

I used Adobe Illustrator to create the vector based artwork for the gauges. I saved the design in the SVG format.

I then wrote the PHP code for the Solar Dashboard from using the TextWrangler text editing program and used the MAMP apache server software for local testing and debugging.

The Solar Dashboard PHP script downloads the most recent data from Pachube and dynamically generates new SVG files based upon the artwork I created in my original SVG template. PHP variables are used to update the labels and change the vector shapes of the SVG gauges every time a GET request is made.

I also added some subtle SVG animation elements that are visible when the power levels change on the Power Dashboard. The kilowatts gauge has the needle animate between the previous value and the latest value and the 2 minute usage change gauge has the rising and falling usage arrows animate with changing red or blue colors.

Here are two gif-a-mations of the SVG gauges that show the animating SVG properties. The 2 Min Change gauge has been sped up quite a bit to illustrate its animation features:

Notes About SVG Audio Support

I was a little disappointed with the support in Firefox and Google Chrome for SVG audio. I wanted a sound effect to be played when the graphing time scale buttons were clicked. In my testing I noticed that Opera was the only web browser that would properly play an .ogg sound file that was "xlinked" using the SVG <audio> tag.

<audio xlink:href="click.ogg" audio-level="0.7" type="application/ogg" begin="0s" repeatCount="0"/>

I was really surprised at how terrible Internet Explorer's support is for SVG artwork. This is especially evident if you try and place an SVG image on a webpage using an iframe!

Summary

I am really happy with the overall results from the Villa Azul Solar Dashboard project. I learned quite a bit about the process of interfacing a low cost microcontroller with the internet.

3 Responses to “Monitoring A Solar Hot Water System Over the Internet”

1. Robert says:

   September 12, 2011 at 5:34 pm

   Nice looking dashboard.

   What IDE/package did you use to help create the dials and gauges?
   Great work
   Cheers
2. Andrew says:

   September 12, 2011 at 7:39 pm

   Hi Robert.

   Thanks for your comments. I just added some details about the process of creating of the gauges to the article.
3. JP says:

   March 28, 2012 at 10:55 pm

   Andrew, I keep finding gems on your blog. I've added a link from the DM friends and links page. Great work, it would be sweet to have you design a php/svg/web based mission control center for drones operating on tcp/ip and mavlink! oh the future