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

Adding a 24 hour trend to the display

From build 3044 the development baton passed to Mark Crossley. Mark has been responsible for all the Builds since. He has made the code available on GitHub. It is Mark's hope that others will join in this development, but at the very least he welcomes your ideas for future developments (see Cumulus MX Development suggestions).

Moderator: mcrossley

Post Reply
inmyrvm
Posts: 44
Joined: Thu 19 Nov 2020 9:16 pm
Weather Station: Davis VP2
Operating System: Windows 10

Adding a 24 hour trend to the display

Post by inmyrvm »

In the previous version of MX I had some scripting code in my indexT.htm file that created a 24 hour trend of various parameters (temperature and dewpoint mainly). Here's what the code looked like:

<script>
diff = (<#RCtemp>*10 - <#RCRecentOutsideTemp d=1>*10) / 10;
if (diff > 0) {
diff = '+' + diff;
}
document.write(diff);
</script>

If I've read correctly it looks like I might have to add something to the WebsitedataT.json file to accomplish this task in the new version. But I'm not sure where to start or even how to edit the file. Can someone point me in the right direction?

Thanks!

Mike
inmyrvm
Posts: 44
Joined: Thu 19 Nov 2020 9:16 pm
Weather Station: Davis VP2
Operating System: Windows 10

Re: Adding a 24 hour trend to the display

Post by inmyrvm »

Still trying to figure this out. In the WebsitedataT.json file there is a setting for TempChangeLastHour which according to the Websitedata.json Wiki is defined as <#RecentOutsideTemp h=1>. But it doesn't say which file that <#RecentOutsideTemp h=1> is located. I'm thinking if I can add <#RecentOutsideTemp h=24> I could create a 24 hour trend and then add an entry in Websitedata.json to create a tag for that.

Can someone tell me where those # settings are found and if this seems like a reasonable way to create a 24 hour trend?

Thanks!

Mike
Cortmalaw
Posts: 92
Joined: Sat 26 Dec 2020 2:21 pm
Weather Station: Davis
Operating System: Raspbian
Location: Near Glasgow, Scotland, UK

Re: Adding a 24 hour trend to the display

Post by Cortmalaw »

Written as no-one else has replied - I'm not expert in this but this may get you started ...

The wiki isn't awfully clear, but it seems that <#RecentOutsideTemp h=1> is a standard webtag that you can 'process' like any other.

If you add a line somewhere in the file /opt/CumulusMX/web/websitedataT.json saying [substitute your /path/to/... . Note this filename is the Template with T at the end]

Code: Select all

"OutsideTempChange":"<#RecentOutsideTemp h=1>",
then the 'decoded' value will appear in /opt/CumulusMX/web/websitedata.json [that's without the 'T']

That should give you the temp change in last hour.

I'm not sure if it will work as temp change in last day if you change the parameter to h=24 (or maybe to d=1)
Cortmalaw
Posts: 92
Joined: Sat 26 Dec 2020 2:21 pm
Weather Station: Davis
Operating System: Raspbian
Location: Near Glasgow, Scotland, UK

Re: Adding a 24 hour trend to the display

Post by Cortmalaw »

I tried the above on my system.
Edited websitedataT.json to begin:

Code: Select all

{
"options":{
  "useApparent":"<#Option_useApparent>",
  "showSolar":"<#Option_showSolar>",
  "showUV":"<#Option_showUV>"
},

"OutsideTempChange":"<#RecentOutsideTemp h=1>",

"location":
then after waiting for the next 15 minute update, websitedata.json starts:

Code: Select all

{
"options":{
  "useApparent":"0",
  "showSolar":"0",
  "showUV":"0"
},

"OutsideTempChange":"14.2",

"location":
So it has worked OK, except that the value is not as expected. My Outside temp has decreased -1.1, not increased +14.2 in the last hour.
But that's a different problem and it's my fault - the webtag <#RecentOutsideTemp h=1> gives the outside temp 1 hour ago, not the change! I should pay more attention!

I then changed it to:

Code: Select all

"OutsideTemp1hAgo":"<#RecentOutsideTemp h=1>",
"OutsideTemp6hAgo":"<#RecentOutsideTemp h=6>",
"OutsideTemp24hAgo":"<#RecentOutsideTemp h=24>",
"OutsideTemp1dAgo":"<#RecentOutsideTemp d=1>",
and get:

Code: Select all

"OutsideTemp1hAgo":"13.6",
"OutsideTemp6hAgo":"15.6",
"OutsideTemp24hAgo":"14.2",
"OutsideTemp1dAgo":"14.2",
So hopefully this gives ideas how you can adjust the tag names and parameters etc!
inmyrvm
Posts: 44
Joined: Thu 19 Nov 2020 9:16 pm
Weather Station: Davis VP2
Operating System: Windows 10

Re: Adding a 24 hour trend to the display

Post by inmyrvm »

Thanks! I think we're moving in the right direction but not quite there. I did get the same results you did in the json file but after modifying the index.htm to put this in:

<td><span data-cmxdata="TempChangeLastDay"></span><span data-cmxdata="tempunit"></span></td>

I got "undefined" in place of what I was hoping was going to be a 24 hour trend. Do I need to define "TempChangeLastDay" somewhere? Or maybe do I just have to wait 24 hours?

Mike
Cortmalaw
Posts: 92
Joined: Sat 26 Dec 2020 2:21 pm
Weather Station: Davis
Operating System: Raspbian
Location: Near Glasgow, Scotland, UK

Re: Adding a 24 hour trend to the display

Post by Cortmalaw »

I think I can guess what's wrong.

Please can you attach:
  • the whole of your index.html file
  • the relevant part of your websitedataT.json file
inmyrvm
Posts: 44
Joined: Thu 19 Nov 2020 9:16 pm
Weather Station: Davis VP2
Operating System: Windows 10

Re: Adding a 24 hour trend to the display

Post by inmyrvm »

It wouldn't let me attach the index.htm so I just copied the only section that I modified. The websitedataT.json section is below that.


<tr class="w3-theme-l2">
<td>Temp change last hour</td>
<td><span data-cmxdata="TempChangeLastHour"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
<td>Temp 24 hours ago</td>
<td><span data-cmxdata="OutsideTemp1dAgo"></span><span data-cmxdata="tempunit"></span></td>
</tr>


"OutsideTemp1hAgo":"<#RecentOutsideTemp h=1>",
"OutsideTemp6hAgo":"<#RecentOutsideTemp h=6>",
"OutsideTemp24hAgo":"<#RecentOutsideTemp h=24>",
"OutsideTemp1dAgo":"<#RecentOutsideTemp d=1>",
"TempChangeLastHour":"<#TempChangeLastHour>",
"TempChangeLastDay":"<#TempChangeLastDay>",
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Adding a 24 hour trend to the display

Post by beteljuice »

Hi guys ...

A few pointers ....

In the json file

eg. "OutsideTemp1hAgo":"<#RecentOutsideTemp h=1>", // this creates a STRING value (because of "<#RecentOutsideTemp h=1> ")

For math purposes it is easier to remove the quotes here, rather than floatval() later.

You want to do some math and display the output - as you have worked out, the js script can determine if a (json) var is on a page and substitute a value.

It would be best to continue using that functionality, so you need to 'define' a new data object var. Regardless of the approach you need to get your hands dirty in the setpagedata.js file :shock:

Suppose that in websitedataT.json you have:

Code: Select all

"myTemp": <#RCtemp>,
"myTemp24hAgo": <#RCRecentOutsideTemp h=24>,
Now the devils work in setpagedata.js
You want to do some processing and create a new var before the 'display' routine.

Code: Select all

// look for let getPageData = function (resolve, reject) {
// this creates an object referenced like this myvalue = cmx_data.myname 

// here is the 'display' routine

		// Update all spans having data-cmxdata with data values
		$('[data-cmxdata]').each(function () {
			this.innerHTML = cmx_data[this.dataset.cmxdata];
		});

// At some point BEFORE that you need to put your logic and define the var.
var diff = cmx_data.myTemp - cmx_data.myTemp24hAgo;
cmx_data.myTemp24Diff = (diff ? '+' : '') + diff.toFixed(1);  // if you don't want leading +, just = diff.toFixed(1);

You should now have a new (formatted) value / varname cmx_data.myTemp24Diff

In your page html ...

Code: Select all

<td>Temp Change 24 h</td>
<td><span data-cmxdata="myTemp24Diff"></span><span data-cmxdata="tempunit"></span></td>
I think I've got that all right, but the philosophy is there !!
Last edited by beteljuice on Fri 22 Oct 2021 1:59 am, edited 3 times in total.
Image
......................Imagine, what you will KNOW tomorrow !
Cortmalaw
Posts: 92
Joined: Sat 26 Dec 2020 2:21 pm
Weather Station: Davis
Operating System: Raspbian
Location: Near Glasgow, Scotland, UK

Re: Adding a 24 hour trend to the display

Post by Cortmalaw »

Thanks beteljuice. I'm learning too!

Rather than things you are not familiar with in javascript, you could try using the values from the json, with your previous calculation routine in index.html

So in websitedataT.json, taking beteljuice's hint to remove the quotes to get numbers instead of strings:

Code: Select all

"OutsideTemp1dAgo":<#RecentOutsideTemp d=1>,
"TempChange1hAsNumber":<#TempChangeLastHour>,
"TempAsNumber":<#temp>,
then use a modification of your previous script in index.htm to do the calculation. As the numbers will all arrive as 1 decimal place, you should not need the multiply by 10 then divide by 10 later:

Code: Select all

<script>
diff = (TempAsNumber - OutsideTemp1dAgo);
if (diff > 0) {
diff = '+' + diff;
}
document.write(diff);
</script>
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Adding a 24 hour trend to the display

Post by beteljuice »

... but where / how is the html script getting the values to work with in the first place ;)
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
meteo19
Posts: 89
Joined: Tue 03 May 2016 8:13 pm
Weather Station: Davis VP2+/DP1500 SmartHub
Operating System: Microsoft Windows 7 Pro
Location: Ségur-Le-Château, France
Contact:

Re: Adding a 24 hour trend to the display

Post by meteo19 »

beteljuice wrote: Wed 20 Oct 2021 11:01 pm ... but where / how is the html script getting the values to work with in the first place ;)
Hello
And this solution:
<script>
<!-- Diff -->
diff = (cmx_data.myTemp*10 - cmx_data.myTemp24hAgo *10) / 10;
if (diff > 0) {
diff = '+' + diff;
}

document.getElementById('name').innerHTML = diff;
<!-- End Diff -->
</script>
:roll:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Adding a 24 hour trend to the display

Post by beteljuice »

As I implied earlier - script in the html page shouldn't work.
Regardless of the approach you need to get your hands dirty in the setpagedata.js file
This is because both (object) cmx_data.name or your variable defined within the 'grab' function stay there.
i.e. they cannot be 'seen' outside of the function.
You could pass your var outside of the function, but why bother ?

The other problem with script in the html page is that it doesn't know when setpagedata.js has completed - i.e. the data won't be available when it fires.

As I said, the safest way to get things done is to get your hands dirty in setpagedata.js
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
meteo19
Posts: 89
Joined: Tue 03 May 2016 8:13 pm
Weather Station: Davis VP2+/DP1500 SmartHub
Operating System: Microsoft Windows 7 Pro
Location: Ségur-Le-Château, France
Contact:

Re: Adding a 24 hour trend to the display

Post by meteo19 »

beteljuice wrote: Thu 04 Nov 2021 2:12 pm As I implied earlier - script in the html page shouldn't work.
Regardless of the approach you need to get your hands dirty in the setpagedata.js file
This is because both (object) cmx_data.name or your variable defined within the 'grab' function stay there.
i.e. they cannot be 'seen' outside of the function.
You could pass your var outside of the function, but why bother ?

The other problem with script in the html page is that it doesn't know when setpagedata.js has completed - i.e. the data won't be available when it fires.

As I said, the safest way to get things done is to get your hands dirty in setpagedata.js
Ok I understand but I put my hands in setpagedata.js the I got to the head and I will drown so I drop I would do the calculation with the head. :lol:

Thank you very much
Post Reply