Web Tag IsRaining in HTML

[Ken22]

IsRaining returns either a 0 or 1.

Is it possible on my index.htm to convert this to either a "Yes" or "No"?

I know just enough about HTML to get myself in trouble.

[freddie]

You'll need some javascript.

[Ken22]

You'll need some javascript.

I don't know how to do that.

[De Hout]

Something like this will do.

Replace the #IsRaining webtag in your index.htm with the code below.

Code: Select all

<div id="RainStatus"></div>
<script>
	let rain = '#IsRaining';

	if (rain === '0') {
		rain = 'No';
	} else {
		rain = 'Yes';
	}

	document.getElementById("RainStatus").innerText = rain;
</script>

[Ken22]

Replace the #IsRaining webtag in your index.htm with the code below.

I seem to be missing something here. Here is what I have tried:

Code: Select all

<span data-cmxdata="IsRaining"></span>
ZZZ
<div id="RainStatus"></div>
<script>
	let rain = '#IsRaining';
	rain = '0';
	if (rain === '0') {
		rain = 'No';
	} else if (rain === '1') {
		rain = 'Yes';
	} else {
		rain = 'Error'
	}
	document.getElementById("RainStatus").innerText = rain;
</script>

*** This produces:
0 ZZZ
No

---------------------------------
<span data-cmxdata="IsRaining"></span>
ZZZ
<div id="RainStatus"></div>
<script>
	let rain = '#IsRaining';
	if (rain === '0') {
		rain = 'No';
	} else if (rain === '1') {
		rain = 'Yes';
	} else {
		rain = 'Error'
	}
	document.getElementById("RainStatus").innerText = rain;
</script>

***  This produces:
0 ZZZ
Error

-----------------------------------------------
<span data-cmxdata="IsRaining"></span>
ZZZ
<div id="RainStatus"></div>
<script>
	let rain = <span data-cmxdata="IsRaining"></span>;
	if (rain === '0') {
		rain = 'No';
	} else if (rain === '1') {
		rain = 'Yes';
	} else {
		rain = 'Error'
	}
	document.getElementById("RainStatus").innerText = rain;
</script>

***  This produces:
0 ZZZ
---------------------------------------------
<span data-cmxdata="IsRaining"></span>
ZZZ
<div id="RainStatus"></div>
<script>
	let rain = data-cmxdata="IsRaining";
	if (rain === '0') {
		rain = 'No';
	} else if (rain === '1') {
		rain = 'Yes';
	} else {
		rain = 'Error'
	}
	document.getElementById("RainStatus").innerText = rain;
</script>

***  This produces:
0 ZZZ

There must be something I'm missing here. To access WebTags in my HTML file I need to use the data-cmxdata="WebTag" construct. The #WebTag doesn't seem to work on my system.

Any clarification would be appreciated.

[mcrossley]

You cannot use #IsRaining in a JavaScript, the old way of doing it would be to use the web tag <#IsRaining>.

The new web site loads all the data into an object called "cmx_data".

To access IsRaining you would use

Code: Select all

let rain = cmx_data.IsRaining;

Or just use cmx_data.IsRaining rather than assigning it to the variable "rain" then using that.

[Ken22]

The new web site loads all the data into an object called "cmx_data".
To access IsRaining you would use

Code: Select all

let rain = cmx_data.IsRaining;

Still not working:

Code: Select all

<span data-cmxdata="IsRaining"></span>
ZZZ
<div id="RainStatus"></div>
<script>
	let rain = cmx_data.IsRaining;
	if (rain === '0') {
		rain = 'No';
	} else if (rain === '1') {
		rain = 'Yes';
	} else {
		rain = 'Error'
	}
	document.getElementById("RainStatus").innerText = rain;
</script>
XXX

Produces the following output:

0 ZZZ
XXX

[mcrossley]

We need to see a link to the test page please.

[De Hout]

My initial code contains an error. The webtag should be <#IsRaining>

Code: Select all

<div id="RainStatus"></div>
<script>
	rain = '<#IsRaining>';

	if (rain === '0') {
		rain = 'No';
	} else {
		rain = 'Yes';
	}

	document.getElementById("RainStatus").innerText = rain;
</script>

This script works on my webserver, although I have tested it with <#IsSunUp> instead of <#IsRaining> which is not a valid webtag for Cumulus 1.
Or do webtags work differently with CMX?

[mcrossley]

Or do webtags work differently with CMX?

The web tags work the same, but the pages are constructed differently - they are no longer all processed and uploaded like C1.

[Ken22]

We need to see a link to the test page please.

https://www.klevitt.us/Cumulus/

[Ken22]

Starting at line 113.

[mcrossley]

Ah, your script will execute immediately.

You need the script to wait until the cmx_data object has been populated with the data.

The data load is encapsulated in a promise, so something like this (untested) should work

Code: Select all

$(document).ready(function() {
	dataLoadedPromise.then(function() {
		let rain = cmx_data.IsRaining === '0' ? 'No' : 'Yes' ;
		document.getElementById("RainStatus").innerText = rain;
	});
});

[Ken22]

so something like this (untested) should work

Yes, it works perfectly.

Your help is greatly appreciated.

My page is now perfect until I think of some new way to make it better.