Multistate switch widget with state

Im trying to make a multistate switch widget that looks like the one in sitemaps. Before you say it, yes iknow theres many threads on multistate switches. But i have not managed to find one where the state is displayed properly. It could be because of the massive ocean of multistate switch threads (that im joining now), but i atleast could not find it.

As you can see in the image below, i want my multistate switch widget to look similar to the sitemaps one. Where it displays a name, then 3 buttons. The button where the command is the same as current state has another collor. (In this case the value is 2, and since the Auto buttons command is 2. It has a different collor)


There is a few workarounds i can think of, but wont work in this case. Since Openhab is not the only place where this variable can be set. Theres two other devices that can publish to this item on mqtt.

Its a Number typed item, can be 0, 1 or 2.

I found a way to make it work by using the fill option(as there is no color/background option for the oh-button).
Only problem now is that the buttons are so small, compared to the label card. I tried setting large: true, but did not change anything.

Current widget code:

uid: MultistateSwitch
tags: []
props:
  parameters:
    - label: Navn
      name: Title
      type: TEXT
    - context: item
      label: item
      name: Button
      type: TEXT
timestamp: Sep 28, 2021, 12:03:36 PM
component: f7-card
config:
  outline: false
  noBorder: true
  padding: false
  noShadow: false
  style:
    --f7-safe-area-right: 0
    --f7-safe-area-left: 0
slots:
  content:
    - component: f7-row
      config:
        class:
          - padding-top
          - padding-bottom
          - padding-right
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    label: =(props.Title)
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    large: true
                    fill: =items[props.Button].state == 0
                    action: command
                    actionItem: props.Button
                    actionCommand: 0
                    text: Av
                    iconF7: lightbulb_slash_fill
                    iconColor: blue
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    large: true
                    fill: =items[props.Button].state == 1
                    action: command
                    actionItem: props.Button
                    actionCommand: 1
                    text: Man
                    iconF7: lightbulb_fill
                    iconColor: blue
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    large: true
                    fill: =items[props.Button].state == 2
                    action: command
                    actionItem: props.Button
                    actionCommand: 2
                    text: Auto
                    iconF7: timer_fill
                    iconColor: blue

If i cant get a bigger button, it would be nice if i atleast could center the buttons so theyre aligned with the label card.

I think this is the best i can do, only thing thats bugging me out is that theres no gap between the widgets. But thats another issue.
Atleast it works now. For those that are interested, this is how it works:
You give it a Title, mode item (0-2 number item), and a state item (in my case this is the state of the light group.(Switch))
Light bulb icon to the left is yellow if the state item is on, and grey if not. The buttons sends 0, 1, 2, and glows orange if the state is the same as their command. In the picture below, all 3 of them is in auto mode. So the Auto button lights up (value of the “mode” item is 2)

Any tips/suggestions are more than welcome :slight_smile:

Widget code

uid: MultistateSwitch
tags: []
props:
  parameters:
    - label: Navn
      name: Title
      required: false
      type: TEXT
    - context: item
      label: Mode
      name: Mode
      required: false
      type: TEXT
    - context: item
      label: Lysgruppe
      name: Group
      required: false
      type: TEXT
timestamp: Sep 29, 2021, 8:15:09 AM
component: f7-card
config:
  outline: true
  noBorder: false
  padding: false
  noShadow: true
  title: =props.Title
  fontSize: 36px
  style:
    --f7-safe-area-right: 0
    --f7-safe-area-left: 0
    --f7-card-margin-horizontal: 100px;
slots:
  content:
    - component: f7-row
      config:
        class:
          - padding-top
          - padding-bottom
          - padding-right
      slots:
        default:
          - component: f7-icon
            config:
              f7: lightbulb_fill
              size: 30
              color: =items[props.Group].state == 'ON' ? "yellow":"gray"
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    large: true
                    fill: =items[props.Mode].state == 0
                    action: command
                    actionItem: =(props.Mode)
                    actionCommand: "0"
                    text: Av
                    iconF7: =items[props.Mode].state == 0 ? "lightbulb_slash":"lightbulb_slash_fill"
                    iconColor: blue
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    large: true
                    fill: =items[props.Mode].state == 1
                    action: command
                    actionItem: =(props.Mode)
                    actionCommand: "1"
                    text: Man
                    iconF7: =items[props.Mode].state == 1 ? "lightbulb":"lightbulb_fill"
                    iconColor: blue
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    large: true
                    fill: =items[props.Mode].state == 2
                    action: command
                    actionItem: =(props.Mode)
                    actionCommand: "2"
                    text: Auto
                    iconF7: =items[props.Mode].state == 2 ? "clock":"clock_fill"
                    iconColor: blue

Items file

Group Mode
Number InnelysMode              "Innelys"                                  <light>             (Mode)          [ "Lysgruppe Av/Man/Auto" ]             { channel="mqtt:topic:Mode:Innelys"}
Number UtelysMode               "Utelys"                                   <light>             (Mode)          [ "Lysgruppe Av/Man/Auto" ]             { channel="mqtt:topic:Mode:Utelys"}
Number UtelysNattslukkMode      "Utelys Nattslukk"                         <light>             (Mode)          [ "Lysgruppe Av/Man/Auto" ]             { channel="mqtt:topic:Mode:Utelys_Nattslukk"}

Group Shelly_1

Switch Innelys              "Innelys"                                        <light>                             ["Gruppe av/på"]            
Switch Utelys_Normal        "Utelys_Normal"                                  <light>                             ["Gruppe av/på"]            
Switch Utelys_Nattslukk     "Utelys_Nattslukk"                               <light>                             ["Gruppe av/på"]
1 Like