Ui-button dynamic properties

Dashboard
1

Hi everyone,
I'm trying to transform one of my dashboard v1 in v2 and this is the result ...

alarm
alarm447Ă—267 19.2 KB

BUTTON:
to modify label size I used the code for v1

<font size=8>1</font>

but is correct? is there a better way? (same problem with label switch)
For a button (orange color) I would like to modify dynamically font size but ui-button don't have msg.ui_update.fontSize so how can I do it?

Always for that button I would like to set one icon in center position like this ...

buttontv
buttontv201Ă—122 1000 Bytes

In v1 version with one text node and this code ...

<font color={{msg.color}}><i class="fa fa-circle"></i></font>

I had a simple led that I used in many dashboard ..

led

Ui-led (v2) don't have the center posizion ...
I would like to have a led like the v1 version ....

For now this are my problems, can you help me?

2

Use CSS override.

[{"id":"f707b6a97548951b","type":"ui-button","z":"9ab81d258b54a577","group":"1c29530020f6b63c","name":"","label":"2","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"alarm-button-with-text","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":1230,"y":600,"wires":[[]]},{"id":"feff08b17bbf079a","type":"ui-button","z":"9ab81d258b54a577","group":"1c29530020f6b63c","name":"btn + icon","label":"","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"alarm-button-with-icon","icon":"monitor","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"orange","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":1240,"y":640,"wires":[[]]},{"id":"4ec0f151f4f494f6","type":"ui-template","z":"9ab81d258b54a577","group":"","page":"","ui":"cf21e7dda9e29be4","name":"CSS","order":0,"width":0,"height":0,"head":"","format":".alarm-button-with-text .v-btn__content{\n    font-size: 2rem;\n}\n.alarm-button-with-icon .nrdb-ui-button--icon .v-icon {\n    --v-icon-size-multiplier: 1.5;\n    color:white;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":1230,"y":540,"wires":[[]]},{"id":"1c29530020f6b63c","type":"ui-group","name":"Schedule","page":"a3c04197f8e84242","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"cf21e7dda9e29be4","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"a3c04197f8e84242","type":"ui-page","name":"Main","ui":"cf21e7dda9e29be4","path":"/main","icon":"home","layout":"grid","theme":"1b65e7d639a485c8","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":7,"className":"","visible":"true","disabled":"false"},{"id":"1b65e7d639a485c8","type":"ui-theme","name":"Nipi","colors":{"surface":"#3d3d3d","primary":"#0094ce","bgPage":"#292929","groupBg":"#1f1f1f","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
1 Like
3

Works fine! Thank you ....

4

For the led, I don't use it but made my own.
Much better cos you can use them where ever you want not just inside the group.
Here for example they are placed to the group header

image
image822Ă—631 82.5 KB

3 Likes
5

Looks decent and harmonic... Which chart node have you used (is it the native one ?).
Regards

6

It is chartjs but with ui-template.
I added some controls to inform backend about the range of data needed. Controls are hidden by default but toggled on click on chart area. And some other chart options in use to get it look as I want it to be.

2 Likes
7

Center the led in ui-led should really be a standard option and not require setting a CSS override manually imho. After all, the formatting option is offered for other elements in the same node. This makes the behaviour inconsistent, which will confuse people.

I had the same issue a few days ago, and I am sure this little thing will be the source of many future queries... Might be worth changing the node to avoid this.

Just my 2 pennies...

1 Like
8

Hi,
I would like to change the ui-switch too ...
With your code ..

.switch-icon-size .v-btn__content{
    font-size: 1.2rem;
}

I change the size of icons ...

switch
switch177Ă—227 5.86 KB

but not size of the label, is possible to have both?

The label shouldn't be white for default? is possible to have this option too?

9

You shod give a class name for the widget
switch-with-custom-icon

And the CSS

.switch-with-custom-icon .v-btn--icon .v-icon {
    --v-icon-size-multiplier: 1.2;
}

.switch-with-custom-icon .v-label{
    color:white;
    font-size: 1.2rem;
}
10

Ok, but I don't understand why I can set the label color red, green, etc, but not white ....
white is always grey not white ....

11

It is very complicated set of CSS rules which do define the color of the switch label. Takes too much time to explain in detail. I don't have that much of free time.
I do remember that I have read an issue about the color of labels for widgets is not consistent. This is probably one of those examples.

12

Ok, no problem, I will use another color.
Thank you very much for the previous CSS.

13

For some reason the label text is partially transparent.
Try

.switch-with-custom-icon .v-btn--icon .v-icon {
    --v-icon-size-multiplier: 1.2;
}

.switch-with-custom-icon .v-label{
    color:white;
    font-size: 1.2rem;
   opacity: 1;
}
1 Like
14

Works fine! Thank you ....