Simple Toggle Switch

Configuration Frontend
#1

Hi all,

I’m looking to just have a simple toggle switch in the ui that has one state on the left and another state on the right with a toggle switch in the middle. Are there any cards that can do this? I’m looking to have a toggle for my coffee maker trigger. So something like this.

Alarm {{ switch entity }} Timer

#2

custom:button-card is highly customizable. Or you a 3 columns grid in another grid.

#3

Ah yea I forgot about the button grid. That will probably do what I want. Thanks!

#4

Ok I’ve been trying to figure it out and it looks like I need the grid and custom fields. I’ve been trying to figure this out on my phone but I’m lost. Does anyone have an example of something simple like this?

#5

In the readme you can find a grid example. And look at the excellent forums topics here and here.

#6

I messed around on an actual computer last night and made some progress. This is what I have for anyone that may need something similar.


type: custom:button-card
entity: input_boolean.coffee_maker_trigger
show_name: false
state:
  - icon: mdi:toggle-switch
    value: 'on'
    color: var(--paper-item-icon-color)
  - icon: mdi:toggle-switch-off
    value: 'off'
size: 50px
styles:
  grid:
    - grid-template-areas: ' "grid1 i grid3" "grid4 grid4 grid4"'
    - border: solid 1px
    - border-color: '#F00'
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr
    - margin-top: '-18px'
    - margin-bottom: '-18px'
  card:
    - border-radius: 0%
    - font-size: 24px
    - color: '#F00'
    - border: solid 1px
    - border-color: '#0F0'
  icon:
    - margin-top: '-35px'
  custom_fields:
    grid1:
      - justify-self: end
      - align-self: start
    grid3:
      - justify-self: start
      - align-self: start
    grid4:
      - background-color: '#FF0000'
      - align-self: center
      - justify-self: center
      - height: 100px
      - width: 100%
custom_fields:
  grid1: Alarm
  grid3: Timer
  grid4: |
    [[[
      return `Alarm<ha-icon
        icon="mdi:server"
        style="width: 10%;  color: white; margin-top: 6%">
        </ha-icon>Timer`
    ]]]
1 Like