Home Brew WX web pg. & looking to use a single SteelSeries Gauge

[CapeCoralWX]

I originally posted in Weather Stations and Associated Hardware < Homebuilt...but that may have been somewhat off topic so I've moved it over here.
*****
Looking for guidance and suggestions regard the minimun software required that will permit me to pass wind direction data to the Cumulus SteelSeries wind direction compass rose needle display.
My present Wx station consists of a Vantage PRO2 with the wifiLogger2 module installed. I have a RPi running linux that runs a cron job once every 5 minutes and downloads a jason file from the WFL2. The jason file is processed to extract all my required wx parameters and these are loaded into a XML file which is then SFTP to my website. My website is a UNIX environment and my web page is running a javascript ajax routine that reads the XML file and retrieves all the <div> elements for background update.
So far I have not found any postings that would indicate anyone has attempted to do this on a home brew web page using any of the software that exists in the SteelSeries-Weather-Gauges-2.7.6a.zip file. I am open to any suggestions from the support community on this subject. My web site can be viewed at the following URL: http://thecore.com/efinn/wx/wx.html

Ed -WA2ZYU

[HansR]

Hi and welcome to the forum.

If I understand your post well, you do not use CumulusMX but some home built system to get your weather data and a home built website to put those data in. CMX has the possibility to generate the file realtimegauges.txt which is read by the library gauges.js to update the gauges. In the webpage. You may need to study the default website webpage for the gauges to see how everything is configured.

Then you can make your own page, set it up for just the one gauge you want and create your own realtimegauges.txt and supply that regularly (everything less frequent than 3 minutes will set the signalling LED to red if you use that). If you configured your page correctly everything from there will be automatic: you only need to supply the realtimegauges file.

You might want to look at the configuration possibilities the gauges.js library has for other systems such as Weather Display etc... Read the code for this.

You will need to understand javascript scripting in HTML and to include the required libs. You also need jQuery.

To read:

1. https://cumuluswiki.org/a/SteelSeries_Gauges (not completely up to date but will get you started)
2. The gauges.js code to configure what you may (not) need
3. The github pages to fetch the code (see the wiki page)

If you are a coding hobbyist you might even want to try to create a gauge by yourself from the steelseries and bypass the gauges library completely. That is a possibility but most of us are very happy Mark did the hard work . And then you're most likely on your own unless Mark (@mcrossley) has the patience and the time to explain to you. He probably won't, but if you run aground and pose a question he may pull you afloat again.

Normal questions related to gauges.js might get slightly more response.

[CapeCoralWX]

Hi and welcome to the forum.

If I understand your post well, you do not use CumulusMX but some home built system to get your weather data and a home built website to put those data in. CMX has the possibility to generate the file realtimegauges.txt which is read by the library gauges.js to update the gauges. In the webpage. You may need to study the default website webpage for the gauges to see how everything is configured.

Then you can make your own page, set it up for just the one gauge you want and create your own realtimegauges.txt and supply that regularly (everything less frequent than 3 minutes will set the signalling LED to red if you use that). If you configured your page correctly everything from there will be automatic: you only need to supply the realtimegauges file.

You might want to look at the configuration possibilities the gauges.js library has for other systems such as Weather Display etc... Read the code for this.

You will need to understand javascript scripting in HTML and to include the required libs. You also need jQuery.

To read:

1. https://cumuluswiki.org/a/SteelSeries_Gauges (not completely up to date but will get you started)
2. The gauges.js code to configure what you may (not) need
3. The github pages to fetch the code (see the wiki page)

If you are a coding hobbyist you might even want to try to create a gauge by yourself from the steelseries and bypass the gauges library completely. That is a possibility but most of us are very happy Mark did the hard work . And then you're most likely on your own unless Mark (@mcrossley) has the patience and the time to explain to you. He probably won't, but if you run aground and pose a question he may pull you afloat again.

Normal questions related to gauges.js might get slightly more response.

Hi Hans,
Yes, you pretty much hit the nail on the head. At my house I have a VP2 with the WFL2 module. I use a local RPi to query the WFL2 and it responds with a jason formated file that the RPi parses and pulls out all the sensor data. This data is entered into a XLM file (required by my website s/w) and is SFTP to the web site. At the website I have a javascript with a ajax routine that querys the xml file about once every 10 sec. and keeps updating the <div> elements on the html portion of my web page...all home brew from the ground up...great mental chewing gum!

That web page that you recommended is one that I've had open for some time in my browser. Off to the right side of that page there are smaller insets showing 3 different configurations for 8, 10 & 11 gauges. But the "real" gauges would need to be without needles as I believe the needles muct be an overlay image, so where are the real gauge faces kept? I see words written regarding the "JavaScript/HTML5 Canvas SteelSeries gauges", but none of the zipped files that I've downloaded so far contain any graphical images of the gauges or the needles. Obviously I'm missing something somewhere. I'll keep hammering away at it...as Fox Mulder says..."the truth is out there!"

Ed Finn
efinn1940@gmail.com
http://thecore.com/efinn/wx/wx.html

[HansR]

There are no images, it is all built from the ground up, painting on a canvas by the steelseries software. They are objects. If you are looking for images on which you can overlay some needles: that is not how it works.

If the gauges.js library does not satisfy you, you will need to dig into the steelseries libraries itself. If you want to use those gauges you will need to study the software.

There are no image shortcuts to these animated gauges.

[CapeCoralWX]

There are no images, it is all built from the ground up, painting on a canvas by the steelseries software. They are objects. If you are looking for images on which you can overlay some needles: that is not how it works.

If the gauges.js library does not satisfy you, you will need to dig into the steelseries libraries itself. If you want to use those gauges you will need to study the software.

There are no image shortcuts to these animated gauges.

Good Morning Hans,
Thank you for the correction to my pre concieved idea that the gauges were stored image files such as .jpg, .jif or .png.
Your explanation now explains the <svg> tags that I have been seeing in the source code for all the sites that are using the SteelSeries_gauges. It is now time to continue with my reading with this new understanding of the process.

Ed -WA2ZYU
http://thecore.com/efinn/wx/wx.html

[HansR]

OK.
Let us know how you get along.

Cheers,

[CapeCoralWX]

OK.
Let us know how you get along.

Cheers,

Hi Hans,
You asked me to keep you updated on my progress, so that is the driving purpose behind this posting. Additionally for anyone in the future who may be DIY types that have designed their own weather web sites, I hope that this posting may be of assistance to them as well...
Step one
I downloaded the SteelSeries-Weather-Gauges-2.7.6a.zip and installed all the directories and files exactly as they came came out of the zipped up file making sure that they were in the proper location with respect to my existing weather page. Initially there was a gauges-ssT.htm file in the "weather_server/Cumulus" directory so I decided to start with it just to make sure that I could bring up the gauges and assure myself that all was working in my environment as it was designed to do. Many thanks go out to all the designers of this software as I instantly had a display of the suite of gauges that this htm file called. So now I had a working base to start with for the next phase of modification.
Step two
At this point in my progress I elected to see if I could pass a wind direction value to the wind direction gauge that was displayed by the gauges-ssT.htm file. This took a little bit of doing as the Javascript was set up to work with a Cumulus web site however there was a realtimegaugesT.txt data file that was in the Cumulus format so I inserted a value for the wind direction meter and was able to pass it to the htm web page by clicking on the button that set the wind speed to MPH. Apparently somehow that caused the htm software to kick off and read the data file. I felt that this was a good sign and it was now time to start surgery. Before starting this next phase of the operation I called my son and we established a SKYPE connection so we could real time communicate and he has a considerable amount more experience working with javascripts than I so two heads are better that one. As we both dove into the workings of the software, my son commented that the existing javascripts were "robust" with code that was designed to support the entire suite of gauges that are available to the community and additionally code that was designed to work with many different commercial web page designs. So while I was going throught the javescript commenting out sections of code that was for all the gauges I wasn't going to use, my son was off doing google searches for anything that might be of assistance to us in this modification of the software. He finally got back to me and informed me that he found a web site that supported the steelseries of gauges...
https://nicolas-van.github.io/steelseries/
More important was the fact that it had a single linking script call and one string command that had to be placed at the location where you wanted the gauge to be displayed. Well needless to say we copied the script link into a test page on my web site and it instantly brought up the gauge. Now our task was down to passing my existing wind speed parameter dynamically into the string command. So for those that are interested let me supply below the actual lines of code that were used to make my SteelSeries Wind direction gauge come to life.

The code below is the link to the javascript required by the gauge. I don't like my software to be dependant upon a file that is located remotely, so I actually obtained a copy of "steelseries.bundled.min.js and placed it in my webpage directory...your choice...
<script type="module" src="https://cdn.jsdelivr.net/npm/steelserie ... "></script>

The code below is the div code to be entered at the location where you want the gauge to appear and the id="winddirholder" can be removed from this code as it was a force of habit that WAS required for all my other div elements ...
<div id="winddirholder" style="width:420px;height:200px;"><steelseries-compass id="windc" value="0" frameDesign="GLOSSY_METAL" backgroundColor="STAINLESS"></steelseries-compass></div>

The code below was inserted into a section of my ajax javascript that is run on a timed update sequence where all my weather display <div> elements get loaded with the most recent data from my XML data file. In this code the entry "windc" identifies the portion of the code string that is to be updated with the new data and the entry "(owd1)" identifies the source of my wind direction value in degrees...
var windwidget = document.getElementById("windc");
windwidget.setAttribute("value", parseInt(owd1));

Many thanks go out to those that have contributed valuable information to assist me with this project and definitely the tremendous work done by the software design team that made the software available for the steelseries of gauges.

Ed Finn - WA2ZYU
https://thecore.com/efinn/wx/wx.html

[PaulMy]

well done Ed. You asked, you heard, you did, you were successful.

Enjoy,
Paul

[HansR]

@CapeCoralWX:

Hi Ed,

Well done!
Tbh that report is a lot quicker than I expected .
@mcrossley no doubt will be happy with the appreciation.

It may be good to know that the original sources are on github afaik and are Copyright (c) 2011, Gerrit Grunwald, Mark Crossley (i.s.o. nicolas-van). I think you should mention that on your site.

Well done and you are a great report writer though it takes some time to write and read

Regards,

[mcrossley]

Well done, nice to see that people still use those gauges!

Personally I would remove the decimals from the scale labels with: labelnumberformat="STANDARD"