Fun with the Steel Series Display Using 'wxssgauges.php'

This technique assumes you have Ken True’s modifications to his Saratoga-Wx templates installed and your ‘wxssgauges.php’ and the ‘gauges-ss-basic-inc.php’ scripts working correctly. Of course it also assumes you have a functioning installation of the latest version (2.2.x) of Mark Crossley’s Steel Series Gauges.

I created a widescreen ‘fluid’ display of the Steel Series Gauges while I was playing around with them a little. The widescreen view enables all of the gauges to be viewed horizontally in two rows at once if your browser window is wide enough. This display, after you set to widescreen on the lower left, illustrates the power of css. Change the size of the browser window by dragging an edge in or out and you’ll see what I mean.

If anyone is interested in doing this as well, I can post some code that might help you get there.

That is really cool and would be very interested in the sharing of your code.
Thank You,

I do like that setup being as my goal is to have pages fit the screen no matter what width it is. I don’t know that much about working with css, but if this page is checked as HTML5, it fails due to some of the tables properties not being in the css. If you feel spunky, can you get this to pass?

The mods are fairly simple. First you need to modify wxssgauges.php to create what I called wxssgauges_fluid.php (to preserve your original script file.) There is a center style that’s needed to keep everything from piling up on the left. Here it is in context:

  <link rel="stylesheet" href="<?php echo $ssgDir;?>css/gauges-ss.css">
  <style type="text/css"> {  width:100%;  margin-left: auto;  margin-right: auto; display:block }</style>

HTML5 has deprecated the tag, and it displays erratically in some modern browsers. To get around this problem when there isn’t a fixed width, i.e. it’s a ‘fluid’ layout, I’ve found that all browsers see negative widths as the full screen width. To center properly a width of 100% is needed, but it can’t be specified as 100% and must be specified in pixels–strange, right? That leads to this next bit of code, in context, that checks for a widescreen session and behaves appropriately depending upon what it finds:


<?php if (isset($_SESSION['CSSwidescreen'])) { ?>
	<div id="main-copy-dark" style="width:<?php echo ($_SESSION['CSSwidescreen']==1 ? -1 : 656) ?>px; border:inset">
<?php } else { ?>
	<div id="main-copy-dark" style="width:-1px; border:inset">
<?php }	?>
	<div style="text-align:center; height:auto; width:inherit" class="center">

This code includes an additional

which acts as a container that centers the gauge content. This style could be moved to an in line or external css style sheet rather than embedding like this.

That brings us to the next changes in wxssgauges.php which just modifies the included script’s name, again to preserve the original file:

   if(! file_exists($ssgDir."gauges-ss-fluid-inc.php")) {
	  print "<!-- Steel Series Gauges template (gauges-ss-fluid-inc.php) not found in $ssgDir.  ".
	  "Using default HTML for gauges. -->\n";
   } else {

One last change is needed to wxssgauges.php, and that’s to close the new

we added:

</div><!-- end main-copy -->

I would recommend saving your modified wxssgauges.php with a new filename, probably ‘wxssgauges_fluid.php’.

Next are the simpler changes to ‘gauges-ss-basic-inc.php’, again in context:

<!--  </div>
  <div class="row">
-->    <div id="tip_6" class="gauge">
      <canvas id="canvas_wind" class="gaugeSizeStd"></canvas>
    <div id="tip_7" class="gauge">
      <canvas id="canvas_dir" class="gaugeSizeStd"></canvas>
    <div id="tip_10" class="gauge">
      <canvas id="canvas_rose" class="gaugeSizeStd"></canvas>
<!--  </div>
  <div class="row">
-->    <div id="tip_5" class="gauge">
      <canvas id="canvas_baro" class="gaugeSizeStd"></canvas>
    <div id="tip_2" class="gauge">
      <canvas id="canvas_rain" class="gaugeSizeStd"></canvas>
    <div id="tip_3" class="gauge">
      <canvas id="canvas_rrate" class="gaugeSizeStd"></canvas>
<!--  </div>
  <div class="row">
-->    <div id="tip_8" class="gauge">
      <canvas id="canvas_uv" class="gaugeSizeStd"></canvas>
    <div id="tip_9" class="gauge">
      <canvas id="canvas_solar" class="gaugeSizeStd"></canvas>

  <div class="unitsTable">

This code can be carefully cut and pasted, or you can simply modify your code manually by commenting out the indicated

start and end tags. Save these changes to the different filename you chose, probably ‘ss-gauges-fluid-inc.php’.

That should do it for you, but as usual time will tell.


Start here in your quest. I would use version 2-2-x and then install Ken’s test page. I think you need to get it running before modifying anything. Properly set up, the Steel Series Gauges should now validate as HTML5. It will be a bit of work, but it’s worth it!

BTW, your page is seen as XHTML 1.0 Transitional by the validation site.


I have done the updates as suggested, but my site has many other customizations in the header, footer and menu bar, that the css (alignments, cellpadding, cell width, etc…) for the whole site would need to be revisited. Here is the test page and here is the result. This is a bit over my head. :?

BTW, your page is seen as XHTML 1.0 Transitional by the validation site.
Really? 8O [I get 32 errors]( #-o

That page is highly modified with a heading row above each gauge row. You can’t make that layout fluid unless you put the heading directly above each individual gauge, not a row of gauges. The gauges are labeled so the heading, while much easier to find and read, is redundant. Like I said, I think you should get your normal gauges page to validate before you try modifying it, but that’s not the topic of this thread.

Yea, I know that it is kind of redundant. If I get a weekend to mess with it, I will give it a go.
Thanks for looking at it.