Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4017) - 17 March 2024

Legacy Cumulus 1 release v1.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

Topics about the Beta trials up to Build 3043, the last build by Cumulus's founder Steve Loft. It was by this time way out of Beta but Steve wanted to keep it that way until he made a decision on his and Cumulus's future.

Moderator: mcrossley

Locked
Herbaldew
Posts: 113
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

Post 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
User avatar
steve
Cumulus Author
Posts: 26702
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

Post 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.
Steve
Herbaldew
Posts: 113
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

Post 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.

Image
User avatar
steve
Cumulus Author
Posts: 26702
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

Post 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.
Steve
Herbaldew
Posts: 113
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

Post 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"]]}
User avatar
steve
Cumulus Author
Posts: 26702
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

Post 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.
Steve
Herbaldew
Posts: 113
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

Post 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
sfws
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

Post by sfws »

(Deleted my suggestion)
Last edited by sfws on Wed 05 Sep 2018 6:45 pm, edited 1 time in total.
User avatar
steve
Cumulus Author
Posts: 26702
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

Post 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.
Steve
sfws
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

Post by sfws »

content deleted, due to subsequent response
Last edited by sfws on Fri 18 Mar 2022 6:22 pm, edited 1 time in total.
User avatar
steve
Cumulus Author
Posts: 26702
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

Post 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.
Steve
User avatar
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

Post 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! :D

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
You do not have the required permissions to view the files attached to this post.
Locked