some questions

[n9mfk]

Hi Mark,

http://n9mfk.info/wxssgauges.php
what the best way to make sure long polling is working?
also how can i get cloudbase under the rain gauge?
Thanks beau

[water01]

To check long polling just use the F12 developer tools available in most browsers and view the network traffic. You will see an XML task pending and then firing every 20 seconds.

Read the SteelSeries gauges wiki on how to rearrange the gauges, Marks notes are pretty comprehensive.

[n9mfk]

I looked at the wiki i do not see any thing on how to get one gauge centered

Beau

[water01]

See here http://wiki.sandaysoft.com/a/SteelSeries_Gauges under Altering the gauge 'layout' on the page.

[n9mfk]

Hi David,
I did look at

Altering the gauge 'layout' on the page

It is easy to 'move' the gauges around the page to create alternative layouts. By default, there are four rows of gauges laid out like this (o = optional gauge).

here the code

Code: Select all

  <!--
    30 Dec 2014 - Mark Crossley
    Basic PHP include file for the steel series gauges.
    Just contains the HTML for incuding in template page.
  -->
  <noscript>
    <h2 style="color:red; text-align:center">>>This pages requires JavaScript enabling in your browser.<<<br>>>Please enable scripting it to enjoy this site at its best.<<</h2>
  </noscript>
  <div class="row">
    <canvas id="canvas_led" width="25" height="25"></canvas>&nbsp;&nbsp;&nbsp;
    <canvas id="canvas_status" width="550" height="25"></canvas>&nbsp;&nbsp;
    <canvas id="canvas_timer" width="70" height="25"></canvas>
  </div>
  <div class="row">
    <div class="gauge">
      <div id="tip_0">
        <canvas id="canvas_temp" class="gaugeSizeStd"></canvas>
      </div>
      <input id="rad_temp1" type="radio" name="rad_temp" value="out" checked onclick="gauges.doTemp(this);"><label id="lab_temp1" for="rad_temp1">Outside</label>
      <input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label>
    </div>
    <div class="gauge">
      <div id="tip_1">
        <canvas id="canvas_dew" class="gaugeSizeStd"></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>
    <div class="gauge">
      <div id="tip_4">
        <canvas id="canvas_hum" class="gaugeSizeStd"></canvas>
      </div>
      <input id="rad_hum1" type="radio" name="rad_hum" value="out" checked onclick="gauges.doHum(this);"><label id="lab_hum1" for="rad_hum1">Outside</label>
      <input id="rad_hum2" type="radio" name="rad_hum" value="in" onclick="gauges.doHum(this);"><label id="lab_hum2" for="rad_hum2">Inside</label>
    </div>
  </div>
  <div class="row">
    <div id="tip_6" class="gauge">
      <canvas id="canvas_wind" class="gaugeSizeStd"></canvas>
    </div>
    <div id="tip_7" class="gauge">
      <canvas id="canvas_dir" class="gaugeSizeStd"></canvas>
    </div>
    <div id="tip_10" class="gauge">
      <canvas id="canvas_rose" class="gaugeSizeStd"></canvas>
    </div>
  </div>
  <div class="row">
    <div id="tip_5" class="gauge">
      <canvas id="canvas_baro" class="gaugeSizeStd"></canvas>
    </div>
    <div id="tip_2" class="gauge">
      <canvas id="canvas_rain" class="gaugeSizeStd"></canvas>
    </div>
    <div id="tip_3" class="gauge">
      <canvas id="canvas_rrate" class="gaugeSizeStd"></canvas>
    </div>
  </div>
<!--  <div class="row">
    <div id="tip_8" class="gauge">
      <canvas id="canvas_uv" class="gaugeSizeStd"></canvas>
    </div>
    <div id="tip_9" class="gauge">
      <canvas id="canvas_solar" class="gaugeSizeStd"></canvas>
    </div>-->
    <div id="tip_11" class="gauge">
      <canvas id="canvas_cloud" class="gaugeSizeStd"></canvas>
    </div>
  <!--</div>-->

  <div class="unitsTable">
    <div style="display:table-row">
      <div id="temperature" class="cellRight">
        <span id="lang_temperature">Temperature</span>:
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsTemp1" type="radio" name="rad_unitsTemp" value="C" checked onclick="gauges.setUnits(this);"><label id="lab_unitsTemp1" for="rad_unitsTemp1">&deg;C</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsTemp2" type="radio" name="rad_unitsTemp" value="F" onclick="gauges.setUnits(this);"><label id="lab_unitsTemp2" for="rad_unitsTemp2">&deg;F</label>
      </div>
    </div>
    <div style="display:table-row">
      <div id ="rainfall" class="cellRight">
        <span id="lang_rainfall">Rainfall</span>:
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsRain1" type="radio" name="rad_unitsRain" value="mm" checked onclick="gauges.setUnits(this);"><label id="lab_unitsRain1" for="rad_unitsRain1">mm</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsRain2" type="radio" name="rad_unitsRain" value="in" onclick="gauges.setUnits(this);"><label id="lab_unitsRain2" for="rad_unitsRain2">Inch</label>
      </div>
    </div>
    <div style="display:table-row">
      <div id="pressure" class="cellRight">
        <span id="lang_pressure">Pressure</span>:
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsPress1" type="radio" name="rad_unitsPress" value="hPa" checked onclick="gauges.setUnits(this);"><label id="lab_unitsPress1" for="rad_unitsPress1">hPa</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsPress2" type="radio" name="rad_unitsPress" value="inHg" onclick="gauges.setUnits(this);"><label id="lab_unitsPress2" for="rad_unitsPress2">inHg</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsPress3" type="radio" name="rad_unitsPress" value="mb" onclick="gauges.setUnits(this);"><label id="lab_unitsPress3" for="rad_unitsPress3">mb</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsPress4" type="radio" name="rad_unitsPress" value="kPa" onclick="gauges.setUnits(this);"><label id="lab_unitsPress4" for="rad_unitsPress4">kPa</label>
      </div>
    </div>
    <div style="display:table-row">
      <div id="wind" class="cellRight">
        <span id="lang_windSpeed">Wind Speed</span>:
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsWind4" type="radio" name="rad_unitsWind" value="km/h" checked onclick="gauges.setUnits(this);"><label id="lab_unitsWind4" for="rad_unitsWind4">km/h</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsWind3" type="radio" name="rad_unitsWind" value="m/s" onclick="gauges.setUnits(this);"><label id="lab_unitsWind3" for="rad_unitsWind3">m/s</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsWind1" type="radio" name="rad_unitsWind" value="mph" onclick="gauges.setUnits(this);"><label id="lab_unitsWind1" for="rad_unitsWind1">mph</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsWind2" type="radio" name="rad_unitsWind" value="kts" onclick="gauges.setUnits(this);"><label id="lab_unitsWind2" for="rad_unitsWind2">knots</label>
      </div>
    </div>
    <div style="display:table-row">
      <div id ="cloud" class="cellRight">
        <span id="lang_cloudbase">CloudBase</span>:
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsCloudBase1" type="radio" name="rad_unitsCloud" value="m" checked onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase1" for="rad_unitsCloudBase1">m</label>
      </div>
      <div style="display:table-cell">
        <input id="rad_unitsCloudBase2" type="radio" name="rad_unitsCloud" value="ft" onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase2" for="rad_unitsCloudBase2">ft</label>
      </div>
    </div>
  </div>
  <!-- Credits -->
  <div class="credits" style="padding: 0px 10px 10px 10px; text-align: left">
    <hr>
    Scripts: Mark Crossley - version <span id="scriptVer"></span><br>
    Gauges: Gerrit Grunwald's <a href="http://harmoniccode.blogspot.com" target="_blank">SteelSeries</a> <a href="https://github.com/HanSolo/SteelSeries-Canvas">JavaScript library</a><br>
    <span id="rgraph_attrib">Wind Rose: <a href="http://www.rgraph.net/">RGraph</a><br></span>
    A cookie is used to store your UoM and gauge preferences<br>
    powered by <span id="programName"></span> v<span id="programVersion"></span> (b<span id="programBuild"></span>)
  </div><!-- Credits -->

  <!-- Included Scripts -->

  <!-- CDN hosted JQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <!-- or... -->
  <!-- Local JQuery library, do not use if your containing page already pulls in a copy of JQuery -->
  <!-- <script src="scripts/jquery-1.11.1.min.js"></script> -->

  <!-- Combined steelseries.js & tween.js -->
  <script src="<?php echo $ssgDir; ?>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="<?php echo $ssgDir; ?>scripts/language.min.js"></script>
  <script src="<?php echo $ssgDir; ?>scripts/gauges.js"></script>

  <!--Optional Wind Rose scripts -->
  <script src="<?php echo $ssgDir; ?>scripts/RGraph.common.core.min.js"></script>
  <script src="<?php echo $ssgDir; ?>scripts/RGraph.rose.min.js"></script>

on matter what I change the cloudebase stays to the left
so im not sure wth im doing wrong

[mcrossley]

You have commented out the "row" div that contains the gauge. The gauges need to go in an enclosing <div class="row"></div>, like thus...

Code: Select all

<div class="row">
<!--
  	<div id="tip_8" class="gauge">
    	<canvas id="canvas_uv" class="gaugeSizeStd"></canvas>
  	</div>
    <div id="tip_9" class="gauge">
     	<canvas id="canvas_solar" class="gaugeSizeStd"></canvas>
    </div>
	</div>
-->
    <div id="tip_11" class="gauge">
		<canvas id="canvas_cloud" class="gaugeSizeStd" width="221" height="221" style="box-shadow: rgba(0, 0, 0, 0.298039) 3px 3px 3px; border-radius: 110px;"></canvas>
    </div>
</div>