broyuken1
(Broyuken)
October 15, 2022, 11:30am
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
pedolsky
(Pedolsky)
October 15, 2022, 11:41am
2
custom:button-card
is highly customizable. Or you a 3 columns grid in another grid.
broyuken1
(Broyuken)
October 15, 2022, 12:10pm
3
Ah yea I forgot about the button grid. That will probably do what I want. Thanks!
broyuken1
(Broyuken)
October 15, 2022, 10:31pm
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?
pedolsky
(Pedolsky)
October 16, 2022, 10:34am
5
In the readme you can find a grid example . And look at the excellent forums topics here and here .
broyuken1
(Broyuken)
October 16, 2022, 11:37am
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