Steel Series Gauges integration to Ajax-dashboard

Hi all,
Ive read all the stickies but cannot find what code to use to call the dials individually to populate on my main ajax-dashboard.php. Any help greatly appreciated :slight_smile:

Sorry Rick044,

I don’t have an answer to that but it’s a really good question.
I like to know that aswell.

The following is the code I used in my ajax-dashboard:

<table width="100%" border="0" cellpadding="2" cellspacing="1" style="border:solid; border-color: #CCCCCC;">	
<tr align="center">
          <td class="datahead"><?php langtrans('Temperature'); ?></td>
          <td class="datahead"><?php langtrans('Dew/Apparent'); ?></td>
          <td class="datahead"><?php langtrans('Wind'); ?></td>
	</tr>
             <tr>
          <td align="center" valign="middle">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr><span>
        <div id="tip_0">
          <canvas id="canvas_temp" width="211" height="211"></canvas>
        </div></span>
        <input id="rad_temp1" type="radio" name="rad_temp" value="out" checked onclick="doTemp(this)">
        <label id="lab_temp1" for="rad_temp1">Outside</label>
        <input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="doTemp(this)">
        <label id="lab_temp2" for="rad_temp2">Inside</label>
               </td>
              </tr>
                              </table>
          </td>
                  <td valign="middle">
              <table width="100%" border="0" cellpadding="0" cellspacing="2">
                      <div id="tip_1">
          <canvas id="canvas_dew" width="211" height="211"></canvas>
        </div>
          <input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="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="doDew(this)">
          <label id="lab_dew2" for="rad_dew2">Apparent</label>
		   

          <input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="doDew(this)">
          <label id="lab_dew3" for="rad_dew3">Wind Chill</label>
          <input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="doDew(this)">
          <label id="lab_dew4" for="rad_dew4">Heat Index</label>
		</td>
              </tr>

            </table>
        </td>
                <td valign="middle">
                    <table width="100%" border="0" cellpadding="2" cellspacing="0">
                <tr>
        <div id="tip_6">
          <canvas id="canvas_wind" width="211" height="211"></canvas>
        </div>
        </div>
                </td>
              </tr>

              </tr>
             
            </table>
          </td>

          </td>
        </tr>
		
         <tr align="center">
          <td class="datahead">6 Hr.  Wind Run</td>
          <td class="datahead">Liquid Precipitation</td>
          <td class="datahead">Wind Direction</td>
 
        </tr>
        <tr>
          <td align="center" valign="middle">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
        
         <canvas id="canvasGauge" width="211" height="211"></canvas> 
               </td>
              </tr>
                              </table>
          </td>
                  <td valign="middle" rowspan="3">
              <table width="100%" border="0" cellpadding="0" cellspacing="2">
                       <div id="tip_2">
          <canvas id="canvas_rain" width="211" height="211"></canvas>
        </div> 

      <tr>
                <div id="tip_3">
          <canvas id="canvas_rrate" width="211" height="211"></canvas>
        </div>
		</td>
              </tr>

            </table>
        </td>
                <td valign="middle">
                    <table width="100%" border="0" cellpadding="2" cellspacing="0">
                <tr>
        <div id="tip_7">
          <canvas id="canvas_dir" width="211" height="211"></canvas>
        </div>
                </td>
              </tr>

              </tr>
             
            </table>
          </td>

          </td>
        </tr>

 <tr align="center" >
          <td class="datahead">Humidity</td>
          <td class="datahead">Barometer</td>
        </tr>
        <tr>
          <td align="center">
            <table width="100%" border="0" cellpadding="2" cellspacing="0">
              <tr>
        <div id="tip_4">
          <canvas id="canvas_hum" width="211" height="211"></canvas>
        </div>
                 </td>
              </tr>
                    </table>
               </td>
          <td align="center" valign="middle">
            <table width="100%" border="0" cellpadding="2" cellspacing="0">
              <tr>
        <div id="tip_5">
          <canvas id="canvas_baro" width="211" height="211"></canvas>
        </div>
            </td>  </tr>
            </table>
          </td>
		  </tr>
		     <tr align="center" valign="top">
          <td class="datahead">

In my index.php I added:

<link rel="stylesheet" href="weatherstyle.css">
  <link rel="stylesheet" href="css/gauges-ss.css">
  <link rel="stylesheet" href="css/ddimgtooltip.css">

and this at the end of my index.php

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!--  <script src="scripts/jquery-170.min.js"></script> -->
  <script src="scripts/tween.min.js"></script>
  <script src="scripts/language.js"></script>
  <script src="scripts/steelseries.min.js"></script>
  <script src="scripts/RGraph.common.core.js"></script>
  <script src="scripts/RGraph.radar.js"></script>
  <script src="scripts/gaugespage.js"></script>
  <script src="scripts/ddimgtooltip.min.js"></script>

Awesome! Thanks Weatherbee… I will give this a go. Greatly appreciated.

Thanks for posting but unfortunately I can’t get it to work.
I need a little help please.
I just want to display the winddirection gauge under the windsection on the dashboard.
My wxindex.php is in the WS folder.
My gauges are in the meters166 folder.
Both folders are at the same level.

I have never been good in this but this is what I added to the index and dashboard.

wxindex.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- <script src="./meters166/scripts/jquery-170.min.js"></script> -->
<script src="./meters166/scripts/tween.min.js"></script>
<script src="./meters166/scripts/language.js"></script>
<script src="./meters166/scripts/steelseries.min.js"></script>
<script src="./scripts/RGraph.common.core.js"></script>
<script src="./scripts/RGraph.radar.js"></script>
<script src="./meters166/scripts/gauges.js"></script>
<script src="./meters166/scripts/ddimgtooltip.min.js"></script>

<link rel="stylesheet" href="./meters166/css/gauges-ss.css">
<link rel="stylesheet" href="./meters166/css/ddimgtooltip.css">

dashboard

<div id="tip_7">
<canvas id="canvas_dir" width="211" height="211"></canvas>
</div>

I see in the dashboard it’s making space for the winddir gauge but just a blank space, nothing else.

Can someone point me in the right direction.
Thanks in Advance.

I don’t know if this is the reason but your missing meters166 for RGraph.radar.js and the RGraph.commo.core lines.

Those scripts are not in my scripts folder.
I have never seen them, installing the gauges.
My meters work fine from the gauges-ssT.htm page.
Are they needed for your WindRun gauge.
I don’t have that one.


Paths are correct?, like I did.
./

You need the RGraph files for the wind run gauge.

Weerstation were you able to get the dials to display? Im having the same problem as you, just a blank space. I’m getting the radio buttons and everything just not the picture of the dail.

No, unfortunately not. #-o