Multiple switches
Opened this issue · 4 comments
I want to use this card to control my fan. but I need more than one switch - one for speed (off, low, med, high) and a second column with oscillation (on, off)
Hi, you could use horizontal stack card and add 2x the switch card
Hi DBuit,
first of all thanks for all your hard work, my Lovelace consists of all your dev work ;)
I have been daring to achieve the same as ghost and followed your recommendation to use the Horizontal Stack card unsuccessfully. Would you be able to check my code below or provide a working example to tinker with please?
fan.humidify:
title: ""
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: horizontal-stack
cards:
type: custom:switch-popup-card
icon: "mdi-fan"
noActiveState: '-'
entity_value_path: attributes.percentage
service: fan.set_percentage
service_data:
entity_id: fan.humidify
percentage: value
entities:
- fan.humidify
buttons:
- icon: "mdi:signal-cellular-3"
value: "100"
name: "High"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:signal-cellular-2"
value: "70"
name: 'Medium'
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:signal-cellular-1"
value: "40"
name: "Low"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:weather-night"
value: "10"
name: "Sleep"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
type: custom:switch-popup-card
icon: "mdi-fan"
noActiveState: '-'
entity_value_path: attributes.percentage
service: fan.set_percentage
service_data:
entity_id: fan.livingroom
percentage: value
entities:
- fan.livingroom
buttons:
- icon: "mdi:signal-cellular-3"
value: "100"
name: "High"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:signal-cellular-2"
value: "70"
name: 'Medium'
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:signal-cellular-1"
value: "40"
name: "Low"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:weather-night"
value: "10"
name: "Sleep"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
icon: mdi:fan
Thanks in advance for your time and commitment,
Ben
Did you ever figure this out? When i try a horizontal stack card they both end up on top of each other. I imagine its a style issue but that part is greek to me.
Did you ever figure this out? When i try a horizontal stack card they both end up on top of each other. I imagine its a style issue but that part is greek to me.
I'm actually doing this on a button I pop up a light and a fan side by side. Ignore the ridiculous amount of blank cards in my vertical stack...I'm just doing that to center the particular card on screen. It's not perfect mind you, for some reason I cannot get the button colors to work the same as the examples for the popup button card.
type: vertical-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- icon: mdi:ceiling-fan-light
name: Fan | Light Combo
size: 60px
tap_action:
action: call-service
service: browser_mod.popup
service_data:
content:
card:
cards:
- card:
cardStyle: |
background-color:#808080;
entity: light.office_fan
fullscreen: false
sliderColor: '#FDF4DC'
switchHeight: 380px
switchWidth: 150px
type: custom:light-popup-card
type: custom:mod-card
- card:
buttons:
- color: '#000000'
icon: mdi:fan
icon_color: rgba(255,255,255,1)
name: Woosh!
value: 100
- color: '#000000'
icon: mdi:fan
icon_color: rgba(255,255,255,1)
name: High
value: 75
- color: '#000000'
icon: mdi:fan
icon_color: rgba(255,255,255,1)
name: Medium
value: 50
- color: '#000000'
icon: mdi:fan
icon_color: rgba(255,255,255,1)
name: Low
value: 25
- icon: mdi:fan-off
name: 'Off'
value: 0
entities:
- fan.office_fan
entity: fan.office_fan
entity_id: this
entity_value_path: attributes.percentage
service: fan.set_percentage
service_data:
entity_id: this
percentage: value
fullscreen: false
icon: mdi:fan
noActiveState: '-'
switchHeight: 380px
switchWidth: 150px
type: custom:switch-popup-card
type: custom:mod-card
type: horizontal-stack
hide_header: true
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
#width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(255,255,255,1);
--ha-card-background: rgba(255,255,255,1);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 50%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
title: null
type: custom:mod-card
target: {}
type: custom:button-card
- type: custom:button-card
color_type: blank-card