Welcome to the Cumulus Support forum.

Latest Cumulus MX release 3.11.4 (build 3133) - 25 May 2021 (please see announcement regarding releases since 3.5.0)
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

Customising the local dashboard

Share your Cumulus MX user interface here

Moderator: mcrossley

flort
Posts: 21
Joined: Thu 17 Dec 2020 9:06 am
Weather Station: Aercus WS3085
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Tin Can Bay, Queensland, Australia
Contact:

Re: Customising the local dashboard

Post by flort »

Hi John,

I think this dashboard layout is worth pursuing. It was relatively simple to manipulate and rearrange tiles to suit my preferences. It's great seeing all my information on one screen without scrolling.

Here's a copy of my final dashboard.
Dashboard.jpg
Thanks,
Trevor
You do not have the required permissions to view the files attached to this post.

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

Re: Customising the local dashboard

Post by mcrossley »

Looking forward to see where this goes...

AndyKF650
Posts: 80
Joined: Thu 20 Aug 2020 8:35 am
Weather Station: Davis VP2 Plus
Operating System: RPi v4 Debian Buster Windows 10
Location: Jersey Channel Islands
Contact:

Re: Customising the local dashboard

Post by AndyKF650 »

I liked the potential for customising the local dashboard and have spent a couple of hours working out how to get a dashboard that works for me. Others may dislike it but personal choice suggests the way forward.

Once I had got my thoughts around the interaction between the newgrid.css and the index.html by patient trial and error the following index screen is my favoured option.
You do not have the required permissions to view the files attached to this post.
Regards

AndyK

flort
Posts: 21
Joined: Thu 17 Dec 2020 9:06 am
Weather Station: Aercus WS3085
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Tin Can Bay, Queensland, Australia
Contact:

Re: Customising the local dashboard

Post by flort »

It's a great layout to use on the gauges page as well as it shows all your gauges in a single view.

Regards,
Trevor

AndyKF650
Posts: 80
Joined: Thu 20 Aug 2020 8:35 am
Weather Station: Davis VP2 Plus
Operating System: RPi v4 Debian Buster Windows 10
Location: Jersey Channel Islands
Contact:

Re: Customising the local dashboard

Post by AndyKF650 »

So I think this is the final iteration of the local desktop, navigation bar at the top, titles and headlines next and a clean footer.
You do not have the required permissions to view the files attached to this post.
Regards

AndyK

prodata
Posts: 280
Joined: Sat 05 Feb 2011 7:13 pm
Weather Station: VP2
Operating System: Windows - all flavours
Location: Littleport, East Cambs, UK

Re: Customising the local dashboard

Post by prodata »

Looking good! A couple of follow-up thoughts:

It may well be that all many users need is for the dashboard to be viewed on one screen only. But if you might be viewing on a phone or tablet as well as eg a PC screen then don't forget that it's relative easy with CSS Grid to define different layouts for different screen/viewport formats (or even eg a tablet in portrait vs landscape formats) using media queries in the newgrid.css file. You just define a different template area layout map for each media query definition that you want to use. So eg on a tablet you might use a 4x3 layout for the 12 main data tiles in landscape mode but have this switch to a 3x4 layout in portrait. (And of course the reformatting should also happen on eg a PC screen as you change the browser window size manually.)

Also, because the layout is simply defined by the abbreviation for each template area, the tiles do not even need to be in the same order as they might be in your primary/reference layout.

Second, I do still rather feel that 12 main data tiles is too many. eg do RH and Dew Point really need to be on separate tiles? I'm all for simplicity and conciseness in limiting where the eye has to look across a screen and for grouping related data together. And maybe update time could be given less prominence and moved to a secondary area somewhere (eg near the top).That said, there's no doubt that 12 main tiles (ie excluding header and footer areas) is a more convenient number for organising different layouts (ie 6x2, 4x3, 3x4, 2x6) than 10 tiles would be. But this is obviously personal preference.
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

AndyKF650
Posts: 80
Joined: Thu 20 Aug 2020 8:35 am
Weather Station: Davis VP2 Plus
Operating System: RPi v4 Debian Buster Windows 10
Location: Jersey Channel Islands
Contact:

Re: Customising the local dashboard

Post by AndyKF650 »

Hi John

Thanks for the support and suggestions, I have cleaned up the file and gone down to 5 * 3 grid. Wind chill is now under dew point and indoor temperature and humidity are recorded in their respective tiles. As a note the moon is updated by a cron job every 3 hours. The newgrid.css and index.html are attached for information.

I have not worked out just how to centre the gauges, which is irritating but hey ho.

This set up is done for my local pc use but as you say, I assume that, it could be modified to be viewed on other devices.
You do not have the required permissions to view the files attached to this post.
Regards

AndyK

Mapantz
Posts: 978
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 10 x64
Location: Dorset - UK
Contact:

Re: Customising the local dashboard

Post by Mapantz »

AndyKF650 wrote:
Mon 25 Jan 2021 8:04 pm
I have not worked out just how to centre the gauges, which is irritating but hey ho.
A quick-cheat way;

in newgrid.css

Code: Select all

.speedtile{grid-area: speed;text-align:center;}
.dirtile{grid-area: dir;text-align:center;}
.rosetile{grid-area: rose;text-align:center;}
Image

AndyKF650
Posts: 80
Joined: Thu 20 Aug 2020 8:35 am
Weather Station: Davis VP2 Plus
Operating System: RPi v4 Debian Buster Windows 10
Location: Jersey Channel Islands
Contact:

Re: Customising the local dashboard

Post by AndyKF650 »

Thanks for that, perfect solution all looks great now
Regards

AndyK

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

Re: Customising the local dashboard

Post by mcrossley »

I haven't loaded any of this yet, but using this is it going to be possible to say have a toggle switch for wide/narrow formats, and would each format still be responsive to screen width?

prodata
Posts: 280
Joined: Sat 05 Feb 2011 7:13 pm
Weather Station: VP2
Operating System: Windows - all flavours
Location: Littleport, East Cambs, UK

Re: Customising the local dashboard

Post by prodata »

mcrossley wrote:
Mon 25 Jan 2021 11:48 pm
I haven't loaded any of this yet, but using this is it going to be possible to say have a toggle switch for wide/narrow formats, and would each format still be responsive to screen width?
First off, I'm really no expert in this CSS stuff - just an amateur with an interest in improving how well weather data GUIs communicate to the user. I'm sure that a professional could provide much more accurate and succinct answers & code! Second (and probably not 100% true!), I think pretty much anything in terms of layout is possible these days with modern CSS and associated software tools, but the degree of difficulty in implementing more exotic or more flexible layouts probably goes up sharply as the complexity of what you want to do increases.

Picking up 3 points from the question:

1. The most straightforward option to implement is automatic reformatting of the layout as the viewport** size and orientation change. This is just done with standard CSS media queries and is contained solely within the CSS. (But i stress 'automatic' in that the user has no direct control over the layout they see for a given viewport size once the CSS has been defined.)

2. Responsiveness means different things to different people. It could mean that tiles in the layout change size automatically (at least within min/max limits) as the viewport size changes. This is simple to do as long as you don't have fixed-width tiles, but for the CMX dashboard the issue here is that the gauges are canvas objects IIRC rather than SVG. Not sure that this is a big issue because it can be worked around in other ways. Another way of thinking about responsiveness is that the actual grid layout changes as the viewport size changes, but this is the media queries aspect as in point #1. For smaller changes in viewport size then another approach is simply to vary the gap between fixed-width tiles, which again can be done automatically in the CSS.

3. For manual control over the layout then I think this is possible too because these days there are techniques for controlling the CSS from Javascript, but this isn't an aspect I've explored much. You would need a reasonably up-to-date browser I suspect, but shouldn't be a problem for most users given that all the mainstream browsers seem to be auto-updating these days.

But overall, I think that a set of carefully crafted media queries (which are actually quite simple to use once you have the hang of them) will cater for the great majority of use cases.

Where I can see a gap in implementation is that users may vary in how they want the layout to look, eg many users won't need a solar/UV tile to take a simple example. So, I could imagine a separate layout designer tool where you specify your preferences for layout and the tool simply spits out the appropriate CSS file. Maybe next year...

**Viewport is AIUI just a fancy word for the size of the browser window in this context. Obviously if you run applications full-screen then the viewport size will approximate to the overall screen size. But if you shrink the browser window manually or don't run it full-screen then the viewport will only be some fraction of the total screen size.
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

User avatar
odintheterrible
Posts: 110
Joined: Wed 16 Jan 2013 8:18 am
Weather Station: Brandson 304577 & GW1000
Operating System: Windows 10 64-bit
Location: Torre-Pacheco, Murcia, Spain

Re: Customising the local dashboard

Post by odintheterrible »

Greetings one and all,

I've been readingnthrough then thread with agreat deal of interest, and it all makes a lot of sense. However, I'm getting a bit long in the tooth to keep on updating my knowledge base.

So, this may sound a bit elemental to those with greater knowledge, but having started running a newer station with the GW1000 I'd be interested to know why in the new cumulus index page there is no place for the Solar and UVI data unlike the Ecowitt Dashboard ?? ... or does it have to be added as a hidden sensor ??

Thanks

P.S. from the thread read it sounds like there is much work taking plce, for which us lesser mortals should offer thanks ;)
"Qui Custodit Ipsos Custodes ? ..."

Duct Tape is like 'The Force' ... it has a 'Light Side' AND a 'Dark Side' and it binds the Universe together !

AndyKF650
Posts: 80
Joined: Thu 20 Aug 2020 8:35 am
Weather Station: Davis VP2 Plus
Operating System: RPi v4 Debian Buster Windows 10
Location: Jersey Channel Islands
Contact:

Re: Customising the local dashboard

Post by AndyKF650 »

Hi there

I have just relooked at the thread and my replies in light of your comment re a lack of solar data. My current local desktop p is as per the attached screen shot. I have updated it through the recent iterations of CMX.
You do not have the required permissions to view the files attached to this post.
Regards

AndyK

User avatar
odintheterrible
Posts: 110
Joined: Wed 16 Jan 2013 8:18 am
Weather Station: Brandson 304577 & GW1000
Operating System: Windows 10 64-bit
Location: Torre-Pacheco, Murcia, Spain

Re: Customising the local dashboard

Post by odintheterrible »

AndyKF650 wrote:
Sun 28 Mar 2021 6:57 am
Hi there

I have just relooked at the thread and my replies in light of your comment re a lack of solar data. My current local desktop p is as per the attached screen shot. I have updated it through the recent iterations of CMX.
Thanks for responding. I've double checked and it appears as if I am running the latest version of CMX

Image

Again, double checking: I've checked the html code in the index.htm, and indeed there does appear to be code to support the UV/SOLAR :

Image and there is data for the solar content in the dashboard :

Image

So, I'm not quite sure why it's not displaying on the index.htm page ;) Any comment/insight etc would be welcomed or indeed any info on how to solve this. THANKS in anticipation
"Qui Custodit Ipsos Custodes ? ..."

Duct Tape is like 'The Force' ... it has a 'Light Side' AND a 'Dark Side' and it binds the Universe together !

water01
Posts: 2161
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: WH1081
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: Customising the local dashboard

Post by water01 »

I think you getting mixed up. You say it is not appearing in the dashboard but then show us the figures in the local MX dashboard. What you have cut pasted appears to be the new website NOT the dashboard.

Have you ticked all the Solar settings in Internet Settings / Web/FTP Settings / Standard File Settings and Graph File Settings and Daily Graph File Settings to get the relevant .json files uploaded?
David
Image

Post Reply