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

Add /gauges/

Browse source
This commit is contained in:
Roscoe 2024-12-12 22:39:43 +00:00
parent 173d5d7cf0
commit 17576e898a
No known key found for this signature in database
3 changed files with 4476 additions and 4390 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
css/wah.css
View file

@ -188,3 +188,24 @@ table.current-conditions tr:last-child td:nth-child(3) {
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
/* -------------------------------------------------------------------------- */
div.gauge-grid {
padding: 20px !important;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
div.gauge-header {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
}
canvas#canvas_led {
margin-bottom: -7px;
}

91
gauges/index.php
View file

@ -3,26 +3,91 @@
<head> <head>
<?php include("../includes/head.inc.php"); ?> <?php include("../includes/head.inc.php"); ?>
<script> <link href="/css/gauges.css" rel="stylesheet"> <!-- Stylesheet specifically for the gauges -->
window.onload = () => { <script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
$('#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> </head>
<body> <body>
<div class="page-container"> <div class="page-container">
<?php include("../includes/header.inc.php"); ?> <?php include("../includes/header.inc.php"); ?>
<div id="content"> <div id="content">
<canvas id="canvas_status" width="200" height="25"></canvas> <div class="gauge-header">
<canvas id="canvas_timer" width="60" height="25"></canvas> <div><canvas id="canvas_status" width="200" height="25"></canvas></div>
Status: <canvas id="canvas_led" width="25" height="25"></canvas> <div style="width:60px; display:inline-block"><canvas id="canvas_timer" width="60" height="25"></canvas>
</div>
<div>Status: <canvas id="canvas_led" width="25" height="25"></canvas>
</div>
</div>
<div class="gauge-grid">
<div class="at-gaugeSmall">
<h5 class="">Temperature</h5>
<div class="gauge">
<div id="tip_0">
<canvas id="canvas_temp" class="gaugeSmall"></canvas>
</div>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Other Temps</h5>
<div class="gauge">
<div id="tip_1">
<canvas id="canvas_dew" class="gaugeSmall"></canvas>
</div>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Humidity</h5>
<div class="gauge">
<div id="tip_4">
<canvas id="canvas_hum" class="gaugeSmall"></canvas>
</div>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Wind</h5>
<div id="tip_6" class="gauge">
<canvas id="canvas_wind" class="gaugeSmall"></canvas>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Wind Direction</h5>
<div id="tip_7" class="gauge">
<canvas id="canvas_dir" class="gaugeSmall"></canvas>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Wind Rose</h5>
<div id="tip_10" class="gauge">
<canvas id="canvas_rose" class="gaugeSmall"></canvas>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Pressure</h5>
<div id="tip_5" class="gauge">
<canvas id="canvas_baro" class="gaugeSmall"></canvas>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Rainfall</h5>
<div id="tip_2" class="gauge">
<canvas id="canvas_rain" class="gaugeSmall"></canvas>
</div>
</div>
<div class="at-gaugeSmall">
<h5 class="">Rainfall Rate</h5>
<div id="tip_3" class="gauge">
<canvas id="canvas_rrate" class="gaugeSmall"></canvas>
</div>
</div>
</div>
<small>Page data updated <span data-cmxdata="update"></span></small> <!-- Combined steelseries.js & tween.js -->
<script src="lib/steelseries/scripts/steelseries_tween.min.js"></script>
<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>
</div> </div>
<?php include("../includes/footer.inc.php"); ?> <?php include("../includes/footer.inc.php"); ?>
</div> </div>

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

@ -68,7 +68,7 @@ gauges = (function () {
// The realtime files should be absolute paths, "/xxx.txt" refers to the public root of your web server // The realtime files should be absolute paths, "/xxx.txt" refers to the public root of your web server
realTimeUrlLongPoll: 'realtimegauges-longpoll.php', // *** ALL Users: If using long polling, change to your location of the PHP long poll realtime file *** realTimeUrlLongPoll: 'realtimegauges-longpoll.php', // *** ALL Users: If using long polling, change to your location of the PHP long poll realtime file ***
// *** the supplied file is for Cumulus only // *** the supplied file is for Cumulus only
realTimeUrlCumulus: 'realtimegauges.txt', // *** Cumulus Users: Change to your location of the realtime file *** realTimeUrlCumulus: '/data/realtimegauges.txt', // *** Cumulus Users: Change to your location of the realtime file ***
realTimeUrlWD: 'customclientraw.txt', // *** WD Users: Change to your location of the ccr file *** realTimeUrlWD: 'customclientraw.txt', // *** WD Users: Change to your location of the ccr file ***
realTimeUrlVWS: 'steelseriesVWSjson.php', // *** VWS Users: Change to your location of the JSON script generator *** realTimeUrlVWS: 'steelseriesVWSjson.php', // *** VWS Users: Change to your location of the JSON script generator ***
realTimeUrlWC: 'realtimegaugesWC.txt', // *** WeatherCat Users: Change to your location of the JSON script generator *** realTimeUrlWC: 'realtimegaugesWC.txt', // *** WeatherCat Users: Change to your location of the JSON script generator ***
@ -77,7 +77,7 @@ gauges = (function () {
realTimeUrlWeewx: 'gauge-data.txt', // *** WeeWX Users: Change to your location of the gauge data file *** 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 *** realTimeUrlWLCOM: 'WLrealtimegauges.php', // *** WLCOM Users: change to location of WLCOMtags.php file ***
useCookies: true, // Persistently store user preferences in a cookie? useCookies: true, // Persistently store user preferences in a cookie?
tip/ images : [], tipImages: [],
dashboardMode: false, // Used by Cumulus MX dashboard - SET TO FALSE OTHERWISE dashboardMode: false, // Used by Cumulus MX dashboard - SET TO FALSE OTHERWISE
dewDisplayType: 'dew' // Initial 'scale' to display on the 'dew point' gauge. dewDisplayType: 'dew' // Initial 'scale' to display on the 'dew point' gauge.
// 'dew' - Dewpoint // 'dew' - Dewpoint
@ -86,7 +86,7 @@ gauges = (function () {
// 'feel' - Feels Like // 'feel' - Feels Like
// 'hea' - Heat Index // 'hea' - Heat Index
// 'hum' - Humidex // 'hum' - Humidex
}, },
// Gauge global look'n'feel settings // Gauge global look'n'feel settings
gaugeGlobals = { gaugeGlobals = {
@ -203,7 +203,7 @@ gauges = (function () {
// //
// init() Called when the document is ready, pre-draws the Status Display then calls // init() Called when the document is ready, pre-draws the Status Display then calls
// the first Ajax fetch of realtimegauges.txt. First draw of the gauges now deferred until // the first Ajax fetch of /data/realtimegauges.txt. First draw of the gauges now deferred until
// the Ajax data is available as a 'speed up'. // the Ajax data is available as a 'speed up'.
// //
init = function (dashboard) { init = function (dashboard) {
@ -2796,7 +2796,7 @@ gauges = (function () {
}, },
// //
// checkRtError() called by the Ajax fetch if an error occurs during the fetching realtimegauges.txt // checkRtError() called by the Ajax fetch if an error occurs during the fetching /data/realtimegauges.txt
// //
checkRtError = function (xhr, status, error) { checkRtError = function (xhr, status, error) {
if (xhr == null || xhr.statusText !== 'abort') { if (xhr == null || xhr.statusText !== 'abort') {
@ -2812,7 +2812,7 @@ gauges = (function () {
}, },
// //
// processData() massages the data returned in realtimegauges.txt, and posts a gauges.dataUpdated event to update the page // processData() massages the data returned in /data/realtimegauges.txt, and posts a gauges.dataUpdated event to update the page
// //
processData = function (dataObj) { processData = function (dataObj) {
var str, dt, tm, today, now, then, tmp, elapsedMins, retVal; var str, dt, tm, today, now, then, tmp, elapsedMins, retVal;
@ -2872,7 +2872,7 @@ gauges = (function () {
sampleDate = Date.UTC(tmp[0], tmp[1] - 1, tmp[2], tmp[3], tmp[4], tmp[5]); sampleDate = Date.UTC(tmp[0], tmp[1] - 1, tmp[2], tmp[3], tmp[4], tmp[5]);
if (now - sampleDate > config.stationTimeout * 60 * 1000) { if (now - sampleDate > config.stationTimeout * 60 * 1000) {
elapsedMins = Math.floor((now - sampleDate) / (1000 * 60)); elapsedMins = Math.floor((now - sampleDate) / (1000 * 60));
// the realtimegauges.txt file isn't being updated // the /data/realtimegauges.txt file isn't being updated
ledIndicator.setLedColor(steelseries.LedColor.RED_LED); ledIndicator.setLedColor(steelseries.LedColor.RED_LED);
ledIndicator.setTitle(strings.led_title_offline); ledIndicator.setTitle(strings.led_title_offline);
ledIndicator.blink(true); ledIndicator.blink(true);
@ -3069,7 +3069,7 @@ gauges = (function () {
// //
// doFirst() called by doUpdate() the first time the page is updated to set-up various things that are // doFirst() called by doUpdate() the first time the page is updated to set-up various things that are
// only known when the realtimegauges.txt data is available // only known when the /data/realtimegauges.txt data is available
// //
doFirst = function () { doFirst = function () {
var cacheDefeat = '?' + (new Date()).getTime().toString(); var cacheDefeat = '?' + (new Date()).getTime().toString();
@ -4206,23 +4206,23 @@ gauges = (function () {
nextLowest = function (value, step) { nextLowest = function (value, step) {
return +value == 0 ? -step : Math.floor(+value / step) * step; return +value == 0 ? -step : Math.floor(+value / step) * step;
}; };
// ######################################################## // ########################################################
// End of gauges() var declarations // End of gauges() var declarations
// ######################################################## // ########################################################
// //
// Execution starts here // Execution starts here
// //
// test for canvas support before we do anything else, especially reference steelseries which will cause the script to abort! // test for canvas support before we do anything else, especially reference steelseries which will cause the script to abort!
if (!document.createElement('canvas').getContext) { if (!document.createElement('canvas').getContext) {
// failed, no canvas support detected // failed, no canvas support detected
$('body').html(strings.canvasnosupport); $('body').html(strings.canvasnosupport);
setTimeout(function () { setTimeout(function () {
window.location = config.oldGauges; window.location = config.oldGauges;
}, 3000); }, 3000);
return false; return false;
} else { } else {
// //
// Called when the document object has loaded // Called when the document object has loaded
// This starts the whole script. // This starts the whole script.
@ -4231,15 +4231,15 @@ if (!document.createElement('canvas').getContext) {
// Kick it all off - false for web page, true for dashboard // Kick it all off - false for web page, true for dashboard
init(config.dashboardMode); init(config.dashboardMode);
}); });
} }
return { return {
setLang: setLang, setLang: setLang,
setUnits: setUnits, setUnits: setUnits,
processData: processData, processData: processData,
config: config, config: config,
init: init init: init
}; };
}()); }());
// =============================================================================================================================== // ===============================================================================================================================