Webtags as boolean operators in HTML

From Cumulus Wiki
Revision as of 16:00, 2 November 2018 by SaratogaWX (talk | contribs) (Text replacement - "http://sandaysoft.com/forum/" to "https://cumulus.hosiene.co.uk/")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

Introduction

Some Cumulus Webtags are boolean in that they will contain either 0 or 1. Others may be treated as boolean if you can test to see if their content is null or a pre-defined value. HyperText Mark-up Language is for describing the content of a web page. Combine these two ideas and you can vary what is included on your web page.

Examples

Alarms

All the Webtags#Alarms are boolean. Suppose you had an image of a bell ringing and gave it the filename bell_1.png. If a second image with the name bell_0.png showed someone asleep, then the following HTML code would pick the appropriate image relating to whether the weather station was communicating with Cumulus.

  <img src="bell_<#DataStopped>.png">

NOTE: Some versions of HTML would require slightly different syntax (note space before slash)

  <img src="bell_<#DataStopped>.png" />

but both will work in the latest HTML5.

New extremes

An easy modification to recordsT.htm is to add an image against each record that has just been updated with a new extreme. Again, you need two images perhaps looking like a light-emitting diode type indicator. In one image it would be off, in the other it would be coloured as if on. The next code extract uses two such pairs to place the right image beside the label, in this case grey for no new extreme, blue for a new minimum and red for a new maximum.

<img src="led_blue<#LowMaxTempRecordSet>.png" alt="O" />Lowest Daily Maximum <img src="led_red<#HighTempRangeRecordSet>.png" alt="O" >Largest Daily Range

(again inclusion/exclusion of the space and slash at the end of the img element varies between HTML versions, both variants acceptable to HTML5 are shown here)

Current Weather Conditions

The Cumulus main screen can optionally display a box for you to enter some text. It is labelled Current: and its contents are placed in <#currcond> and <#currcondenc>; unless a Currentconditions.txt file exists in which case the contents of that file go in the webtag and that file is deleted. So sometimes <#currcond> and <#currcondenc> will contain some text, other times the <#currcond> will be empty (null), and therefore HTML can test for null.

  <tr class="check<#currcond>">

Current weather: <#currcond> (manually typed into Cumulus interface) If it is null, the browser will look for the CSS class check in the related Stylesheets: .check { display: none; } and it is then instructed not to show the table row. Conversely, if current weather has been input, the browser will look at each word and try to find a matching class, assuming it fails to match any, it will take the default action of displaying the table row. See [forum] for more information.

Rising/Falling

<#temptrendenglish> and <#presstrendenglish> contain one of a few predefined values. They can be treated as boolean for a modification of say indexT.htm because the HTML can select a different image for each of the pre-defined values (steady, falling, rising), suitable images for <#presstrendenglish>.gif are in the folder webfiles\dbimages and include Falling.gif. They could be used to select different CSS files so giving the whole web page a look that varies for the different predefined trend values.

The images mentioned are already used by the javascript associated with the standard gaugesT.htm, but explaining scripting is outside the scope of an article concentrating on HTML.

Changing the whole web page

<#isdaylight>, <#IsSunUp>, <#IsSunny> and <#IsFreezing> are examples of Cumulus boolean webtags that might be used to change the look of your web page. This requires rather more HTML and CSS expertise than the other examples, but you could write 2 sets of Stylesheets and tell your HTML to pick which one (weather0.css or weather1.css) to use with code something like this.

  <link rel="Stylesheet" href="css/weather<#IsSunUp>.css">