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>

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

File diff suppressed because it is too large Load diff