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

Putting gauges into other custom pages

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

Posts: 13
Joined: Sat Mar 23, 2013 6:29 pm
Weather Station: WH1080
Operating System: Windows Server 2012 R2
Location: United Kingdom, Dorset

Putting gauges into other custom pages

Postby JacquesSteventon » Sun Oct 11, 2015 9:30 am

Hi All,

I have created the main gauge files and all is up and running which is here -

What I want to do is put, temp, wind speed, direction etc on the home page just below where it says website under construction which is here

I have tried doing what I think I should do but in turn killed the gauges. So could anyone put me on the right path. Will be very grateful :)

Many Thanks :)

Posts: 1433
Joined: Sat Aug 13, 2011 9:33 am
Weather Station: WH1081
Operating System: Windows 7 64bit HP SP1
Location: Somewhere in the USA

Re: Putting gauges into other custom pages

Postby water01 » Sun Oct 11, 2015 11:41 am

I presume what you did was just modify gauges.js so you would mess up the main gauges page.

What you should do is copy the gauges.js file to say gaugesmain.js and then modify that file for the main page and change the script name to gaugesmain.js, so your main gauges pages runs with gauges.js and your modified main page runs with gaugesmain.js

User avatar
Posts: 460
Joined: Tue Jan 22, 2013 9:20 pm
Weather Station: PCE-FWS 20
Operating System: Win 7 Pro
Location: Zlatina, Bulgaria

Re: Putting gauges into other custom pages

Postby gluepack » Sun Oct 11, 2015 5:37 pm

I notice that your pop-up graphs aren't showing (not for me, anyway).

PWS links: WundergroundIVARNAPR3CWOP/APRSE(W)2048PWSWeatherZLATINABGAwekas10631Twitter@Zlatina_weather
Station type: PCE-FWS 20…Webcam link: View south to edge of Provadisko plateau

Posts: 851
Joined: Mon Jul 09, 2012 8:40 pm
Weather Station: Davis VP2 Cabled with Solar
Operating System: Windows 10 Pro
Location: Auckland, New Zealand

Re: Putting gauges into other custom pages

Postby BCJKiwi » Sun Oct 11, 2015 7:54 pm

Much simpler than that.

This is all I have (inside a <td> </td>) on this page

Code: Select all

   <div class="row">
      <div id="tip_7" class="gauge">
         <canvas id="canvas_dir" class="gaugeSizeSml"></canvas>
      <div id="tip_10" class="gauge">
      <canvas id="canvas_rose" class="gaugeSizeSml"></canvas>
to display the two gauges you see there - no changes to any other part of the gauges fileset.
You will also have to include all the necessary support files in the head section i.e.

Code: Select all

<!-- Included Scripts -->
  <link rel="stylesheet" href="<?php echo $sharedir ?>lib/steelseries/css/wx-gauges-ss.css">
  <!-- CDN hosted JQuery library -->
  <script src=""></script>
  <!-- Combined steelseries.js & tween.js -->
  <script src="<?php echo $sharedir ?>lib/steelseries/scripts/steelseries_tween.min.js"></script>
  <script src="<?php echo $sharedir ?>lib/steelseries/scripts/language.min.js"></script>
  <script src="<?php echo $sharedir ?>lib/steelseries/scripts/gauges.js"></script>
  <!-- Optional Wind Rose scripts -->
  <script src="<?php echo $sharedir ?>lib/steelseries/scripts/RGraph.common.core.min.js"></script>
  <script src="<?php echo $sharedir ?>lib/steelseries/scripts/RGraph.rose.min.js"></script>
The <?php echo $sharedir ?> is simply the path to a separate folder - replace this with what ever your path is from the location the script is running in.

Return to “SteelSeries Gauges”

Who is online

Users browsing this forum: No registered users and 7 guests