258 lines
16 KiB
HTML
258 lines
16 KiB
HTML
|
<!--
|
||
|
|
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>: <span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>: <span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>: <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 Thomas <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> v:<span data-cmxdata="version">---</span>, 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;">×</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">°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">°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"> </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"> </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>
|