Page 1 of 1
Adding a 24 hour trend to the display
Posted: Fri 15 Oct 2021 12:14 am
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
Re: Adding a 24 hour trend to the display
Posted: Tue 19 Oct 2021 1:30 pm
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
Re: Adding a 24 hour trend to the display
Posted: Tue 19 Oct 2021 9:14 pm
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)
Re: Adding a 24 hour trend to the display
Posted: Tue 19 Oct 2021 10:07 pm
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!
Re: Adding a 24 hour trend to the display
Posted: Wed 20 Oct 2021 12:31 am
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
Re: Adding a 24 hour trend to the display
Posted: Wed 20 Oct 2021 4:06 pm
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
Re: Adding a 24 hour trend to the display
Posted: Wed 20 Oct 2021 5:27 pm
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> <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>",
Re: Adding a 24 hour trend to the display
Posted: Wed 20 Oct 2021 10:11 pm
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
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 !!
Re: Adding a 24 hour trend to the display
Posted: Wed 20 Oct 2021 10:45 pm
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>
Re: Adding a 24 hour trend to the display
Posted: Wed 20 Oct 2021 11:01 pm
by beteljuice
... but where / how is the html script getting the values to work with in the first place

Re: Adding a 24 hour trend to the display
Posted: Thu 04 Nov 2021 1:52 pm
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>

Re: Adding a 24 hour trend to the display
Posted: Thu 04 Nov 2021 2:12 pm
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
Re: Adding a 24 hour trend to the display
Posted: Thu 04 Nov 2021 3:01 pm
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.
Thank you very much