Page 1 of 1
Add Extra Temp Value to Interface Page
Posted: Fri 31 Aug 2018 7:57 pm
by Herbaldew
I just added an extra temp sensor to my VP2 and have been trying to add it's value in a couple places on my interface pages. I see the temp listed as Sensor 1 under the Extra sensors link. I have not succeeded.
After reading many posts, I now wonder, is this even possible with a reasonable amount of effort? I'd rather not spend more time experimenting if it is not.
Thanks
Re: Add Extra Temp Value to Interface Page
Posted: Fri 31 Aug 2018 8:31 pm
by steve
It's possible, but you'll need to do a bit of work, and it will require some javascript knowledge. If you look at extrasensors.js, you'll see that it gets the extra temperature data with a call to api/extra/temp.json - if you put
http://localhost:8998/api/extra/temp.json into your browser (or use the MX IP address rather than localhost from a different computer) you'll see the format of the data returned. The extra sensors page uses a data table to display the result; to display individual values, you'll need to extract them from the returned data and then update a named 'span' in the html with them.
Re: Add Extra Temp Value to Interface Page
Posted: Sun 02 Sep 2018 3:37 pm
by Herbaldew
Thanks for the information.
I didn't figure out how to extract just the value of extra sensor 1 from that JSON.
I did figure out a way to put the value under my temp guage on my gauges page. It's ugly behind the scenes but looks nearly the same when viewing my gauge page. I already have Apache running so I can have pop up graphs on my interface pages. I made a htm with nothing but extra temp 1 on it and inserted it as an iframe under my temp gauges in my gauges page. This will have to do until/if I sort how to extract and use just the figure from the JSON.
Thanks again.
Re: Add Extra Temp Value to Interface Page
Posted: Sun 02 Sep 2018 4:29 pm
by steve
If you show the result of that json data call, I (or someone else more clever than me) should be able to show you the javascript to extract just the single value. It's probably as simple as indexing by zero - data[0] - if it's a simple row which is returned, I can't remember.
Re: Add Extra Temp Value to Interface Page
Posted: Sun 02 Sep 2018 4:32 pm
by Herbaldew
Code: Select all
{"data":[["Sensor 1","81.0","°F"],["Sensor 2","0.0","°F"],["Sensor 3","0.0","°F"],["Sensor 4","0.0","°F"],["Sensor 5","0.0","°F"],["Sensor 6","0.0","°F"],["Sensor 7","0.0","°F"],["Sensor 8","0.0","°F"],["Sensor 9","0.0","°F"],["Sensor 10","0.0","°F"]]}
Re: Add Extra Temp Value to Interface Page
Posted: Sun 02 Sep 2018 5:06 pm
by steve
I
think that if you have the above string in a variable called str, and you have an HTML span called extratemp, then the following javascript will do what you want:
Code: Select all
var jsonData = JSON.parse(str);
document.getElementById("extratemp").textContent=Math.trunc(jsonData.data[0][1]);
You can probably use jQuery instead of that second line, which would result in slightly simpler code, but the very nice Bordeaux blanc that I'm drinking is limiting my ability somewhat.
Re: Add Extra Temp Value to Interface Page
Posted: Wed 05 Sep 2018 4:53 pm
by Herbaldew
I initially had no luck getting this to do anything and moved on to trying to truncate numbers in my iframe method.
After figuring out how to truncate my numbers using said iframe method of getting extra temp 1 to display I came back to this to try to figure out how to do it "right".
I immediately notice "Math.trunc" which was my big stumbling block with the iframe method. I changed that to "Math.floor" (Math.trunc doesn't work in the version of Internet Explorer I was using to test).
It works perfectly but only if I add this line above the code you supplied:
Code: Select all
var str = {"data":[["Sensor 1","81.0","°F"],["Sensor 2","0.0","°F"],["Sensor 3","0.0","°F"],["Sensor 4","0.0","°F"],["Sensor 5","0.0","°F"],["Sensor 6","0.0","°F"],["Sensor 7","0.0","°F"],["Sensor 8","0.0","°F"],["Sensor 9","0.0","°F"],["Sensor 10","0.0","°F"]]}
Try as I might, I cannot figure out how to get the current JSON data into a string called "str" to use in place of this static data.
If you or anyone else could give me a nudge in the right direction it will be greatly appreciated.
Thanks again
Re: Add Extra Temp Value to Interface Page
Posted: Wed 05 Sep 2018 5:25 pm
by sfws
(Deleted my suggestion)
Re: Add Extra Temp Value to Interface Page
Posted: Wed 05 Sep 2018 5:42 pm
by steve
I don’t have my laptop with me so can’t easily look at the interface code to remind myself how it does it, but if you have a look at the javascript for the dashboard page, for example, you’ll see how it calls MX to get the json for its page into a variable.
Re: Add Extra Temp Value to Interface Page
Posted: Wed 05 Sep 2018 6:44 pm
by sfws
content deleted, due to subsequent response
Re: Add Extra Temp Value to Interface Page
Posted: Wed 05 Sep 2018 7:21 pm
by steve
Shouldn’t need to do that conversion, as it can be used in json format in this case. It’s simply the call to get the data using the URL that’s needed, and I just can’t remember how it’s done - probably uses ajax.
Re: Add Extra Temp Value to Interface Page
Posted: Wed 26 Jan 2022 11:50 pm
by whitling2k
No idea if you got anywhere with this - but I found your thread whilst trying to do the same. I must admit, there was a lot of head scratching going on, and failed attempts.
Anyway, the following HTML tag and script did the trick, and I now have the second sensor's readings appearing on my summary page to go alongside the (actually, much easier to produce) second sensor's trace on the chart. It feels quite a clean way to manage it to me, no additional libraries required (in a modern browser at least). I'm running it alongside my main cmx image to see if it works for a few weeks, before committing to my operational server.
The flexibility of CumulusMX just blows me away each time I learn something new!
These examples are for temperature. Change temp to hum in the json and tag for humidity etc.
js to go in <script> tag
Code: Select all
fetch("../api/extra/temp.json")
.then(Response => Response.json())
.then(data => {
var str = data;
var jsonData = JSON.parse(JSON.stringify(str));
document.getElementById("TempSensor2").textContent=(jsonData.data[0][1]);
});
Will set the TempSensor2 tag to the stripped value from the json. The HTML looks like:
Code: Select all
.. Rest of table, page etc layout
<td>Indoor Temperature 2</td>
<td><span id="TempSensor2">--</span></td>
<td><span class="TempUnit">--</span></td>
.. Rest of table, page etc layout
And in action:
Screenshot 2022-01-26 233853.jpg