Welcome to the new home of the Cumulus Support forum.

Latest Cumulus release v1.9.4 (build 1099) - Nov 28 2014
Latest Cumulus MX release - v3.0.0 build 3044 7 December 2018. See the Wiki for download

Space between gauges

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

Post Reply
User avatar
K8POS
Posts: 93
Joined: Sat 03 Jan 2015 4:17 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 7
Location: Thumb of Michigan
Contact:

Space between gauges

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

User avatar
mcrossley
Posts: 5234
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Stretch Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Space between gauges

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">

User avatar
mcrossley
Posts: 5234
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Stretch Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Space between gauges

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">

User avatar
K8POS
Posts: 93
Joined: Sat 03 Jan 2015 4:17 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 7
Location: Thumb of Michigan
Contact:

Re: Space between gauges

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

Post Reply