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

Add today and yesterday pages

Browse source
This commit is contained in:
Roscoe 2024-12-11 23:05:59 +00:00
parent b856cb894f
commit 98bad33895
No known key found for this signature in database
17 changed files with 6713 additions and 7084 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
css/wah.css
View file

@ -94,6 +94,20 @@ div.page-container > div:last-child {
margin-bottom: 0;
}
div#header {
display: grid;
grid-template-columns: 66px 1fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 0px;
}
div#header img {
filter: drop-shadow(2px 2px hsl(0, 0%, 66%));
margin-right: 10px;
image-rendering: pixelated;
}
div#header h1 {
margin: 0;
font-style: italic;
@ -118,8 +132,8 @@ div#footer {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-column-gap: 0;
grid-row-gap: 0;
align-items: center;
}
@ -127,14 +141,6 @@ 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) {
@ -153,32 +159,33 @@ table.almanac {
min-width: 100%;
}
table.conditions-now {
table.mx-datatable {
width: 100%;
border-collapse: collapse;
border: var(--border);
filter: var(--shadow-small);
background-color: var(--background);
}
table.conditions-now th {
table.mx-datatable th {
text-align: left;
background-color: var(--background-dim);
border-top: var(--border);
}
table.conditions-now tr td,
table.conditions-now tr th {
table.mx-datatable tr td,
table.mx-datatable tr th {
padding: 5px 10px 5px 5px;
}
table.conditions-now tr td:nth-child(2) {
table.mx-datatable tr td:nth-child(2) {
padding-right: 40px;
}
table.conditions-now tr td:nth-child(odd) {
table.current-conditions tr td:nth-child(odd) {
font-weight: bold;
}
table.conditions-now tr:last-child td:nth-child(3) {
table.current-conditions tr:last-child td:nth-child(3) {
font-weight: normal;
font-style: italic;
}

BIN
images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

12
includes/footer.inc.php Normal file
View file

@ -0,0 +1,12 @@
<div id="footer">
<div>
<span>
&copy; floppydisk 2021-<?= date("Y") ?>
</span>
</div>
<div>
<span>
Powered by Cumulus MX v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span>
</span>
</div>
</div>

14
includes/head.inc.php Normal file
View file

@ -0,0 +1,14 @@
<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. -->

19
includes/header.inc.php Normal file
View file

@ -0,0 +1,19 @@
<div id="header">
<div>
<img src="/images/logo.png" width="65">
</div>
<div>
<h1>wah's the weather?</h1>
<nav>
<strong>Pages:</strong>
<a href="/">now</a> |
<a href="/today">today</a> |
<a href="/yesterday">yesterday</a> |
<a href="/todayyest">today-yest</a> |
<a href="/gauges">gauges</a> |
<a href="/records">records</a> |
<a href="/charts">charts</a> |
<a href="/reports">reports</a>
</nav>
</div>
</div>

60
index.php
View file

@ -2,26 +2,13 @@
<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. -->
<?php include("./includes/head.inc.php"); ?>
<script>
window.onload = () => {
$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
$('#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());
$('#moonImg').attr('src', '/images/moon.png?' + Date.now());
}, 1200000);
};
</script>
@ -29,20 +16,7 @@
<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>
<?php include("./includes/header.inc.php"); ?>
<div id="content">
<h3>Almanac</h3>
<table class="almanac">
@ -55,8 +29,8 @@
<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>%
src="/images/moon.png" alt="Moon" width="75" height="75" class="w3-image" />Visible
<span data-cmxdata="MoonPercentAbs"></span>%
</td>
</tr>
<tr>
@ -79,7 +53,7 @@
</table>
<br><br>
<h3>Conditions at local time <span data-cmxdata="time"></span></h3>
<table class="conditions-now">
<table class="mx-datatable current-conditions">
<tr>
<th colspan="4">Temperature and Humidity</th>
</tr>
@ -108,7 +82,8 @@
</tr>
<tr>
<td>Temp change last hour</td>
<td><span data-cmxdata="TempChangeLastHour"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
<td><span data-cmxdata="TempChangeLastHour"></span>&nbsp;<span data-cmxdata="tempunit"></span>
</td>
<td></td>
<td></td>
</tr>
@ -177,22 +152,13 @@
<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>
<td><span data-cmxdata="presstrendval"></span>&nbsp;<span data-cmxdata="pressunit"></span>/hr
</td>
</tr>
</table>
<small>Page data updated <span data-cmxdata="update"></span></small>
</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>
<?php include("./includes/footer.inc.php"); ?>
</div>
</body>

2
js/menuSample.js
View file

@ -38,7 +38,7 @@ menuSrc = [
{ 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 }
{ 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 }
]
}
];

2
js/setpagedata.js
View file

@ -14,7 +14,7 @@ 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
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!

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

File diff suppressed because one or more lines are too long

33
lib/steelseries/scripts/gauges.js
View file

@ -38,7 +38,7 @@ gauges = (function () {
// Script configuration parameters you may want to 'tweak'
scriptVer: '2.7.7',
weatherProgram: 0, // Set 0=Cumulus, 1=Weather Display, 2=VWS, 3=WeatherCat, 4=Meteobridge, 5=WView, 6=WeeWX, 7=WLCOM
imgPathURL : './images/', // *** Change this to the relative path for your 'Trend' graph images
imgPathURL: './/images/', // *** Change this to the relative path for your 'Trend' graph /images
oldGauges: 'gauges.htm', // *** Change this to the relative path for your 'old' gauges page.
realtimeInterval: 15, // *** Download data interval, set to your realtime data update interval in seconds
longPoll: false, // if enabled, use long polling and PHP generated data !!only enable if you understand how this is implemented!!
@ -77,7 +77,7 @@ gauges = (function () {
realTimeUrlWeewx: 'gauge-data.txt', // *** WeeWX Users: Change to your location of the gauge data file ***
realTimeUrlWLCOM: 'WLrealtimegauges.php', // *** WLCOM Users: change to location of WLCOMtags.php file ***
useCookies: true, // Persistently store user preferences in a cookie?
tipImages : [],
tip/ images : [],
dashboardMode: false, // Used by Cumulus MX dashboard - SET TO FALSE OTHERWISE
dewDisplayType: 'dew' // Initial 'scale' to display on the 'dew point' gauge.
// 'dew' - Dewpoint
@ -213,9 +213,9 @@ gauges = (function () {
// Cumulus
realtimeVer = 12; // minimum version of the realtime JSON file required
config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlCumulus;
// the trend images to be used for the pop-up data, used in conjunction with config.imgPathURL
// the trend /images to be used for the pop-up data, used in conjunction with config.imgPathURL
// by default this is configured for the Cumulus 'standard' web site
// ** If you specify one image in a sub-array, then you MUST provide images for all the other sub-elements
// ** If you specify one image in a sub-array, then you MUST provide /images for all the other sub-elements
config.tipImgs = [ // config.tipImgs for Cumulus users using the 'default' weather site
['temp.png', 'intemp.png'], // Temperature: outdoor, indoor
// Temperature: dewpoint, apparent, windChill, heatIndex, humidex
@ -254,7 +254,8 @@ gauges = (function () {
// WD useer generally use wxgraphs - tweak the CSS to accomadate the different aspect ratio
$('.tipimg').css({
width: '360px',
height: '260px'});
height: '260px'
});
break;
case 2:
// WVS
@ -302,10 +303,10 @@ gauges = (function () {
// Meteobridge
realtimeVer = 10; // minimum version of the realtime JSON file required
config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlMB;
config.showPopupGraphs = false; // config.tipImgs - no Meteobridge images available
config.showPopupGraphs = false; // config.tipImgs - no Meteobridge /images available
config.showRoseGauge = false; // no windrose data from MB
config.showCloudGauge = false;
config.tipImgs = null; // config.tipImgs - no Meteobridge images available
config.tipImgs = null; // config.tipImgs - no Meteobridge /images available
config.showWindVariation = false; // no wind variation data from MB
break;
case 5:
@ -358,10 +359,10 @@ gauges = (function () {
// WLCOM
realtimeVer = 10; // minimum version of the realtime JSON file required
config.realTimeURL = config.realTimeUrlWLCOM;
config.showPopupGraphs = false; // config.tipImgs - no WL images available
config.showPopupGraphs = false; // config.tipImgs - no WL /images available
config.showRoseGauge = false; // no windrose data from WL
config.showCloudGauge = false;
config.tipImgs = null; // config.tipImgs - no WL images available
config.tipImgs = null; // config.tipImgs - no WL /images available
config.showWindVariation = false; // no wind variation data from WL
break;
default:
@ -382,7 +383,7 @@ gauges = (function () {
config.gaugeScaling = 1;
}
// Logo images are used to 'personalise' the gauge backgrounds
// Logo /images are used to 'personalise' the gauge backgrounds
// To add a logo to a gauge, add the parameter:
// params.customLayer = _imgBackground;
// to the corresponding drawXxxx() function below.
@ -393,7 +394,7 @@ gauges = (function () {
_imgBackground = document.createElement('img'); // small logo
$(_imgBackground).attr('src', config.imgPathURL + 'logoSmall.png');
*/
// End of logo images
// End of logo /images
// Get the display units the user last used when they visited before - if present
displayUnits = getCookie('units');
@ -740,7 +741,7 @@ gauges = (function () {
params.titleString = cache.title;
params.unitString = data.tempunit;
params.trendVisible = gaugeGlobals.tempTrendVisible;
// params.customLayer = _imgBackground; // uncomment to add a background image - See Logo Images above
// params.customLayer = _imgBackground; // uncomment to add a background image - See Logo /images above
ssGauge = new steelseries.Radial('canvas_temp', params);
ssGauge.setValue(cache.value);
@ -3115,9 +3116,9 @@ gauges = (function () {
$('#programName').html(programLink[config.weatherProgram]);
if (config.showPopupData) {
// now initialise the pop-up script and download the trend images
// now initialise the pop-up script and download the trend /images
// - has to be done here as doFirst may remove elements from the page
// - and we delay the download of the images speeding up page display
// - and we delay the download of the /images speeding up page display
ddimgtooltip.init('[id^="tip_"]');
// Are we running on a phone device (or really low res screen)?
if ($(window).width() < 480) {
@ -3126,9 +3127,9 @@ gauges = (function () {
}
if (config.showPopupData && config.showPopupGraphs) {
// now download the trend images
// now download the trend /images
// - has to be done here as doFirst may remove elements from the page
// - and we delay the download of the images speeding up page display
// - and we delay the download of the /images speeding up page display
//
$('#imgtip0_img').attr('src', config.imgPathURL + config.tipImgs[0][0] + cacheDefeat);
if (gaugeDew) {

55
lib/steelseries/scripts/src/RGraph.rose.js
View file

@ -20,8 +20,7 @@
* @param object canvas
* @param array data
*/
RGraph.Rose = function (id, data)
{
RGraph.Rose = function (id, data) {
this.id = id;
this.canvas = document.getElementById(id);
this.context = this.canvas.getContext('2d');
@ -174,8 +173,7 @@
* @param string name The name of the property to set
* @param string value The value of the property
*/
RGraph.Rose.prototype.Set = function (name, value)
{
RGraph.Rose.prototype.Set = function (name, value) {
/**
* This should be done first - prepend the propertyy name with "chart." if necessary
*/
@ -193,8 +191,7 @@
*
* @param string name The name of the property to get
*/
RGraph.Rose.prototype.Get = function (name)
{
RGraph.Rose.prototype.Get = function (name) {
/**
* This should be done first - prepend the property name with "chart." if necessary
*/
@ -209,8 +206,7 @@
/**
* This method draws the rose chart
*/
RGraph.Rose.prototype.Draw = function ()
{
RGraph.Rose.prototype.Draw = function () {
/**
* Fire the onbeforedraw event
*/
@ -302,8 +298,7 @@
/**
* This method draws the rose charts background
*/
RGraph.Rose.prototype.DrawBackground = function ()
{
RGraph.Rose.prototype.DrawBackground = function () {
this.context.lineWidth = 1;
@ -424,8 +419,7 @@
/**
* This method draws the data on the graph
*/
RGraph.Rose.prototype.DrawRose = function ()
{
RGraph.Rose.prototype.DrawRose = function () {
var max = 0;
var data = this.data;
var margin = RGraph.degrees2Radians(this.Get('chart.margin'));
@ -715,8 +709,7 @@
/**
* Unsuprisingly, draws the labels
*/
RGraph.Rose.prototype.DrawLabels = function ()
{
RGraph.Rose.prototype.DrawLabels = function () {
this.context.lineWidth = 1;
var key = this.Get('chart.key');
@ -798,8 +791,7 @@
*
* @param labels array The labels that go around the chart
*/
RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r)
{
RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r) {
var variant = this.Get('chart.variant');
var position = this.Get('chart.labels.position');
var r = r + 5 + this.Get('chart.labels.offset');
@ -864,8 +856,7 @@
* @param object e Your event object
*/
RGraph.Rose.prototype.getShape =
RGraph.Rose.prototype.getSegment = function (e)
{
RGraph.Rose.prototype.getSegment = function (e) {
RGraph.FixEventObject(e);
var canvas = this.canvas;
@ -949,8 +940,7 @@
/**
* Returns any exploded for a particular segment
*/
RGraph.Rose.prototype.getexploded = function (index, startAngle, endAngle, exploded)
{
RGraph.Rose.prototype.getexploded = function (index, startAngle, endAngle, exploded) {
var explodedx, explodedy;
/**
@ -979,10 +969,9 @@
* This function facilitates the installation of tooltip event listeners if
* tooltips are defined.
*/
RGraph.Rose.prototype.AllowTooltips = function ()
{
// Preload any tooltip images that are used in the tooltips
RGraph.PreLoadTooltipImages(this);
RGraph.Rose.prototype.AllowTooltips = function () {
// Preload any tooltip /images that are used in the tooltips
RGraph.PreLoadTooltip / images(this);
/**
@ -1013,8 +1002,7 @@
*
* @param object shape The shape to highlight
*/
RGraph.Rose.prototype.Highlight = function (shape)
{
RGraph.Rose.prototype.Highlight = function (shape) {
if (this.Get('chart.tooltips.highlight')) {
// Add the new segment highlight
this.context.beginPath();
@ -1045,8 +1033,7 @@
*
* @param object e The event object
*/
RGraph.Rose.prototype.getObjectByXY = function (e)
{
RGraph.Rose.prototype.getObjectByXY = function (e) {
var mouseXY = RGraph.getMouseXY(e);
// Work out the radius
@ -1074,8 +1061,7 @@
* @param int y The Y coordinate specified for the tooltip
* @param objec tooltip The tooltips DIV element
*/
RGraph.Rose.prototype.positionTooltip = function (obj, x, y, tooltip, idx)
{
RGraph.Rose.prototype.positionTooltip = function (obj, x, y, tooltip, idx) {
var coordX = obj.angles[idx][4];
var coordY = obj.angles[idx][5];
@ -1131,8 +1117,7 @@
*
* @param number value The relevant value to get the radius for
*/
RGraph.Rose.prototype.getRadius = function (value)
{
RGraph.Rose.prototype.getRadius = function (value) {
// Range checking (the Rose minimum is always 0)
if (value < 0 || value > this.max) {
return null;
@ -1148,8 +1133,7 @@
/**
* This allows for easy specification of gradients
*/
RGraph.Rose.prototype.parseColors = function ()
{
RGraph.Rose.prototype.parseColors = function () {
for (var i = 0; i < this.properties['chart.colors'].length; ++i) {
this.properties['chart.colors'][i] = this.parseSingleColorForGradient(this.properties['chart.colors'][i]);
}
@ -1174,8 +1158,7 @@
/**
* This parses a single color value
*/
RGraph.Rose.prototype.parseSingleColorForGradient = function (color)
{
RGraph.Rose.prototype.parseSingleColorForGradient = function (color) {
var canvas = this.canvas;
var context = this.context;

112
lib/steelseries/scripts/src/steelseries.js
View file

@ -985,10 +985,14 @@ var steelseries = (function () {
this.setMinValue = function (value) {
minValue = parseFloat(value);
resetBuffers({frame: true,
background: true});
init({frame: true,
background: true});
resetBuffers({
frame: true,
background: true
});
init({
frame: true,
background: true
});
this.repaint();
return this;
};
@ -999,10 +1003,14 @@ var steelseries = (function () {
this.setMaxValue = function (value) {
maxValue = parseFloat(value);
resetBuffers({frame: true,
background: true});
init({frame: true,
background: true});
resetBuffers({
frame: true,
background: true
});
init({
frame: true,
background: true
});
this.repaint();
return this;
};
@ -1023,9 +1031,12 @@ var steelseries = (function () {
this.setArea = function (areaVal) {
area = areaVal;
resetBuffers({background: true,
foreground: true});
init({background: true,
resetBuffers({
background: true,
foreground: true
});
init({
background: true,
foreground: true
});
this.repaint();
@ -1034,9 +1045,12 @@ var steelseries = (function () {
this.setSection = function (areaSec) {
section = areaSec;
resetBuffers({background: true,
foreground: true});
init({background: true,
resetBuffers({
background: true,
foreground: true
});
init({
background: true,
foreground: true
});
this.repaint();
@ -1073,11 +1087,13 @@ var steelseries = (function () {
};
this.setBackgroundColor = function (newBackgroundColor) {
resetBuffers({background: true,
resetBuffers({
background: true,
pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false) // type2 & 13 depend on background
});
backgroundColor = newBackgroundColor;
init({background: true, // type2 & 13 depend on background
init({
background: true, // type2 & 13 depend on background
pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false)
});
this.repaint();
@ -1093,11 +1109,13 @@ var steelseries = (function () {
};
this.setPointerType = function (newPointerType) {
resetBuffers({pointer: true,
resetBuffers({
pointer: true,
foreground: true
});
pointerType = newPointerType;
init({pointer: true,
init({
pointer: true,
foreground: true
});
this.repaint();
@ -1213,14 +1231,16 @@ var steelseries = (function () {
this.repaint = function () {
if (!initialized) {
init({frame: true,
init({
frame: true,
background: true,
led: true,
userLed: true,
pointer: true,
trend: true,
foreground: true,
odo: true});
odo: true
});
}
mainCtx.clearRect(0, 0, size, size);
@ -1668,9 +1688,11 @@ var steelseries = (function () {
sectionAngles = [];
do {
sectionIndex--;
sectionAngles.push({start: (((section[sectionIndex].start + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
sectionAngles.push({
start: (((section[sectionIndex].start + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
stop: (((section[sectionIndex].stop + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
color: customColorDef(section[sectionIndex].color)});
color: customColorDef(section[sectionIndex].color)
});
} while (0 < sectionIndex);
}
@ -2087,11 +2109,15 @@ var steelseries = (function () {
};
this.setBackgroundColor = function (newBackgroundColor) {
resetBuffers({background: true,
led: true});
resetBuffers({
background: true,
led: true
});
backgroundColor = newBackgroundColor;
init({background: true,
led: true});
init({
background: true,
led: true
});
this.repaint();
return this;
};
@ -2313,13 +2339,15 @@ var steelseries = (function () {
fraction;
if (!initialized) {
init({frame: true,
init({
frame: true,
background: true,
led: true,
userLed: true,
value: true,
trend: true,
foreground: true});
foreground: true
});
}
mainCtx.clearRect(0, 0, size, size);
@ -2799,7 +2827,7 @@ var steelseries = (function () {
// Buffer for LCD displays
var lcdBuffer;
// Buffer for latest pointer images painting code
// Buffer for latest pointer /images painting code
var pointerBufferLatest = createBuffer(size, size);
var pointerContextLatest = pointerBufferLatest.getContext('2d');
@ -3427,10 +3455,12 @@ var steelseries = (function () {
this.setPointerType = function (newPointerType) {
pointerTypeLatest = newPointerType;
resetBuffers({pointer: true,
resetBuffers({
pointer: true,
foreground: true
});
init({pointer: true,
init({
pointer: true,
foreground: true
});
this.repaint();
@ -3439,10 +3469,12 @@ var steelseries = (function () {
this.setPointerTypeAverage = function (newPointerType) {
pointerTypeAverage = newPointerType;
resetBuffers({pointer: true,
resetBuffers({
pointer: true,
foreground: true
});
init({pointer: true,
init({
pointer: true,
foreground: true
});
this.repaint();
@ -3475,11 +3507,13 @@ var steelseries = (function () {
this.repaint = function () {
if (!initialized) {
init({frame: true,
init({
frame: true,
background: true,
led: true,
pointer: true,
foreground: true});
foreground: true
});
}
mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);
@ -6370,9 +6404,11 @@ var steelseries = (function () {
}
function section(start, stop, color) {
return {start : start,
return {
start: start,
stop: stop,
color : color};
color: color
};
}
Math.log10 = function (value) {
@ -6940,7 +6976,7 @@ var steelseries = (function () {
Led: led,
Odometer: odometer,
// Images
// /images
drawFrame: drawRadialFrameImage,
drawBackground: drawRadialBackgroundImage,
drawForeground: drawRadialForegroundImage,

242
oldindex.htm
View file

@ -1,242 +0,0 @@
<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>

239
today.htm
View file

@ -1,239 +0,0 @@
<!--
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>

148
today/index.php Normal file
View file

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("../includes/head.inc.php"); ?>
<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">
<?php include("../includes/header.inc.php"); ?>
<div id="content">
<h3>Data for today (<span data-cmxdata="date"></span>)</h3>
<table class="mx-datatable">
<tr>
<th colspan="4">Temperature and Humidity</th>
</tr>
<tr>
<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>
<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>
<td>Temperature Range</td>
<td><span data-cmxdata="temprange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
<td></td>
</tr>
<tr data-cmx-feels>
<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>
<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>
<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>
<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>
<td>High Humidity</td>
<td><span data-cmxdata="humTH"></span> %</td>
<td>at <span data-cmxdata="ThumTH"></span></td>
</tr>
<tr>
<td>Low Humidity</td>
<td><span data-cmxdata="humTL"></span> %</td>
<td>at <span data-cmxdata="ThumTL"></span></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></td>
</tr>
<tr>
<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>
<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>
<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>
<td>Days Since Last Dry Day</td>
<td><span data-cmxdata="ConsecutiveRainDays"></span></td>
<td></td>
</tr>
<tr>
<td>Days Since It Last Rained</td>
<td><span data-cmxdata="ConsecutiveDryDays"></span></td>
<td></td>
</tr>
<tr>
<th colspan="4">Wind</th>
</tr>
<tr>
<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>
<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>
<td>Wind Run</td>
<td><span data-cmxdata="windrun"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
<td></td>
</tr>
<tr>
<td>Dominant Direction</td>
<td><span data-cmxdata="domwindbearing"></span>&deg; <span data-cmxdata="domwinddir"></span></td>
<td></td>
</tr>
<tr>
<th colspan="4">Pressure (sea level)</th>
</tr>
<tr>
<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>
<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>
</table>
<small>Page data updated <span data-cmxdata="update"></span></small>
</div>
<?php include("../includes/footer.inc.php"); ?>
</div>
</body>
</html>

225
yesterday.htm
View file

@ -1,225 +0,0 @@
<!--
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>

149
yesterday/index.php Normal file
View file

@ -0,0 +1,149 @@
<!DOCYYPE html>
<html lang="en">
<head>
<?php include("../includes/head.inc.php"); ?>
<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">
<?php include("../includes/header.inc.php"); ?>
<div id="content">
<h3>Data for today (<span data-cmxdata="yesterday"></span>)</h3>
<table class="mx-datatable">
<tr>
<th colspan="4">Temperature and Humidity</th>
</tr>
<tr>
<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>
<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>
<td>Temperature Range</td>
<td><span data-cmxdata="temprange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
<td></td>
</tr>
<tr data-cmx-feels>
<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>
<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>
<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>
<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>
<td>High Humidity</td>
<td><span data-cmxdata="humYH"></span> %</td>
<td>at <span data-cmxdata="ThumYH"></span></td>
</tr>
<tr>
<td>Low Humidity</td>
<td><span data-cmxdata="humYL"></span> %</td>
<td>at <span data-cmxdata="ThumYL"></span></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></td>
</tr>
<tr>
<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>
<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>
<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>
<td>Days Since Last Dry Day</td>
<td><span data-cmxdata="ConsecutiveRainDays"></span></td>
<td></td>
</tr>
<tr>
<td>Days Since It Last Rained</td>
<td><span data-cmxdata="ConsecutiveDryDays"></span></td>
<td></td>
</tr>
<tr>
<th colspan="4">Wind</th>
</tr>
<tr>
<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>
<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="Tbeaufort"></span>)</td>
<td>at <span data-cmxdata="TwindYM"></span></td>
</tr>
<tr>
<td>Wind Run</td>
<td><span data-cmxdata="windrun"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
<td></td>
</tr>
<tr>
<td>Dominant Direction</td>
<td><span data-cmxdata="domwindbearing"></span>&deg; <span data-cmxdata="domwinddir"></span>
</td>
<td></td>
</tr>
<tr>
<th colspan="4">Pressure (sea level)</th>
</tr>
<tr>
<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>
<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>
</table>
<small>Page data updated <span data-cmxdata="update"></span></small>
</div>
<?php include("../includes/footer.inc.php"); ?>
</div>
</body>
</html>