Welcome to the Cumulus Support forum.
Latest Cumulus MX V4 release 4.0.1 (build 4023) - 16 May 2024
Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024
Legacy Cumulus 1 release 1.9.4 (build 1099) - 28 November 2014
(a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)
Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki
Latest Cumulus MX V4 release 4.0.1 (build 4023) - 16 May 2024
Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024
Legacy Cumulus 1 release 1.9.4 (build 1099) - 28 November 2014
(a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)
Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki
Add Extra Temp Value to Interface Page
Moderator: mcrossley
-
- Posts: 114
- Joined: Sun 12 Mar 2017 8:33 pm
- Weather Station: VP2+
- Operating System: Raspberry Pi OS (64-bit)
- Location: US Mid-Atlantic
Add Extra Temp Value to Interface Page
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
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
- steve
- Cumulus Author
- Posts: 26701
- Joined: Mon 02 Jun 2008 6:49 pm
- Weather Station: None
- Operating System: None
- Location: Vienne, France
- Contact:
Re: Add Extra Temp Value to Interface Page
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.
Steve
-
- Posts: 114
- Joined: Sun 12 Mar 2017 8:33 pm
- Weather Station: VP2+
- Operating System: Raspberry Pi OS (64-bit)
- Location: US Mid-Atlantic
Re: Add Extra Temp Value to Interface Page
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.
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.
- steve
- Cumulus Author
- Posts: 26701
- Joined: Mon 02 Jun 2008 6:49 pm
- Weather Station: None
- Operating System: None
- Location: Vienne, France
- Contact:
Re: Add Extra Temp Value to Interface Page
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.
Steve
-
- Posts: 114
- Joined: Sun 12 Mar 2017 8:33 pm
- Weather Station: VP2+
- Operating System: Raspberry Pi OS (64-bit)
- Location: US Mid-Atlantic
Re: Add Extra Temp Value to Interface Page
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"]]}
- steve
- Cumulus Author
- Posts: 26701
- Joined: Mon 02 Jun 2008 6:49 pm
- Weather Station: None
- Operating System: None
- Location: Vienne, France
- Contact:
Re: Add Extra Temp Value to Interface Page
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:
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.
Code: Select all
var jsonData = JSON.parse(str);
document.getElementById("extratemp").textContent=Math.trunc(jsonData.data[0][1]);
Steve
-
- Posts: 114
- Joined: Sun 12 Mar 2017 8:33 pm
- Weather Station: VP2+
- Operating System: Raspberry Pi OS (64-bit)
- Location: US Mid-Atlantic
Re: Add Extra Temp Value to Interface Page
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:
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
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"]]}
If you or anyone else could give me a nudge in the right direction it will be greatly appreciated.
Thanks again
-
- Posts: 1183
- Joined: Fri 27 Jul 2012 11:29 am
- Weather Station: Chas O, Maplin N96FY, N25FR
- Operating System: rPi 3B+ with Buster (full)
Re: Add Extra Temp Value to Interface Page
(Deleted my suggestion)
Last edited by sfws on Wed 05 Sep 2018 6:45 pm, edited 1 time in total.
- steve
- Cumulus Author
- Posts: 26701
- Joined: Mon 02 Jun 2008 6:49 pm
- Weather Station: None
- Operating System: None
- Location: Vienne, France
- Contact:
Re: Add Extra Temp Value to Interface Page
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.
Steve
-
- Posts: 1183
- Joined: Fri 27 Jul 2012 11:29 am
- Weather Station: Chas O, Maplin N96FY, N25FR
- Operating System: rPi 3B+ with Buster (full)
Re: Add Extra Temp Value to Interface Page
content deleted, due to subsequent response
Last edited by sfws on Fri 18 Mar 2022 6:22 pm, edited 1 time in total.
- steve
- Cumulus Author
- Posts: 26701
- Joined: Mon 02 Jun 2008 6:49 pm
- Weather Station: None
- Operating System: None
- Location: Vienne, France
- Contact:
Re: Add Extra Temp Value to Interface Page
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.
Steve
- whitling2k
- Posts: 31
- Joined: Thu 22 Jul 2021 8:03 pm
- Weather Station: Ecowitt GW1103
- Operating System: Raspberry PiOS
- Contact:
Re: Add Extra Temp Value to Interface Page
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
Will set the TempSensor2 tag to the stripped value from the json. The HTML looks like:
And in action:
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]);
});
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
You do not have the required permissions to view the files attached to this post.