JSON equivalents of some webtags

[martinu]

Are there JSON equivalents of these tags? I'm updating my web pages (as indexT.htm etc) to work with JSON in V4, because my pages scale to fit phones and tablets which the new ones don't - and also I hate the old-style digits (all different heights above the baseline) of the Rosario font Also I prefer separate buttons instead of a single link/button which leads to a drop-down of options, and a single multi-line tooltip on the graphs rather than lots of separate tooltips, one per line.

#tomorrowdaylength "There will be 2min 51s less daylight tomorrow" (or some equivalent for this information)

#MoonAge eg "Last new moon 22 days ago" (yes I know there are various algorithms that give slightly different results, but I can live with that imprecision)

#time format="zzz" - or some other way of displaying the current timezone as GMT+00:00 or GMT+01:00 depending on winter and summer time

#LastRainTip format="HH:mm 'on' d MMMM yyyy" - to display the last time it rained as a time as well as just a day, as I could do with CMX V3


(I posted this question yesterday but I can't find it so something may have gone wrong with the posting)

[martinu]

Also missing are <#intemp> and <#inhum>, the inside temperature and humidity. It is very disappointing to find that some values which I use on my CMX V3 site are missing from CMX4 - all the useful things like inside temperature, days since last new moon (I used that to select the correct moon image from a series that I obtained from somewhere which are better than the same photo with a crescent-shaped mask overlaid), accurate "last rained" date and time.

When I start on the rest of the web pages, I wonder what else I'll find has gone missing...

Ah well, as my cynical grandpa used to tell me "Progress is a vector quantity - it can go backwards as well as forwards"

[mcrossley]

I don't think anything from C1 is now missing from MX? Bar generating the graph image files. And so much more has been added.

All those web tags you mention are fully functional in MX:

<#intemp>
<#inhum>
<#MoonAge>
<#LastRainTip>
plus
<#LastRainTipISO>
<#MinutesSinceLastRainTip>

[martinu]

It's good to know that all the # webtags still exist (I thought it was very odd that any had been withdrawn). Now I need to know how to access them...

What are the JSON equivalents of the tags which aren't mentioned in https://www.cumuluswiki.org/a/WebsitedataT.json, since the new versions of the HTM files in the webfiles folder use the syntax <span data-cmxdata="location"></span> rather than the older <#location> syntax that was used with the indexT.htm template which was populated to index.htm? Or is there still a way of accessing values of old-style webtags which don't have a JSON equivalent? Is there a way of using a format qualifier with JSON tags, as there was with #-type webtags?

[mcrossley]

OK, I think you need to understand the differences between the C1 and the CMX default web sites.

With C1, the web tags were embedded on every page. So for each update all the pages had to be processed by Cumulus the change the web tags to values and then all the pages re-uploaded to your web site.

MX does it differently. All the data is contained in data file that is created from the websitedataT.json template file.

Just that one file now needs to be uploaded to your web server at each update, and it contains all the updated data.

Each page on your web site then reads the websitedata.json file, and extracts the values from it that correspond to the <span> parameter data-cmxdata="location". So for this example the script on the page would find the "location" value in the JSON file and then put that into the <span> element on your page. It does this for every span that contains a "cmxdata" parameter.

If you want to add new elements to a page that do not exist in the websitedataT.json file, then you will have to first add them to that file using the web tag just like all the others values in there.

So say you wanted to add the indoor temerature. You would add a value in the websitedataT.json of:

Code: Select all

"intemp": "<#intemp>",

Then on the page you wish to display the indoor temperature value you would add at the point you wish it appear:

Code: Select all

<span data-cmxdata="intemp"></span>

NOTE: When you update Cumulus MX. you do not want to overwrite any customisations you have made to websitedataT.json with the default file from the zip archive

[martinu]

Many thanks, Mark! That works perfectly. I fell into the trap of thinking that what was in the websitedata.json file (and was documented in https://www.cumuluswiki.org/a/WebsitedataT.json) was an exhaustive list of what was available from the Cumulus engine. I hadn't realised that any webtag (with formatting options if needed) can be added to websitedataT.json and hence gets populated with current values in websitedata.json. I'll uncomment the bits in my index.htm etc and add the JSON/webtag equivalences in websitedataT.json.

Easy, when you know how!

Yes, I'll need to keep my websitedataT.json safe so it doesn't get overwritten by a future update.

[martinu]

I've just got one remaining question - how to use a JSON value from websitedata.json in Javascript. It's a Javascript/CMX problem.

I have 28 images moon1.img to moon28.img and I want to display one whose value corresponds to MoonAge eg <img src=images/moon24.png">.

In CMX3, I used

Code: Select all

<img src="images/moon<#MoonAge>.png">

in indexT.htm because the tag was evaluated by CMX as it was generating index.htm, to "<img src="images/moon24.png">" for example.


I've got as far as using Javascript to evaluate a pathname which is passed by ID to the <img>, in the same way that you do for your moon image. My only stumbling block is knowing, syntactically, how to evaluate the <span data-cmxdata="MoonAge"></span> in the Javascript so I can concatenate it into the string:

Code: Select all

		<script>
			window.onload = () => {
				$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
				$('#MUmoonImg').attr('src', 'images/moon' + '24' + '.png' );		// THIS LINE
				// update the moon image every 20 minutes if the page is left open
				setInterval(() => {
					$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
				}, 1200000);
			};
		</script>

and

Code: Select all

<img id="MUmoonimg">

At present, for testing, I've hard-coded the value of MoonAge to 24 (as in "THIS LINE" in the code sample above), and that works perfectly when passed by ID "MUmoonMmg" to <img>. "All" I need is to plug in the relavant value from websitedata.json.

[mcrossley]

Assuming that you have added the age to the template file. Try:

Code: Select all

$(document).ready(function() {
	dataLoadedPromise.then(function() {
		$('#moonImg').attr('src', 'images/moon' + cmx_data.MoonAge + '.png');
		setInterval(() => {
			$('#moonImg').attr('src', 'images/moon' + cmx_data.MoonAge + '.png');
		}, 1200000);
	});
});

[martinu]

Brilliant! I knew there would be a way. Just a matter of learning the syntax. Thanks for your help.