Mushroom-Desk-Card
Made with Mushroom-Card and Button-Card.
The card shows
- the state of my desk (height-sensor from this ESP-Home-Project → [No issue] working setup for Home Assistant + ESPHome + esp32dev + CB28M1B-1 + HS13A-1 · Issue #30 · iMicknl/LoctekMotion_IoT · GitHub)
- Buttons for UP (switch-entity), PAUSE (script) and DOWN (switch-entity) (Pause needs an script to swith UP and DOWN to “off”)
- Buttons for SIT and STAND-positions (button-entities)
You just to need to fill in your entities in the “variables:”-section.
YAML-Code
(little update - just found out that i need to add “triggers_update” so that updates to the entities will show as they happen - also changed the “mushroom”-card a little bit)
type: custom:button-card
variables:
desk_cover: cover.desk
desk_height: sensor.desk_height
up_switch: switch.up
down_switch: switch.down
stop_script: script.schreibtisch_anhalten
sit_button: button.sit
stand_button: button.stand
triggers_update:
- '[[[ return variables.desk_cover ]]]'
- '[[[ return variables.desk_height ]]]'
- '[[[ return variables.up_switch ]]]'
- '[[[ return variables.stop_script ]]]'
- '[[[ return variables.sit_button ]]]'
- '[[[ return variables.stand_button ]]]'
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 3px
grid:
- grid-template-areas: '"oben" "unten"'
- grid-template-columns: 100%
- grid-template-rows: 1.3fr 1fr
custom_fields:
oben:
- filter: opacity(100%)
- overflow: visible
unten:
- filter: opacity(100%)
- overflow: visible
custom_fields:
oben:
card:
type: custom:mushroom-template-card
entity: '[[[ return variables.desk_height ]]]'
tap_action:
action: more-info
entity: '[[[ return variables.desk_cover ]]]'
icon_color: blue
primary: '{{ state_attr(entity,"friendly_name") }}'
secondary: '{{ states(entity) }} {{ state_attr(entity,"unit_of_measurement") }}'
icon: '{{ state_attr(entity,"icon") }}'
card_mod:
style: |
ha-card {
padding: 0px !important;
padding-bottom: 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
}
unten:
card:
type: grid
columns: 5
square: false
cards:
- type: custom:button-card
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: '[[[ return variables.down_switch ]]]'
show_state: false
show_name: false
show_icon: true
icon: mdi:arrow-down
styles:
card:
- padding: 3px
- height: 3rem
- box-shadow: none
- border: none
- background: rgba(var(--rgb-primary-text-color), 0.05)
icon:
- height: 1.5rem
- width: 1.5rem
- type: custom:button-card
tap_action:
action: call-service
service: '[[[ return variables.stop_script ]]]'
show_state: false
show_name: false
show_icon: true
icon: mdi:pause
styles:
card:
- padding: 3px
- height: 3rem
- box-shadow: none
- border: none
- background: rgba(var(--rgb-primary-text-color), 0.05)
icon:
- height: 1.5rem
- width: 1.5rem
- type: custom:button-card
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: '[[[ return variables.up_switch ]]]'
show_state: false
show_name: false
show_icon: true
icon: mdi:arrow-up
styles:
card:
- padding: 3px
- height: 3rem
- box-shadow: none
- border: none
- background: rgba(var(--rgb-primary-text-color), 0.05)
icon:
- height: 1.5rem
- width: 1.5rem
- type: custom:button-card
tap_action:
action: call-service
service: button.press
service_data:
entity_id: '[[[ return variables.sit_button ]]]'
show_state: false
show_name: false
show_icon: true
icon: mdi:chair-rolling
styles:
card:
- padding: 3px
- height: 3rem
- box-shadow: none
- border: none
- background: rgba(var(--rgb-primary-text-color), 0.05)
icon:
- height: 1.5rem
- width: 1.5rem
- type: custom:button-card
tap_action:
action: call-service
service: button.press
service_data:
entity_id: '[[[ return variables.stand_button ]]]'
show_state: false
show_name: false
show_icon: true
icon: mdi:human-handsup
styles:
card:
- padding: 3px
- height: 3rem
- box-shadow: none
- border: none
- background: rgba(var(--rgb-primary-text-color), 0.05)
icon:
- height: 1.5rem
- width: 1.5rem
You can also have the cards above in this way
All you need to to ist to change this
grid:
- grid-template-areas: '"oben" "unten"'
- grid-template-columns: 100%
- grid-template-rows: 1.3fr 1fr
to that
grid:
- grid-template-areas: '"oben unten"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 100%
