https://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&feed=atom&action=historyWebtags as boolean operators in HTML - Revision history2024-03-28T15:58:29ZRevision history for this page on the wikiMediaWiki 1.38.4https://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&diff=4416&oldid=prevSaratogaWX: Text replacement - "http://sandaysoft.com/forum/" to "https://cumulus.hosiene.co.uk/"2018-11-02T16:00:40Z<p>Text replacement - "http://sandaysoft.com/forum/" to "https://cumulus.hosiene.co.uk/"</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 16:00, 2 November 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l32">Line 32:</td>
<td colspan="2" class="diff-lineno">Line 32:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> }</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> }</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>and it is then instructed not to show the table row.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>and it is then instructed not to show the table row.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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 [[<del style="font-weight: bold; text-decoration: none;">http</del>://<del style="font-weight: bold; text-decoration: none;">sandaysoft</del>.<del style="font-weight: bold; text-decoration: none;">com/forum</del>/viewtopic.php?f=14&t=9985&sid=f7ba680a73fbeccc0c18523515fac384| forum]] for more information.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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 [[<ins style="font-weight: bold; text-decoration: none;">https</ins>://<ins style="font-weight: bold; text-decoration: none;">cumulus</ins>.<ins style="font-weight: bold; text-decoration: none;">hosiene.co.uk</ins>/viewtopic.php?f=14&t=9985&sid=f7ba680a73fbeccc0c18523515fac384| forum]] for more information.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Rising/Falling ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Rising/Falling ==</div></td></tr>
</table>SaratogaWXhttps://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&diff=2909&oldid=prevSfws: /* Rising/Falling */ Restoring the missing words/symbols that prevented this section making sense!2013-08-22T21:01:02Z<p><span dir="auto"><span class="autocomment">Rising/Falling: </span> Restoring the missing words/symbols that prevented this section making sense!</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 21:01, 22 August 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l35">Line 35:</td>
<td colspan="2" class="diff-lineno">Line 35:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Rising/Falling ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Rising/Falling ==</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Webtags#Current_Conditions | <#temptrendenglish> and <#presstrendenglish> contain one of a few predefined values. They can be treated as boolean for a modification of say [[Customised_templates | indexT.htm]] because the HTML can <del style="font-weight: bold; text-decoration: none;">test </del>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'''. <del style="font-weight: bold; text-decoration: none;">These </del>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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Webtags#Current_Conditions | <#temptrendenglish> and <#presstrendenglish><ins style="font-weight: bold; text-decoration: none;">]] </ins>contain one of a few predefined values. They can be treated as boolean for a modification of say [[Customised_templates | indexT.htm]] because the HTML can <ins style="font-weight: bold; text-decoration: none;">select a different image </ins>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'''. <ins style="font-weight: bold; text-decoration: none;">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.</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">The images mentioned </ins>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Changing the whole web page ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Changing the whole web page ==</div></td></tr>
</table>Sfwshttps://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&diff=2908&oldid=prevSfws: /* New extremes */2013-08-22T20:54:12Z<p><span dir="auto"><span class="autocomment">New extremes</span></span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 20:54, 22 August 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l16">Line 16:</td>
<td colspan="2" class="diff-lineno">Line 16:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_blue<#LowMaxTempRecordSet>.png" alt="O" />Lowest Daily Maximum</th></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_blue<#LowMaxTempRecordSet>.png" alt="O" />Lowest Daily Maximum</th></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_red<#HighTempRangeRecordSet>.png" alt="O" >Largest Daily Range</th></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_red<#HighTempRangeRecordSet>.png" alt="O" >Largest Daily Range</th></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>(again inclusion/exclusion of the slash at the end of the img element varies between HTML versions, both variants acceptable to HTML5 are shown here)</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>(again inclusion/exclusion of the <ins style="font-weight: bold; text-decoration: none;">space and </ins>slash at the end of the img element varies between HTML versions, both variants acceptable to HTML5 are shown here)</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Current Weather Conditions ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Current Weather Conditions ==</div></td></tr>
</table>Sfwshttps://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&diff=2907&oldid=prevSfws: /* Alarms */2013-08-22T20:53:22Z<p><span dir="auto"><span class="autocomment">Alarms</span></span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 20:53, 22 August 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l8">Line 8:</td>
<td colspan="2" class="diff-lineno">Line 8:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <img src="bell_<#DataStopped>.png"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <img src="bell_<#DataStopped>.png"></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>NOTE: Some versions of HTML would require slightly different syntax</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>NOTE: Some versions of HTML would require slightly different syntax <ins style="font-weight: bold; text-decoration: none;">(note space before slash)</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <img src="bell_<#DataStopped>.png" /></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <img src="bell_<#DataStopped>.png" /></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>but both will work in the latest HTML5.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>but both will work in the latest HTML5.</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== New extremes ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== New extremes ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>An easy modification to [[Customised_templates | 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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>An easy modification to [[Customised_templates | 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.</div></td></tr>
</table>Sfwshttps://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&diff=2643&oldid=prevSfws: /* Current Weather Conditions */2013-05-23T10:04:34Z<p><span dir="auto"><span class="autocomment">Current Weather Conditions</span></span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 10:04, 23 May 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22">Line 22:</td>
<td colspan="2" class="diff-lineno">Line 22:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <tr class="check<#currcond>"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <tr class="check<#currcond>"></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <td>Current<del style="font-weight: bold; text-decoration: none;"><br></del>weather:</td></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <td>Current weather:</td></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <td><#currcond></h2></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <td><#currcond></h2></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <td><small>(manually typed into Cumulus interface)</small></td></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <td><small>(manually typed into Cumulus interface)</small></td></div></td></tr>
</table>Sfwshttps://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&diff=2642&oldid=prevSfws: /* New extremes */ added note about slash variants2013-05-23T10:03:19Z<p><span dir="auto"><span class="autocomment">New extremes: </span> added note about slash variants</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 10:03, 23 May 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l15">Line 15:</td>
<td colspan="2" class="diff-lineno">Line 15:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_blue<#LowMaxTempRecordSet>.png" alt="O" />Lowest Daily Maximum</th></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_blue<#LowMaxTempRecordSet>.png" alt="O" />Lowest Daily Maximum</th></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_red<#HighTempRangeRecordSet>.png" alt="O" >Largest Daily Range</th></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <th><img src="led_red<#HighTempRangeRecordSet>.png" alt="O" >Largest Daily Range</th></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">(again inclusion/exclusion of the slash at the end of the img element varies between HTML versions, both variants acceptable to HTML5 are shown here)</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Current Weather Conditions ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Current Weather Conditions ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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 [[Webtags#Miscellaneous | <#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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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 [[Webtags#Miscellaneous | <#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.</div></td></tr>
</table>Sfwshttps://www.cumuluswiki.org/index.php?title=Webtags_as_boolean_operators_in_HTML&diff=2641&oldid=prevSfws: New page with examples of how webtags can vary content on web page2013-05-23T10:00:58Z<p>New page with examples of how webtags can vary content on web page</p>
<p><b>New page</b></p><div>[[Category:WebTips]]<br />
=Introduction=<br />
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.<br />
HyperText Mark-up Language is for describing the content of a web page.<br />
Combine these two ideas and you can vary what is included on your web page.<br />
=Examples=<br />
== Alarms ==<br />
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.<br />
<img src="bell_<#DataStopped>.png"><br />
NOTE: Some versions of HTML would require slightly different syntax<br />
<img src="bell_<#DataStopped>.png" /><br />
but both will work in the latest HTML5.<br />
== New extremes ==<br />
An easy modification to [[Customised_templates | 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.<br />
<th><img src="led_blue<#LowMaxTempRecordSet>.png" alt="O" />Lowest Daily Maximum</th><br />
<th><img src="led_red<#HighTempRangeRecordSet>.png" alt="O" >Largest Daily Range</th><br />
== Current Weather Conditions ==<br />
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 [[Webtags#Miscellaneous | <#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.<br />
So sometimes ''<#currcond> and <#currcondenc>'' will contain some text, other times the <#currcond> will be empty (null), and therefore HTML can test for null.<br />
<br />
<tr class="check<#currcond>"><br />
<td>Current<br>weather:</td><br />
<td><#currcond></h2><br />
<td><small>(manually typed into Cumulus interface)</small></td><br />
</tr><br />
If it is null, the browser will look for the CSS class '''check''' in the related [[Stylesheets]]:<br />
.check {<br />
display: none;<br />
}<br />
and it is then instructed not to show the table row.<br />
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 [[http://sandaysoft.com/forum/viewtopic.php?f=14&t=9985&sid=f7ba680a73fbeccc0c18523515fac384| forum]] for more information.<br />
<br />
== Rising/Falling ==<br />
[[Webtags#Current_Conditions | <#temptrendenglish> and <#presstrendenglish> contain one of a few predefined values. They can be treated as boolean for a modification of say [[Customised_templates | indexT.htm]] because the HTML can test 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'''. These 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.<br />
<br />
== Changing the whole web page ==<br />
[[Webtags#Day.2FNight.2FSun.2FMoon | <#isdaylight>, <#IsSunUp>, <#IsSunny> ]] and [[Webtags#Current_Conditions | <#IsFreezing>]] are examples of Cumulus boolean webtags that might be used to change the look of your web page.<br />
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.<br />
<link rel="Stylesheet" href="css/weather<#IsSunUp>.css"><!-- <#IsSunUp> links to a Cascading Style Sheet (CSS) for formatting information, uses name ending in 1 for daylight and sheet name ending in 0 for nighttime, allowing subtle changes in colours --></div>Sfws