Support forum for Cumulus weather station software
https://cumulus.hosiene.co.uk/
Is it possible you could tell me how to do this very simply!!flort wrote: ↑Thu 09 Feb 2023 10:49 pm The gauges sit very nicely in the sidebar and look quite good. The question is whether people see value in having them there.
Below is a sample of what the page could look like.
index.jpg
Personally, I prefer to look at numbers rather than gauges. I've attached the index.html page that produced the above.
Regards,
Trevor
Code: Select all
<link href="css/gauges.css" rel="stylesheet">Code: Select all
<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>
</div>
</div>
<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="">Wind</h5>
<div id="tip_6" class="gauge w3-center">
<canvas id="canvas_wind" class="gaugeSmall"></canvas>
</div>
</div>
</div>Code: Select all
<!-- 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_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>
</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>