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-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>
<?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>
<link href="/css/gauges.css" rel="stylesheet"> <!-- Stylesheet specifically for the gauges -->
<script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
</head>
<body>
<div class="page-container">
<?php include("../includes/header.inc.php"); ?>
<div id="content">
<canvas id="canvas_status" width="200" height="25"></canvas>
<canvas id="canvas_timer" width="60" height="25"></canvas>
Status: <canvas id="canvas_led" width="25" height="25"></canvas>
<div class="gauge-header">
<div><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>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>
<?php include("../includes/footer.inc.php"); ?>
</div>

14
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
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
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 ***
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 ***
@ -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?
tip/ images : [],
tipImages: [],
dashboardMode: false, // Used by Cumulus MX dashboard - SET TO FALSE OTHERWISE
dewDisplayType: 'dew' // Initial 'scale' to display on the 'dew point' gauge.
// 'dew' - Dewpoint
@ -203,7 +203,7 @@ gauges = (function () {
//
// 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'.
//
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) {
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) {
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]);
if (now - sampleDate > config.stationTimeout * 60 * 1000) {
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.setTitle(strings.led_title_offline);
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
// only known when the realtimegauges.txt data is available
// only known when the /data/realtimegauges.txt data is available
//
doFirst = function () {
var cacheDefeat = '?' + (new Date()).getTime().toString();