Colors on FreshWDL screen

Is there a way to customize the colors on the FreshWDL screen (on my website).

In particular, I have a client that cannot tell the difference between the colors for the Windspeed and the Wind Gust. (I did point out the labels on the columns – which may help)

Thanks.

I think the short answer is “no”. . . :frowning:

A longer answer is yes…but it will probably give you a lot of extra work now and in the future. If you downloaded all the JavaScript files to your own web server and modified the main code to run them from there, you could then modify the colours in the JavaScript. You’d need to find where they were defined and that’s certainly possible. A big problem with this is the you’d need to modify the code again each time FreshWDL was updated.

Thanks, Chris. I sort of figured that would be the answer (in the Javascripts).

I did not download all of them. Maybe sometime when I have nothing else to do.

This is a bit hacky, and I cannot promise it will work, but feel free to try this and report back :lol:

In your html page, add the following:

 <script>colour.windGust = "255, 0, 0"; </script> 

This needs to be placed directly after the line that imports Globals.js, and before the line that imports WidgetHandlers.min.js. So it should look like:


        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/yerren/FreshWDL@master/js_bundles/Globals.js"></script> <!--Includes the script that sets global variables-->
        <script>colour.windGust = "255, 0, 0"; </script> 
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/yerren/FreshWDL@master/js_bundles/WidgetsHandlers.min.js"></script> <!--Includes most of the Scripting-->

The colour code is in RGB, so you can set it to whatever you like, it doesn’t have to be “255, 0, 0” (red).

Unfortunately, I don’t have a site that I can test it on myself at the moment, so let me know if that works!
-Yerren

Working here, Yerren :slight_smile:

(Of course, info popup still mentions “Purple bar . . .”.)


This is a bit hacky, and I cannot promise it will work, but feel free to try this and report back :lol:

Yerren,

I like “a bit hacky”. I’ve put it in and appears to work. Now, if my color blind mate can see it, that will be good.

Great, I’m glad that works!

For future reference, you can set the following theme colours in the same way:

colour.barometer
colour.rainfall
colour.wind
colour.windGust
colour.humidity
colour.solar
colour.temp
colour.tempLow
colour.uv

That being said, this wasn’t actually intended to be modified, so you might find that some don’t behave as you expect (e.g., I believe “temp” actually controls the colour for max temperature, and that you cannot set the main temperature colour…).

Thank you, Yerren.

Only problem with the default colors is that some color blind people cannot distinguish. I understand they were not meant to be modified. At least this worked properly for the wind gusts.

Works great - changed wind (blue), windGust (red), and rain (green): https://novawx.dscloud.me/freshwdl.php.

. . . and “Green arrow. . .”.

Fixed the pop-ups for wind speed, gust, and the direction arrow by changing the text in Globals.js


:slight_smile:

Speaking of Hacks, :lol: Thanks for the hint.

I assume that means you have a local copy of Globals.js?

Oh, yes, guess I should’ve specified that! I saved a copy to my server (I run my website from a Synology NAS) so that I could update the file locally.

Can you change the text size for headings in Globals.js, or is that in Widgets? I have been suggesting that Yerren could make the word “Rainfall” smaller (same as “Wind Speed”?) for some time. . .

(Sorry, Yerren :wink: )

I didn’t find a way to change the text size of Rainfall in Globals.js.

Yes I’ve changed my colours OK too but I can’t change the colour of “Beaufort Scale” under the wind gauges. I’ve got a blue sky with clouds as a background & the blue writing doesn’t show up very well www.theoldschool.info. I’ve looked in globals.js and there are several references to Beaufort Scale such as the Title, and calculation of the Scale Number but no reference to font colour, nor is there in config.js
Any ideas?

A reference here. Doesn’t say which one :frowning: