Extra gauge on website

[G6GUH]

I now have an extra temperature sensor in the green house, data is sent via an additional Davis 6332OV transmitter (same as iss transmitter). Data can be seen on the dashboard under extra sensor1, I would like to be able to display that data on my website. Can it be done and if so Help please!.
I and using the latest Cumulus MX release build 4028.

Any help appreciated.

Thanks Pete

[HansR]

I now have an extra temperature sensor in the green house, data is sent via an additional Davis 6332OV transmitter (same as iss transmitter). Data can be seen on the dashboard under extra sensor1, I would like to be able to display that data on my website. Can it be done and if so Help please!.
I and using the latest Cumulus MX release build 4028.

Your title is about an extra gauge (not just display the value) so I will react to that: the gauges library (gauges.js) does not support two of the same gauges on a website/page.

Your webpage would contain a HTML code like below - taken from the interface - and you would call gauges.doTemp(this) to actually show the gauge. But there is no way of knowing for the gauges object to know which temperature gauge (if you would have two) it would need to handle. The gauges were not designed for multiple instances of the same gauge type.

Marks work stands for quite a few years now, but if you you like programming you might redesign the gauges to support multiple gauges of the same type and other features it contains. You would have to study the underlying steelseries libs. It is not an easy task and if I am mistaken no doubt somebody will correct me

I managed to have two sets of wind gauges on one site but they display the same wind data and effectively they are two instances of the same object so that is slightly different. And that also was not trivial.

Code: Select all

                <div class="dash-unit" style="height:310px">
                    <span class="dtitle">Temperature</span>
                    <hr>
                    <div class="cont">
                        <div id="tip_0">
                            <canvas id="canvas_temp" width="221" height="221"></canvas>
                        </div>
                        <input id="rad_temp1" type="radio" name="rad_temp" value="out" onclick="gauges.doTemp(this);" checked ><label id="lab_temp1" for="rad_temp1">Outside</label>
                        <input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label>
                    </div>
                </div>

[mcrossley]

It can be done - see my gauges page, I added an air quality gauge.

First edit the HTML and add the new structure for the guage:

Code: Select all

<div id="tip_12" class="gauge">
    <canvas id="canvas_aq" class="gaugeSizeStd" width="221" height="221" style="box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 3px; border-radius: 110px;"></canvas>
</div>

Make the outer div "tip_NN", unique.
Make the canvas id unique, and preferably relevant to the content - I used "canvas_aq" above.

Edit gauages.js

Around line 192 the gauge objects are declared. Add aonther one to the list, gaugeAQ in my case:

Code: Select all

        gaugeTemp, gaugeDew, gaugeRain, gaugeRRate,
        gaugeHum, gaugeBaro, gaugeWind, gaugeDir,
        gaugeUV, gaugeSolar, gaugeCloud, gaugeRose,
        gaugeAQ,

Create the new gauge code, I suggest copying something like the Wind gauge as it only has a single value. So locate the "singleWind" function declaration at line 1740. Copy that and rename the copy single<MYVALUE> with a meaningful name.

Change all the lines that refer to '#canvas_wind' to whatever you called the canvas id in the HTML, so '#canvas_aq' in my example above.

Then in that function you need to go through and change things like the default min/max value, set the title and unit.
You will want to look at the temperature "singleTemp" function for some ideas here.

Then in the update() sub function, change the data source values etc, and remove the updateGraph() function.

Now you can go back up to around line 486 and create an instance of the new guage.
Add a line (using my AQ example again:

Code: Select all

guageAQ = single<MYVALUE>.getInstance();

Done, a new working gauge, simples

[HansR]