IMPORTANT! The server may go down soon - possibly permanently. Please read the latest post in Announcements and News

FTP is broken. I strongly advise all users using my server for their web site to make alternative arrangements.

Outgoing mail is disabled because of the malware on the server. No new forum registrations are currently possible, and mail to the forum administrator will not work.

Please read the posts in the Announcements section about the current status of Cumulus development now that I have retired

Please read this post before posting

Latest Cumulus release v1.9.4 (build 1099) - Nov 28 2014
Latest Cumulus MX release - v3.0.0 build 3043 Jan 20 2017. See this post for download

Space between gauges

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

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

Space between gauges

Postby K8POS » Fri Dec 08, 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: 5194
Joined: Thu Jan 07, 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Stretch Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Space between gauges

Postby mcrossley » Fri Dec 08, 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: 5194
Joined: Thu Jan 07, 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Stretch Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Space between gauges

Postby mcrossley » Fri Dec 08, 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 Jan 03, 2015 4:17 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 7
Location: Thumb of Michigan
Contact:

Re: Space between gauges

Postby K8POS » Fri Dec 08, 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


Return to “SteelSeries Gauges”

Who is online

Users browsing this forum: No registered users and 3 guests