[ANNOUNCE] node-red-contrib-ui-multistate-switch: version 1.1.0

[jodelkoenig]

No need to apologize @BartButenaers, not at all.

I intended to provide a kind and careful request and do not expect you to jump on it right away Take your time.

And yes .. the example looks great. hehe

[hotNipi]

@BartButenaers

But I have forgotten how he managed to get the icon there.

I was cheating a bit.

You can have icons in current version, but it is not tested against different icon providers and different situations thus we can't say that icons are supported.
But basics here, use at your own risk.

[BartButenaers]

Thanks @hotNipi !!

@hotNipi

but it is not tested against different icon providers and different situations

If somebody has time to test this, that would be a very big help for us!!! Because then we could add this to our readme page with multiple examples...

[hotNipi]

Known that iconify icons will not work out of box.

[eddee54455]

I love this switch!! Excellent!! Brilliant!!

An Idea though: Any chance of possibly 2 things:

1. The ability to re-order the buttons once the switch is created? Similar to this:
   

2. The possibility of allowing only a single option, this, when pressed/clicked, sends its payload as set up? Spot the odd one's out:
   

   

While the standard UI button is functional, I way prefer and like yours, I am using it in preference to the other controls available, here is a screenshot of but one of the many controls I have implemented for the home auto system i am putting together:

Thanks again for the awesome UI node!!
Cheers
Ed

[hotNipi]

1. Sortable option list - highly possible (already done and pushed to the dev branch)
2. Kind of no. Switching is by nature moving between states so having one state only takes away base rule of switch.

You can make your layout look better by aligning switches
Add this CSS override and adjust the value of label min with if needed.

[{"id":"4dd32966.9d2668","type":"ui_template","z":"c0ddb509.b04f48","group":"93fae10c.09faa","name":"CSS","order":6,"width":0,"height":0,"format":"<style id=\"dashboard-custom-styles\">\n.multistate-switch-label {\n    min-width: 60px;\n} \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":650,"y":1460,"wires":[[]]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

[eddee54455]

@hotNipi

Thanks Heaps for the suggestion!! Implemented it successfully too!

Great news on the sortable list, that will make button changes way quicker!

As to option regarding:

@hotNipi

Switching is by nature moving between states

Agreed entirely, but with a disclaimer type request - "Push to make" single button type switch? Possibly with latching option? .... Pretty Please? ... Lol, no matter (Would be really nice though!), I have made a work around for myself by just setting the payload to a fixed value after the slide switch...

Thanks again for the hint and all the coding u and Bart are doing!!

Regds
Ed

[dceejay]

That’s a button not a switch

[bernhardkurz]

@BartButenaers and @hotNipi this is really great job you are doing here! i am using your multistate switch very much.

now i need to increase the size of the button and in dev tools (chrome) i found that changing

.multistate-switch-round {
    border-radius: 1em;
    height: 90%;
}

the button looks like i would need it

but when i insert into my template

<Style>
        .multistate-switch-container{
            /*display:flex;
            width:100%;
            margin:auto;*/
            height:100%;
        }
        .multistate-switch-round{
            height:90%;
        }
        .multistate-switch-body{
            /*pointer-events:auto;
            display: inline-flex;
            justify-content: flex-start;
            width: 100%;*/
            height:100%;
        }
    
</Style>

it shows up like that

any support would be appreciated
again thanks for your effort

br bernhard

[hotNipi]

Well, in many cases the final resort is to use the !important flag to make your rules most powerful. Long story to talk but easy enough to just follow.

To make this kind of thing

All you'll need is to adjust widget size to use 2 units height
and this bit of CSS override

<style>
.multistate-switch-button {
    line-height: 5em !important;
}
.multistate-switch-slider {
    height: 4.6em !important;
}
</style>

[bernhardkurz]

Damn, could have thought about that myself have to get deeper into css

thank you man, you answer very quick ... chapeau

for the records my solution because its bit more flexible with % (or will i run into another knife with that?)

<Style>
        .multistate-switch-container{
            height:100% !important;
        }
        .multistate-switch-round{
            height:90% !important;
            top:6% !important;
        }
        .multistate-switch-body{
            height:100% !important;
            align-items: center !important;
        }
    
</Style>

thank you very much for your hint

[hotNipi]

Well, the em is also sort of percentage but based on font size. To support known op systems and browsers, it takes to follow some kind of settled rules and solutions but for your case - if it works for you, it just works and is perfectly fine.