Font controls - Githubissues

daveHounds commented 5 years ago

I can change the color of the font for the "Unit" and "Name" but I cannot change the font color of the value except via the node-red dashboard Theme setting. Example for "Unit" and "Name": (font size=1; font color= blue)

What am I missing? How can I change font color, size, etc. of the value?

daveHounds commented 5 years ago

@seth350 Any advise?

seth350 commented 5 years ago

Sorry for taking so long. I was on vacation with family and also moving to new house.

You should be able to set the font color by adding class lgText to your CSS.

This should also set the unit font color as well as shown in this excerpt from the code. I have not tested it, but it should work.

<div id="valueContainer">
                <text class="lgText" dx="10" dy="3">{{msg.payload}}`+config.unit+`</text>
            </div>

daveHounds commented 5 years ago

Hope you had a good vacation. Moving - that can be fun too, but its work!!

Thank you, your suggestion worked. However, it does not give me individual control of each gauge widget in a tab. I used your example of 3 gauges, your suggestion changes ALL gauges within the tab.

Here are my findings: (in order of hierarchy)

The Dashboard Theme for widget color sets font colors (value, unit, name, etc.) for all widgets across all tabs, including your linear gauges. I can use a CSS Override Style sheet and set the “Theme” color for a single tab. This sets the font colors (value, unit, name) for all widgets within that single tab. Again including your gauges. I added your lgText to my CSS Override Style sheet and it sets the font colors (value, unit, name) for your specific gauges only. Good…. but it sets ALL linear gauges within that tab to the same color. Can add a CSS override to each individual linear gauge within it’s node properties configuration window and set the “unit” and “name” color. Ex., °F 4a. Can also do this dynamically, e.g., {{msg.payload}} .

4b. Can do this for font size as well. Ex., °F or °F

4c. Cannot do this for “value” as it is not available within the node properties configuration window.

Conclusion:

I will be using your gauge in the future. Nice idea – thank you. But I have hot tanks, cold tanks, etc. When you have many gauges side by side (which your design allows – nice), when glancing at a screen from across a room, usability enhancements are critical when you are too far away to see the text. Color helps. So if I can make one gauge’s font blue and the other red and so on; and it I can make the critical tank’s font larger than the others, etc., etc. then I have max flexibility to do what the customer / user wants from a GUI perspective. So in my opinion you are 2/3rds there, if you could provide a hook for the value properties that would be appreciated.

Conclusion2: Add to your lineargauge description/specs/instructions the “You should be able to set the font color by adding class lgText to your CSS” so folks now about this hook. Maybe even a note about the CSS override of individual property color / size. That seems to be a under-advertised attribute within the NR community.

Thanks for listening,

Dave

From: Seth Johnson notifications@github.com Reply-To: seth350/node-red-contrib-ui-lineargauge reply@reply.github.com Date: Thursday, May 30, 2019 at 9:30 AM To: seth350/node-red-contrib-ui-lineargauge node-red-contrib-ui-lineargauge@noreply.github.com Cc: daveHounds dave@milehihounds.com, Author author@noreply.github.com Subject: Re: [seth350/node-red-contrib-ui-lineargauge] Font controls (#8)

Sorry for taking so long. I was on vacation with family and also moving to new house.

You should be able to set the font color by adding class lgText to your CSS.

This should also set the unit font color as well as shown in this excerpt from the code. I have not tested it, but it should work.

{{msg.payload}}`+config.unit+`

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

seth350 / node-red-contrib-ui-lineargauge

Font controls #8