How to Adapt SteelSeries Gauges Dashboard Layout in cumulusutils

[lse-cumulus]

Hans
I wanted to adapt the layout of my cumulusUtils webpage gauges in the dashboard.
I thought I can achieve this by:

1) modifying the paramters in cumulusutils.ini
SteelseriesFramedesign=CHROME
SteelseriesBackgroundColor=BLUE or STAINLESS
SteelseriesPointerColour=RED
SteelseriesPointerType=type15
SteelseriesDirAvgPointertype=TYPE15
SteelseriesDirAvgPointerColour=BLUE
SteelseriesLcdColour=DarkBlue
SteelseriesForegroundType=type1
SteelseriesLedVisible=true
2) runnning utils/bin/cumulusutils.exe Website
3) and so getting an updated gauges.js file

But this was not succesfull, the file gauges.js remained unchanged on utils directory and therefore an unchange file was FTPed to <webroot>/lib

I only succeeded to adapt the layout of the gauges by modifying the file gauges.js manually for gaugeGlobals and then running utils/bin/cumulusutils.exe Website to get it FTPed to <webroot>/lib

frameDesign: steelseries.FrameDesign.CHROME,
background: steelseries.BackgroundColor.BLUE,
foreground: steelseries.ForegroundType.TYPE1,
pointer: steelseries.PointerType.TYPE15,
pointerColour: steelseries.ColorDef.RED,
dirAvgPointer: steelseries.PointerType.TYPE15,
dirAvgPointerColour: steelseries.ColorDef.BLUE,
gaugeType: steelseries.GaugeType.TYPE4,
lcdColour: steelseries.LcdColor.DARKBLUE,

Is this the only way to achieve the layout change and have the Steelseriesxxxx parameters no effect in cumulusutils.ini or do I make somthing wrong?
thx
leo

[HansR]

Hi Leo,

Do NOT touch the gauges.js! It is an adapted version of the original gauges library to make it possible to change the gauges look from within CUtils. Yes, I probably should change the name of this library to make clear that it is modified lib and that it belongs to CUtils. The CMX version and the CUtils version are not interchangeable!

What you describe as what you did is correct but that won't result in a physically changed gauges.js, the gauges appearances are changed at runtime.

If the values you give above are what you really have in the cumulusutils.ini, then "BLUE or STAINLESS" cannot be handled.

Only one value is permitted. Do you know where to find the possible values? If not, I will probably enter all possibilities in the Wiki. Currently they are only described in the Steelseries FAQ (which I did not check on correctness, if incomplete I will add the parameter values in a paragraph in the CumulusUtils wiki).
[Edit 12/2/2023]I added links to the Steelseries FAQ and the example sites both in the Website page and the Dashboard page.

The values entered in cumulusutils.ini are case independent but (of course) must be an existing definition.

If a value of a parameter does not pass (is illegal, non-existent or mistyped or whatever) a message is written to the logfile. If you can't get it going, please post the logfile in a next post.

[lse-cumulus]

Hans
sorry for the confusion. I have not tried a "blue or stainless", but my cumulusutils.ini looks like that (and I do not get errors in the logfile that I attached):
...
SteelseriesRainUseSectionColours=false
SteelseriesRainUseGradientColours=true
SteelseriesDirAvgPointertype=TYPE3
SteelseriesDirAvgPointerColour=BLUE
SteelseriesFramedesign=CHROME
SteelseriesBackgroundColor=BLUE
SteelseriesPointerColour=RED
SteelseriesPointerType=TYPE3
SteelseriesLcdColour=DARKBLUE
SteelseriesForegroundType=TYPE1
SteelseriesKnobType=STANDARD_KNOB
SteelseriesKnobStyle=SILVER
...

I understand now that after a succesfull run of utils/bin/cumulusutils.exe Website there will not be a generated new updated version of gauges.js, but that gauges.js is a static library.

But which generated file controls the colors of the gauges during runtime? Is it just the generated cumulusutils.js? Or some other files that are generated but not FTPed correctly to my website?

So I changed back to the original gauges.js (with backgroundcolod=BROWN). But the parameters from cumulusutils.ini show no effect and the background is BROWN and not BLUE.

[HansR]

OK. The settings for the gauges are set at initialisation of the CUtils runtime system (cumulusutils.js) with the following function:

Code: Select all

function DoGaugeSettings() {
    console.log('DoGaugeSettings');
    gauges.config.realTimeURL = '../realtimegauges.txt';
    gauges.config.realtimeInterval = 15;
    gauges.config.showIndoorTempHum = false;
    gauges.config.showUvGauge = true;
    gauges.config.showSolarGauge = true;
    gauges.config.ThresholdTempVisible = false;
    gauges.config.ThresholdTempValue = 30;
    gauges.config.ThresholdHumidityVisible = false;
    gauges.config.ThresholdHumidityValue = 80;
    gauges.config.ThresholdWindVisible = false;
    gauges.config.ThresholdWindValue = 50;
    gauges.config.ThresholdRainVisible = false;
    gauges.config.ThresholdRainValue = 5;
    gauges.config.ThresholdRRateVisible = false;
    gauges.config.ThresholdRRateValue = 10;
    gauges.config.ThresholdUVVisible = false;
    gauges.config.ThresholdUVValue = 10;
    gauges.setLang(LANG.EN);
    gauges.gaugeGlobals.dirAvgPointer = steelseries.PointerType.TYPE3;
    gauges.gaugeGlobals.dirAvgPointerColour = steelseries.ColorDef.BLUE;
    gauges.gaugeGlobals.rainUseSectionColours = false;
    gauges.gaugeGlobals.rainUseGradientColours = true;
    gauges.SetFrameAppearance(steelseries.FrameDesign.CHROME);
    gauges.SetBackground(steelseries.BackgroundColor.BLUE);
    gauges.SetPointerColour(steelseries.ColorDef.RED);
    gauges.SetPointerType(steelseries.PointerType.TYPE3);
    gauges.SetLcdColour(steelseries.LcdColor.DARKBLUE);
    gauges.SetForegroundType(steelseries.ForegroundType.TYPE1);
    gauges.SetKnobType(steelseries.KnobType.STANDARD_KNOB);
    gauges.SetKnobStyle(steelseries.KnobStyle.SILVER);
    gauges.init(false);
}

As far as I can see your settings are correctly translated into this function.

Then this function is called during the activation of index.html (if you wish see $(function () {} at the beginning of the file) and because the clocks, the solar and moon discs are initialized well and because I see the settings function is called correctly in the debugger, I am currently confused why you do not see the gauges take the appearance according to the settings (other have changed the appearance as well and successfully) . All seems well and I am apparently missing something.

The libs are the correct versions, the code can be followed in the debugger and it seems OK.

Currently I have no answer I'll look at it again later, please let the settings as they currently are. You can continue with other settings and regenerate the site if that is required but leave the gauges as they are now. I'll get back to you.

[HansR]

I compared your gauges.js with the one in the distribution and found there are non UTF8 characters in there: '°'.

These are explicitly in your gauges.js. So while editing or transferring the gauges.js to your server did you introduce non-UTF8 format?
Otherwise please restore from the distribution the gauges.js to the utils directory and run website again. Make sure that before running the gauges.js is in UTF8 format as it is delivered. Do not use and editor or copy tool which changes that format.

For the rest the files are identical so I don't see an issue there.

[lse-cumulus]

1) I went back to the zip file of the cumulusutils v6153.zip distribution and extracted gauges.js again unter windows.
and checked that file gauges.js is in utf8 format
2) I checked my FTP server and found the following error in ftplog.txt
Response: AUTH TLS
Response: PBSZ
Response: PROT
Response: SIZE
Response: MDTM
Response: MFMT
Response: REST STREAM
Response: 211 End.
Status: Text encoding: System.Text.UTF8Encoding
Command: OPTS UTF8 ON
Response: 500 UTF8: command not understood.
Command: SYST
Response: 215 UNIX Type: L8
Status: Listing parser set to: Unix

3) I changed the settions of my FTP server to support UTF8
4) the ftplog.txt now looks fine
Command: FEAT
Response: 211- Extensions supported:
Response: AUTH TLS
Response: PBSZ
Response: PROT
Response: SIZE
Response: MDTM
Response: MFMT
Response: REST STREAM
Response: UTF8
Response: 211 End.
Status: Text encoding: System.Text.UTF8Encoding
Command: OPTS UTF8 ON
Response: 200 OK, UTF-8 enabled
Command: SYST
Response: 215 UNIX Type: L8
Status: Listing parser set to: Unix

5) I ran cutils.exe website again
6) gauges.js should now be in UTF8 format on the server
7) steeleseries Gauges are still in BROWN and not in BLUE.

[freddie]

Did you clear your cache, or try with an incognito tab?

[HansR]

I tried the blue background on my own system and it does not work so it's a bug somewhere.
I'll get back on this, you can stop trying for the moment.

[HansR]

OK. Found it, strange that nobody detected this earlier, it had been there since the last major release of the gauges sep 8, 2022.
Anyway, find attached version 2.0.1 of the gauges as a patch. Place this gauges in the utils directory and everything should work.

I'll make a full release tomorrow.

[lse-cumulus]

Hi Hans,
after applying your gauges.js patch, re-running the Website command and uploading the files to my website, it works immediately as intended: gauges show data in new layout with blue background and adapted pointer types.
Once again your efforts are much appreciated.
thx
leo