Questions about improving my usage of card custom:state-switch

MrBill · January 31, 2021, 9:43pm

Using ‘state-switch’ by @thomasloven for essentially radio buttons. I have this essentially working as I expect, however I need to know 2 things:

is it possible to shorten my yaml code? For each button there are 4 states: 0, 1, 2, 3 and 3 of those states are identical. Is there way to express states: ‘0’ and then states: ‘1’, ‘2’,‘3’ for the first button, etc. Wording it another way: for each of 4 buttons there is 24 lines of repetitive yaml that I should be able to eliminate. Essentially 212 total lines should be able to be 116 but I can’t figure out how to express 1|2|3: as a single <state>:

EDIT#1: yaml has been simplfied. @JTPublic points out below that is a great use for the default: attribute. That worked.

~~Still needing help with #2 tho… it’s a CSS question essentially… not my stong point but normally I can figure it out… not this time.~~

any suggestions how I can get the icon to show the ‘on’ state for the selected button? When I originally conceived this mess (lol) I thought state_color: would work, but I understand now why I was mistaken. I also have card-mod installed and I’ve been messing with it for an several hour but so far no wins.

Edit 2:
I win! finally figured out the CSS to use a card-mod style: element:

style: |
      :host {
        --paper-item-icon-color: #1A89F5;
      }

Thanks in Advance for any helpful suggestions!!!

front lights

type: grid
columns: 4
title: Front Lights
cards:
  - type: 'custom:state-switch'
    entity: sensor.sfrontlightswitch_ha
    transition: null
    transition_time: 0
    states:
      '0':
        type: button
        tap_action:
          action: none
        entity: null
        name: Day
        icon: 'mdi:lightbulb'
        state_color: true
      '1':
        type: button
        entity: null
        name: Day
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: 011F
            command: run_then
            isy: ISY
      '2':
        type: button
        entity: null
        name: Day
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: 011F
            command: run_then
            isy: ISY
      '3':
        type: button
        entity: null
        name: Day
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: 011F
            command: run_then
            isy: ISY
  - type: 'custom:state-switch'
    entity: sensor.sfrontlightswitch_ha
    transition: null
    transition_time: 0
    states:
      '0':
        type: button
        entity: null
        name: Evening
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0120'
            command: run_then
            isy: ISY
      '1':
        type: button
        tap_action:
          action: none
        entity: null
        name: Evening
        icon: 'mdi:lightbulb'
        icon_state: true
      '2':
        type: button
        entity: null
        name: Evening
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0120'
            command: run_then
            isy: ISY
      '3':
        type: button
        entity: null
        name: Evening
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0120'
            command: run_then
            isy: ISY
  - type: 'custom:state-switch'
    entity: sensor.sfrontlightswitch_ha
    transition: null
    transition_time: 0
    states:
      '0':
        type: button
        entity: null
        name: Late Night
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0121'
            command: run_then
            isy: ISY
      '1':
        type: button
        entity: null
        name: Late Night
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0121'
            command: run_then
            isy: ISY
      '2':
        type: button
        tap_action:
          action: none
        entity: null
        name: Late Night
        icon: 'mdi:lightbulb'
        icon_state: true
      '3':
        type: button
        entity: null
        name: Late Night
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0121'
            command: run_then
            isy: ISY
  - type: 'custom:state-switch'
    entity: sensor.sfrontlightswitch_ha
    transition: null
    transition_time: 0
    states:
      '0':
        type: button
        entity: null
        name: Bright
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0122'
            command: run_then
            isy: ISY
      '1':
        type: button
        entity: null
        name: Bright
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0122'
            command: run_then
            isy: ISY
      '2':
        type: button
        entity: null
        name: Bright
        icon: 'mdi:lightbulb'
        icon_state: false
        tap_action:
          action: call-service
          service: isy994.send_program_command
          service_data:
            address: '0122'
            command: run_then
            isy: ISY
      '3':
        type: button
        tap_action:
          action: none
        entity: null
        name: Bright
        icon: 'mdi:lightbulb'
        icon_state: true
=

JTPublic · January 31, 2021, 10:21pm

Would the default option work?
I use user as entity and defined 1 state as my username, all other usernames goes to default.

MrBill · February 1, 2021, 8:05pm

Thanks @JTPublic that does work… I guess I didn’t think of it because the other place I used state-switch I used default: as an error condition.

Now just to figure out how to modify the CSS with ‘card-mod’ to get the icon to turn ‘on’. As a temporary workaround I changed icons between the selected and deselected buttons, but I’d really rather change the color, not the icon itself.

MrBill · February 1, 2021, 10:08pm

Finally found the CSS element to use with card-mod style:

~~</s> <s>style: |</s> <s> :host {</s> <s> --paper-item-icon-color: #1A89F5;</s> <s> }</s> <s>~~

**Edit:**even better: to make it work correctly regardless of theme selected:

style: |
  :host {
    --paper-item-icon-color: var(--paper-item-icon-active-color);
    }