Welcome to the Cumulus Support forum.

Latest Cumulus MX release v3.2.4 build 3060 - 10 December 2019.
    Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014

    See the Wiki for downloading either version.

    Space between gauges

    Discussion of Mark Crossley's HTML5/Javascript gauges

    Moderator: mcrossley

    Post Reply
    User avatar
    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:

    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: 5805
    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: 5805
    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: 94
    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