RoscoeDaWah/wahs-the-weather
RoscoeDaWah/wahs-the-weather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add sauce

Browse source
This commit is contained in:
Roscoe 2024-12-11 21:20:28 +00:00
commit b856cb894f
No known key found for this signature in database
48 changed files with 28950 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

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

40
css/colours.css Normal file
View file

@ -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;}

101
css/gauges.css Normal file
View file

File diff suppressed because one or more lines are too long

249
css/mx-templates.css Normal file
View file

@ -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;
}
}

247
css/w3Pro.css Normal file
View file

@ -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;
}

184
css/wah.css Normal file
View file

@ -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;
}

328
gauges.htm Normal file
View file

@ -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>

112
historic.htm Normal file
View file

@ -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>

BIN
images/CumulusMX-Logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 837 KiB

BIN
images/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
images/moon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
images/picture.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

199
index.php Normal file
View file

@ -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>

40
js/alltimerecdata.js Normal file
View file

@ -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 () {
});

2468
js/cumuluscharts.js Normal file
View file

File diff suppressed because it is too large Load diff

1134
js/historiccharts.js Normal file
View file

File diff suppressed because it is too large Load diff

36
js/menu.js Normal file
View file

@ -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}
];

44
js/menuSample.js Normal file
View file

@ -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 }
]
}
];

74
js/monthlyrecdata.js Normal file
View file

@ -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);
}

142
js/noaarpts.js Normal file
View file

@ -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');
}
});
};

1469
js/selectachart.js Normal file
View file

File diff suppressed because it is too large Load diff

237
js/setpagedata.js Normal file
View file

@ -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);
});
});

2
lib/jquery/jquery-latest.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

484
lib/jquery/jquery.tmpl.js Normal file
View file

@ -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 );

1
lib/steelseries/scripts/RGraph.common.core.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
lib/steelseries/scripts/RGraph.rose.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

4376
lib/steelseries/scripts/gauges.js Normal file
View file

File diff suppressed because it is too large Load diff

4
lib/steelseries/scripts/language.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2959
lib/steelseries/scripts/src/RGraph.common.core.js Normal file
View file

File diff suppressed because it is too large Load diff

1204
lib/steelseries/scripts/src/RGraph.rose.js Normal file
View file

File diff suppressed because it is too large Load diff

2987
lib/steelseries/scripts/src/language.js Normal file
View file

File diff suppressed because it is too large Load diff

6974
lib/steelseries/scripts/src/steelseries.js Normal file
View file

File diff suppressed because it is too large Load diff

25
lib/steelseries/scripts/src/steelseries.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

380
lib/steelseries/scripts/src/tween.js Normal file
View file

@ -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;
};

31
lib/steelseries/scripts/src/tween.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

55
lib/steelseries/scripts/steelseries_tween.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

265
monthlyrecord.htm Normal file
View file

@ -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>

130
noaareport.htm Normal file
View file

@ -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>

242
oldindex.htm Normal file
View file

@ -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>

240
record.htm Normal file
View file

@ -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>

137
selectachart.htm Normal file
View file

@ -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>

235
thismonth.htm Normal file
View file

@ -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>

240
thisyear.htm Normal file
View file

@ -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>

239
today.htm Normal file
View file

@ -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>

283
todayyest.htm Normal file
View file

@ -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>

125
trends.htm Normal file
View file

@ -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>

225
yesterday.htm Normal file
View file

@ -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>