Gauges In The Default Home Page

[The Dalek Hunter]

It might be nice to have a couple of gauges on the default web home page.

Say wind and temperature - maybe the wind realtime?

or maybe user definable

Is that an easy thing?

I know Cumulusutils does this but I prefer to stick to default CMX

[HansR]

Well, anybody interested in a merge?

[ConligWX]

No

[flort]

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

[The Dalek Hunter]

That is nice! Yes please!

Applied to all three of my CMX sites.

(I know it won't survive an upgrade)

[The Dalek Hunter]

Could people perhaps post a "yes" or "no" to this to see how popular (or not) it might be?

[freddie]

Yes if the type of gauge was definable (I would like to see wind, others may want different ones), otherwise no.

The "yes"is with the caveat that if I really wanted them on that page I would've done it myself by now.

[The Dalek Hunter]

The "yes"is with the caveat that if I really wanted them on that page I would've done it myself by now.

I do not possess that skill

[The Dalek Hunter]

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

Is it possible you could tell me how to do this very simply!!

ie add these lines

line 1
line 2
line 3 etc

between these lines in index.htm so the next time there is an update I can amend the files myself

Thanks

[flort]

Make sure you use a good editor like Notepad++

Step 1 - Add the Stylesheet specifically for the gauges into the header. I did this at line 27 underneath the other Stylesheets.

Code: Select all

<link href="css/gauges.css" rel="stylesheet">

Step 2 - Now you want to insert the gauges into the Sidebar. Go down to the start of the Sidebar code. In the current file that will be line 217 after inserting the line from step 1. You want to insert the following code after the welcome message and forecast. This will currently be line 227.

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>

Step 3 - Lastly you need to add the code to give the popup box for selecting your units of measure. This is inserted before the second last line where it says </body>. You will probably find it is line 268 after applying steps 1 and 2.

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;">&times;</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">&deg;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">&deg;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">&nbsp;</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>

Just remember that if index.htm changes in future updates then the line numbers stated above will be different. You will have to find the correct spot to insert each of the code.

Regards,
Trevor

[The Dalek Hunter]

Brilliant

Many many thanks