Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

SteelSeries Solutions

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

SteelSeries Solutions

Post by gwheelo »

Being the least knowledgeable and experienced in Javascript and Canvas of all the users of the SteelSeries gauges I have the best reason of all to start a new topic dedicated to "how do we customize and personalize Gerrit and Mark's fabulous gauge library work." This will have to be a collective effort as I am certainly not equipped to provide much (any) expertise. I am hoping all those interested in the SteelSeries will share their experiences and ideas in the same manner of helpfulness and courtesy we have learned to enjoy from the examples set out in this forum by Steve, DAJ, Mark, Beteljuice, Ray, and all the rest of the Cumulus Forum community.

To kick it off - here is my customization to display the Wind Direction Gauge labels (Latest & Average) in color to match the two needle colors.
Some one must have a better solution.

Here is an example -albeit using static data as my entire station is down at the moment:http://www.wheelocknet.net/cumulus/test_3.html?gb

This is based on steelseries.js Version 1.5.4 @ line 2576 or there about.

Open steelseries.js in your editor and search for "drawLcdTitles" and add the two lines underlined and bolded as shown below. "Minify" the modified script athttp://jscompress.com/ and your good to go.

var drawLcdTitles = function(ctx) {
if (lcdTitleStrings.length > 0) {
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();
ctx.font = 0.040 * imageWidth + 'px sans-serif';
ctx.fillStyle = "rgba(0,0,255,1)";
ctx.fillText(lcdTitleStrings[0], imageWidth / 2, imageHeight * 0.29, imageWidth * 0.3);
ctx.fillStyle = "rgba(255,0,0,1)";
ctx.fillText(lcdTitleStrings[1], imageWidth / 2, imageHeight * 0.71, imageWidth * 0.3);
if (titleString.length > 0) {
ctx.font = 0.0467 * imageWidth + 'px sans-serif';

ctx.fillText(titleString, imageWidth / 2, imageHeight * 0.5, imageWidth * 0.3);
}
}
};

I hope this is of some use to someone and I hope to see some great ideas here soon.

George Wheelcok
Image
duke

Re: SteelSeries Solutions

Post by duke »

Being the least knowledgeable and experienced in Javascript and Canvas of all the users of the SteelSeries gauges
Obviously not true :lol: .

How did you work out what to change / add for that mod and what is "minify"? :?

Duke
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: SteelSeries Solutions

Post by mcrossley »

You might want to use the pointer colours rather than hard coding the values. Something like:

Code: Select all

        var drawLcdTitles = function(ctx) {
            if (lcdTitleStrings.length > 0) {
                ctx.save();
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
//                ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();                            // Remove this line
                ctx.fillStyle = pointerColor.medium.getRgbaColor();                                     // Add this line
                ctx.font = 0.040 * imageWidth + 'px sans-serif';
                ctx.fillText(lcdTitleStrings[0], imageWidth / 2, imageHeight * 0.29, imageWidth * 0.3);
                ctx.fillStyle = pointerColorAverage.medium.getRgbaColor();                              // Add this line
                ctx.fillText(lcdTitleStrings[1], imageWidth / 2, imageHeight * 0.71, imageWidth * 0.3);
                if (titleString.length > 0) {
                    ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();                          // Add this line
                    ctx.font = 0.0467 * imageWidth + 'px sans-serif';
                    ctx.fillText(titleString, imageWidth / 2, imageHeight * 0.5, imageWidth * 0.3);
                }
            }
        };
Tell you what, I'll put that in the next release.
User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

Re: SteelSeries Solutions

Post by gwheelo »

Some one must have a better solution.
;)

See - Just like a red flag. And not only a better solution but improved with the addition of the zero bearing non color! Mark your a star!
How did you work out what to change?
.
By reading this forum, searching the net for specific topics pertaining to Javascript and canvas, oh - and I bought a book.
what is "minify
You have two versions of the same javascript file - steelseries.js and steelseries.min.js - they are identical in what they do - one, steelseries.js has the code formatted with comments, spaces, new lines, etc. to make it easy to read and understand - well understand is not always the correct term when I read it, and the steelseries.min.js has all the spaces, comments, etc. removed to make the file much more compact. The browser can read both files and produce the same results but the "minified" (minimized) version is about one third the size and therefore loads much faster and is read faster is well by the browser. Just hop on over to jscompress.com and read what they offer and search the internet for "minify", "minimize javascript", etc to learn a lot more. To "minify" the steelseries.js script - select the entire code and do a "copy" command . Go to Javascript Code Input and paste your code into the Javascript Code Input window. Press the button labeled "compress javascript. When the code is converted you will see your original code neatly compacted in a manner which makes it difficult to read - but much smaller. Select all of the new text by clicking in the window and then Control A to hightlite all of the new text and then Right Click the highlited text and then select copy from the drop down menu. Go back to your editor and open a new blank document and paste in the "minified" javascript. Save as steelseries.min.js and upload to your site. Make certain your html file is pointing to steelseries.min.js which it already is unless you changed it yourself.

Or just wait for Marks new version to appear - probably very soon!

Don' forget to make a copy of any file you intend to change prior to that change - accidents do happen - and often.

Ain't javascript fun!

GW
Image
duke

Re: SteelSeries Solutions

Post by duke »

Thanks for the explanation GW.

I think I better put JS next on my list. PHP at the moment :) .

Duke
gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: SteelSeries Solutions

Post by gemini06720 »

Hello guys (and gals if there are any of you hiding under those acronyms/nicknames)... :mrgreen:

George, your modification to the JavaScript code is nice but, indeed, for me, there is a but... ;)

As pointed out by Mark, it would be better if the code needed for changing any of the colours (and for that matter, the code needed to change any part of the gauges) was provided as pointers (or variables) into the main script (ie: 'steelseries.js') - this way, the main script could be updated without any risk of loosing the modifications. Indeed, that would involve Mark a little bit more ... well, Mark seems to be highly involved with the SteelSeries, even replying to queries during his work hours from his work place... :twisted:

The pointers needed to change the colours (or any part of the gauges) could/would be added to the 'gauges.js' script and passed along to the 'steelseries.js' script.

I do hope that is what Mark was suggesting... :oops:

An example of the pointers (variables) I was writing about would be the following (from the 'gauges.js' script):

Code: Select all

    g_temp.sections = [
                        steelseries.Section(-30, 0.0, '#0000FF'),
                        steelseries.Section(0.0, 5.0, '#4169E1'),
                        steelseries.Section(5.0, 10.0, '#87CEEB'),
                        steelseries.Section(10.0, 15.0, '#E0FFFF'),
                        steelseries.Section(15.0, 20.0, '#FFE4E1'),
                        steelseries.Section(20.0, 25.0, '#FFC0CB'),
                        steelseries.Section(25.0, 30.0, '#FA8072'),
                        steelseries.Section(30.0, 35.0, '#DB7093'),
                        steelseries.Section(35.0, 40.0, '#DC143C'),
                        steelseries.Section(40.0, 100, '#FF0000')
                      ];
    g_temp.useSections = true;
The pointers (variables) in this example are 'Section' and 'useSections'. So, if for example I want to change the colours of the label for the compass, I could/would use code similar to the above - is that doable Mark?

Note: I like code indentation as it makes it easier to navigate through the code... :P

George, you mentioned something about buying a book - would you care sharing a bit more information about that book such as the title, for whom the book has been written (beginner/intermediate/advance) and how helpful has it proven to be to you so far.

I know there is much information on the Internet, so much information that it is more and more difficult to isolate any particular web sites... :?
gwheelo wrote:Ain't javascript fun!
George, I would not consider JavaScript fun - challenging maybe! Over the past years, I have tried learning JavaScript (including AJAX) but I have not been able to (figuratively writing) 'wrap my head around' the language - one missing semicolon and the complete script is dead ... talk/write about making a programmer's life easy... :evil:

As I have mentioned in another post/thread, I have been experimenting with the 'gauges.js' script (thanks for Mark's guidance), playing around with the colours, the formats (radial/linear), adding the wind rose/radar, the thermometers. So, here is finally the link to my 'experimental' SteelSeries Weather Gauges page - the page is hosted on my new home/office server, so, screen refreshes might be needed to get past some of the (still having some problems with) other pages/scripts. :geek:

And please, PLEASE, do not even DARE using the :clap: smiley when commenting on my page - I really REALLY hate that smiley... :evil:
Last edited by gemini06720 on Sun 09 Jun 2013 7:19 am, edited 1 time in total.
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: SteelSeries Solutions

Post by mcrossley »

Hi Ray, when saying the label colours match the pointers, I meant the labels will always have the same colours as the gauge pointers/hands rather than variables. So yes you can set the pointer (let's use pointer to mean a physical thing, and 'reference' to mean a variable to points to something else) colours via script and both the pointer colour and the label colour will change.

The code posted above will only set the label colours when the gauge is initialised. They will take on the pointer colours passed as initialisation parameters.
BUT you can change the pointer colours dynamically after the gauge has been created by calling the gauge.setPointerColor(steelseries.color.NAME) and gauge.setPointerColorAverage(...). These methods will not change the label colours with just the code above - but I will add that functionality into the next release too.
gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: SteelSeries Solutions

Post by gemini06720 »

OK, I guess I was not too sure what George modification was about ... sometime, I need a lot of information to understand quickly (poor adaptation of a Québec expression)... :D

Mark, I understand well you explanation (thank you for clarifying) and I will use the proper terms ... so we 'speak' the same language... :)

I knew about the availability of a 'reference' to change the colour and the shape of the pointers - I was just trying to ensure that to change some other colours (such as the labels) one would not need to 'hack' the main 'steelseries.js' script, that the change could be done through a 'reference'. Just to make things clearer (I am really having one of those days :roll: ), will it be possible to change the colour of the label dynamically after the gauge has been created or would the initialisation colour remain?
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: SteelSeries Solutions

Post by mcrossley »

You WILL be able to change them dynamically - but they WILL be linked to the pointer colours, which makes sense I think.
User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

Re: SteelSeries Solutions

Post by gwheelo »

George, you mentioned something about buying a book
I really hate suggesting a book title - I have found that everyone has their own particular style in learning or using a manual. I suggest you go to a well stocked bookstore and leaf through all the books concerning javascript, HTML5, CSS3, and Canvas - you will find one (or two) that present information in a style you feel comfortable with. One thing I do recommend, however, is take a good look at the index. Pick a book with a good, robust, detailed index as after you make a pass through the book to obtain an overall picture - your biggest use will be looking up terms as they enter your realm - for instance, "for", "local variable", "operator", etc.. This is essential in any good reference guide - and it will be the first thing you turn to once you become familiar with its style.

If you don't have a good local book store turn to Amazon or similar. What ever you do - pick a recent publication date and make certain it covers HTML5 and Canvas. Not that your going to be instantly expert - but at least start with the newest.

I have even gone to the book store and looked up topics ,taken notes, and returned the book to the self - bad but useful. Your library, used book store, or boot sale most likely will not have anything current enough to be very useful. Sure you will learn something - but a bit out of date to benefit from the newer browser versions.

With all that said - I like the "Missing Manual" series.

And don't hesitate to go to http://www.w3schools.com/js/, javascriptsource.com/,
, and the hundreds of other sites available on the internet - and they are free!

GW
Image
User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

Re: SteelSeries Solutions

Post by gwheelo »

one missing semicolon and the complete script is dead

You are right, of course, "fun", I was being facetious.

Just be thankful that you are not a diplomat - if you use the wrong word you start a war! Javascript just doesn't work.

GW
Image
gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: SteelSeries Solutions

Post by gemini06720 »

mcrossley wrote:You WILL be able to change them dynamically - but they WILL be linked to the pointer colours, which makes sense I think.
So, to make this clear (remember, you are dealing with old memory chips... :lol: ) the label colours will be the pointer coulour - no separate colour?

Mark, may I make a suggestion for the SteelSeries Gauges pages on your hosting server - could you use the 'titleString' part and the 'unitString' part of each gauge to define the type of gauge used such as 'Radial' and 'TYPE1' for the top left gauge on the 'Canvas Steel - Demo - Radial' page - this would make it easier for visitors to identify which types of gauges they are looking at. ;)
gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: SteelSeries Solutions

Post by gemini06720 »

gwheelo wrote:Just be thankful that you are not a diplomat - if you use the wrong word you start a war! Javascript just doesn't work.
Me, a diplomat! :lol: George, if I was a programming diplomat (I know, that is an oxymoron), I would make sure that that my JavaScript are directly linked to/controlling a war game computer... :twisted:
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: SteelSeries Solutions

Post by mcrossley »

Here is a point of reference - it's obvious but just in case you hadn't realised it...

Since the realtimegauges.txt file uses the JSON file format, you can safely add your own fields/tags to the standard file (indeed you can re-order it how you like - so long as you leave the 'ver' field as the last value in the file). Adding your own fields allows you to refer to the new tag via the 'data' object in the scripts without adding any additional code e.g.

in realtimeGuagesT.txt add:

... "newField":"<#newTag>", ...

Then in the script you can use:
...
var myValue = data.newField * 100;
...
gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: SteelSeries Solutions

Post by gemini06720 »

mcrossley wrote:var myValue = data.newField * 100;...
Is the '* 100' needed for every variables... :)
Post Reply