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

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

Customising the local dashboard

Post by prodata »

A couple of questions on customising the local dashboard (index.html) if anyone has played with this:

Is there any simple way of using webtags to access data for the dashboard, even something obvious like the location to put in a header? Or would some extra JS be necessary to make eg an HTTP POST/GET call?

Is there a listing anywhere of the data that's returned from the dashboard's websocket call for the latest live data? Or should I assume that all available data items are maybe already effectively listed in the conversion to realtimeGauges.txt? (Appreciating that the two things are not necessarily the same but just wondering if there's a parallel.)

If anyone's interested, I have a dashboard index.html converted to use CSS Grid for layout of the blocks rather than than Bootstrap/Flexbox - it effectively uses named blocks and makes it easier to use different layouts with different media queries, even changing the order of the blocks or adding/omitting them if you wish at different viewport sizes. But it's just a 'first draft' at present - it does basically work OK but several rough edges as yet I'll keep working.

Finally, one curiosity: CMX seems to use a separate stored version of the dashboard when it starts up AFAICS. Needs a click to another menu page and click back to dashboard before any new index.html is read. What's that all about?
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

freddie
Posts: 1330
Joined: Wed 08 Jun 2011 11:19 am
Weather Station: Davis Vantage Pro 2
Operating System: GNU/Linux Ubuntu 20.04 LXC
Location: Alcaston, Shropshire, UK
Contact:

Re: Customising the local dashboard

Post by freddie »

prodata wrote:
Tue 20 Oct 2020 7:27 pm
Finally, one curiosity: CMX seems to use a separate stored version of the dashboard when it starts up AFAICS. Needs a click to another menu page and click back to dashboard before any new index.html is read. What's that all about?
Sounds like caching.
Freddie
Image

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 »

freddie wrote:
Tue 20 Oct 2020 7:48 pm
Sounds like caching.
Yes, I did wonder. It did persist after closing CMX completely and restarting. But maybe it was somehow still in the browser cache. Still a bit odd though, after showing a new version of the page it then reverted to the previous (standard) version of the page after the CMX restart.

Not a big deal though, just a curiosity.
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

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 »

There is only one copy of the pages, so it must have been a caching issue.

The dashboard (index.htm) gets updated date via a web socket connection (ws://192.168.50.46:8998/ws) that pushes new JSON data every 3 seconds. The content of that JSON is not configurable.

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 »

OK, thanks Mark. Any chance of a pointer on the other question please:

'Is there a listing anywhere of the data that's returned from the dashboard's websocket call for the latest live data?' ie the JSON.

Or is the assumption reasonable that all (or most?) available data items are maybe already effectively listed in the conversion to realtimeGauges.txt?
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

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 »

It is not documented, I just copied a WS message from my browser...

Code: Select all

{
    "AlarmBattery": false,
    "AlarmGust": false,
    "AlarmHighPress": false,
    "AlarmHighTemp": false,
    "AlarmLowPress": false,
    "AlarmLowTemp": false,
    "AlarmPressDn": false,
    "AlarmPressUp": false,
    "AlarmRain": false,
    "AlarmRainRate": false,
    "AlarmSensor": false,
    "AlarmSpike": false,
    "AlarmTempDn": false,
    "AlarmTempUp": false,
    "AlarmWind": false,
    "AlltimeHighPressure": "1048.5",
    "AlltimeLowPressure": "962.9",
    "AppTemp": "13.8",
    "AvgTempToday": "13.7",
    "Avgbearing": 171,
    "Bearing": 173,
    "BearingRangeFrom10": 130,
    "BearingRangeTo10": 200,
    "Beaufort": "F2",
    "BeaufortDesc": "Light breeze",
    "Build": "3096",
    "Cloudbase": 568,
    "CloudbaseUnit": "ft",
    "CurrentSolarMax": 268,
    "DataStopped": false,
    "DominantWindDirection": "S",
    "FeelsLike": "14.0",
    "Forecast": "Stormy, much rain",
    "HeatIndex": "14.1",
    "HighAppTempToday": "14.1",
    "HighAppTempTodayTime": "10:02",
    "HighBeaufortToday": "F3",
    "HighDewpointToday": "12.8",
    "HighDewpointTodayTime": "10:16",
    "HighFeelsLikeToday": "14.2",
    "HighFeelsLikeTodayTime": "10:00",
    "HighGustBearingToday": 174,
    "HighGustToday": "15.0",
    "HighGustTodayTime": "00:21",
    "HighHeatIndexToday": "14.2",
    "HighHeatIndexTodayTime": "01:06",
    "HighHourlyRainToday": "0.2",
    "HighHourlyRainTodayTime": "02:11",
    "HighHumToday": 95,
    "HighHumTodayTime": "05:01",
    "HighHumidexToday": "17.0",
    "HighHumidexTodayTime": "10:16",
    "HighPressToday": "996.6",
    "HighPressTodayTime": "00:41",
    "HighRainRateToday": "0.2",
    "HighRainRateTodayTime": "02:10",
    "HighSolarRadToday": 104,
    "HighSolarRadTodayTime": "10:13",
    "HighTempToday": "14.2",
    "HighTempTodayTime": "01:06",
    "HighUVindexToday": "0.0",
    "HighUVindexTodayTime": "00:00",
    "HighWindToday": "7.6",
    "Humidex": "16.9",
    "IndoorHum": 71,
    "IndoorTemp": "19.7",
    "LastDataRead": "10:19:17",
    "LastRainTipISO": "2020-10-21 05:12",
    "LowAppTempToday": "12.3",
    "LowAppTempTodayTime": "01:58",
    "LowDewpointToday": "11.8",
    "LowDewpointTodayTime": "00:00",
    "LowFeelsLikeToday": "12.7",
    "LowFeelsLikeTodayTime": "01:58",
    "LowHumToday": 90,
    "LowHumTodayTime": "00:00",
    "LowPressToday": "992.9",
    "LowPressTodayTime": "10:08",
    "LowTempToday": "13.4",
    "LowTempTodayTime": "07:33",
    "LowWindChillToday": "12.9",
    "LowWindChillTodayTime": "01:54",
    "Moonrise": "13:53",
    "Moonset": "21:07",
    "OutdoorDewpoint": "12.7",
    "OutdoorHum": 94,
    "OutdoorTemp": "14.1",
    "PressTrend": "-0.2",
    "PressUnit": "hPa",
    "Pressure": "992.9",
    "RainLast24Hour": "0.6",
    "RainLastHour": "0.0",
    "RainMonth": "76.8",
    "RainRate": "0.0",
    "RainToday": "0.4",
    "RainUnit": "mm",
    "RainYear": "615.8",
    "RainYesterday": "1.4",
    "Recentmaxgust": "7.0",
    "SolarRad": 100,
    "StormRain": "1.8",
    "StormRainStart": "20\/10\/2020",
    "Sunrise": "07:47",
    "Sunset": "17:58",
    "SunshineHours": "0.00",
    "TempTrend": "0.2",
    "TempUnit": "°C",
    "UVindex": "0.0",
    "Version": "3.9.1",
    "WindAverage": "4.0",
    "WindChill": "14.1",
    "WindLatest": "2.0",
    "WindRoseData": "0.0,0.0,0.0,0.0,0.0,41.0,374.0,5141.0,7534.0,1259.0,27.0,0.0,0.0,0.0,0.0,0.0",
    "WindRunToday": "51.0",
    "WindUnit": "mph"
}

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 »

Many thanks, Mark.

If anyone's interested, an illustration of using CSS Grid rather than Bootstrap/Flexbox in 2 examples of the upper part of the dash - see attachments. The difference results from moving just one line of code in a new CSS file. Each block/tile is named and there is a simple text map of which tile should go where:

Code: Select all

grid-template-areas: 
        'nb nb nb nb'
        'td td td td'
        'rain mph bar time'
        'temp speed dir rose'
        'hum dew chill sol'
        'ind ind ind ind'
        'foot foot foot foot';
(nb = navbar; td = top data; others should be fairly obvious.)

To move a tile, you just change its place in this (4-column) grid map. Also makes it easy to use different maps for different screen sizes/media queries.

Edit: I guess one caveat I should add is that you must be using a browser that supports CSS Grid. But Grid has been around for at least a couple of years and most modern browsers (Chrome, Firefox and, AFAIK, more recent versions of Edge and Safari) do so fine. But for anyone still using eg IE then it won't work. But since this is intended for the local dashboard specifically, most users will be aware of whether or not they are using an up-to-date browser.

NB I know the tile gaps aren't right - one of the details that needs further work.
You do not have the required permissions to view the files attached to this post.
Last edited by prodata on Wed 21 Oct 2020 10:48 am, edited 1 time in total.
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

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 »

Nice work John, I'd like to see this completed, and adopted as the standard in the distro if that is OK.
Then you can work on drag'n'drop of the tiles ;) :lol:

User avatar
beteljuice
Posts: 3212
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Customising the local dashboard

Post by beteljuice »

mark wrote: Then you can work on drag'n'drop of the tiles ;) :lol:
@John ....
Pay no attention to Mark - he has a very sick sense of humour :twisted:

@Mark ...
Let us assume an 'edit' drag'n'drop interface can be built.
Grid is not nice, everything has to be redeclared in one go, on one line.
eg. to apply changes as per johns layout

Code: Select all

$("#page").css('grid-template-areas', '"nb nb nb nb" "td td td td" "rain mph bar time" "temp speed dir rose" "hum dew chill sol" "ind ind ind ind" "foot foot foot foot"');
However ... How are you going to rewrite the css file :geek:
Image
......................Imagine, what you will KNOW tomorrow !

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 »

Oh you're asking a non-expert in HTML/CSS now, I leave that detail to the experts! But override the default CSS on the fly, and store the preference in a cookie - sounds doable?

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 »

Feel like I'm missing some interplay here, but taking things at face value:

Yes, the 'C' in CSS rides to the rescue. Could get a bit messy after many changes and call for a more major rewrite of the whole CSS, but just adding one new dashboard doesn't need that. And of course pages only need to call in the CSS files that they use so having an extra CSS file or two in the folder is immaterial.

And if you wanted the choice of two or more dashboards then the menu for those two pages could easily be tweaked. Not sure how you'd remember the choice but sure there's a way. Might be a case for pulling out the menu for all pages into a separate CSS file so that there's only one file to tweak.

Having a different dashboard opens up other questions too eg:

Would a dashboard be better in landscape and use the whole screen? (Some wasted screen real-estate at present (on standard monitors at least), yet the dashboard scrolls off the bottom on many.)

Would there be any benefit in making the dashboard properly responsive, ie with tiles resizing according too viewport size? But the stumbling block is probably the gauges being canvas rather than SVG. And if the gauges are fixed size then it might start to look odd if the text and other tiles resize but the gauges don't. Actually, I'm not sure this is much of a priority - most people will be using a particular monitor/laptop/tablet and probably (?) view the dash full-screen, without needing to change it much day to day.

Lots of other detailed questions too, eg is there really any value in giving the tiles/blocks a hover property as now. I suspect that this was just a feature in the toolbag of the Bootstrap template that Steve chose to use and doesn't serve much useful purpose - a nice extra cosmetic touch maybe as you mouse across the dashboard but is it worth the extra code? BICBW.

I'm thinking in general that it might be worthwhile to simplify the dashboard HTML and CSS as far as is reasonable (but solely for an alternative dash), which could make it easier for others to customise, but without changing its current content (much ;), at least not as a default.)

The other general point is that CSS has evolved significantly (eg with Grid) since the CMX dashboard was originally designed. There might be some value in looking at which other new features might be useful to explore. I guess the point is that once you start thinking about how the dash could be tweaked then this could be anything from a minor tweak to a complete new look. Once you've fixed the content then the rest is largely down to the CSS design.

Edit: Here's a quick and dirty look at a possible landscape (just as 70% size for convenience - I can post the original on request):
dash370.jpg
So all the data now fits on one monitor screen. TBH I think there are too many tiles, eg not sure that Dew and Hum really deserve to be on separate tiles. Could probably be reduced to 10 tiles AND separate solar & UV for those that have both. 10 tiles could be in a 5 col layout with maybe the dials moved to the middle of the second row - would look a bit more symmetrical. Also perhaps too many similar-looking tiles - maybe needs more variation and at least a little more colour. And, for my taste, too black/dark overall - I'm not personally a fan of all-blackish backgrounds, but I know others like it more.

NB It's fairly simple to do these quick looks but a more detailed refinement would take time. Also, just in case anyone is wondering, this is a live dashboard, not just a design mockup. There's one new html file (which becomes the new index.html) and one new CSS file.
You do not have the required permissions to view the files attached to this post.
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

stefanbagnato
Posts: 75
Joined: Sun 08 May 2016 9:11 pm
Weather Station: Vantage Pro 2
Operating System: Windows Server 2019
Location: Raleigh, NC

Re: Customising the local dashboard

Post by stefanbagnato »

Reviving this from the (semi) dead. John, care to share, at least snippets, of the new index.html and css files? I've been trying to configure this same layout as you did, the getting tripped up on understanding/manipulating the bootstrap css files...

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 »

stefanbagnato wrote:
Sat 09 Jan 2021 4:04 pm
Reviving this from the (semi) dead. John, care to share, at least snippets, of the new index.html and css files? I've been trying to configure this same layout as you did, the getting tripped up on understanding/manipulating the bootstrap css files...
Sorry, only just spotted this post. OK, the situation is that I'm keen to pursue this little project but other things have got in the way for the past couple of months. But I'll try to pick it up again in the near future. What code there is is at a pretty early stage - it really is no more than a proof of concept in being able to reshape the dashboard.

FWIW (which may not be much!) I've attached the new index.html file and one new CSS file called newgrid.css (both zipped), but I'm really not sure they'll make sense to anyone else - I was really just having a play. The CSS file just needs adding to the CSS folder and index.html should replace the (suitably backed up) official one.

I was trying to dispense completely with Bootstrap though I can't recall if I did so completely yet. The replacement is CSS Grid, which should be more flexible and easier to handle and should be there already in any modern browser. The tiles called 'ht' are half-height tiles intended just to contain a small amount of text, but barely populated as yet.
You do not have the required permissions to view the files attached to this post.
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

stefanbagnato
Posts: 75
Joined: Sun 08 May 2016 9:11 pm
Weather Station: Vantage Pro 2
Operating System: Windows Server 2019
Location: Raleigh, NC

Re: Customising the local dashboard

Post by stefanbagnato »

Thanks John! I have (semi) intermediate knowledge with HTML and CSS, but while I was able to move the gauges around, for some reason I could not figure out how to adjust the page width and get more than four gauges/blocks a row. Should be fairly simple, but wasn't happening. The view is 100% only for me, thus the screen size and resolution will never change unless I change it. So, I can mess with it as much as I want and it'll only help (or hurt) me.

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 »

OK, a couple of comments:

The 100% width is set by the media query in the first line of the CSS, but it not allowed to go below 800px. If you decrease the width of the browser, you'll see that the text-only columns shrink in width (ie there is a degree of responsiveness) until the 800px width is reached. But any column containing a fixed-width element (ie the gauges in this instance because IIRC they are canvas and not SVG elements) cannot respond. Obviously you can change this media query to suit your own preferences, eg I've tested a media query where the grid layout changes at a certain threshold width, which is easy enough to do. One of the powerful features of Grid is that the order of the tiles can be changed in different media queries, eg you might want a different order on portrait displays vs landscape.

Not sure why you're seeing 4 columns - the CSS should give 6 columns.

One initially confusing thing about CSS Grid is that there are multiple ways (at least distinct 3 ways IIRC) by which the layout can be defined. Some tutorial only talk about one or two of these. The way I've found easiest is to use named grid-template-areas. So then the way you set the layout is:

1. In line 17, the grid-template-columns property is defined as 6 equal widths (ie 1fr) to give the grid 6 columns. If you wanted say 4 columns then delete two of the 1fr's.

2. In the grid-template areas section (starting line 20) there is the visual map of how you want the named grid elements to map to your preferred layout. This should be fairly obvious but NB the number of entries defining each row must be the same as the number of columns. If you don't take care over this then the layout will break and maybe break completely.

Edit: I probably should have added one more word of explanation for newcomers to CSS Grid: The block of code in newgrid.css from lines 27 to 50 simply associates or maps the class names that you'll see in the HTML with short snappy abbreviations that can be used in the grid layout (ie [2] above). The text for the abbreviations is quite arbitrary but it's helpful to keep it short but meaningful, ie I've used 'temp' for the temptile class, 'nb' for navbar etc. Obviously if you change the abbreviations then you'll need to update the layout map in [2].
Last edited by prodata on Sun 17 Jan 2021 12:36 pm, edited 2 times in total.
John Dann
Prodata Weather Systems
Littleport, East Cambs, UK
http://www.weatherstations.co.uk

Post Reply