html-tagging of values and label (similar to Dashboard V1)

[jodelkoenig]

Description

Hi there,

are you planning to add html-tagging of values and label similar to dashboad v1?

This following screenshot shows how I use it to have a formatted label:

Resulting in the following dashboard (at the bottom). Note: Both label, msg.pollen and msg.pm25, are printed either in red, yellow or green depending on their values. I therefore provide formatted values similar to how I state it below.

Another example is this one. Here I conditionally format the look of a value:

And this leads to the "Dunsthaube" entry in above dashboard. Green for "An" and red for "Aus" f.e. With two lines label and different text color and size.

Thanks

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

[Steve-Mcl]

TBH, I am not sure I like this suggestion. Apart from the obvious (font tag was depreciated some time ago) this can mostly be achieved by CSS.

The mustache support however is a different question

[jodelkoenig]

To be transparent ... I am by no means and in any way a professional here. Hence I am not asking for a particular technology ;)

On a more serious side:

For home automation I tend not to go too crazy with my dashboards. Simple, yet with valuable information, without the necessity to scroll too much on mobile devices.

In order to achieve this I regularly utilize two lines (-tag) for my nodes as well as text size and color (-tag) customization to set the principal appearance of the dashboard. Adding to this value-dependent colors for value presentation.

Shall I rephrase the title of my feature-request to something like "Dynamic text and value customization (formerly known as html-tagging)"?

[i8beef]

Will add a vote here for this, I use the exact same approach to dynamically colorize values across my dashboards.

[i8beef]

I have gotten around the lack of this by using the dynamic class property to add a CSS class hook on items I want colorized different ways. I then have to add a CSS rule for different elements to colorize different parts as needed, example, for a "text" node I have "red" and "green" classes I add, and the following CSS injecting into my page header:

.red .nrdb-ui-text-value {
    color: #a55 !important;
}

.green .nrdb-ui-text-value {
    color: #5a5 !important;
}

This might prove more brittle if things like DOM structure changes in the future, but it works for now.