Suggestion - Larger font on Dashboard, Gauges, etc.

[WxLee]

If I may make a suggestion, could you consider using a larger font for labeling the Dashboard, Gauges, etc? When I size the browser page to see all of its height from top to bottom on these widescreen format displays being sold today, the font is very small and hard to read, especially with white text on black. Maybe consider double the size of the font you are using now?

[steve]

The user interface code is all open source, so you can alter the appearance any way you want (within the limitations of the components used), or replace it completely. This is one of the main reasons for separating the user interface from the engine. The main.css file is a good place to start to change things like the colours and the fonts. Note that there is a 'customisation' subforum of the MX section, for sharing ideas etc about customising the UI.

There are so many different displays out there, and so many different resolutions and scaling in use, it's unlikely that I'd be able to produce something that everyone thinks is perfect. I'm very happy with the way it looks as it is, for example, so I wouldn't be happy if I changed the default in the way you suggest. My screens are 2560x1440.

[WxLee]

Thanks, Steve.

As I know nothng of CSS files, I searched how to edit them and found this:

http://www.cssportal.com/online-css-editor/

Do you think that would be a good choice to try for someone new to these files? I've edited several .ini files on various programs, and even a few html files, when I had clear instructions how to proceed. I've just never looked at a css file before now.

I'll visit the customization subforum, but I do not find any kind of subforums anywhere on this site. How do I access them? Thanks for the advice.

[steve]

Just use a good text editor, like notepad++ - it will do 'syntax colouring' and make the editing much easier.

As an example, if you want to change the titles on the boxes on the dashboard screen, the font size is specified in this style in interface\css\main.css, starting at line 76:

Code: Select all

.dash-unit .dtitle {
    font-size:11px;
    text-transform:uppercase;
    color:#ffffff;
    margin:8px;
    padding:0px;
    height:inherit	
}

As you can see, the default size is 11 pixels. If I change that to 20 pixels, thus:

Code: Select all

.dash-unit .dtitle {
    font-size:20px;
    text-transform:uppercase;
    color:#ffffff;
    margin:8px;
    padding:0px;
    height:inherit	
}

This is the result:

2015-09-26 16_41_11-Cumulus MX.png

If you want to experiment with different styles, it's a really good idea to learn how to use the F12 developer console in your browser. This will show you what styles are being applied to any particular element, and allow you to change things 'on the fly' so you can see the result immediately, before actually editing the file to make the changes permanent.

You can access the Customisation subforum from the front page of the forum (for example). There's not actually a lot in there so far.

2015-09-26 16_44_11-Start.png

[WxLee]

You can access the Customisation subforum from the front page of the forum (for example). There's not actually a lot in there so far.

2015-09-26 16_44_11-Start.png

One of the things I like about your forum here, Steve, is that you are FAR more user friendly than so many forums I have visited (especially anything to do with PC versions of Linux), and take the time to post real help instead of just telling me to search, as so many unfriendly forum members will do. Forum searches are often abysmal, leading to little solution of one's immediate problem.

Thanks! I'll look into your suggestions. I do indeed like the example you show with the 2x font size.

However, for some reason, both from Waterfox 64 and Internet Explorer 64, and from Google Chrome browser, I do not see the subforum listing under Cumulus MX that your picture shows. This attachment is what I see. Note that there are subforums listed under Cumulus 1. So I have no idea why I am not seeing the Cumuls MX subforum.

[steve]

The forum search is pretty poor. I often use Google to search the forum, the results are usually much better.

The fact that you can't see the subforum makes me think that I haven't set the permissions properly. Some people clearly can see it, as they've posted in it. I'll check...

Edit: You should be able to see it now, the permissions were indeed wrong. Perhaps more people will post in there now! If you need any help working out what style to change to modify a particular aspect of the user interface, just ask and I'll try to point you in the right direction.

[WxLee]

I can see the subforum now. Thanks!

I appreciate the help on the font changes. Thanks again!

[WxLee]

I changed the font size from 11 to 22 and for me it works much better. Thanks!

I downloaded Notepad++ to do this, so I could see the line numbers. I looked around in a lot of places, various css, html, js files, but I m wondering where you have the settings that tell the MX Gauges page to use only 3 columns. On a widescreen display that leaves a lot of black on each side. I'd like to increase the columns to 4 , which would also allow the gauges to be bigger without having to scroll. (I hate scrolling to look at all of something.) It would then look a lot like the weather website I have on your server. I like to set that so I can see all the gauges at the same time.

[gluepack]

Oh, great! Dammit, I'll never get the gardening done now

WxLee, it looks relatively simple but I haven't tried it yet.
If you look in the "interface" directory, the index.html file code shows the blocks as pretty well defined.
From around row 96 you'll see the rows defined and, without going into too much detail, you should be able to pick up a block of html from one row and move it to the appropriate row, with the proviso that you may have to even them up (as I said, I haven't tried it yet but it looks that simple).

[steve]

Yes, change the html so that it has four 'dash units' in each 'row'. The numbers in the classes for the dash units should add up to 12 on each row, so change col-md-4 to col-md-3 for each one.

[gluepack]

That didn't quite match my setup Steve, it had col-lg-4. Anyway, I changed it to col-sm-2 to get six on (I am still baffled where these are defined as I can't seem to find anything in css) and I changed the div following the navigation menu to

Code: Select all

<div class="container" style= width:1930px margin-left:0 margin-right:0 padding-left:5">

and that worked out great, six up on a 1920x1080 display.

Update: oops should have specified 1920 in the div

[steve]

Those classes are part of the Bootstrap framework. There's some documentation on the grid system here - http://getbootstrap.com/css/

[gluepack]

I think I made a mod (that's why I should document everything) that made a minor change to the menu position but, apart from that and a few changes that should probably be made to font size, it looks good on a 1920x1080...

cumulussmall.jpg

[WxLee]

Thanks guys! I'll try this out. I'll save backup copies of each file I edit, just in case.

I use triple monitors, and none of them are identical. Every time I've need to add or replace one I find the ones I have are no longer in production. I use Display Fusion to manage them and at least try to get them to look similar beside each other. That said, the display I use for Cumulus1 or MX is set to a resolution of 1680 x 1050. I presume I can plug 1680 in to replace 1920 in your posts?