add sauce

.gitignore

@@ -0,0 +1,2 @@
+data/
+.vscode/

css/colours.css

@@ -0,0 +1,40 @@
+/*	-------------------------------------------------------------------
+ * 	Colours for the CumulusMX Alternative Interface
+ * 	Produced using w3Schools colour generator
+ *
+ * 	Key Colour: #4e5b31
+ *
+ * 	Theme modified to change font 'color's to either lightest or darkest
+ * 	theme colour.  Also modified names for text, borders & hover colours.
+ * 	I have added a few extras. Not all are used.
+ * 	Neil Thomas
+	------------------------------------------------------------------*/
+
+/*	Check that your theme is named as shown  below */
+
+.w3-theme-white {color:#2e5473; background-color:#FFFFFF;}
+.w3-theme-l5 {color:#2e5473; background-color:#f7fafc;}
+.w3-theme-l4 {color:#2e5473; background-color:#e4edf4;}
+.w3-theme-l3 {color:#2e5473 ; background-color:#c9dbe9;}
+.w3-theme-l2 {color:#2e5473 ; background-color:#aec9df;}
+.w3-theme-l1 {color:#2e5473 ; background-color:#93b7d4;}
+.w3-theme-d1 {color:#f7fafc ; background-color:#6195c0;}
+.w3-theme-d2 {color:#f7fafc ; background-color:#4a86b7;}
+.w3-theme-d3 {color:#f7fafc ; background-color:#4075a1;}
+.w3-theme-d4 {color:#f7fafc ; background-color:#37658a;}
+.w3-theme-d5 {color:#f7fafc ; background-color:#2e5473;}
+
+.w3-theme-light {color:#2e5473 ; background-color:#f7fafc;}
+.w3-theme-dark {color:#f7fafc ; background-color:#2e5473;}
+.w3-theme-action {color:#f7fafc ; background-color:#2e5473;}
+
+.w3-theme {color:#f7fafc ; background-color:#78a5c9;}
+.w3-theme-txt {color:#78a5c9;}
+.w3-theme-bdr {border-color:#78a5c9;}
+.w3-theme-d5-bdr {border-color:#2e5473;}
+.w3-theme-l1-bdr {border-color:#f7fafc;}
+
+.w3-theme-hvr:hover {color:#f7fafc; background-color:#78a5c9;}
+.w3-theme-d5-hvr:hover {color:#f7fafc; background-color:#2e5473;}
+.w3-theme-txt-hvr:hover {color:#78a5c9;}
+.w3-theme-bdr-hvr:hover {border-color:#78a5c9;}

css/mx-templates.css

@@ -0,0 +1,249 @@
+/*	-----------------------------------
+ * 	Styles for CumulusMX Templates
+ Last modified: 2021/03/19 09:23:15
+ * 	----------------------------------*/
+
+html,
+body,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+td,
+th {
+  font-family: "Rosario", sans-serif;
+}
+
+p {
+  font-size: 15px;
+}
+
+#Header {
+  border-style: solid;
+  border-width: 0 0 10px 0;
+}
+
+.site-width {
+  max-width: 1140px;
+  margin: auto;
+}
+
+.graph-width {
+  max-width: 1250px;
+  margin: auto;
+}
+
+#Footer {
+  border-width: 5px 0 0 0;
+  border-style: solid;
+}
+
+.logo {
+  max-width: 250px;
+  margin: 5px 0 5px 16px;
+}
+
+.subText {
+  font-size: 80% !important;
+  font-weight: 400;
+}
+
+body {
+  background-image: url("../images/picture.jpg");
+  background-position: bottom left;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+.statusPanel h5 {
+  margin-bottom: -5px;
+}
+/*	-------------------------------------
+ * 	Flex boxes
+ * 	-------------------------------------*/
+.at-flex-start {
+  display: flex;
+}
+.at-flex-end {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.at-flex-justify {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.at-flex-between {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.at-flex-bottom,
+.at-flex-items-bottom {
+  align-items: flex-end;
+}
+
+.at-flex-items-center {
+  align-items: center;
+}
+
+/*	--------------------------------------------------
+ * 	Menu enhancements
+ * 	--------------------------------------------------*/
+#Main_Menu {
+  margin-bottom: 4px;
+  border-width: 2px 0 0 0;
+  border-style: solid;
+  min-height: 32px;
+}
+
+.at-slim {
+  padding: 4px 14px !important;
+}
+
+.at-divider {
+  margin: 0 5px;
+  color: #f80;
+}
+
+.at-spacer {
+  min-height: 2em;
+}
+
+.at-menu-lable {
+  display: block;
+  width: 100%;
+  font-size: 13px;
+  font-style: italic;
+  padding-bottom: 2px !important;
+  padding-top: 4px !important;
+  border-bottom: 1px dotted #c2cfa5 !important;
+}
+
+.at-menu-bar {
+  display: block;
+  height: 2px;
+  padding: 0 2px !important;
+}
+
+.at-indent {
+  padding-left: 40px !important;
+}
+
+/*	-------------------------------
+ * 	Model enhancements
+ * 	------------------------------*/
+
+.w3-modal-content {
+  margin-top: 10%;
+  border-radius: 8px;
+}
+
+.w3-modal header {
+  border-radius: 8px 8px 0 0;
+}
+.w3-modal footer {
+  border-radius: 0 0 8px 8px;
+}
+.w3-modal .w3-btn {
+  border-radius: 0 8px;
+}
+
+/* 	----------------------------------------
+ * 	Media enhancements
+ * 	---------------------------------------*/
+@media screen and (max-width: 780px) {
+  #Footer {
+    position: unset;
+  }
+  #Content {
+    /*margin-top: 170px!important;*/
+    margin-bottom: 5px !important;
+  }
+
+  .statusPanel {
+    text-align: center !important;
+    margin: auto !important;
+  }
+}
+
+@media screen and (max-height: 768px) {
+  #Footer {
+    position: unset;
+    item: center;
+  }
+  #Content {
+    margin-bottom: 5px !important;
+  }
+}
+
+/*	--------------------------------------
+ * 	LED enhancements
+ * 	-------------------------------------*/
+.at-led-round {
+  display: inline-block;
+  height: 1.2em;
+  width: 1.2em;
+  margin: 0 0.5em -3px 0.5em;
+  border-radius: 50%;
+  background-color: #888;
+  box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6),
+    inset -2px -2px 2px rgba(32, 32, 32, 0.6);
+}
+
+.at-led-block {
+  display: inline-block;
+  height: 1.2em;
+  width: 1.2em;
+  margin: 0 0.5em -3px 0.5em;
+  background-color: #888;
+  box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6),
+    inset -2px -2px 2px rgba(32, 32, 32, 0.6);
+}
+
+.at-led-brick {
+  display: inline-block;
+  height: 0.8em;
+  width: 1.6em;
+  margin: 0 0.5em -3px 0.5em;
+  background-color: #888;
+  box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6),
+    inset -2px -2px 2px rgba(32, 32, 32, 0.6);
+}
+.at-led-oval {
+  display: inline-block;
+  height: 1em;
+  width: 2em;
+  margin: 0 0.5em -3px 0.5em;
+  border-radius: 50%;
+  background-color: #888;
+  box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6),
+    inset -2px -2px 2px rgba(32, 32, 32, 0.6);
+}
+
+.at-led-green {
+  background-color: #0b0;
+}
+
+.at-led-flash-red {
+  animation: flashR 1s infinite;
+}
+
+@keyframes flashR {
+  0%,
+  60% {
+    background-color: #f00;
+  }
+  61%,
+  100% {
+    background-color: #800;
+  }
+}

css/w3Pro.css

@@ -0,0 +1,247 @@
+/* W3PRO.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section {
+  display: block;
+}
+summary {
+  display: list-item;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+progress {
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  background-color: transparent;
+}
+a:active,
+a:hover {
+  outline-width: 0;
+}
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+dfn {
+  font-style: italic;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+figure {
+  margin: 1em 40px;
+}
+img {
+  border-style: none;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+button,
+input,
+select,
+textarea,
+optgroup {
+  font: inherit;
+  margin: 0;
+}
+optgroup {
+  font-weight: bold;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+textarea {
+  overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+/* End extract */
+html,
+body {
+  font-family: Verdana, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+}
+html {
+  overflow-x: hidden;
+}
+h1 {
+  font-size: 36px;
+}
+h2 {
+  font-size: 30px;
+}
+h3 {
+  font-size: 24px;
+}
+h4 {
+  font-size: 20px;
+}
+h5 {
+  font-size: 18px;
+}
+h6 {
+  font-size: 16px;
+}
+.w3-serif {
+  font-family: serif;
+}
+.w3-sans-serif {
+  font-family: sans-serif;
+}
+.w3-cursive {
+  font-family: cursive;
+}
+.w3-monospace {
+  font-family: monospace;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Segoe UI", Arial, sans-serif;
+  font-weight: 400;
+  margin: 10px 0;
+}
+.w3-wide {
+  letter-spacing: 4px;
+}
+hr {
+  border: 0;
+  border-top: 1px solid #eee;
+  margin: 20px 0;
+}
+.w3-image {
+  max-width: 100%;
+  height: auto;
+}
+img {
+  vertical-align: middle;
+}
+a {
+  color: inherit;
+}

css/wah.css

@@ -0,0 +1,184 @@
+:root {
+  --background: #f2efbd;
+  --background-dim: #d2d0a4;
+  --foreground: #2a271c;
+  --border-color: #f27405;
+  --border: var(--border-color) 2px solid;
+  --shadow-color: hsla(11, 96%, 43%, 0.4);
+  --shadow: drop-shadow(8px 8px var(--shadow-color));
+  --shadow-small: drop-shadow(3px 3px var(--shadow-color));
+  --links: hsl(183, 93%, 27%);
+  --links-hover: hsl(183, 93%, 15%);
+  --table-header: hsla(11, 96%, 43%, 0.2);
+}
+
+html {
+  height: 100%;
+  color-scheme: light;
+}
+
+body {
+  color: var(--foreground);
+  min-height: 100%;
+  background-color: hsla(0, 0%, 0%, 0);
+  padding: 10px;
+  font-family: serif;
+}
+
+/*noinspection CssUnknownTarget*/
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-image: url("/images/background.jpg");
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0.8;
+  background-size: cover;
+  background-attachment: fixed;
+  overflow: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+p,
+ul,
+ol,
+dl,
+menu,
+dir {
+  margin: 0;
+}
+
+hr {
+  border: none;
+  border-top: var(--border);
+}
+
+a {
+  color: var(--links);
+  text-decoration: underline dotted;
+}
+
+a:hover {
+  color: var(--links-hover);
+  text-decoration: underline solid;
+}
+
+div.page-container {
+  /* width: 1000px; */
+  width: 800px;
+  margin: 5px auto;
+}
+
+div.page-container > div {
+  background-color: var(--background);
+  filter: var(--shadow);
+  padding: 10px;
+  border: var(--border);
+  margin-bottom: 20px;
+  /* temporary */
+  /* height: 600px; */
+}
+
+div.page-container > div:last-child {
+  margin-bottom: 0;
+}
+
+div#header h1 {
+  margin: 0;
+  font-style: italic;
+}
+
+div#header h1,
+div#header p {
+  display: inline;
+}
+
+div#content {
+  position: relative;
+}
+
+div#content::after {
+  display: block;
+  content: "";
+  clear: both;
+}
+
+div#footer {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  align-items: center;
+}
+
+div#footer div:last-child {
+  text-align: right;
+}
+
+div#footer div:last-child img {
+  image-rendering: pixelated;
+  margin: 0;
+  padding: 0;
+  width: 88px;
+  height: 31px;
+}
+
+/* -------------------------------------------------------------------------- */
+
+table.almanac td:nth-child(odd) {
+  font-weight: bold;
+}
+
+table.almanac td {
+  padding: 0 10px;
+}
+
+table.almanac td:nth-child(even) {
+  padding: 0 15px;
+}
+
+table.almanac {
+  min-width: 100%;
+}
+
+table.conditions-now {
+  border-collapse: collapse;
+  border: var(--border);
+  filter: var(--shadow-small);
+  background-color: var(--background);
+}
+
+table.conditions-now th {
+  text-align: left;
+  background-color: var(--background-dim);
+  border-top: var(--border);
+}
+
+table.conditions-now tr td,
+table.conditions-now tr th {
+  padding: 5px 10px 5px 5px;
+}
+table.conditions-now tr td:nth-child(2) {
+  padding-right: 40px;
+}
+
+table.conditions-now tr td:nth-child(odd) {
+  font-weight: bold;
+}
+
+table.conditions-now tr:last-child td:nth-child(3) {
+  font-weight: normal;
+  font-style: italic;
+}

gauges.htm

@@ -0,0 +1,328 @@
+<!--
+	gauges.htm	v:0.0.2		a:Neil Thomas
+	Last modified: 2022/07/18 15:17:24
+	CMX Template page: Gauges, No sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="weather data">
+	<meta name="keywords" content="Cumulus, weather, data, weather station">
+	<title>Cumulus MX</title>
+	<link rel="icon" type="image/png" href="images/favicon.png">
+
+	<!--	jQuery Local	-->
+	<script src="lib/jquery/jquery-latest.min.js"></script>
+
+	<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+	<link rel="preconnect" href="https://fonts.gstatic.com">
+	<link
+		href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap"
+		rel="stylesheet">
+
+	<!--	All Styles	-->
+	<link href="css/w3Pro.css" rel="stylesheet"> <!--	Basic w3shools responsive styles	-->
+	<link href="css/colours.css" rel="stylesheet"> <!--	Slightly enhanced w3schools colours	-->
+	<link href="css/mx-templates.css" rel="stylesheet"> <!--	Specific styles for these templates.	-->
+	<link href="css/gauges.css" rel="stylesheet"> <!--	Stylesheet specifically for the gauges	-->
+
+	<!--	Scripts	-->
+	<script src="js/setpagedata.js"></script> <!--	Utility javascripts for all pages.	-->
+</head>
+
+<body>
+	<!--	Page Header	-->
+	<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+		<div class="w3-row-padding site-width">
+			<div class="at-flex-between at-flex-items-center">
+				<img src="images/CumulusMX-Logo.png" alt="Cumulus Logo" class="w3-image logo">
+				<div class="w3-right-align" style="max-width:600px;">
+					<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span
+							class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span
+							data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span
+							class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+				</div>
+			</div>
+			<!--	Main Menu	-->
+			<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr" style="min-height:32px;">
+			</div>
+			<!--	Mobile Mneu	-->
+			<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide-large w3-hide">
+			</div>
+		</div>
+	</div>
+	<!--	Start of page content	-->
+	<div id="Content" class="site-width w3-theme-light">
+		<div class="w3-row-padding">
+			<div class="w3-col s12">
+				<div class="w3-container">
+					<div class="at-flex-between at-flex-items-center">
+						<h1>Gauges <span class="subText"></span></h1>
+						<div class="container" style="max-width: 450px;">
+							<div style="width:200px;height:25px;display:inline-block;"><canvas id="canvas_status"
+									width="200" height="25"></canvas></div>
+							<div style="width:60px; display:inline-block"><canvas id="canvas_timer" width="60"
+									height="25"></canvas></div>
+							<div style="display:inline-block;margin-bottom:3px;">Status: <canvas id="canvas_led"
+									style="width:25px;height:25px;margin-bottom:-7px;" width="25" height="25"></canvas>
+							</div>
+						</div>
+						<div class="w3-bar" style="max-width:200px;">
+							<button class="w3-bar-item w3-btn w3-theme-hvr w3-right at-slim"
+								onClick="showModal('MXmodal');">Units</button>
+							<div class="w3-dropdown-hover w3-right">
+								<button class="w3-btn w3-theme-hvr at-slim">Gauge Options</button>
+								<div id="Options" class="w3-dropdown-content w3-bar-block w3-theme-l1">
+									<div class="w3-bar-item at-slim at-menu-label w3-small w3-theme-l3 w3-center">
+										Temperature</div>
+									<div class="w3-bar-item at-slim"><input id="rad_temp1" type="radio" class="w3-radio"
+											name="rad_temp" value="out" checked onclick="gauges.doTemp(this);"><label
+											id="lab_temp1" for="rad_temp1">Outside</label></div>
+									<div class="w3-bar-item at-slim"><input id="rad_temp2" type="radio" class="w3-radio"
+											name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label
+											id="lab_temp2" for="rad_temp2">Inside</label></div>
+									<div class="w3-bar-item at-slim at-menu-label w3-small w3-theme-l3 w3-center">Other
+										Temps</div>
+									<div class="w3-bar-item at-slim"><input id="rad_dew1" type="radio" name="rad_dew"
+											class="w3-radio" value="dew" checked onclick="gauges.doDew(this);"><label
+											id="lab_dew1" for="rad_dew1">Dew Point</label></div>
+									<div class="w3-bar-item at-slim w3-hide" data-cmx-apparent><input id="rad_dew2"
+											type="radio" name="rad_dew" class="w3-radio" value="app"
+											onclick="gauges.doDew(this);"><label id="lab_dew2"
+											for="rad_dew2">Apparent</label></div>
+									<div class="w3-bar-item at-slim" data-cmx-feels><input id="rad_dew6" type="radio"
+											name="rad_dew" class="w3-radio" value="feel"
+											onclick="gauges.doDew(this);"><label id="lab_dew6" for="rad_dew6">Feels
+											Like</label></div>
+									<div class="w3-bar-item at-slim"><input id="rad_dew3" type="radio" name="rad_dew"
+											class="w3-radio" value="wnd" onclick="gauges.doDew(this);"><label
+											id="lab_dew3" for="rad_dew3">Wind Chill</label></div>
+									<div class="w3-bar-item at-slim"><input id="rad_dew4" type="radio" name="rad_dew"
+											class="w3-radio" value="hea" onclick="gauges.doDew(this);"><label
+											id="lab_dew4" for="rad_dew4">Heat Index</label></div>
+									<div class="w3-bar-item at-slim"><input id="rad_dew5" type="radio" name="rad_dew"
+											class="w3-radio" value="hum" onclick="gauges.doDew(this);"><label
+											id="lab_dew5" for="rad_dew5">Humidex</label></div>
+									<div class="w3-bar-item at-slim at-menu-label w3-small w3-theme-l3 w3-center">
+										Humidity</div>
+									<div class="w3-bar-item at-slim"><input id="rad_hum1" type="radio" name="rad_hum"
+											class="w3-radio" value="out" checked onclick="gauges.doHum(this);"><label
+											id="lab_hum1" for="rad_hum1">Outside</label></div>
+									<div class="w3-bar-item at-slim"><input id="rad_hum2" type="radio" name="rad_hum"
+											class="w3-radio" value="in" onclick="gauges.doHum(this);"><label
+											id="lab_hum2" for="rad_hum2">Inside</label></div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!--	Row Two - All Gauges	-->
+		<div class="w3-row-padding">
+			<div class="w3-col s12">
+				<div class="w3-panel w3-card w3-theme-white">
+					<!--	The following html can be copied into ANY single panel page - template -->
+					<div style="display:flex; flex-flow: row wrap; justify-content:space-evenly">
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Temperature</h5>
+							<div class="gauge w3-center">
+								<div id="tip_0">
+									<canvas id="canvas_temp" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Other Temps</h5>
+							<div class="gauge w3-center">
+								<div id="tip_1">
+									<canvas id="canvas_dew" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+						</div>
+						<div class="w3-panel  w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Humidity</h5>
+							<div class="gauge w3-center">
+								<div id="tip_4">
+									<canvas id="canvas_hum" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Wind</h5>
+							<div id="tip_6" class="gauge w3-center">
+								<canvas id="canvas_wind" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Wind Direction</h5>
+							<div id="tip_7" class="gauge w3-center">
+								<canvas id="canvas_dir" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Wind Rose</h5>
+							<div id="tip_10" class="gauge w3-center">
+								<canvas id="canvas_rose" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Pressure</h5>
+							<div id="tip_5" class="gauge w3-center">
+								<canvas id="canvas_baro" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Rainfall</h5>
+							<div id="tip_2" class="gauge w3-center">
+								<canvas id="canvas_rain" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5 class="">Rainfall Rate</h5>
+							<div id="tip_3" class="gauge w3-center">
+								<canvas id="canvas_rrate" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div data-cmx-uv-gauge class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5>UV Radiation</h5>
+							<div id="tip_8" class="gauge w3-center">
+								<canvas id="canvas_uv" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div data-cmx-solar-gauge class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5>Solar</h5>
+							<div id="tip_9" class="gauge w3-center">
+								<canvas id="canvas_solar" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+						<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+							<!--	dial	-->
+							<h5>Cloudbase</h5>
+							<div id="tip_11" class="gauge w3-center">
+								<canvas id="canvas_cloud" class="gaugeSmall"></canvas>
+							</div>
+						</div>
+					</div>
+					<!--	End of Gauges HTML	-->
+				</div>
+			</div>
+		</div>
+	</div>
+	<!--	Start of footer	-->
+	<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+		<div class="w3-row-padding site-width">
+			<div class="at-flex-between at-flex-bottom" style="flex-wrap:nowrap;">
+				<p class="w3-small"><em>Cumulus MX Templates by Neil&nbsp;Thomas&nbsp;
+						<script>document.write(new Date().getFullYear());</script>
+					</em></p>
+				<p class="w3-small w3-center" style="max-width:500px;">
+					<em>scripts by mark crossley - version <span id="scriptVer"></span> gauges drawn using gerrit
+						grunwald's steelseries javascript library, wind rose drawn using rgraph</em>
+				</p>
+				<p class="w3-right">Powered by <span class="w3-theme-txt">CumulusMX</span>&nbsp;v:<span
+						data-cmxdata="version">---</span>,&nbsp;b:<span data-cmxdata="build">---</span></p>
+			</div>
+		</div>
+	</div>
+	<!--	Modal	-->
+	<div id="MXmodal" class="w3-modal w3-hide at-theme-modal">
+		<div class="w3-modal-content w3-round-large" style="margin-top:10%; max-width:500px;">
+			<header class="w3-container w3-theme-dark" style="border-radius:8px 8px 0 0;">
+				<span onclick="showModal('MXmodal')" class="w3-btn w3-theme-hvr w3-display-topright"
+					style="border-radius: 0 8px 0 8px;">&times;</span>
+				<h3>Gauge Units</h3>
+			</header>
+			<div class="w3-row-padding w3-theme-white">
+				<div class="w3-panel">
+					<div class="w3-col l3 m3 s5"><span class="lang_temparature">Temperature</span>:</div>
+					<div class="w3-col l2 m3 s3"><input id="rad_unitsTemp1" type="radio" class="w3-radio"
+							name="rad_unitsTemp" value="C" checked onclick="gauges.setUnits(this);"><label
+							id="lab_unitsTemp1" for="rad_unitsTemp1">&deg;C</label></div>
+					<div class="w3-rest"><input id="rad_unitsTemp2" type="radio" class="w3-radio" name="rad_unitsTemp"
+							value="F" onclick="gauges.setUnits(this);"><label id="lab_unitsTemp2"
+							for="rad_unitsTemp2">&deg;F</label></div>
+
+					<div class="w3-col l3 m3 s5"><span id="lang_rainfall">Rainfall</span></div>
+					<div class="w3-col l2 m3 s3"><input id="rad_unitsRain1" type="radio" class="w3-radio"
+							name="rad_unitsRain" value="mm" checked onclick="gauges.setUnits(this);"><label
+							id="lab_unitsRain1" for="rad_unitsRain1">mm</label></div>
+					<div class="w3-rest"><input id="rad_unitsRain2" type="radio" class="w3-radio" name="rad_unitsRain"
+							value="in" onclick="gauges.setUnits(this);"><label id="lab_unitsRain2"
+							for="rad_unitsRain2">Inch</label></div>
+
+					<div class="w3-col l3 m3 s5"><span id="lang_pressure">Pressure</span></div>
+					<div class="w3-col l2 m2 s3"><input id="rad_unitsPress1" type="radio" class="w3-radio"
+							name="rad_unitsPress" value="hPa" checked onclick="gauges.setUnits(this);"><label
+							id="lab_unitsPress1" for="rad_unitsPress1">hPa</label></div>
+					<div class="w3-col l2 m2 s4"><input id="rad_unitsPress2" type="radio" class="w3-radio"
+							name="rad_unitsPress" value="inHg" onclick="gauges.setUnits(this);"><label
+							id="lab_unitsPress2" for="rad_unitsPress2">inHg</label></div>
+					<div class="w3-col s5 w3-hide-large w3-hide-medium">&nbsp;</div>
+					<div class="w3-col l2 m2 s3"><input id="rad_unitsPress3" type="radio" class="w3-radio"
+							name="rad_unitsPress" value="mb" onclick="gauges.setUnits(this);"><label
+							id="lab_unitsPress3" for="rad_unitsPress3">mb</label></div>
+					<div class="w3-col l2 m3 s4"><input id="rad_unitsPress4" type="radio" class="w3-radio"
+							name="rad_unitsPress" value="kPa" onclick="gauges.setUnits(this);"><label
+							id="lab_unitsPress4" for="rad_unitsPress4">kPa</label></div>
+
+					<div class="w3-col l3 m3 s5"><span id="lang_windSpeed">Wind Speed</span></div>
+					<div class="w3-col l2 m2 s3"><input id="rad_unitsWind4" type="radio" class="w3-radio"
+							name="rad_unitsWind" value="km/h" checked onclick="gauges.setUnits(this);"><label
+							id="lab_unitsWind4" for="rad_unitsWind4">km/h</label></div>
+					<div class="w3-col l2 m2 s4"><input id="rad_unitsWind3" type="radio" class="w3-radio"
+							name="rad_unitsWind" value="m/s" onclick="gauges.setUnits(this);"><label id="lab_unitsWind3"
+							for="rad_unitsWind3">m/s</label></div>
+					<div class="w3-col s5 w3-hide-medium w3-hide-large">&nbsp;</div>
+					<div class="w3-col l2 m2 s3"><input id="rad_unitsWind1" type="radio" class="w3-radio"
+							name="rad_unitsWind" value="mph" onclick="gauges.setUnits(this);"><label id="lab_unitsWind1"
+							for="rad_unitsWind1">mph</label></div>
+					<div class="w3-col l3 m3 s4"><input id="rad_unitsWind2" type="radio" class="w3-radio"
+							name="rad_unitsWind" value="kts" onclick="gauges.setUnits(this);"><label id="lab_unitsWind2"
+							for="rad_unitsWind2">knots</label></div>
+
+					<div class="w3-col l3 m3 s5"><span id="lang_cloudbase">Cloud Base</span></div>
+					<div class="w3-col l2 m2 s3"><input id="rad_unitsCloudBase1" type="radio" class="w3-radio"
+							name="rad_unitsCloud" value="m" checked onclick="gauges.setUnits(this);"><label
+							id="lab_unitsCloudBase1" for="rad_unitsCloudBase1">m</label></div>
+					<div class="w3-col l7 m7 s4"><input id="rad_unitsCloudBase2" type="radio" class="w3-radio"
+							name="rad_unitsCloud" value="ft" onclick="gauges.setUnits(this);"><label
+							id="lab_unitsCloudBase2" for="rad_unitsCloudBase2">ft</label></div>
+				</div>
+			</div>
+			<footer class="w3-container w3-theme-dark" style="border-radius: 0 0 8px 8px;">
+				<p class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span></p>
+			</footer>
+		</div>
+	</div>
+	<script>
+		var showModal = function (modalID) {
+			$('#' + modalID).toggleClass('w3-show', 'w3-hide');
+		};
+	</script>
+	<!-- Combined steelseries.js & tween.js -->
+	<script src="lib/steelseries/scripts/steelseries_tween.min.js"></script>
+	<!-- Once you have customised this scripts to your requirements you should minimise
+			and concatenate them into a single file in the same order  as below -->
+	<script src="lib/steelseries/scripts/language.min.js"></script>
+	<script src="lib/steelseries/scripts/gauges.js"></script>
+	<!--Optional Wind Rose scripts -->
+	<script src="lib/steelseries/scripts/RGraph.common.core.min.js"></script>
+	<script src="lib/steelseries/scripts/RGraph.rose.min.js"></script>
+</body>
+
+</html>

historic.htm

@@ -0,0 +1,112 @@
+<!--
+	historic.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2023/02/10 14:48:26
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">		<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+		<style>
+			#chartcontainer  {
+				min-height: 550px;
+				margin-top:16px;
+				margin-bottom: 16px;
+			}
+			.mx-button {
+				margin-bottom: 5px;
+				border-radius: 4px;
+			}
+			.graphs-width {
+				max-width:1250px;
+				margin: auto
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Charts based on summary data</h1>
+					<h3 class="w3-center w3-hide">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	First Row	-->
+				<div class="w3-col s12">	<!--	Main column of first row	-->
+					<div class="w3-panel w3-card w3-theme-white">
+						<figure>
+							<div id="chartcontainer"></div>
+						</figure>
+					</div>
+				</div>	<!--	End of first column of first row	-->
+			</div>
+			<div class="w3-row-padding w3-theme-light graphs-width">
+				<div class="w3-col s12">
+					<div class="w3-container w3-panel w3-center">
+						<div class="w3-bar w3-center">
+							<button id="btnTemp"    class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('temp');">Temperature</button>
+							<button id="btnPress"   class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('press');">Pressure</button>
+							<button id="btnWind"    class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('wind');">Winds</button>
+							<button id="btnHum"     class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('humidity');">Humidity</button>
+							<button id="btnRain"    class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('rain');">Rainfall</button>
+							<button id="btnSolar"   class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('solar');">Solar Radiation</button>
+							<button id="btnDegDay"  class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('degday');">Degree Days</button>
+							<button id="btnTempSum" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('tempsum');">Temp Sum</button>
+						</div>
+						<p>Mouse over the chart to see the values at any given time.
+						You can add or remove data sets from the chart by clicking the entry on the chart legend.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+		<script src="https://code.highcharts.com/stock/10.3.3/highstock.js"></script>
+		<script src="https://code.highcharts.com/stock/10.3.3/modules/exporting.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/export-data.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/accessibility.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/boost.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/themes/grid.js"></script>
+		<script src="js/historiccharts.js"></script>
+	</body>
+</html>

index.php

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="weather data">
+	<meta name="keywords" content="Cumulus, weather, data, weather station">
+	<title>Cumulus MX</title>
+	<link rel="icon" type="image/png" href="images/favicon.png">
+
+	<script src="lib/jquery/jquery-latest.min.js"></script>
+
+	<!--	All Styles	-->
+	<link href="css/wah.css" rel="stylesheet"> <!--	Specific styles for these templates.	-->
+
+	<!--	Scripts	-->
+	<script src="js/setpagedata.js"></script> <!--	Utility javascripts for all pages.	-->
+	<script>
+		window.onload = () => {
+			$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
+			// update the moon image every 20 minutes if the page is left open
+			setInterval(() => {
+				$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
+			}, 1200000);
+		};
+	</script>
+</head>
+
+<body>
+	<div class="page-container">
+		<div id="header">
+			<h1>wah's the weather?</h1>
+			<nav>
+				<strong>Pages:</strong>
+				<a href="/">now</a> |
+				<a href="">today</a> |
+				<a href="">yesterday</a> |
+				<a href="">today-yest</a> |
+				<a href="">gauges</a> |
+				<a href="">records</a> |
+				<a href="">charts</a> |
+				<a href="">reports</a>
+			</nav>
+		</div>
+		<div id="content">
+			<h3>Almanac</h3>
+			<table class="almanac">
+				<tbody>
+					<tr>
+						<td>Dawn:</td>
+						<td><span data-cmxdata="dawn"></span></td>
+						<td>Sun Rise:</td>
+						<td><span data-cmxdata="sunrise"></span></td>
+						<td>Moon Rise:</td>
+						<td><span data-cmxdata="moonrise"></span></td>
+						<td rowspan="3" style="width:75px; height: 75px; padding:0"><img id="moonImg"
+								src="images/moon.png" alt="Moon" width="75" height="75" class="w3-image" />Visible <span
+								data-cmxdata="MoonPercentAbs"></span>%
+						</td>
+					</tr>
+					<tr>
+						<td>Dusk:</td>
+						<td><span data-cmxdata="dusk"></span></td>
+						<td>Sun Set:</td>
+						<td><span data-cmxdata="sungaugeset"></span></td>
+						<td>Moon Set:</td>
+						<td><span data-cmxdata="moonset"></span></td>
+					</tr>
+					<tr>
+						<td>Daylight:</td>
+						<td><span data-cmxdata="daylightlength"></span></td>
+						<td>Day Length:</td>
+						<td><span data-cmxdata="daylength"></span></td>
+						<td>Moon Phase:</td>
+						<td><span id="moonPhase" data-cmxdata="moonphase"></span></td>
+					</tr>
+				</tbody>
+			</table>
+			<br><br>
+			<h3>Conditions at local time <span data-cmxdata="time"></span></h3>
+			<table class="conditions-now">
+				<tr>
+					<th colspan="4">Temperature and Humidity</th>
+				</tr>
+				<tr>
+					<td>Temperature</td>
+					<td><span data-cmxdata="temp"></span>&nbsp;<span data-cmxdata="tempunit"></span>
+					</td>
+					<td>Dew Point</td>
+					<td><span data-cmxdata="dew"></span>&nbsp;<span data-cmxdata="tempunit"></span>
+					</td>
+				</tr>
+				<tr>
+					<td>Windchill</td>
+					<td><span data-cmxdata="wchill"></span>&nbsp;<span data-cmxdata="tempunit"></span>
+					</td>
+					<td>Humidity</td>
+					<td><span data-cmxdata="hum"></span>&nbsp;%</td>
+				</tr>
+				<tr>
+					<td>Heat Index</td>
+					<td><span data-cmxdata="heatindex"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+					<td><span data-cmx-feels>Feels
+							Like</span></td>
+					<td><span data-cmx-feels data-cmxdata="feelslike"></span>&nbsp;<span data-cmxdata="tempunit"></span>
+					</td>
+				</tr>
+				<tr>
+					<td>Temp change last hour</td>
+					<td><span data-cmxdata="TempChangeLastHour"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+					<td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<th colspan="4">Rainfall</th>
+				</tr>
+				<tr>
+					<td>Rainfall Today</td>
+					<td><span data-cmxdata="rfall"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+					</td>
+					<td>Rainfall Rate</td>
+					<td><span data-cmxdata="rrate"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr
+					</td>
+				</tr>
+				<tr>
+					<td>Rainfall This Month</td>
+					<td><span data-cmxdata="rmonth"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+					</td>
+					<td>Rainfall This Year</td>
+					<td><span data-cmxdata="ryear"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+					</td>
+				</tr>
+				<tr>
+					<td>Rainfall Last Hour</td>
+					<td><span data-cmxdata="rhour"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+					</td>
+					<td>Last rainfall</td>
+					<td><span data-cmxdata="LastRainTip"></span></td>
+				</tr>
+				<tr>
+					<td>Rainfall Since Midnight</td>
+					<td><span data-cmxdata="rmidnight"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+					<td>Rainfall Last 24 Hours</td>
+					<td><span data-cmxdata="r24hour"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+					</td>
+				</tr>
+				<tr>
+					<th colspan="4">Wind</th>
+				</tr>
+				<tr>
+					<td>Wind Speed <span class="subText">(gust)</span></td>
+					<td><span data-cmxdata="wgust"></span>&nbsp;<span data-cmxdata="windunit"></span>
+					</td>
+					<td>Wind Speed <span class="subText">(avg)</span></td>
+					<td><span data-cmxdata="wspeed"></span>&nbsp;<span data-cmxdata="windunit"></span>
+					</td>
+				</tr>
+				<tr>
+					<td>Wind Bearing</td>
+					<td><span data-cmxdata="avgbearing"></span>&deg; <span data-cmxdata="wdir"></span>
+					</td>
+					<td>Beaufort <span data-cmxdata="beaufort"></span></td>
+					<td><span data-cmxdata="beaudesc"></span></td>
+				</tr>
+				<tr>
+					<td>Wind Variation <span class="subText">(last 10 minutes)</span></td>
+					<td colspan="3">From <span data-cmxdata="BearingRangeFrom"></span>&deg; to <span
+							data-cmxdata="BearingRangeTo"></span>&deg;</td>
+				</tr>
+				<tr>
+					<th colspan="4">Pressure <span class="subText">(sea
+							level)</span></th>
+				</tr>
+				<tr>
+					<td>Barometer</td>
+					<td><span data-cmxdata="press"></span>&nbsp;<span data-cmxdata="pressunit"></span>
+					</td>
+					<td><span data-cmxdata="presstrend"></span></td>
+					<td><span data-cmxdata="presstrendval"></span>&nbsp;<span data-cmxdata="pressunit"></span>/hr</td>
+				</tr>
+			</table>
+		</div>
+		<div id="footer">
+			<div>
+				<span>
+					&copy; floppydisk 2021-2024
+				</span>
+			</div>
+			<div>
+				<span>
+					Powered by Cumulus MX v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span>
+				</span>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>

js/alltimerecdata.js

@@ -0,0 +1,40 @@
+// Last modified: 2021/03/19 09:15:55
+
+
+$.getJSON("data/websitedata.json", function (json) {
+    console.log("success");
+    var cmx_data = json;
+
+    $(document).prop('title', cmx_data['cmx-location'] + ' weather');
+    $('meta[name=description]').attr('content', cmx_data['cmx-location'] + ' weather data');
+    $('meta[name=keywords]').attr('content', $('meta[name=keywords]').attr('content') + ', ' + cmx_data['cmx-location'] + ' weather data');
+
+    $.getJSON("data/alltimerecdata.json", function (json) {
+        console.log("success");
+        Object.keys(json).forEach(key => {
+            cmx_data[key] = json[key];
+        });
+
+        // Update all spans with id beginning "cmx-"
+        $('span[id^=cmx-]').each(function () {
+            this.innerHTML = cmx_data[this.id];
+        });
+        // Update all spans with class beginning "cmx-"
+        $('span[class^=cmx-]').each(function () {
+            this.innerHTML = cmx_data[this.className];
+        });
+    })
+        .fail(function (jqxhr, textStatus, error) {
+            var err = textStatus + ", " + error;
+            console.log("Request Failed: " + err);
+        });
+
+
+})
+    .fail(function (jqxhr, textStatus, error) {
+        var err = textStatus + ", " + error;
+        console.log("Request Failed: " + err);
+    });
+
+$(document).ready(function () {
+});

js/menu.js

@@ -0,0 +1,36 @@
+/*
+ Menu configuration file for NEW CuMX template
+ Last modified: 2022/07/05 11:39:38
+ menu.js - typical name, you define the one used in setpagedata.js
+
+ It is STRONGLY RECOMMENDED that if you customise this file, you create a new file with a different name, e.g. mymenu.js
+ and change setpagedata.js to use that file. This will avoid your customisations being accidentally overwritten during upgrades
+
+ Properties:
+   .menu             - can be 'b' (both menus), 'w' (wide menu ONLY), 'n' (narrow menu ONLY)
+   .new_window:true  - forces the link to open in new browser window
+   .forum:true       - flags a forum link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+   .webcam:true      - flags a webcam link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+*/
+
+menuSrc = [
+	{title: "Now",          menu: "b",    url: "index.htm"},
+	{title: "Today",        menu: "b",    url: "today.htm"},
+	{title: "Yesterday",    menu: "b",    url: "yesterday.htm"},
+	{title: "Today-Yest",   menu: "b",    url: "todayyest.htm"},
+	{title: "Gauges",       menu: "b",    url: "gauges.htm"},
+	{title: "Records",      menu: "b",    submenu: true,       items: [
+		{title: "This Month",        menu: "b",    url: "thismonth.htm"},
+		{title: "This Year",         menu: "b",    url: "thisyear.htm"},
+		{title: "All Time",          menu: "b",    url: "record.htm"},
+		{title: "Monthly",           menu: "b",    url: "monthlyrecord.htm"}
+	]},
+	{title: "Charts",    menu: "b",    submenu: true,    items: [
+		{title: "Trends",            menu: "b",    url: "trends.htm"},
+		{title: "Select-a-graph",    menu: "b",    url: "selectachart.htm"},
+		{title: "Historic",          menu: "b",    url: "historic.htm"}
+	]},
+	{title: "Reports",   menu: "b",    url: "noaareport.htm"},
+	{title: "Forum",     menu: "b",    url: "#",    forum: true,    new_window: true},
+	{title: "Webcam",    menu: "b",    url: "#",    webcam: true}
+];

js/menuSample.js

@@ -0,0 +1,44 @@
+/*
+ An example extended/modified Menu configuration file for NEW CuMX template
+ Last modified: 2021/03/19 09:17:14
+ menuSample.js - typical name, you define the one used in setpagedata.js
+
+ Properties:
+   .menu             - can be 'b' (both menus), 'w' (wide menu ONLY), 'n' (narrow menu ONLY)
+   .new_window:true  - forces the link to open in new browser window
+   .forum:true       - flags a forum link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+   .webcam:true      - flags a webcam link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+*/
+
+menuSrc = [
+	{ title: "Now", menu: "b", url: "index.htm" },
+	{ title: "Today", menu: "b", url: "today.htm" },
+	{ title: "Yesterday", menu: "b", url: "yesterday.htm" },
+	{ title: "Gauges", menu: "b", url: "gauges.htm" },
+	{
+		title: "Records", menu: "b", submenu: true, items: [
+			{ title: "This Month", menu: "b", url: "thismonth.htm" },
+			{ title: "This Year", menu: "b", url: "thisyear.htm" },
+			{ title: "All Time", menu: "b", url: "record.htm" },
+			{ title: "Monthly", menu: "b", url: "monthlyrecord.htm" }
+		]
+	},
+	{
+		title: "Charts", menu: "b", submenu: true, items: [
+			{ title: "Trends", menu: "b", url: "trends.htm" },
+			{ title: "Select-a-graph", menu: "b", url: "selectachart.htm" },
+			{ title: "Historic", menu: "b", url: "historic.htm" }
+		]
+	},
+	{ title: "Reports", menu: "b", url: "noaareport.htm" },
+	{ title: "Forum", menu: "n", url: "#", new_window: true },
+	{ title: "Webcam", menu: "n", url: "#", new_window: true },
+	{
+		title: "Other Links", menu: "w", submenu: true, items: [
+			{ title: "Cumulus Forum", menu: "w", url: "#", forum: true, new_window: true },
+			{ title: "Webcam", menu: "b", url: "#", webcam: true, new_window: true },
+			{ title: "My Cat", menu: "b", url: "mycatpage.htm" },
+			{ title: "Some Cat", menu: "b", url: "https://pixnio.com/free-images/2020/07/26/2020-07-26-08-52-19-1200x1200.jpg", new_window: true }
+		]
+	}
+];

js/monthlyrecdata.js

@@ -0,0 +1,74 @@
+// Last modified: 2022/07/27 15:35:57
+
+$(document).ready(function() {
+	dataLoadedPromise.then(function() {
+		var yesterday = new Date()
+		yesterday.setDate(yesterday.getDate() - 1)
+		changeData(yesterday.getMonth());
+		$('#btnMon' + yesterday.getMonth()).attr('aria-pressed', true);
+	});
+});
+
+var monthnames = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
+
+function changeData(month) {
+	document.getElementById('MonthName').innerHTML = monthnames[month];
+	document.getElementById('TempH').innerHTML = cmx_data.monthlyrecs.hightemp[month];
+	document.getElementById('TempHT').innerHTML = cmx_data.monthlyrecs.hightempT[month];
+	document.getElementById('TempL').innerHTML = cmx_data.monthlyrecs.lowtemp[month];
+	document.getElementById('TempLT').innerHTML = cmx_data.monthlyrecs.lowtempT[month];
+	document.getElementById('DewPointH').innerHTML = cmx_data.monthlyrecs.highDP[month];
+	document.getElementById('DewPointHT').innerHTML = cmx_data.monthlyrecs.highDPT[month];
+	document.getElementById('DewPointL').innerHTML = cmx_data.monthlyrecs.lowDP[month];
+	document.getElementById('DewPointLT').innerHTML = cmx_data.monthlyrecs.lowDPT[month];
+	document.getElementById('AppTempH').innerHTML = cmx_data.monthlyrecs.highapptemp[month];
+	document.getElementById('AppTempHT').innerHTML = cmx_data.monthlyrecs.highapptempT[month];
+	document.getElementById('AppTempL').innerHTML = cmx_data.monthlyrecs.lowapptemp[month];
+	document.getElementById('AppTempLT').innerHTML = cmx_data.monthlyrecs.lowapptempT[month];
+	document.getElementById('FeelsLikeH').innerHTML = cmx_data.monthlyrecs.highfeelslike[month];
+	document.getElementById('FeelsLikeHT').innerHTML = cmx_data.monthlyrecs.highfeelslikeT[month];
+	document.getElementById('FeelsLikeL').innerHTML = cmx_data.monthlyrecs.lowfeelslike[month];
+	document.getElementById('FeelsLikeLT').innerHTML = cmx_data.monthlyrecs.lowfeelslikeT[month];
+	document.getElementById('WChillL').innerHTML = cmx_data.monthlyrecs.lowchill[month];
+	document.getElementById('WChillLT').innerHTML = cmx_data.monthlyrecs.lowchillT[month];
+	document.getElementById('HeatIndexH').innerHTML = cmx_data.monthlyrecs.highheatindex[month];
+	document.getElementById('HeatIndexHT').innerHTML = cmx_data.monthlyrecs.highheatindexT[month];
+	document.getElementById('MinTempH').innerHTML = cmx_data.monthlyrecs.highmintemp[month];
+	document.getElementById('MinTempHT').innerHTML = cmx_data.monthlyrecs.highmintempT[month];
+	document.getElementById('MaxTempL').innerHTML = cmx_data.monthlyrecs.lowmaxtemp[month];
+	document.getElementById('MaxTempLT').innerHTML = cmx_data.monthlyrecs.lowmaxtempT[month];
+	document.getElementById('HumH').innerHTML = cmx_data.monthlyrecs.highhum[month];
+	document.getElementById('HumHT').innerHTML = cmx_data.monthlyrecs.highhumT[month];
+	document.getElementById('HumL').innerHTML = cmx_data.monthlyrecs.lowhum[month];
+	document.getElementById('HumLT').innerHTML = cmx_data.monthlyrecs.lowhumT[month];
+	document.getElementById('HighDailyTempRange').innerHTML = cmx_data.monthlyrecs.hightemprange[month];
+	document.getElementById('HighDailyTempRangeT').innerHTML = cmx_data.monthlyrecs.hightemprangeT[month];
+	document.getElementById('LowDailyTempRange').innerHTML = cmx_data.monthlyrecs.lowtemprange[month];
+	document.getElementById('LowDailyTempRangeT').innerHTML = cmx_data.monthlyrecs.lowtemprangeT[month];
+	document.getElementById('RainRateH').innerHTML = cmx_data.monthlyrecs.rainrate[month];
+	document.getElementById('RainRateHT').innerHTML = cmx_data.monthlyrecs.rainrateT[month];
+	document.getElementById('HourlyRainH').innerHTML = cmx_data.monthlyrecs.hourlyrain[month];
+	document.getElementById('HourlyRainHT').innerHTML = cmx_data.monthlyrecs.hourlyrainT[month];
+	document.getElementById('Rain24HourH').innerHTML = cmx_data.monthlyrecs.rain24h[month];
+	document.getElementById('Rain24HourHT').innerHTML = cmx_data.monthlyrecs.rain24hT[month];
+	document.getElementById('DailyRainH').innerHTML = cmx_data.monthlyrecs.dailyrain[month];
+	document.getElementById('DailyRainHT').innerHTML = cmx_data.monthlyrecs.dailyrainT[month];
+	document.getElementById('MonthlyRainH').innerHTML = cmx_data.monthlyrecs.monthlyrain[month];
+	document.getElementById('MonthlyRainHT').innerHTML = cmx_data.monthlyrecs.monthlyrainT[month];
+	document.getElementById('LongestDryPeriod').innerHTML = cmx_data.monthlyrecs.dryperiod[month];
+	document.getElementById('LongestDryPeriodT').innerHTML = cmx_data.monthlyrecs.dryperiodT[month];
+	document.getElementById('LongestWetPeriod').innerHTML = cmx_data.monthlyrecs.wetperiod[month];
+	document.getElementById('LongestWetPeriodT').innerHTML = cmx_data.monthlyrecs.wetperiodT[month];
+	document.getElementById('GustH').innerHTML = cmx_data.monthlyrecs.highgust[month];
+	document.getElementById('GustHT').innerHTML = cmx_data.monthlyrecs.highgustT[month];
+	document.getElementById('WindH').innerHTML = cmx_data.monthlyrecs.highwind[month];
+	document.getElementById('WindHT').innerHTML = cmx_data.monthlyrecs.highwindT[month];
+	document.getElementById('WindRunH').innerHTML = cmx_data.monthlyrecs.highwindrun[month];
+	document.getElementById('WindRunHT').innerHTML = cmx_data.monthlyrecs.highwindrunT[month];
+	document.getElementById('PressL').innerHTML = cmx_data.monthlyrecs.lowpress[month];
+	document.getElementById('PressLT').innerHTML = cmx_data.monthlyrecs.lowpressT[month];
+	document.getElementById('PressH').innerHTML = cmx_data.monthlyrecs.highpress[month];
+	document.getElementById('PressHT').innerHTML = cmx_data.monthlyrecs.highpressT[month];
+	$('#btnArray').children('button').attr("aria-pressed", false);
+	$('#btnMon' + month).attr('aria-pressed', true);
+}

js/noaarpts.js

@@ -0,0 +1,142 @@
+/*	----------------------------------------------------------
+ *  noaarpts.js
+ *  Last modified: 2021/07/10 13:19:42
+ *  Populates the dropdown menus using the records began date
+ *
+ * 	Requires jQuery
+ * 	----------------------------------------------------------*/
+
+let rptPath = 'data/reports/';  // Your path should have a trailing "/", eg. 'Reports/'
+let startYear, endYear;
+let startMonth, endMonth;
+let rptAvail = {};
+
+if (rptPath.length && rptPath.slice(-1) !== '/')
+    rptPath += '/';
+
+$(document).ready(function () {
+    dataLoadedPromise.then(function () {
+        startYear = cmx_data.recordsbegandateISO.split('-')[0] * 1;
+        startMonth = cmx_data.recordsbegandateISO.split('-')[1] * 1;
+        endYear = cmx_data.metdateyesterdayISO.split('-')[0] * 1;
+        endMonth = cmx_data.metdateyesterdayISO.split('-')[1] * 1;
+
+        // This does the initial disable of out of range months this year
+        rptAvail[endYear] = [];
+        for (let m = 1; m < 13; m++) {
+            // greater than end month
+            rptAvail[endYear][m] = m <= endMonth;
+            // if start year is this year, then less start month
+            if (startYear == endYear) {
+                rptAvail[endYear][m] = rptAvail[endYear][m] && m >= startMonth
+            }
+            $('#opt-' + m).prop('hidden', !rptAvail[endYear][m]);
+        }
+
+        // get the current year report and display it whilst we sort out the rest in background
+        getYearRpt(endYear);
+
+        // add the year select dropdown values, most recent first
+        for (let y = endYear; y >= startYear; y--) {
+            let option = $('<option />');
+            option.html(y);
+            option.val(y);
+
+            $('#year').append(option);
+
+            rptAvail[y] = [];
+
+            // The start and end years may be short, so no point in checking months that are out of range
+            let monSt, monEnd;
+            if (y == startYear || y == endYear) {
+                monSt = y == startYear ? startMonth : 1;
+                monEnd = y == endYear ? endMonth : 12;
+            } else {
+                monSt = 1;
+                monEnd = 12;
+            }
+
+            // we need to process every month though, so we can disbale those out of range as well as MIA
+            for (let m = 1; m <= 12; m++) {
+                // assume this month isn't available
+                rptAvail[y][m] = false;
+
+                if (m >= monSt && m <= monEnd) {
+                    // assume it's there, then we only have to check for failure
+                    rptAvail[y][m] = true;
+                    // checking...
+                    $.ajax({
+                        url: rptPath + 'NOAAMO' + pad2(m) + pad2(y - 2000) + '.txt',
+                        type: 'HEAD',
+                        error: function () {
+                            rptAvail[y][m] = false;
+                            // if we are in the year currently being displayed...
+                            if (y == $('#year').val()) {
+                                // ...disable of any months that should be available but aren't
+                                $('#opt-' + m).prop('hidden', true);
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    });
+});
+
+// pad two digit numbers with a leading zero
+let pad2 = function (num) {
+    return (num < 10 ? '0' : '') + num;
+}
+
+// Script assumes that reports use the default name format
+let getMonRpt = function (month) {
+    let yr = $('#year').val();
+
+    // Is annual selected? If so, show the yearly report
+    if (month === '0') {
+        getYearRpt(yr);
+        return;
+    }
+
+    reqRpt = rptPath + 'NOAAMO' + pad2(month) + pad2(yr - 2000) + '.txt';
+
+    $.ajax({
+        url: reqRpt,
+        dataType: 'text',
+        success: function (data) {
+            $('#noaareport').text(data);
+        },
+        error: function () {
+            alert('Did not find the required report\n\nPlease try another date');
+        }
+    });
+};
+
+// Script assumes that reports use the default name format
+let getYearRpt = function (yr) {
+    let reqRpt = rptPath + 'NOAAYR' + yr + '.txt';
+
+    // set the month buttons for the new year
+    for (let m = 1; m < 13; m++) {
+        $('#opt-' + m).prop('hidden', !rptAvail[yr][m]);
+    }
+
+    // Do we have a month selected? If so show the month report for the new year
+    let mon = $('#month').val();
+    if (mon != '0') {
+        getMonRpt(mon);
+        return;
+    }
+
+    // get the report text
+    $.ajax({
+        url: reqRpt,
+        dataType: 'text',
+        success: function (data) {
+            $('#noaareport').text(data);
+        },
+        error: function () {
+            alert('Did not find the required report\n\nPlease try another date');
+        }
+    });
+};

js/setpagedata.js

@@ -0,0 +1,237 @@
+/*	----------------------------------------------------------
+ * 	setpagedata.js		v:0.1.0		d:Mar 2021		a:Neil  Thomas
+ *  Last modified: 2022/07/02 17:55:10
+ * 	Basic scripts for all new at-xxxx.html template pages.
+ *  Incorporating changes suggested by beteljuice
+ * 	Requires jQuery
+ * 	----------------------------------------------------------*/
+
+//	Global variables
+//	Changing these affects every page in the ai-interface
+//	All numbers are pixels.
+
+let fixedHeader = false;	//	Use only true or false
+let fixedFooter = true;	//	Use only true or false
+let headerMargin = 20;	//	Gap between the header and the main body
+let footerMargin = 10;	//	Gap between the body and the footer
+let load_menu = "js/menu.js"; // menu file to load - path is relative to the page
+
+
+//	Thats the only changes you should make unless you know better!
+
+let cmx_data;
+let menu = mobileMenu = "";
+let initialLoad = true;
+
+window.onresize = function () {
+	borderpatrol();
+};
+
+
+let borderpatrol = function () {
+	var contentMargin = $("#Header").outerHeight(true);
+	if ($('#Header').hasClass('w3-top')) {
+		$('#Content').css('margin-top', headerMargin + contentMargin + 'px');
+	} else {
+		$('#Content').css('margin-top', headerMargin + 'px');
+	}
+	contentMargin = $('#Footer').outerHeight(true);
+	if ($('#Footer').hasClass('w3-bottom')) {
+		$('#Content').css('margin-bottom', footerMargin + contentMargin + 'px');
+	} else {
+		$('#Content').css('margin-bottom', footerMargin + 'px');
+	}
+}; // end function
+
+let createMainMenu = function (src, submenu) {
+	let classMain = 'w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium';
+	let classMainSub = 'w3-bar-item w3-btn w3-theme-d5-hvr at-slim';
+
+	src.forEach(function (itm) {
+		if (itm.menu !== 'n') {	// wanted in main menu
+			if (itm.submenu) { // drop down
+				menu += '<div class="w3-dropdown-hover">\n';
+				menu += '\t<button id="' + itm.title.replace(/ /g, "_") + '" type="button" class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small" onclick="dropDown(this)" aria-expanded="false">' + itm.title + '&#8230;</button>\n';
+				menu += '\t<div id="sub_' + itm.title.replace(/ /g, "_") + '" class="w3-dropdown-content w3-bar-block w3-theme">\n';
+				// add the sub-menu items
+				createMainMenu(itm.items, true);
+				menu += '\t\n</div></div>\n';
+			} else {
+				infill = (itm.new_window ? ' target="_blank"' : '');
+
+				if (itm.forum) {
+					if (cmx_data.forumurl != '') {
+						menu += '<a href="' + cmx_data.forumurl + '"' + infill + ' class="' + (submenu ? classMainSub : classMain) + '">' + itm.title + '</a>\n';
+					}
+				} else if (itm.webcam) {
+					if (cmx_data.webcamurl != '') {
+						menu += '<a href="' + cmx_data.webcamurl + '"' + infill + ' class="' + (submenu ? classMainSub : classMain) + '">' + itm.title + '</a>\n';
+					}
+				} else {
+					menu += '<a href="' + itm.url + '"' + infill + ' class="' + (submenu ? classMainSub : classMain) + '">' + itm.title + '</a>\n';
+				}
+			}
+		}
+	});
+
+	// if we are processing a sub menu, return to the main loop
+	if (submenu)
+		return;
+
+	menu += '<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">Menu  &#9776;</button>';
+
+	// stick the menus into the page
+	$('#Main_Menu').html(menu);
+};
+
+let createMobileMenu = function (src, submenu) {
+	let classMobile = 'w3-bar-item w3-btn w3-theme-hvr at-slim';
+	let styleMobile = submenu ? 'padding-left: 30px !important;' : '';
+
+	src.forEach(function (itm) {
+		if (itm.menu !== 'w') { // wanted in narrow menu
+			// mobile menu
+			if (itm.submenu) {
+				mobileMenu += '\t<button class="w3-btn at-slim" style="cursor: default;">' + itm.title + '&#8230;</button>\n';
+				createMobileMenu(itm.items, true);
+			} else {
+				infill = (itm.new_window ? " target='_blank'" : "");
+				if (itm.forum && cmx_data.forumurl != '') {
+					mobileMenu += '<a href="' + cmx_data.forumurl + '"' + infill + ' class="' + classMobile + '" style= "' + styleMobile + '">' + itm.title + '</a>\n';
+				} else if (itm.webcam && cmx_data.webcamurl != '') {
+					mobileMenu += '<a href="' + cmx_data.webcamurl + '"' + infill + ' class="' + classMobile + '" style= "' + styleMobile + '">' + itm.title + '</a>\n';
+				} else {
+					mobileMenu += '<a href="' + itm.url + '"' + infill + ' class="' + classMobile + '" style= "' + styleMobile + '">' + itm.title + '</a>\n';
+				}
+			}
+		}
+	});
+
+	// if we are processing a sub menu, return to the main loop
+	if (submenu)
+		return;
+
+	// stick the menus into the page
+	$('#Main_Menu_Mobile').html(mobileMenu);
+};
+
+let setupPage = function () {
+
+	//	static header & footer
+	if (fixedHeader) {
+		$('#Header').addClass('w3-top');
+	} else {
+		$('#Header').removeClass('w3-top');
+	}
+	if (fixedFooter) {
+		$('#Footer').addClass('w3-bottom');
+	} else {
+		$('#Footer').removeClass('w3-bottom');
+	}
+	//	Page content top and bottom margins
+	borderpatrol();
+};
+
+let toggleMenu = function (menuid) {
+	$('#' + menuid).toggleClass('w3-show');
+};
+
+let dropDown = function (panel) {
+	var btn = $('#' + panel.id);
+	var sub = $('#sub_' + panel.id);
+	if (sub.hasClass('w3-show')) {
+		sub.removeClass('w3-show');
+		btn.attr('aria-expanded', false);
+	} else {
+		// Close other dropdowns first
+		$('.w3-dropdown-content').removeClass('w3-show');
+		sub.addClass('w3-show');
+		btn.attr('aria-expanded', true);
+	}
+};
+
+
+let getPageData = function (resolve, reject) {
+	$.getJSON('data/websitedata.json?_=' + Date.now(), function (json) {
+		console.log('Data success');
+		// auto update every 60 seconds, only the index and today pages
+		// Some sites may have index.htm as the default page, and thus not have a page name
+		let pageName = window.location.href.split('/').pop().split('.')[0];
+		if (pageName == 'index' || pageName == 'today' || pageName == 'todayYest' || pageName == '') {
+			setTimeout(function () {
+				getPageData(null, null);
+			}, 60 * 1000);
+		}
+
+		cmx_data = json;
+
+		// Set some header stuff
+		$(document).prop('title', cmx_data.location + ' weather');
+		$('meta[name=description]').attr('content', cmx_data.location + ' weather data');
+		$('meta[name=keywords]').attr('content', $('meta[name=keywords]').attr('content') + ', ' + cmx_data.location);
+
+		// do the menus
+		if (initialLoad) {
+			$.getScript(load_menu, function () { // path is relative to the page - allows for multiple vars to be available and ignores comments ;-)
+				createMainMenu(menuSrc, false);
+				createMobileMenu(menuSrc, false);
+				borderpatrol(); // duplicated here to ensure things OK if initial menu wrapped
+			});
+			initialLoad = false;
+		}
+
+		// Show/hide Apparent/Feels Like
+		if (cmx_data.options.useApparent === "1") {
+			$('[data-cmx-apparent]').removeClass('w3-hide');
+			$('[data-cmx-feels]').addClass('w3-hide');
+		}
+
+		if (cmx_data.options.showSolar === "1") {
+			$('[data-cmx-solar]').removeClass('w3-hide');
+		} else {
+			$('[data-cmx-solar-gauge]').addClass('w3-hide'); // Gauges do not draw correctly if hidden from the start
+		}
+
+		if (cmx_data.options.showUV === "1") {
+			$('[data-cmx-uv]').removeClass('w3-hide');
+		} else {
+			$('[data-cmx-uv-gauge]').addClass('w3-hide'); // Gauges do not draw correctly if hidden from the start
+		}
+
+		// Update all spans having data-cmxdata with data values
+		$('[data-cmxdata]').each(function () {
+			this.innerHTML = cmx_data[this.dataset.cmxdata];
+		});
+
+		if (cmx_data.currcond != '') {
+			$('#currCond').removeClass('w3-hide');
+		}
+
+		// Use this to trigger other scripts on the page
+		if (null !== resolve) {
+			resolve();
+		}
+	})
+		.fail(function (jqxhr, textStatus, error) {
+			let err = textStatus + ', ' + error;
+			console.log('Data Request Failed: ' + err);
+
+			if (null !== reject) {
+				reject();
+			}
+
+			// lets try that again
+			setTimeout(function () {
+				getPageData(resolve, reject);
+			}, 5000);
+		});
+};
+
+
+// Get the main page data
+let dataLoadedPromise = new Promise((myResolve, myReject) => {
+	$(document).ready(function () {
+		setupPage();
+		getPageData(myResolve, myReject);
+	});
+});

lib/jquery/jquery.tmpl.js

@@ -0,0 +1,484 @@
+/*!
+ * jQuery Templates Plugin 1.0.0pre
+ * http://github.com/jquery/jquery-tmpl
+ * Requires jQuery 1.4.2
+ *
+ * Copyright 2011, Software Freedom Conservancy, Inc.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+(function( jQuery, undefined ){
+	var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+		newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
+
+	function newTmplItem( options, parentItem, fn, data ) {
+		// Returns a template item data structure for a new rendered instance of a template (a 'template item').
+		// The content field is a hierarchical array of strings and nested items (to be
+		// removed and replaced by nodes field of dom elements, once inserted in DOM).
+		var newItem = {
+			data: data || (data === 0 || data === false) ? data : (parentItem ? parentItem.data : {}),
+			_wrap: parentItem ? parentItem._wrap : null,
+			tmpl: null,
+			parent: parentItem || null,
+			nodes: [],
+			calls: tiCalls,
+			nest: tiNest,
+			wrap: tiWrap,
+			html: tiHtml,
+			update: tiUpdate
+		};
+		if ( options ) {
+			jQuery.extend( newItem, options, { nodes: [], parent: parentItem });
+		}
+		if ( fn ) {
+			// Build the hierarchical content to be used during insertion into DOM
+			newItem.tmpl = fn;
+			newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
+			newItem.key = ++itemKey;
+			// Keep track of new template item, until it is stored as jQuery Data on DOM element
+			(stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
+		}
+		return newItem;
+	}
+
+	// Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
+	jQuery.each({
+		appendTo: "append",
+		prependTo: "prepend",
+		insertBefore: "before",
+		insertAfter: "after",
+		replaceAll: "replaceWith"
+	}, function( name, original ) {
+		jQuery.fn[ name ] = function( selector ) {
+			var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
+				parent = this.length === 1 && this[0].parentNode;
+
+			appendToTmplItems = newTmplItems || {};
+			if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+				insert[ original ]( this[0] );
+				ret = this;
+			} else {
+				for ( i = 0, l = insert.length; i < l; i++ ) {
+					cloneIndex = i;
+					elems = (i > 0 ? this.clone(true) : this).get();
+					jQuery( insert[i] )[ original ]( elems );
+					ret = ret.concat( elems );
+				}
+				cloneIndex = 0;
+				ret = this.pushStack( ret, name, insert.selector );
+			}
+			tmplItems = appendToTmplItems;
+			appendToTmplItems = null;
+			jQuery.tmpl.complete( tmplItems );
+			return ret;
+		};
+	});
+
+	jQuery.fn.extend({
+		// Use first wrapped element as template markup.
+		// Return wrapped set of template items, obtained by rendering template against data.
+		tmpl: function( data, options, parentItem ) {
+			return jQuery.tmpl( this[0], data, options, parentItem );
+		},
+
+		// Find which rendered template item the first wrapped DOM element belongs to
+		tmplItem: function() {
+			return jQuery.tmplItem( this[0] );
+		},
+
+		// Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+		template: function( name ) {
+			return jQuery.template( name, this[0] );
+		},
+
+		domManip: function( args, table, callback, options ) {
+			if ( args[0] && jQuery.isArray( args[0] )) {
+				var dmArgs = jQuery.makeArray( arguments ), elems = args[0], elemsLength = elems.length, i = 0, tmplItem;
+				while ( i < elemsLength && !(tmplItem = jQuery.data( elems[i++], "tmplItem" ))) {}
+				if ( tmplItem && cloneIndex ) {
+					dmArgs[2] = function( fragClone ) {
+						// Handler called by oldManip when rendered template has been inserted into DOM.
+						jQuery.tmpl.afterManip( this, fragClone, callback );
+					};
+				}
+				oldManip.apply( this, dmArgs );
+			} else {
+				oldManip.apply( this, arguments );
+			}
+			cloneIndex = 0;
+			if ( !appendToTmplItems ) {
+				jQuery.tmpl.complete( newTmplItems );
+			}
+			return this;
+		}
+	});
+
+	jQuery.extend({
+		// Return wrapped set of template items, obtained by rendering template against data.
+		tmpl: function( tmpl, data, options, parentItem ) {
+			var ret, topLevel = !parentItem;
+			if ( topLevel ) {
+				// This is a top-level tmpl call (not from a nested template using {{tmpl}})
+				parentItem = topTmplItem;
+				tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
+				wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
+			} else if ( !tmpl ) {
+				// The template item is already associated with DOM - this is a refresh.
+				// Re-evaluate rendered template for the parentItem
+				tmpl = parentItem.tmpl;
+				newTmplItems[parentItem.key] = parentItem;
+				parentItem.nodes = [];
+				if ( parentItem.wrapped ) {
+					updateWrapped( parentItem, parentItem.wrapped );
+				}
+				// Rebuild, without creating a new template item
+				return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
+			}
+			if ( !tmpl ) {
+				return []; // Could throw...
+			}
+			if ( typeof data === "function" ) {
+				data = data.call( parentItem || {} );
+			}
+			if ( options && options.wrapped ) {
+				updateWrapped( options, options.wrapped );
+			}
+			ret = jQuery.isArray( data ) ?
+				jQuery.map( data, function( dataItem ) {
+					return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
+				}) :
+				[ newTmplItem( options, parentItem, tmpl, data ) ];
+			return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
+		},
+
+		// Return rendered template item for an element.
+		tmplItem: function( elem ) {
+			var tmplItem;
+			if ( elem instanceof jQuery ) {
+				elem = elem[0];
+			}
+			while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
+			return tmplItem || topTmplItem;
+		},
+
+		// Set:
+		// Use $.template( name, tmpl ) to cache a named template,
+		// where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+		// Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+		// Get:
+		// Use $.template( name ) to access a cached template.
+		// Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+		// will return the compiled template, without adding a name reference.
+		// If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
+		// to $.template( null, templateString )
+		template: function( name, tmpl ) {
+			if (tmpl) {
+				// Compile template and associate with name
+				if ( typeof tmpl === "string" ) {
+					// This is an HTML string being passed directly in.
+					tmpl = buildTmplFn( tmpl );
+				} else if ( tmpl instanceof jQuery ) {
+					tmpl = tmpl[0] || {};
+				}
+				if ( tmpl.nodeType ) {
+					// If this is a template block, use cached copy, or generate tmpl function and cache.
+					tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
+					// Issue: In IE, if the container element is not a script block, the innerHTML will remove quotes from attribute values whenever the value does not include white space.
+					// This means that foo="${x}" will not work if the value of x includes white space: foo="${x}" -> foo=value of x.
+					// To correct this, include space in tag: foo="${ x }" -> foo="value of x"
+				}
+				return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
+			}
+			// Return named compiled template
+			return name ? (typeof name !== "string" ? jQuery.template( null, name ):
+				(jQuery.template[name] ||
+					// If not in map, and not containing at least on HTML tag, treat as a selector.
+					// (If integrated with core, use quickExpr.exec)
+					jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
+		},
+
+		encode: function( text ) {
+			// Do HTML encoding replacing < > & and ' and " by corresponding entities.
+			return ("" + text).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;");
+		}
+	});
+
+	jQuery.extend( jQuery.tmpl, {
+		tag: {
+			"tmpl": {
+				_default: { $2: "null" },
+				open: "if($notnull_1){__=__.concat($item.nest($1,$2));}"
+				// tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
+				// This means that {{tmpl foo}} treats foo as a template (which IS a function).
+				// Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
+			},
+			"wrap": {
+				_default: { $2: "null" },
+				open: "$item.calls(__,$1,$2);__=[];",
+				close: "call=$item.calls();__=call._.concat($item.wrap(call,__));"
+			},
+			"each": {
+				_default: { $2: "$index, $value" },
+				open: "if($notnull_1){$.each($1a,function($2){with(this){",
+				close: "}});}"
+			},
+			"if": {
+				open: "if(($notnull_1) && $1a){",
+				close: "}"
+			},
+			"else": {
+				_default: { $1: "true" },
+				open: "}else if(($notnull_1) && $1a){"
+			},
+			"html": {
+				// Unecoded expression evaluation.
+				open: "if($notnull_1){__.push($1a);}"
+			},
+			"=": {
+				// Encoded expression evaluation. Abbreviated form is ${}.
+				_default: { $1: "$data" },
+				open: "if($notnull_1){__.push($.encode($1a));}"
+			},
+			"!": {
+				// Comment tag. Skipped by parser
+				open: ""
+			}
+		},
+
+		// This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
+		complete: function( items ) {
+			newTmplItems = {};
+		},
+
+		// Call this from code which overrides domManip, or equivalent
+		// Manage cloning/storing template items etc.
+		afterManip: function afterManip( elem, fragClone, callback ) {
+			// Provides cloned fragment ready for fixup prior to and after insertion into DOM
+			var content = fragClone.nodeType === 11 ?
+				jQuery.makeArray(fragClone.childNodes) :
+				fragClone.nodeType === 1 ? [fragClone] : [];
+
+			// Return fragment to original caller (e.g. append) for DOM insertion
+			callback.call( elem, fragClone );
+
+			// Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
+			storeTmplItems( content );
+			cloneIndex++;
+		}
+	});
+
+	//========================== Private helper functions, used by code above ==========================
+
+	function build( tmplItem, nested, content ) {
+		// Convert hierarchical content into flat string array
+		// and finally return array of fragments ready for DOM insertion
+		var frag, ret = content ? jQuery.map( content, function( item ) {
+			return (typeof item === "string") ?
+				// Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
+				(tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
+				// This is a child template item. Build nested template.
+				build( item, tmplItem, item._ctnt );
+		}) :
+		// If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
+		tmplItem;
+		if ( nested ) {
+			return ret;
+		}
+
+		// top-level template
+		ret = ret.join("");
+
+		// Support templates which have initial or final text nodes, or consist only of text
+		// Also support HTML entities within the HTML markup.
+		ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
+			frag = jQuery( middle ).get();
+
+			storeTmplItems( frag );
+			if ( before ) {
+				frag = unencode( before ).concat(frag);
+			}
+			if ( after ) {
+				frag = frag.concat(unencode( after ));
+			}
+		});
+		return frag ? frag : unencode( ret );
+	}
+
+	function unencode( text ) {
+		// Use createElement, since createTextNode will not render HTML entities correctly
+		var el = document.createElement( "div" );
+		el.innerHTML = text;
+		return jQuery.makeArray(el.childNodes);
+	}
+
+	// Generate a reusable function that will serve to render a template against data
+	function buildTmplFn( markup ) {
+		return new Function("jQuery","$item",
+			// Use the variable __ to hold a string array while building the compiled template. (See https://github.com/jquery/jquery-tmpl/issues#issue/10).
+			"var $=jQuery,call,__=[],$data=$item.data;" +
+
+			// Introduce the data as local variables using with(){}
+			"with($data){__.push('" +
+
+			// Convert the template into pure JavaScript
+			jQuery.trim(markup)
+				.replace( /([\\'])/g, "\\$1" )
+				.replace( /[\r\t\n]/g, " " )
+				.replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
+				.replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,
+				function( all, slash, type, fnargs, target, parens, args ) {
+					var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
+					if ( !tag ) {
+						throw "Unknown template tag: " + type;
+					}
+					def = tag._default || [];
+					if ( parens && !/\w$/.test(target)) {
+						target += parens;
+						parens = "";
+					}
+					if ( target ) {
+						target = unescape( target );
+						args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
+						// Support for target being things like a.toLowerCase();
+						// In that case don't call with template item as 'this' pointer. Just evaluate...
+						expr = parens ? (target.indexOf(".") > -1 ? target + unescape( parens ) : ("(" + target + ").call($item" + args)) : target;
+						exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
+					} else {
+						exprAutoFnDetect = expr = def.$1 || "null";
+					}
+					fnargs = unescape( fnargs );
+					return "');" +
+						tag[ slash ? "close" : "open" ]
+							.split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
+							.split( "$1a" ).join( exprAutoFnDetect )
+							.split( "$1" ).join( expr )
+							.split( "$2" ).join( fnargs || def.$2 || "" ) +
+						"__.push('";
+				}) +
+			"');}return __;"
+		);
+	}
+	function updateWrapped( options, wrapped ) {
+		// Build the wrapped content.
+		options._wrap = build( options, true,
+			// Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
+			jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
+		).join("");
+	}
+
+	function unescape( args ) {
+		return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
+	}
+	function outerHtml( elem ) {
+		var div = document.createElement("div");
+		div.appendChild( elem.cloneNode(true) );
+		return div.innerHTML;
+	}
+
+	// Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
+	function storeTmplItems( content ) {
+		var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
+		for ( i = 0, l = content.length; i < l; i++ ) {
+			if ( (elem = content[i]).nodeType !== 1 ) {
+				continue;
+			}
+			elems = elem.getElementsByTagName("*");
+			for ( m = elems.length - 1; m >= 0; m-- ) {
+				processItemKey( elems[m] );
+			}
+			processItemKey( elem );
+		}
+		function processItemKey( el ) {
+			var pntKey, pntNode = el, pntItem, tmplItem, key;
+			// Ensure that each rendered template inserted into the DOM has its own template item,
+			if ( (key = el.getAttribute( tmplItmAtt ))) {
+				while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
+				if ( pntKey !== key ) {
+					// The next ancestor with a _tmplitem expando is on a different key than this one.
+					// So this is a top-level element within this template item
+					// Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment.
+					pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0;
+					if ( !(tmplItem = newTmplItems[key]) ) {
+						// The item is for wrapped content, and was copied from the temporary parent wrappedItem.
+						tmplItem = wrappedItems[key];
+						tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode] );
+						tmplItem.key = ++itemKey;
+						newTmplItems[itemKey] = tmplItem;
+					}
+					if ( cloneIndex ) {
+						cloneTmplItem( key );
+					}
+				}
+				el.removeAttribute( tmplItmAtt );
+			} else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
+				// This was a rendered element, cloned during append or appendTo etc.
+				// TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
+				cloneTmplItem( tmplItem.key );
+				newTmplItems[tmplItem.key] = tmplItem;
+				pntNode = jQuery.data( el.parentNode, "tmplItem" );
+				pntNode = pntNode ? pntNode.key : 0;
+			}
+			if ( tmplItem ) {
+				pntItem = tmplItem;
+				// Find the template item of the parent element.
+				// (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
+				while ( pntItem && pntItem.key != pntNode ) {
+					// Add this element as a top-level node for this rendered template item, as well as for any
+					// ancestor items between this item and the item of its parent element
+					pntItem.nodes.push( el );
+					pntItem = pntItem.parent;
+				}
+				// Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
+				delete tmplItem._ctnt;
+				delete tmplItem._wrap;
+				// Store template item as jQuery data on the element
+				jQuery.data( el, "tmplItem", tmplItem );
+			}
+			function cloneTmplItem( key ) {
+				key = key + keySuffix;
+				tmplItem = newClonedItems[key] =
+					(newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent ));
+			}
+		}
+	}
+
+	//---- Helper functions for template item ----
+
+	function tiCalls( content, tmpl, data, options ) {
+		if ( !content ) {
+			return stack.pop();
+		}
+		stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
+	}
+
+	function tiNest( tmpl, data, options ) {
+		// nested template, using {{tmpl}} tag
+		return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
+	}
+
+	function tiWrap( call, wrapped ) {
+		// nested template, using {{wrap}} tag
+		var options = call.options || {};
+		options.wrapped = wrapped;
+		// Apply the template, which may incorporate wrapped content,
+		return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
+	}
+
+	function tiHtml( filter, textOnly ) {
+		var wrapped = this._wrap;
+		return jQuery.map(
+			jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
+			function(e) {
+				return textOnly ?
+					e.innerText || e.textContent :
+					e.outerHTML || outerHtml(e);
+			});
+	}
+
+	function tiUpdate() {
+		var coll = this.nodes;
+		jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
+		jQuery( coll ).remove();
+	}
+})( jQuery );

lib/steelseries/scripts/src/tween.js

@@ -0,0 +1,380 @@
+/*!*********************************************************************
+TERMS OF USE - EASING EQUATIONS
+Open source under the BSD License.
+Copyright (c) 2001 Robert Penner
+JavaScript version copyright (C) 2006 by Philippe Maegerman
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+   * Redistributions of source code must retain the above copyright
+notice, this list of conditions and the following disclaimer.
+   * Redistributions in binary form must reproduce the above
+copyright notice, this list of conditions and the following disclaimer
+in the documentation and/or other materials provided with the
+distribution.
+   * Neither the name of the author nor the names of contributors may
+be used to endorse or promote products derived from this software
+without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*****************************************/
+function Delegate() {}
+Delegate.create = function (o, f) {
+	var a = [], i, l = arguments.length;
+	for (i = 2; i < l; i++) {
+		a[i - 2] = arguments[i];
+	}
+	return function () {
+		var aP = [].concat(arguments, a);
+		f.apply(o, aP);
+	};
+};
+
+/*
+object:
+  type:Object
+    The object you want to modify. It can be any object, a visual object that you want to animate ( document.body.style ) or an anymous object ( new Object() ).
+property:
+  type:String
+    The property that is updated on the target object, it can be empty ('')
+easing:
+  type:Function
+    The easing that will be applied to motion.
+start:
+  type:Number
+    Start value
+end:
+  type:Number
+    End value
+duration:
+  type:Number
+    Animation duration in seconds
+suffixe:
+ type:String
+   A string to append to the updated property ('%','pt','em' ...).
+*/
+
+var Tween = function (obj, prop, func, begin, finish, duration, suffixe) {
+	this.init(obj, prop, func, begin, finish, duration, suffixe);
+};
+var t = Tween.prototype;
+
+t.obj = {};
+t.prop = '';
+t.func = function (t, b, c, d) { return c * t / d + b; };
+t.begin = 0;
+t.change = 0;
+t.prevTime = 0;
+t.prevPos = 0;
+t.looping = false;
+t._duration = 0;
+t._time = 0;
+t._pos = 0;
+t._position = 0;
+t._startTime = 0;
+t._finish = 0;
+t.name = '';
+t.suffixe = '';
+t._listeners = [];
+t.setTime = function (t) {
+	this.prevTime = this._time;
+	if (t > this.getDuration()) {
+		if (this.looping) {
+			this.rewind(t - this._duration);
+			this.update();
+			this.broadcastMessage('onMotionLooped', {target: this, type: 'onMotionLooped'});
+		} else {
+			this._time = this._duration;
+			this.update();
+			this.stop();
+			this.broadcastMessage('onMotionFinished', {target: this, type: 'onMotionFinished'});
+		}
+	} else if (t < 0) {
+		this.rewind();
+		this.update();
+	} else {
+		this._time = t;
+		this.update();
+	}
+};
+t.getTime = function () {
+	return this._time;
+};
+t.setDuration = function (d) {
+	this._duration = (d === null || d <= 0) ? 100000 : d;
+};
+t.getDuration = function () {
+	return this._duration;
+};
+t.setPosition = function (p) {
+	this.prevPos = this._pos;
+	var a = this.suffixe !== '' ? this.suffixe : '';
+	this.obj[this.prop] = Math.round(p) + a;
+	this._pos = p;
+	this.broadcastMessage('onMotionChanged', {target: this, type: 'onMotionChanged'});
+};
+t.getPosition = function (t) {
+	if (t === undefined) {
+		t = this._time;
+	}
+	return this.func(t, this.begin, this.change, this._duration);
+};
+t.setFinish = function (f) {
+	this.change = f - this.begin;
+};
+t.getFinish = function () {
+	return this.begin + this.change;
+};
+t.init = function (obj, prop, func, begin, finish, duration, suffixe) {
+	if (!arguments.length) {
+		return;
+	}
+	this._listeners = [];
+	this.addListener(this);
+	if (suffixe) {
+		this.suffixe = suffixe;
+	}
+	this.obj = obj;
+	this.prop = prop;
+	this.begin = begin;
+	this._pos = begin;
+	this.setDuration(duration);
+	if (func !== null && func !== '') {
+		this.func = func;
+	}
+	this.setFinish(finish);
+};
+t.start = function () {
+	this.rewind();
+	this.startEnterFrame();
+	this.broadcastMessage('onMotionStarted', {target: this, type: 'onMotionStarted'});
+	//alert('in');
+};
+t.rewind = function (t) {
+	this.stop();
+	this._time = (t === undefined) ? 0 : t;
+	this.fixTime();
+	this.update();
+};
+t.fforward = function () {
+	this._time = this._duration;
+	this.fixTime();
+	this.update();
+};
+t.update = function () {
+	this.setPosition(this.getPosition(this._time));
+};
+t.startEnterFrame = function () {
+	this.stopEnterFrame();
+	this.isPlaying = true;
+	this.onEnterFrame();
+};
+t.onEnterFrame = function () {
+	if (this.isPlaying) {
+		this.nextFrame();
+		// To get real smooth movement you have to set the timeout to 0 instead of 25
+		setTimeout(Delegate.create(this, this.onEnterFrame), 25);
+	}
+};
+t.nextFrame = function () {
+	this.setTime((this.getTimer() - this._startTime) / 1000);
+};
+t.stop = function () {
+	this.stopEnterFrame();
+	this.broadcastMessage('onMotionStopped', {target: this, type: 'onMotionStopped'});
+};
+t.stopEnterFrame = function () {
+	this.isPlaying = false;
+};
+t.playing = function () {
+    return this.isPlaying;
+};
+t.continueTo = function (finish, duration) {
+	this.begin = this._pos;
+	this.setFinish(finish);
+	if (this._duration !== undefined) {
+		this.setDuration(duration);
+	}
+	this.start();
+};
+t.resume = function () {
+	this.fixTime();
+	this.startEnterFrame();
+	this.broadcastMessage('onMotionResumed', {target: this, type: 'onMotionResumed'});
+};
+t.yoyo = function () {
+	this.continueTo(this.begin, this._time);
+};
+t.addListener = function (o) {
+	this.removeListener(o);
+	return this._listeners.push(o);
+};
+t.removeListener = function (o) {
+	var a = this._listeners,
+		i = a.length;
+	while (i--) {
+		if (a[i] === o) {
+			a.splice(i, 1);
+			return true;
+		}
+	}
+	return false;
+};
+t.broadcastMessage = function () {
+	var arr = [], i, e, a = this._listeners,
+		l = a.length;
+	for (i = 0; i < arguments.length; i++) {
+		arr.push(arguments[i]);
+	}
+	e = arr.shift();
+
+	for (i = 0; i < l; i++) {
+		if (a[i][e]) {
+			a[i][e].apply(a[i], arr);
+		}
+	}
+};
+t.fixTime = function () {
+	this._startTime = this.getTimer() - this._time * 1000;
+};
+t.getTimer = function () {
+	return new Date().getTime() - this._time;
+};
+Tween.backEaseIn = function (t, b, c, d, a, p) {
+	var s = 1.70158;
+	return c * (t /= d) * t * ((s + 1) * t - s) + b;
+};
+Tween.backEaseOut = function (t, b, c, d, a, p) {
+	var s = 1.70158;
+	return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+};
+Tween.backEaseInOut = function (t, b, c, d, a, p) {
+	var s = 1.70158;
+	if ((t /= d / 2) < 1) {
+		return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
+	}
+	return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
+};
+Tween.elasticEaseIn = function (t, b, c, d, a, p) {
+	var s;
+	if (t === 0) {
+		return b;
+	}
+	if ((t /= d) === 1) {
+		return b + c;
+	}
+	if (!p) {
+		p = d * 0.3;
+	}
+	if (!a || a < Math.abs(c)) {
+		a = c;
+		s = p / 4;
+	} else {
+		s = p / (2 * Math.PI) * Math.asin(c / a);
+	}
+
+	return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+
+};
+Tween.elasticEaseOut = function (t, b, c, d, a, p) {
+	var s;
+	if (t === 0) {
+		return b;
+	}
+	if ((t /= d) === 1) {
+		return b + c;
+	}
+	if (!p) {
+		p = d * 0.3;
+	}
+	if (!a || a < Math.abs(c)) {
+		a = c;
+		s = p / 4;
+	} else {
+		s = p / (2 * Math.PI) * Math.asin(c / a);
+	}
+	return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
+};
+Tween.elasticEaseInOut = function (t, b, c, d, a, p) {
+	var s;
+	if (t === 0) {
+		return b;
+	}
+	if ((t /= d / 2) === 2) {
+		return b + c;
+	}
+	if (!p) {
+		p = d * (0.3 * 1.5);
+	}
+	if (!a || a < Math.abs(c)) {
+		a = c;
+		s = p / 4;
+	} else {
+		s = p / (2 * Math.PI) * Math.asin(c / a);
+	}
+	if (t < 1) {
+		return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+	}
+	return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
+};
+Tween.bounceEaseOut = function (t, b, c, d) {
+	if ((t /= d) < (1 / 2.75)) {
+		return c * (7.5625 * t * t) + b;
+	} else if (t < (2 / 2.75)) {
+		return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
+	} else if (t < (2.5 / 2.75)) {
+		return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
+	} else {
+		return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
+	}
+};
+Tween.bounceEaseIn = function (t, b, c, d) {
+	return c - Tween.bounceEaseOut(d - t, 0, c, d) + b;
+};
+Tween.bounceEaseInOut = function (t, b, c, d) {
+	if (t < d / 2) {
+		return Tween.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
+	} else {
+		return Tween.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
+	}
+};
+Tween.strongEaseInOut = function (t, b, c, d) {
+	return c * (t /= d) * t * t * t * t + b;
+};
+Tween.regularEaseIn = function (t, b, c, d) {
+	return c * (t /= d) * t + b;
+};
+Tween.regularEaseOut = function (t, b, c, d) {
+	return -c * (t /= d) * (t - 2) + b;
+};
+Tween.regularEaseInOut = function (t, b, c, d) {
+	if ((t /= d / 2) < 1) {
+		return c / 2 * t * t + b;
+	}
+	return -c / 2 * ((--t) * (t - 2) - 1) + b;
+};
+Tween.strongEaseIn = function (t, b, c, d) {
+	return c * (t /= d) * t * t * t * t + b;
+};
+Tween.strongEaseOut = function (t, b, c, d) {
+	return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+};
+Tween.strongEaseInOut = function (t, b, c, d) {
+	if ((t /= d / 2) < 1) {
+		return c / 2 * t * t * t * t * t + b;
+	}
+	return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+};

monthlyrecord.htm

@@ -0,0 +1,265 @@
+<!--
+	monthlyrecord.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 09:23:33
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local		-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+		<script src="js/monthlyrecdata.js"></script>
+		<style>
+			.mx-button {margin-bottom: 5px; border-radius: 4px;}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Monthly records<span class="subText"></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Records for <span id="MonthName">January</span></h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;" >
+										<tr class="w3-theme-d5">
+											<td colspan="3">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span id="TempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="TempHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span id="TempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="TempLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span id="DewPointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="DewPointHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span id="DewPointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="DewPointLT"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span id="AppTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="AppTempHT"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span id="AppTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="AppTempLT"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span id="FeelsLikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="FeelsLikeHT"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span id="FeelsLikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="FeelsLikeLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span id="WChillL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="WChillLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span id="HeatIndexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="HeatIndexHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span id="MinTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="MinTempHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span id="MaxTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="MaxTempLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span id="HumH"></span>&nbsp;%</td>
+											<td class=""><span id="HumHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity</td>
+											<td class="w3-right-align"><span id="HumL"></span>&nbsp;%</td>
+											<td class=""><span id="HumLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span id="HighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="HighDailyTempRangeT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span id="LowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="LowDailyTempRangeT"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span id="RainRateH"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span id="RainRateHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span id="HourlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="HourlyRainHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span id="Rain24HourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="Rain24HourHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span id="DailyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="DailyRainHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Monthly Rainfall</td>
+											<td class="w3-right-align"><span id="MonthlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="MonthlyRainHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span id="LongestDryPeriod"></span>&nbsp;days</td>
+											<td class=""><span id="LongestDryPeriodT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span id="LongestWetPeriod"></span>&nbsp;days</td>
+											<td class=""><span id="LongestWetPeriodT"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span id="GustH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span id="GustHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10 minute average)</span></td>
+											<td class="w3-right-align"><span id="WindH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span id="WindHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span id="WindRunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span id="WindRunHT"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span id="PressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span id="PressHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span id="PressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span id="PressLT"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="w3-row-padding w3-hide">	<!--	Row 2 of 3/4 width panel (hidden)	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Main panel</h2>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>Select the required month below.</p>
+								<div id="btnArray" 	class="w3-bar-block w3-center">
+									<button id="btnMon0" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeData(0)" aria-pressed="false">January</button>
+									<button id="btnMon1" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeData(1)" aria-pressed="false">February</button>
+									<button id="btnMon2" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(2)" aria-pressed="false">March</button>
+									<button id="btnMon3" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(3)" aria-pressed="false">April</button>
+									<button id="btnMon4" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(4)" aria-pressed="false">May</button>
+									<button id="btnMon5" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(5)" aria-pressed="false">June</button>
+									<button id="btnMon6" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(6)" aria-pressed="false">July</button>
+									<button id="btnMon7" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(7)" aria-pressed="false">August</button>
+									<button id="btnMon8" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(8)" aria-pressed="false">September</button>
+									<button id="btnMon9" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(9)" aria-pressed="false">October</button>
+									<button id="btnMon10" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(10)" aria-pressed="false">November</button>
+									<button id="btnMon11" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(11)" aria-pressed="false">December</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>

noaareport.htm

@@ -0,0 +1,130 @@
+<!--
+	noaareport.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2021/06/10 15:48:11
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3schools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility JavaScript's for all pages.	-->
+		<script src="js/noaarpts.js"></script>
+		<style>
+			#year, #month {
+				padding-bottom: 4px;
+				padding-top: 5px;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<!--	START OF PAGE CONTENT	Don't change anything above	-->
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">
+				<div class="w3-col l12">
+					<!--	Page Title goes HERE	-->
+					<div class="at-flex-between at-flex-items-center">
+						<h1>NOAA Reports<span class="subText"></span></h1>
+					</div>
+				</div>
+			</div>	<!--	End of title row	-->
+			<!--	Start of main content panels	-->
+			<div class="w3-row site-width w3-theme-light">
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">
+						<div class="w3-col s12">
+							<div id="NOAAMenu" class="w3-bar">
+								<div class="w3-bar-item at-slim">
+									<select id="year" class="w3-select w3-theme-l4" onchange="getYearRpt(this.value);"></select>
+								</div>
+								<div class="w3-bar-item at-slim">
+									<select id="month" class="w3-select w3-theme-l4" onchange="getMonRpt(this.value);">
+										<option id="opt-year" value="0" style="text-transform: uppercase;">Annual</option>
+										<option id="opt-1" value="1">January</option>
+										<option id="opt-2" value="2">February</option>
+										<option id="opt-3" value="3">March</option>
+										<option id="opt-4" value="4">April</option>
+										<option id="opt-5" value="5">May</option>
+										<option id="opt-6" value="6">June</option>
+										<option id="opt-7" value="7">July</option>
+										<option id="opt-8" value="8">August</option>
+										<option id="opt-9" value="9">September</option>
+										<option id="opt-10" value="10">October</option>
+										<option id="opt-11" value="11">November</option>
+										<option id="opt-12" value="12">December</option>
+									</select>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width panel on all screens	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<!--	Panel title here	-->
+								<!-- <h3><span id="RptTitle"></span></h3> -->
+								<!--	Panel content goes here	-->
+								<pre class="w3-responsive" style="min-height:500px;"><span id="noaareport">Loading report...</span></pre>
+								<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!--	Start of Sidebar	-->
+				<div class="w3-col l3 m12">
+					<div class="w3-row-padding">
+						<!--	First panel of sidebar	-->
+						<div class="w3-col l12">	<!--	Full width of sidebar -->
+							<div class="w3-panel w3-container w3-theme-light">
+								<!--	Sidebar content here	-->
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<!--	You can remove the above line if you wish	-->
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<!--	CHANGE NOTHING BELOW HERE	-->
+		<!--	Footer	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>

oldindex.htm

@@ -0,0 +1,242 @@
+<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+    <div class="w3-row-padding site-width">
+        <div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+            <img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo" />
+            <div class="w3-right-align" style="max-width:600px;">
+                <h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span
+                        class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span
+                        data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span
+                        class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+            </div>
+        </div>
+        <!--	Start of Menu	-->
+        <div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+        </div>
+        <!--	Mobile menu	-->
+        <div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+        </div> <!-- End of Mobile menu -->
+    </div>
+</div>
+<div id="Content">
+    <!--	Start of panel content	-->
+    <div class="w3-row-padding w3-theme-light site-width">
+        <!--	Page Title	-->
+        <div class="w3-col l12">
+            <h1><span data-cmxdata="location"></span> Weather <span class="subText"></span></h1>
+        </div>
+    </div> <!--	End of title row	-->
+    <div class="w3-row site-width w3-theme-light">
+        <!--	Start of Main panel	-->
+        <div class="w3-col l9 m12">
+            <!--	3/4 width panel	-->
+            <div class="w3-row-padding">
+                <!--	Row 1 of 3/4 width panel	-->
+                <div class="w3-col s12">
+                    <!-- 	Full width of above panel	-->
+                    <div class="w3-panel w3-container w3-theme-white">
+                        <h3 class="">Almanac</h3>
+                        <div class="w3-responsive">
+                            <table class="w3-table" style="min-width:100%;">
+                                <tbody>
+                                    <tr>
+                                        <td class="">Dawn:</td>
+                                        <td class=""><span data-cmxdata="dawn"></span></td>
+                                        <td class="">Sun Rise:</td>
+                                        <td class=""><span data-cmxdata="sunrise"></span></td>
+                                        <td class="">Moon Rise:</td>
+                                        <td class=""><span data-cmxdata="moonrise"></span></td>
+                                        <td rowspan="3" style="width:75px; height: 75px; padding:0"><img id="moonImg"
+                                                src="images/moon.png" alt="Moon" width="75" height="75"
+                                                class="w3-image" />Visible <span data-cmxdata="MoonPercentAbs"></span>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="">Dusk:</td>
+                                        <td class=""><span data-cmxdata="dusk"></span></td>
+                                        <td class="">Sun Set:</td>
+                                        <td class=""><span data-cmxdata="sunset"></span></td>
+                                        <td class="">Moon Set:</td>
+                                        <td class=""><span data-cmxdata="moonset"></span></td>
+                                    </tr>
+                                    <tr>
+                                        <td class="">Daylight:</td>
+                                        <td class=""><span data-cmxdata="daylightlength"></span></td>
+                                        <td class="">Day Length:</td>
+                                        <td class=""><span data-cmxdata="daylength"></span></td>
+                                        <td class="">Moon Phase:</td>
+                                        <td class=""><span id="moonPhase" data-cmxdata="moonphase"></span></td>
+                                    </tr>
+                                    <tr id="currCond" class="w3-hide">
+                                        <td colspan="7"><strong>Current conditions</strong>: <span
+                                                data-cmxdata="currcond"></span></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="w3-row-padding">
+                <!--	Row 2 of 3/4 width panel	-->
+                <div class="w3-col s12">
+                    <!-- 	Full width of above panel	-->
+                    <div class="w3-panel w3-card w3-theme-white">
+                        <h3 class="">Conditions at local time <span data-cmxdata="time"></span></h3>
+                        <div class="w3-responsive">
+                            <table class="w3-table w3-hoverable" style="min-width:100%;">
+                                <tr>
+                                    <td colspan="4" class="w3-theme-d5">Temperature and Humidity</td>
+                                </tr>
+                                <tr class="w3-theme-l2">
+                                    <td>Temperature</td>
+                                    <td><span data-cmxdata="temp"></span>&nbsp;<span data-cmxdata="tempunit"></span>
+                                    </td>
+                                    <td>Dew Point</td>
+                                    <td><span data-cmxdata="dew"></span>&nbsp;<span data-cmxdata="tempunit"></span>
+                                    </td>
+                                </tr>
+                                <tr class="w3-theme-l2">
+                                    <td>Windchill</td>
+                                    <td><span data-cmxdata="wchill"></span>&nbsp;<span data-cmxdata="tempunit"></span>
+                                    </td>
+                                    <td>Humidity</td>
+                                    <td><span data-cmxdata="hum"></span>&nbsp;%</td>
+                                </tr>
+                                <tr class="w3-theme-l2">
+                                    <td>Heat Index</td>
+                                    <td><span data-cmxdata="heatindex"></span>&nbsp;<span
+                                            data-cmxdata="tempunit"></span></td>
+                                    <td><span data-cmx-apparent class="w3-hide">Apparent Temperature</span><span
+                                            data-cmx-feels>Feels Like</span></td>
+                                    <td><span data-cmx-apparent data-cmxdata="apptemp" class="w3-hide"></span><span
+                                            data-cmx-feels data-cmxdata="feelslike"></span>&nbsp;<span
+                                            data-cmxdata="tempunit"></span></td>
+                                </tr>
+                                <tr class="w3-theme-l2">
+                                    <td>Temp change last hour</td>
+                                    <td><span data-cmxdata="TempChangeLastHour"></span>&nbsp;<span
+                                            data-cmxdata="tempunit"></span></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td colspan="4" class="w3-theme-d4">Rainfall</td>
+                                </tr>
+                                <tr class="w3-theme-l3">
+                                    <td>Rainfall Today</td>
+                                    <td><span data-cmxdata="rfall"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+                                    </td>
+                                    <td>Rainfall Rate</td>
+                                    <td><span data-cmxdata="rrate"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr
+                                    </td>
+                                </tr>
+                                <tr class="w3-theme-l3">
+                                    <td>Rainfall This Month</td>
+                                    <td><span data-cmxdata="rmonth"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+                                    </td>
+                                    <td>Rainfall This Year</td>
+                                    <td><span data-cmxdata="ryear"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+                                    </td>
+                                </tr>
+                                <tr class="w3-theme-l3">
+                                    <td>Rainfall Last Hour</td>
+                                    <td><span data-cmxdata="rhour"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+                                    </td>
+                                    <td>Last rainfall</td>
+                                    <td><span data-cmxdata="LastRainTip"></span></td>
+                                </tr>
+                                <tr class="w3-theme-l3">
+                                    <td>Rainfall Since Midnight</td>
+                                    <td><span data-cmxdata="rmidnight"></span>&nbsp;<span
+                                            data-cmxdata="rainunit"></span></td>
+                                    <td>Rainfall Last 24 Hours</td>
+                                    <td><span data-cmxdata="r24hour"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td colspan="4" class="w3-theme-d3">Wind</td>
+                                </tr>
+                                <tr class="w3-theme-l4">
+                                    <td>Wind Speed <span class="subText">(gust)</span></td>
+                                    <td><span data-cmxdata="wgust"></span>&nbsp;<span data-cmxdata="windunit"></span>
+                                    </td>
+                                    <td>Wind Speed <span class="subText">(avg)</span></td>
+                                    <td><span data-cmxdata="wspeed"></span>&nbsp;<span data-cmxdata="windunit"></span>
+                                    </td>
+                                </tr>
+                                <tr class="w3-theme-l4">
+                                    <td>Wind Bearing</td>
+                                    <td><span data-cmxdata="avgbearing"></span>&deg; <span data-cmxdata="wdir"></span>
+                                    </td>
+                                    <td>Beaufort <span data-cmxdata="beaufort"></span></td>
+                                    <td><span data-cmxdata="beaudesc"></span></td>
+                                </tr>
+                                <tr class="w3-theme-l4">
+                                    <td>Wind Variation <span class="subText">(last 10 minutes)</span></td>
+                                    <td colspan="3">From <span data-cmxdata="BearingRangeFrom"></span>&deg; to <span
+                                            data-cmxdata="BearingRangeTo"></span>&deg;</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="4" class="w3-theme-d2">Pressure <span class="subText">(sea
+                                            level)</span></td>
+                                </tr>
+                                <tr class="w3-theme-l5">
+                                    <td>Barometer</td>
+                                    <td><span data-cmxdata="press"></span>&nbsp;<span data-cmxdata="pressunit"></span>
+                                    </td>
+                                    <td><span data-cmxdata="presstrend"></span></td>
+                                    <td><span data-cmxdata="presstrendval"></span>&nbsp;<span
+                                            data-cmxdata="pressunit"></span>/hr</td>
+                                </tr>
+                                <tr class="w3-hide" data-cmx-solar data-cmx-uv>
+                                    <td colspan="4" class="w3-theme-d1">Solar</td>
+                                </tr>
+                                <tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+                                    <td>Solar Radiation</td>
+                                    <td><span data-cmxdata="SolarRad"></span>&nbsp;W/m&sup2;</td>
+                                    <td>Evapotranspiration Today</td>
+                                    <td><span data-cmxdata="ET"></span>&nbsp;<span data-cmxdata="rainunit"></span>
+                                    </td>
+                                </tr>
+                                <tr class="w3-theme-l6 w3-hide" data-cmx-uv>
+                                    <td>UV Index</td>
+                                    <td><span data-cmxdata="UV"></span></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                            </table>
+                        </div>
+                        <p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="w3-col l3 m12">
+            <!--	Start of Sidebar 1/4 width	-->
+            <div class="w3-row-padding">
+                <div class="w3-col l12">
+                    <div class="w3-panel w3-container w3-theme-light">
+                        <h3 class="w3-center">Welcome to <br /><span class="subText"><span
+                                    data-cmxdata="longlocation"></span></span></h3>
+                        <p>The weather station in use is the <span data-cmxdata="stationtype"></span><br>
+                            This page is updated every <span data-cmxdata="interval"></span> minutes. The
+                            meteorological day used at this station ends at <span data-cmxdata="rollovertime"></span>.
+                        </p>
+                        <p><strong>Forecast:</strong> <span data-cmxdata="forecast"></span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div> <!--	End of panel content -->
+</div> <!--	End of content	-->
+<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+    <div class="w3-row-padding site-width">
+        <p><em>Cumulus MX Template by Neil Thomas
+                <script>
+                    document.write(new Date().getFullYear());
+                </script>
+                <span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span
+                        data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span>
+            </em></p>
+    </div>
+</div>

record.htm

@@ -0,0 +1,240 @@
+<!--
+	record.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2023/11/30 15:28:14
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Records Since <span data-cmxdata="recordsbegandate"></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Records</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;" >
+										<tr class="w3-theme-d5">
+											<td colspan="3">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="tempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TtempH"></span></td>
+										</tr>
+											<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="tempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TtempL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="dewpointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TdewpointH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="dewpointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TdewpointL"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="apptempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TapptempH"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="apptempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TapptempL"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="feelslikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TfeelslikeH"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="feelslikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TfeelslikeL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span data-cmxdata="wchillL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TwchillL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span data-cmxdata="heatindexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TheatindexH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="mintempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TmintempH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="maxtempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TmaxtempL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span data-cmxdata="humH"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="ThumH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity </td>
+											<td class="w3-right-align"><span data-cmxdata="humL"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="ThumL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="HighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="THighDailyTempRange"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="LowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TLowDailyTempRange"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span data-cmxdata="rrateM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span data-cmxdata="TrrateM"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="rfallhH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="TrfallhH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="r24hourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="Tr24hourH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="rfallH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="TrfallH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Monthly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="rfallmH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="TrfallmH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span data-cmxdata="LongestDryPeriod"></span>&nbsp;days</td>
+											<td class=""><span data-cmxdata="TLongestDryPeriod"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span data-cmxdata="LongestWetPeriod"></span>&nbsp;days</td>
+											<td class=""><span data-cmxdata="TLongestWetPeriod"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span data-cmxdata="gustM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="TgustM"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10 minute average)</span></td>
+											<td class="w3-right-align"><span data-cmxdata="wspeedH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="TwspeedH"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span data-cmxdata="windrunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span data-cmxdata="TwindrunH"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="pressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="TpressH"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="pressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="TpressL"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>Records began on <span data-cmxdata="recordsbegandate"></span>. Here are the extremes recorded since then.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>

selectachart.htm

@@ -0,0 +1,137 @@
+<!--
+	selectachart.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2023/02/10 14:48:11
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local		-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+		<style>
+			#chartcontainer {
+				min-height: 550px;
+				margin-top:16px;
+				margin-bottom: 16px;
+			}
+			.graphs-width {
+				max-width:1250px;
+				margin: auto
+			}
+			.narrow-width {
+				max-width: 500px;
+			}
+			.select-value {
+				width:75%;
+				display:inline-block;
+			}
+			.select-color {
+				width:20%;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of main content	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Charts based on data you select<span class="subText"></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	First Row	-->
+				<div class="w3-col s12">	<!--	Column of first row	-->
+					<div class="w3-panel w3-card w3-theme-white">
+						<figure>
+							<div id="chartcontainer"></div>
+						</figure>
+					</div>
+				</div>
+			</div>	<!--	End of first column of first row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Start of second row	-->
+				<div class="w3-col s12">
+					<div class="w3-center">
+						<!--	Selector buttons	-->
+						<div class="at-flex-between" style="flex-wrap:wrap"> <!--	Main flex container: between forces content left & right -->
+							<div class="at-flex-justify" style="max-width:550px;flex-wrap:wrap;flex:2">	<!--	Left bar for selectors	-->
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data0" id="data0" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour0" id="colour0" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data1" id="data1" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour1" id="colour1" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data2" id="data2" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour2" id="colour2" onchange="updateColour(this)"></select>
+								</div>
+							</div>
+							<div class="at-flex-justify" style="max-width:550px;flex-wrap:wrap;flex:2"> <!--	Right bar for selectors	-->
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data3" id="data3" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour3" id="colour3" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data4" id="data4" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour4" id="colour4" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data5" id="data5" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour5" id="colour5" onchange="updateColour(this)"></select>
+								</div>
+							</div>
+						</div>
+						<div class="w3-panel">Click on a button to display the corresponding chart.&nbsp; Mouse over the chart to see the values at any given time.</div>
+					</div>
+				</div>
+			</div>	<!--	End of first column of second row	-->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+		<script src="https://code.highcharts.com/stock/10.3.3/highstock.js"></script>
+		<script src="https://code.highcharts.com/stock/10.3.3/modules/exporting.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/export-data.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/accessibility.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/boost.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/themes/grid.js"></script>
+		<script src="js/selectachart.js"></script>
+	</body>
+</html>

thismonth.htm

@@ -0,0 +1,235 @@
+<!--
+	thismonth.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 09:16:14
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1><span data-cmxdata="monthname"></span> highs &amp; lows</h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class=""><span data-cmxdata="monthname"></span> <span data-cmxdata="year"></span> records</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;">
+										<tr class="w3-theme-d5">
+											<td colspan="3">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthTempHT"></span> on <span data-cmxdata="MonthTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthTempLT"></span> on <span data-cmxdata="MonthTempLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthDewPointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthDewPointHT"></span> on <span data-cmxdata="MonthDewPointHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthDewPointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthDewPointLT"></span> on <span data-cmxdata="MonthDewPointLD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthAppTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthAppTempHT"></span> on <span data-cmxdata="MonthAppTempHD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthAppTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthAppTempLT"></span> on <span data-cmxdata="MonthAppTempLD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthFeelsLikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthFeelsLikeHT"></span> on <span data-cmxdata="MonthFeelsLikeHD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthFeelsLikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthFeelsLikeLT"></span> on <span data-cmxdata="MonthFeelsLikeLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthWChillL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthWChillLT"></span> on <span data-cmxdata="MonthWChillLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHeatIndexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthHeatIndexHT"></span> on <span data-cmxdata="MonthHeatIndexHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthMinTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthMinTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthMaxTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthMaxTempLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHumH"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="MonthHumHT"></span> on <span data-cmxdata="MonthHumHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity </td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHumL"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="MonthHumLT"></span> on <span data-cmxdata="MonthHumLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthHighDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthLowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthLowDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthRainRateH"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span data-cmxdata="MonthRainRateHT"></span> on <span data-cmxdata="MonthRainRateHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHourlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="MonthHourlyRainHT"></span> on <span data-cmxdata="MonthHourlyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthRain24HourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="MonthRain24HourHT"></span> on <span data-cmxdata="MonthRain24HourHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthDailyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="MonthDailyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthLongestDryPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="MonthLongestDryPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthLongestWetPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="MonthLongestWetPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthGustH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="MonthGustHT"></span> on <span data-cmxdata="MonthGustHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10 minute average)</span></td>
+											<td class="w3-right-align"><span data-cmxdata="MonthWindH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="MonthWindHT"></span> on <span data-cmxdata="MonthWindHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthWindRunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span data-cmxdata="MonthWindRunHD"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthPressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="MonthPressHT"></span> on <span data-cmxdata="MonthPressHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthPressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="MonthPressLT"></span> on <span data-cmxdata="MonthPressLD"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>The high and low records for the month of <span data-cmxdata="monthname"></span> <span data-cmxdata="year"></span>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>

thisyear.htm

@@ -0,0 +1,240 @@
+<!--
+	thisyear.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 09:19:30
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Records for this year <span class="subText"><span data-cmxdata="year"></span></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Records for <span data-cmxdata="year"></span></h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;">
+										<tr>
+											<td colspan="3" class="w3-theme-d5">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearTempHT"></span> on <span data-cmxdata="YearTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearTempLT"></span> on <span data-cmxdata="YearTempLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="YearDewPointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearDewPointHT"></span> on <span data-cmxdata="YearDewPointHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="YearDewPointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearDewPointLT"></span> on <span data-cmxdata="YearDewPointLD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="YearAppTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearAppTempHT"></span> on <span data-cmxdata="YearAppTempHD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="YearAppTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearAppTempLT"></span> on <span data-cmxdata="YearAppTempLD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="YearFeelsLikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearFeelsLikeHT"></span> on <span data-cmxdata="YearFeelsLikeHD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="YearFeelsLikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearFeelsLikeLT"></span> on <span data-cmxdata="YearFeelsLikeLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span data-cmxdata="YearWChillL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearWChillLT"></span> on <span data-cmxdata="YearWChillLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHeatIndexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+										<td class=""><span data-cmxdata="YearHeatIndexHT"></span> on <span data-cmxdata="YearHeatIndexHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearMinTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearMinTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearMaxTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearMaxTempLD"></span></td>
+											</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHumH"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="YearHumHT"></span> on <span data-cmxdata="YearHumHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity </td>
+											<td class="w3-right-align"><span data-cmxdata="YearHumL"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="YearHumLT"></span> on <span data-cmxdata="YearHumLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearHighDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="YearLowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearLowDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span data-cmxdata="YearRainRateH"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span data-cmxdata="YearRainRateHT"></span> on <span data-cmxdata="YearRainRateHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHourlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearHourlyRainHT"></span> on <span data-cmxdata="YearHourlyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearRain24HourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearRain24HourHT"></span> on <span data-cmxdata="YearRain24HourHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearDailyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearDailyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Monthly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearMonthlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearMonthlyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span data-cmxdata="YearLongestDryPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="YearLongestDryPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span data-cmxdata="YearLongestWetPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="YearLongestWetPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span data-cmxdata="YearGustH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="YearGustHT"></span> on <span data-cmxdata="YearGustHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10-minute Average)</span></td>
+											<td class="w3-right-align"><span data-cmxdata="YearWindH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="YearWindHT"></span> on <span data-cmxdata="YearWindHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span data-cmxdata="YearWindRunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span data-cmxdata="YearWindRunHD"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="YearPressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="YearPressHT"></span> on <span data-cmxdata="YearPressHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="YearPressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="YearPressLT"></span> on <span data-cmxdata="YearPressLD"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>The high and low records for <span data-cmxdata="year"></span>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>

today.htm

@@ -0,0 +1,239 @@
+<!--
+	today.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 10:11:12
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Today <span class="subText"><span data-cmxdata="date"></span></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2>Today&#39;s  data</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%">
+										<tbody>
+											<tr class="w3-theme-d5">
+												<td colspan="3">Temperature and Humidity</td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Temperature</td>
+												<td><span data-cmxdata="tempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Temperature</td>
+												<td><span data-cmxdata="tempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempTL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Temperature Range</td>
+												<td><span data-cmxdata="temprange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>High Apparent Temperature</td>
+												<td><span data-cmxdata="apptempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempTH"></span></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>Low Apparent Temperature</td>
+												<td><span data-cmxdata="apptempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempTL"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>High Feels Like</td>
+												<td><span data-cmxdata="feelslikeTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeTH"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>Low Feels Like</td>
+												<td><span data-cmxdata="feelslikeTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeTL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Wind Chill</td>
+												<td><span data-cmxdata="wchillTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TwchillTL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Heat Index</td>
+												<td><span data-cmxdata="heatindexTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TheatindexTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Humidity</td>
+												<td><span data-cmxdata="humTH"></span> %</td>
+												<td>at <span data-cmxdata="ThumTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Humidity</td>
+												<td><span data-cmxdata="humTL"></span> %</td>
+												<td>at <span data-cmxdata="ThumTL"></span></td>
+											</tr>
+											<tr class="w3-theme-d4">
+												<td colspan="3">Rainfall</td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Today</td>
+												<td><span data-cmxdata="rfall"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Rate Max</td>
+												<td><span data-cmxdata="rrateTM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td>at <span data-cmxdata="TrrateTM"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High Hourly Rainfall</td>
+												<td><span data-cmxdata="hourlyrainTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="ThourlyrainTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High 24 Hour Rainfall</td>
+												<td><span data-cmxdata="rain24hourTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="Train24hourTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Days Since Last Dry Day</td>
+												<td><span data-cmxdata="ConsecutiveRainDays"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Days Since It Last Rained</td>
+												<td><span data-cmxdata="ConsecutiveDryDays"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d3">
+												<td colspan="3">Wind</td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Gust</td>
+												<td><span data-cmxdata="wgustTM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td>at <span data-cmxdata="TwgustTM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Speed <span class="subText">(10 minute average)</span></td>
+												<td><span data-cmxdata="windTM"></span>&nbsp;<span data-cmxdata="windunit"></span> (<span data-cmxdata="Tbeaufort"></span>)</td>
+												<td>at <span data-cmxdata="TwindTM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Wind Run</td>
+												<td><span data-cmxdata="windrun"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Dominant Direction</td>
+												<td><span data-cmxdata="domwindbearing"></span>&deg; <span data-cmxdata="domwinddir"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d2">
+												<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>High Pressure</td>
+												<td><span data-cmxdata="pressTH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>Low Pressure</td>
+												<td><span data-cmxdata="pressTL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressTL"></span></td>
+											</tr>
+											<tr class="w3-theme-d1 w3-hide" data-cmx-solar data-cmx-uv>
+												<td colspan="3" class="w3-theme-d1">Solar</td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>High Solar Radiation</td>
+												<td><span data-cmxdata="solarTH"></span> W/m<sup>2</sup></td>
+												<td>at <span data-cmxdata="TsolarTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>Hours of Sunshine</td>
+												<td><span data-cmxdata="SunshineHours"></span> hrs</td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
+												<td>High UV Index</td>
+												<td><span data-cmxdata="UVTH"></span></td>
+												<td>at <span data-cmxdata="TUVTH"></span></td>
+											</tr>
+											</tbody>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 screen width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">	<!--	Full width of sidebar -->
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>This page shows the highs, lows and current values for today.<br>
+									This page is updated every <span data-cmxdata="interval"></span> minutes. The meteorological day used at this station ends at
+									<span data-cmxdata="rollovertime"></span>.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<!--	Footer	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>

todayyest.htm

@@ -0,0 +1,283 @@
+<!--
+	todayT.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/10/15 11:15:18
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX - Today vs Yesterday</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between at-flex-items-center">
+					<img src="images/CumulusMX-Logo.png" alt="CumulusmX Logo" class="w3-image logo"/>
+					<div class="w3-right-align statusPanel">
+						<h5 class="location w3-hide-small">Latitude:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|</span>Longitude:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|</span>Altitude:&nbsp;<span data-cmxdata="altitude"></span></h5>
+						<h6 class="location w3-hide-medium w3-hide-large">Lat:<span data-cmxdata="latitude"></span><span class="at-divider">|</span>Lon:<span data-cmxdata="longitude"></span><span class="at-divider">|</span>Alt:<span data-cmxdata="altitude"></span></h6>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Today vs Yesterday <span class="subText"> (<span data-cmxdata="yesterday"></span>)</span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2>Today and Yesterday&#39;s  data</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%">
+										<tbody>
+											<tr class="w3-theme-d5">
+												<th style="width:50%">Temperature and Humidity</th>
+												<th style="width:10%">Today</th>
+												<th style="width:15%"></th>
+												<th style="width:10%">Yesterday</th>
+												<th style="width:15%"></th>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Temperature</td>
+												<td><span data-cmxdata="tempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempTH"></span></td>
+												<td><span data-cmxdata="tempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Temperature</td>
+												<td><span data-cmxdata="tempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempTL"></span></td>
+												<td><span data-cmxdata="tempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Temperature Range</td>
+												<td><span data-cmxdata="temprange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+												<td><span data-cmxdata="temprangeY"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>High Apparent<span class="w3-hide-medium w3-hide-small"> Temperature</span></td>
+												<td><span data-cmxdata="apptempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempTH"></span></td>
+												<td><span data-cmxdata="apptempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempYH"></span></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>Low Apparent<span class="w3-hide-medium w3-hide-small"> Temperature</span></td>
+												<td><span data-cmxdata="apptempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempTL"></span></td>
+												<td><span data-cmxdata="apptempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempYL"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>High Feels Like</td>
+												<td><span data-cmxdata="feelslikeTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeTH"></span></td>
+												<td><span data-cmxdata="feelslikeYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeYH"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>Low Feels Like</td>
+												<td><span data-cmxdata="feelslikeTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeTL"></span></td>
+												<td><span data-cmxdata="feelslikeYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Wind Chill</td>
+												<td><span data-cmxdata="wchillTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwchillTL"></span></td>
+												<td><span data-cmxdata="wchillYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwchillYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Heat Index</td>
+												<td><span data-cmxdata="heatindexTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TheatindexTH"></span></td>
+												<td><span data-cmxdata="heatindexYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TheatindexYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Humidity</td>
+												<td><span data-cmxdata="humTH"></span> %</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </spaw3-hide-medium w3-hide-smalln><span data-cmxdata="ThumTH"></span></td>
+												<td><span data-cmxdata="humYH"></span>&nbsp;%</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThumYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Humidity</td>
+												<td><span data-cmxdata="humTL"></span> %</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThumTL"></span></td>
+												<td><span data-cmxdata="humYL"></span>&nbsp;%</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThumYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d4">
+												<td>Rainfall</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall</td>
+												<td><span data-cmxdata="rfall"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+												<td><span data-cmxdata="rfallY"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Rate<span class="w3-hide-medium w3-hide-small"> Max</span></td>
+												<td><span data-cmxdata="rrateTM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TrrateTM"></span></td>
+												<td><span data-cmxdata="rrateYM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TrrateYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td><span class="w3-hide-medium w3-hide-small">High </span>Hourly Rainfall</td>
+												<td><span data-cmxdata="hourlyrainTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThourlyrainTH"></span></td>
+												<td><span data-cmxdata="hourlyrainYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThourlyrainYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td><span class="w3-hide-medium w3-hide-small">High </span>24 Hour Rainfall</td>
+												<td><span data-cmxdata="rain24hourTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="Train24hourTH"></span></td>
+												<td><span data-cmxdata="rain24hourYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="Train24hourYH"></span></td>
+											</tr>
+											<tr class="w3-theme-d3">
+												<td>Wind</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Highest Gust</td>
+												<td><span data-cmxdata="wgustTM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwgustTM"></span></td>
+												<td><span data-cmxdata="wgustYM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwgustYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Highest Avg Speed</td>
+												<td><span data-cmxdata="windTM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwindTM"></span></td>
+												<td><span data-cmxdata="windYM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwindYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Wind Run</td>
+												<td><span data-cmxdata="windrun"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+												<td><span data-cmxdata="windrunY"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Dominant Direction</td>
+												<td><span data-cmxdata="domwindbearing"></span>&deg; <span data-cmxdata="domwinddir"></span></td>
+												<td></td>
+												<td><span data-cmxdata="domwindbearingY"></span>&deg; <span data-cmxdata="domwinddirY"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d2">
+												<td>Pressure (sea level)</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>High Pressure</td>
+												<td><span data-cmxdata="pressTH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressTH"></span></td>
+												<td><span data-cmxdata="pressYH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>Low Pressure</td>
+												<td><span data-cmxdata="pressTL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressTL"></span></td>
+												<td><span data-cmxdata="pressYL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d1 w3-hide" data-cmx-solar>
+												<td>Solar</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>High Solar Radiation</td>
+												<td><span data-cmxdata="solarTH"></span> W/m<sup>2</sup></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TsolarTH"></span></td>
+												<td><span data-cmxdata="solarYH"></span>&nbsp;W/m&sup2;</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TsolarYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>Hours of Sunshine</td>
+												<td><span data-cmxdata="SunshineHours"></span> hrs</td>
+												<td></td>
+												<td><span data-cmxdata="YSunshineHours"></span>&nbsp;hrs</td>
+												<td></td>
+											</tr>
+											</tbody>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 screen width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">	<!--	Full width of sidebar -->
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>This page shows the highs, lows and current values for today and yesterday.<br>
+									This page is updated every <span data-cmxdata="interval"></span> minutes. The meteorological day used <span class="w3-hide-medium w3-hide-small">at </span>this station ends at
+									<span data-cmxdata="rollovertime"></span>.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<!--	Footer	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>

trends.htm

@@ -0,0 +1,125 @@
+<!--
+	trends.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2023/03/16 09:46:57
+	Page: 1 main panel plus a sidebar
+	NOTE: Once uploaded this page does not need to be uploaded again unless edited.
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3schools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+
+		<style>
+			#chartcontainer  {
+				min-height: 550px;
+				margin-top:16px;
+				margin-bottom: 16px;
+			}
+			.mx-button {
+				margin-bottom: 5px;
+				border-radius: 4px;
+			}
+			.graphs-width {
+				max-width:1250px;
+				margin: auto
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of main content	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Trends</h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	First Row	-->
+				<div class="w3-col s12">	<!--	First column of first row	-->
+					<div class="w3-panel w3-card w3-theme-white">
+						<figure>
+							<div id="chartcontainer"></div>
+						</figure>
+					</div>
+				</div>	<!--	End of first column of first row	-->
+			</div>
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Second row	-->
+				<div class="w3-col s12">
+					<div class="w3-cardX w3-panelX w3-center">
+						<div class="w3-bar w3-center">
+							<select id="mySelect" aria-label="select data type for graph" class="w3-bar-item w3-select w3-theme-l2  at-slim">
+								<option value="temp" selected>Temperature</option>
+								<option value="dailytemp">Daily Temperature</option>
+								<option value="press">Pressure</option>
+								<option value="wind">Wind Speed</option>
+								<option value="windDir">Wind Direction</option>
+								<option value="humidity">Humidity</option>
+								<option value="rain">Rainfall</option>
+								<option value="dailyrain">Daily Rain</option>
+								<option value="solar">Solar</option>
+								<option value="sunhours">Sunshine Hours</option>
+								<option value="airquality">Air Quality</option>
+								<option value="extratemp">Extra Temperature</option>
+								<option value="extrahum">Extra Humidity</option>
+								<option value="extradew">Extra Dew Point</option>
+								<option value="soiltemp">Soil Temperature</option>
+								<option value="soilmoist">Soil Moisture</option>
+								<option value="leafwet">Leaf Wetness</option>
+								<option value="usertemp">User Temperature</option>
+								<option value="co2">CO&#8322; Sensor</option>
+							</select>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of row	-->
+		</div>	<!--	End of Content	-->
+		<div class="w3-row-padding"></div>
+			<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+		<script src="https://code.highcharts.com/stock/10.3.3/highstock.js"></script>
+		<script src="https://code.highcharts.com/stock/10.3.3/modules/exporting.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/export-data.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/accessibility.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/boost.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/themes/grid.js"></script>
+		<script src="js/cumuluscharts.js"></script>	<!--	Script needed to run charts	-->
+	</body>
+</html>

yesterday.htm

@@ -0,0 +1,225 @@
+<!--
+	yesterday.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 10:10:28
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Yesterday <span class="subText"><span data-cmxdata="yesterday"></span></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Yesterday's data</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%">
+										<tbody>
+											<tr class="w3-theme-d5">
+												<td colspan="3">Temperature and Humidity</td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Temperature</td>
+												<td><span data-cmxdata="tempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Temperature</td>
+												<td><span data-cmxdata="tempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Temperature Range</td>
+												<td><span data-cmxdata="temprangeY"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>High Apparent Temperature</td>
+												<td><span data-cmxdata="apptempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempYH"></span></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>Low Apparent Temperature</td>
+												<td><span data-cmxdata="apptempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempYL"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>High Feels Like</td>
+												<td><span data-cmxdata="feelslikeYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeYH"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>Low Feels Like</td>
+												<td><span data-cmxdata="feelslikeYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Wind Chill</td>
+												<td><span data-cmxdata="wchillYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TwchillYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Heat Index</td>
+												<td><span data-cmxdata="heatindexYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TheatindexYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Humidity</td>
+												<td><span data-cmxdata="humYH"></span>&nbsp;%</td>
+												<td>at <span data-cmxdata="ThumYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Humidity</td>
+												<td><span data-cmxdata="humYL"></span>&nbsp;%</td>
+												<td>at <span data-cmxdata="ThumYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d4">
+												<td colspan="3">Rainfall</td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Yesterday</td>
+												<td><span data-cmxdata="rfallY"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Rate Max</td>
+												<td><span data-cmxdata="rrateYM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td>at <span data-cmxdata="TrrateYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High Hourly Rainfall</td>
+												<td><span data-cmxdata="hourlyrainYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="ThourlyrainYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High 24 Hour Rainfall</td>
+												<td><span data-cmxdata="rain24hourYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="Train24hourYH"></span></td>
+											</tr>
+											<tr class="w3-theme-d3">
+												<td colspan="3">Wind</td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Gust</td>
+												<td><span data-cmxdata="wgustYM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td>at <span data-cmxdata="TwgustYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Speed <span class="subText">(10 minute average)</span></td>
+												<td><span data-cmxdata="windYM"></span>&nbsp;<span data-cmxdata="windunit"></span> (<span data-cmxdata="Ybeaufort"></span>)</td>
+												<td>at <span data-cmxdata="TwindYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Wind Run</td>
+												<td><span data-cmxdata="windrunY"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Dominant Direction</td>
+												<td><span data-cmxdata="domwindbearingY"></span>&deg; <span data-cmxdata="domwinddirY"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d2">
+												<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>High Pressure</td>
+												<td><span data-cmxdata="pressYH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>Low Pressure</td>
+												<td><span data-cmxdata="pressYL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d1 w3-hide" data-cmx-solar data-cmx-uv>
+												<td colspan="3">Solar</td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>High Solar Radiation</td>
+												<td><span data-cmxdata="solarYH"></span>&nbsp;W/m&sup2;</td>
+												<td>at <span data-cmxdata="TsolarYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>Hours of Sunshine</td>
+												<td><span data-cmxdata="YSunshineHours"></span>&nbsp;hrs</td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
+												<td>High UV Index</td>
+												<td><span data-cmxdata="UVYH"></span></td>
+												<td>at <span data-cmxdata="TUVYH"></span></td>
+											</tr>
+										</tbody>
+									</table>
+									<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>This page shows a summary of the data for the 24 hrs up to <span data-cmxdata="rollovertime"></span> local time. </p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>