Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.5 (build 3282) - 23 February 2024

Cumulus MX V4 beta test release 4.0.0 (build 4017) - 17 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

Colour settings, defaults and user modifications

Discussion of the Cumulusutils tool and website generator.

Moderator: HansR

User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

Anybody looking for some nice colour combinations?
Look at this twitter account.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

Below are the two relevant sections of cumulusutils.ini of Beamaris Weather Tasmania. A dark theme.
As you will see on his site (soon: currently down because of sensor trouble) there is also a complete revision of the graphs to avoid the large light area in this dark theme.
I will study that to see if I can make that configurable as well. No guarantees that will be configurable from within CumulusUtils but I'll look at it.
In the mean time, you will find below his configuration for what is currently in the cumulusutils.ini file which already has major dark impact.

The Graph section:

Code: Select all

[Graphs]
GraphColors=['darkcyan', 'crimson', 'cyan', 'blue', 'green', 'yellow', 'red', 'blueviolet', 'chartreuse', 'coral', 'cornflowerblue', 'darkblue', 'darkgreen']
WindRose=true
WindRoseNrOfWindforceClasses=10
WindRoseMaxWindSpeed=40
WindRoseColors=['#00008d', '#0000f4', '#0058f6', '#00bfff', '#22ffdb', '#87ff77', '#effd12', '#feac00', '#ff4800', '#e20001', '#7a0300']
WindRoseInversed=false
And the relevant entries in the Website Section:

Code: Select all

[Website]
ColorMenuBackground=Lightgrey
ColorMenuText=Black
ColorToggler=Black
ColorDropdownMenuBackground=Lightgrey
ColorDropdownMenuText=Black
ColorDropdownMenuHoverBackground=Silver
ColorDropdownMenuHoverText=Black
ColorTitleBar=#1f1f1f
ColorTitleText=#a8a8a8
ColorTitleBackGroundImage=
ColorDashboardCellTitleBarBackground=#2e2e2f
ColorDashboardCellTitleBarText=#a8a8a8
ColorDashboardCellText=#a8a8a8
ColorDashboardCellBackground=#1f1f1f
ColorReportviewText=#a8a8a8
ColorReportviewBackground=#2e2e2f
ColorFooterLink=#E87510
ColorFooterLinkHover=OrangeRed
ColorFooterBackground=lightgrey
ColorFooterText=Black
ColorBodyBackground=#2e2e2f
ColorDashboardUpIndicator=Chartreuse
ColorDashboardDownIndicator=Red
SteelseriesDirAvgPointertype=TYPE8
SteelseriesDirAvgPointerColour=BLUE
SteelseriesRainUseSectionColours=false
SteelseriesRainUseGradientColours=true
SteelseriesLedVisible=false
SteelseriesFramedesign=TILTED_BLACK
SteelseriesBackgroundColor=DARK_GRAY
SteelseriesPointerColour=RED
SteelseriesPointerType=TYPE8
SteelseriesLcdColour=BLUE
SteelseriesForegroundType=TYPE1
SteelseriesKnobType=STANDARD_KNOB
SteelseriesKnobStyle=SILVER
You do not have the required permissions to view the files attached to this post.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

OK, I had the outstanding action to study Beaumaris Highcharts implementation for his Dark Theme and see if it is doable to implement such thing in CumulusUtils. And with implementing I mean generate a theme based on parameters in the inifile.

I did spend the day on this - not all of it, we had our first summers day with 26.7 deg, tomorrow towards the 29 degrees.

My conclusion is: yes I could but I won't. The complexity easily gets pretty high when you start implementing colour nuances on the different objects in a graph. And of course you want your degrees of freedom. Does this mean it is impossible for the average user to modify the graph colouring? No absolutely not.

Below I will describe in a nutshell what you should do if you would like to choose colours, where the light graphs area would require a more dimmed tone.

It is all about themes for Highcharts and Higcharts has a nice explanation on its site on how to deal with style and design. So with some practice and experimenting you can easily make large changes and make your first Coloured Theme. From there you can work it out and make it more complex, with more subtle nuance, as you go.

How do you handle that within CumulusUtils because everything is generated? Right?

Yes and no. There is one file in the lib directory which you can safely replace by your own version: HighchartsDefaults.js Don't touch the others, those are libraries and generated files :!: This is actually a Highcharts theme file and it is the same as the grid.js theme file which comes with the distribution of CumulusMX. One of those files: dark-unica.js is the basis of Tony's Dark Theme. There are also other themes in that distribution which you can start studying/modifying. Start by changing the background and increment complexity as you go.

Then when you think you are done, there are the following methods to activate your HighchartsDefaults.js:
  1. Replace the HighchartsDefaults.js directly in the lib directory of your the website after running CumulusUtils;
  2. Replace your HighchartsDefaults.js in the utils directory and run CumulusUtils, the file goes straight to your website;
  3. Remove the distribution version of HighchartsDefaults.js from the utils directory and place your own version on the website. As long as there will be no HighchartsDefaults.js file in the distribution directory, the one on the website will not change.
Starting your website will show your modifications immediately when HighchartsDefaults.js is modified.
Have fun!

NB: Tony's HighchartsDefaults.js is added to the previous message to complete his colouring data.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

To follow up on the previous message: apparently I missed that the themes are no longer distributed with CumulusMX (I still have them in my installation tree), but you can find them on the Highcharts GitHub repository.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
kocher
Posts: 233
Joined: Sat 19 Apr 2014 7:57 pm
Weather Station: Davis Vantage Pro2+
Operating System: Windows 10
Location: San Sebastian - Spain
Contact:

Re: Colour settings, defaults and user modifications

Post by kocher »

Good morning Hans

The link above does not work; I think this could work:

https://github.com/highcharts/highchart ... css/themes

Saludos desde San sebastian
Image
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

Hello Javier,

I guess you are right.

Apparently Highcharts is changing the links around the themes as the other themes are not there.
In the attached image the themes which were delivered with CMX in my distribution are shown. I am not sure about their current status within the release. Maybe mcrossley can shed a light on there.

The links you come up with are CSS versions, I never checked those and that will function very differently from how I implement those. In CumulusUtils, the theme is implemented as HighchartsDefaults.js so the user can do as he likes without thinking about themes. I do not currently have the time to look into this issue as I am finishing the 3.9.x branch and preparing the 4.0.x branch. In that phase I can't add the themes as an issue.

I saw you were kind of working on the dark theme yourself. I am currently creating a test version (3.9.11beta1, which will be the last version of this branch) which fixes several things to make it easier for the user to use a dark theme with CumulusUtils. If you are interested, I can send it to you too. Let me know if you would like to.

Regards, Hans
You do not have the required permissions to view the files attached to this post.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
kocher
Posts: 233
Joined: Sat 19 Apr 2014 7:57 pm
Weather Station: Davis Vantage Pro2+
Operating System: Windows 10
Location: San Sebastian - Spain
Contact:

Re: Colour settings, defaults and user modifications

Post by kocher »

Of course; yes I would like it ;)
Image
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

Hi Javier,

If you use the HighchartsDefaults.js from this message (that's Tony's / BeaumarisWX's) you will have a complete Dark Theme.
Don't let that file be overridden by updates.

Best Regards,
Hans
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

The Dark Theme discussion is moving towards a more general 'what and how' of the graph colouring.
I will make a separate thread on 'Details of themes related to graphs'.

Interesting for the future of the graphing possibilities and also for the knowledge and technique of How To.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

kocher wrote: Sat 25 Jul 2020 7:31 am Good morning Hans

The link above does not work; I think this could work:

https://github.com/highcharts/highchart ... css/themes

Saludos desde San sebastian
Good morning Javier,

I did some research on the themes of HighCharts and they apparently have been moved withing the github structure.
The current theme directory is here: https://github.com/highcharts/highchart ... ons/Themes

Please Note that a HighchartsDefaults.js file MUST start with :

Code: Select all

Highcharts.theme = {
And after the HighCharts javascript initialisation code the file MUST end with:

Code: Select all

    // Apply the theme
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
This means the themes as found in the github need to be modified slightly to be used within CumulusUtils.

Regards, Hans
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
kocher
Posts: 233
Joined: Sat 19 Apr 2014 7:57 pm
Weather Station: Davis Vantage Pro2+
Operating System: Windows 10
Location: San Sebastian - Spain
Contact:

Re: Colour settings, defaults and user modifications

Post by kocher »

Good morning Hans

Thank you very much for your clarifications. :idea:

I admit that I have a certain fear of spoiling something that works very well :oops:
Image
Hoeveld
Posts: 58
Joined: Thu 31 Dec 2020 10:18 am
Weather Station: Ecowitt WS80 & WH40 - GW1100
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Newark-on-Trent
Contact:

Re: Colour settings, defaults and user modifications

Post by Hoeveld »

Tardus & maximus .........................

ColorMenuBackground=#8EA2C6
ColorMenuText=Black
ColorToggler=Black
ColorDropdownMenuBackground=#8EA2C6
ColorDropdownMenuText=Black
ColorDropdownMenuHoverBackground=#ffffff
ColorDropdownMenuHoverText=Black
ColorTitleBar=Black
ColorTitleText=#ffffcc
ColorTitleBackGroundImage=images/66.jpg
ColorDashboardCellTitleBarBackground=#c1cce0
ColorDashboardCellTitleBarText=White
ColorDashboardCellText=Black
ColorDashboardCellBackground=White
ColorReportviewText=Black
ColorReportviewBackground=White
ColorReportviewTableData=Black
ColorFooterLink=#E87510
ColorFooterLinkHover=OrangeRed
ColorFooterBackground=lightgrey
ColorFooterText=Black
ColorBodyBackground=white
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

@Hoeveld:
I saw you busy changing things. Looks nice blue :)
Tardus Maximus... Nice station title as well ;)
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Colour settings, defaults and user modifications

Post by HansR »

Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
Post Reply