Welcome to the Cumulus Support forum.
Latest Cumulus MX V4 release
4.0.1 (build 4023) - 16 May 2024
Latest Cumulus MX V3 release
3.28.6 (build 3283) - 21 March 2024
Legacy Cumulus 1 release
1.9.4 (build 1099) - 28 November 2014
(a
patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)
Download the Software (Cumulus MX / Cumulus 1 and other related items) from
the Wiki
Discussion of Mark Crossley's HTML5/Javascript gauges
Moderator: mcrossley
K8POS
Posts: 94 Joined: Sat 03 Jan 2015 4:17 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 7
Location: Thumb of Michigan
Contact:
Post
by K8POS » Fri 08 Dec 2017 3:42 pm
Working on my gauge lay out.
Now I know my HTML is very rusty. but why is this code leaving a blank spot between Gauge #2 and Gauge #3?
Code: Select all
<!-- START OF FIRST ROW 6 GAUGES -->
<div class="row">
<div class="gauge">
<div id="tip_0">
<!-- TEMPERATURE GAUGE -->
<canvas id="canvas_temp" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- MULTI FUNCTION GAUGE -->
<div class="gauge">
<div id="tip_1">
<canvas id="canvas_dew" class="gaugeSizeSml"></canvas>
</div>
<input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label>
<input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent </label>
<br>
<input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label>
<input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label>
<br>
<input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label>
<!-- WHY IS THERE A BIG SPACE IN HERE??????????? -->
<!-- BAROMETER GAUGE -->
</div>
<div class="gauge">
<div id="tip_5">
<canvas id="canvas_baro" class="gaugeSizeSml"></canvas>
</div>
<!-- HUMIDITY GAUGE -->
<div class="gauge">
<div id="tip_4">
<canvas id="canvas_hum" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- WIND SPEED GAUGE -->
<div class="gauge">
<div id="tip_6">
<canvas id="canvas_wind" class="gaugeSizeSml"></canvas>
</div>
<!-- WIND DIRECTION GAUGE -->
</div>
<div id="tip_7" class="gauge">
<canvas id="canvas_dir" class="gaugeSizeSml"></canvas>
<!-- START OF SECOND ROW 5 GAUGES -->
</div>
<div class="row">
I can get the rest laid out ok once I get this space figured out. It acts like there is a ghost gauge in there, if you hover a mouse over the space it pops up a Barometer graph.
Have a look and don't beat me up too bad.
http://www.melvinweather.com/testssgauges.htm
mcrossley
Posts: 12951 Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:
Post
by mcrossley » Fri 08 Dec 2017 4:10 pm
You have a missing </div> on the third gauge?
With tab:4 to see it easier...
Code: Select all
<!-- START OF FIRST ROW 6 GAUGES -->
<div class="row">
<!-- TEMPERATURE GAUGE -->
<div class="gauge">
<div id="tip_0">
<canvas id="canvas_temp" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- MULTI FUNCTION GAUGE -->
<div class="gauge">
<div id="tip_1">
<canvas id="canvas_dew" class="gaugeSizeSml"></canvas>
</div>
<input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label>
<input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent </label>
<br>
<input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label>
<input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label>
<br>
<input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label>
</div>
<!-- BAROMETER GAUGE -->
<div class="gauge">
<div id="tip_5">
<canvas id="canvas_baro" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- HUMIDITY GAUGE -->
<div class="gauge">
<div id="tip_4">
<canvas id="canvas_hum" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- WIND SPEED GAUGE -->
<div class="gauge">
<div id="tip_6">
<canvas id="canvas_wind" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- WIND DIRECTION GAUGE -->
<div id="tip_7" class="gauge">
<canvas id="canvas_dir" class="gaugeSizeSml"></canvas>
</div>
<!-- START OF SECOND ROW 5 GAUGES -->
<div class="row">
mcrossley
Posts: 12951 Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:
Post
by mcrossley » Fri 08 Dec 2017 4:16 pm
Actually there is more than missing </div>. This looks better...
Code: Select all
<!-- START OF FIRST ROW 6 GAUGES -->
<div class="row">
<!-- TEMPERATURE GAUGE -->
<div class="gauge">
<div id="tip_0">
<canvas id="canvas_temp" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- MULTI FUNCTION GAUGE -->
<div class="gauge">
<div id="tip_1">
<canvas id="canvas_dew" class="gaugeSizeSml"></canvas>
</div>
<input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label>
<input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent </label>
<br>
<input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label>
<input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label>
<br>
<input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label>
</div>
<!-- BAROMETER GAUGE -->
<div class="gauge">
<div id="tip_5">
<canvas id="canvas_baro" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- HUMIDITY GAUGE -->
<div class="gauge">
<div id="tip_4">
<canvas id="canvas_hum" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- WIND SPEED GAUGE -->
<div class="gauge">
<div id="tip_6">
<canvas id="canvas_wind" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- WIND DIRECTION GAUGE -->
<div id="tip_7" class="gauge">
<canvas id="canvas_dir" class="gaugeSizeSml"></canvas>
</div>
</div>
<!-- START OF SECOND ROW 5 GAUGES -->
<div class="row">
K8POS
Posts: 94 Joined: Sat 03 Jan 2015 4:17 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 7
Location: Thumb of Michigan
Contact:
Post
by K8POS » Fri 08 Dec 2017 5:21 pm
Well after playing with it. I got it close, but not what I really wanted.
I looked at the code in Meteotemplate, I liked the layout that I had in there. So what does a lazy SOB with piss poor code skills do.
A bit of cut and paste, and you end up with this:
http://www.melvinweather.com/gaugetest.htm
Still have a few tweeks and to get it displayed in one of the blocks. But it works.
Bob