ffm777
December 27, 2022, 5:38pm
4595
Is it possible to display conditional chips based on numerical conditions? The following code unfortunately does not work:
- type: conditional
conditions:
- entity: sensor.humidity_zimmer_hannah
condition: numeric_state
above: 70
chip:
type: entity
entity: sensor.humidity_zimmer_hannah
icon_color: red
tap_action:
action: none
content_info: none
icon: mdi:water-percent
Have a look at this card?
7 Likes
Viss
December 27, 2022, 10:28pm
4597
Is there a way to add secondary data to a mushroom fan card?
I tried building my own fan card from scratch, but sadly mushroom cards dont let you easily take that nice spinning fan icon and use it in a mushroom template card, or use the fan/dimmer horizontal slider. Is there a way to do this, or am I out of luck unless mushroom cards get an update letting folks use those elements in template cards?
esr2
December 28, 2022, 4:29am
4598
1 Like
Robbi-Ho
December 28, 2022, 8:07am
4601
You could try this:
{{ as_timestamp(states.binary_sensor.voordeur.last_changed) | timestamp_custom('%H %M',True) }}
Found at: Last_updated State and last-changed in Lovelave - #18 by weado
1 Like
Thanks for your help.
1 Like
CypherMK
December 28, 2022, 11:36am
4603
That worked. Can someone explain why this is not a standard option?
I made a couple remotes mostly using mushroom, stack-in, stack, and grid cards.
Iād like to make two more improvements if possible, so Iām seeking suggestions:
The navigation area with the arrows and select button would be better as a track pad style, but I cannot find a good card for that.
The volume works well for tapping, but Iād prefer a large slider style that would look and work like the mushroom light card dimmer control. I know I can customize one of the media player cards (core, mini, or mushroom), but (1) theyāre all horizontal and (2) theyāre all very thin and hard to see at a glance.
Any ideas?
3 Likes
douglasfl
December 28, 2022, 1:13pm
4605
Hi,
1 Like
so, Iām almost there with my car charging card.ping animation would work - as shown here:
Mushroom Cards - Build a beautiful dashboard easily š - #2925 by rhysb ?
I have already spent hours combining the various CSS ācommandsā - I just canāt get it combined.@rhysb still has an idea ?
2 Likes
arifroni
December 28, 2022, 4:32pm
4607
I made this thermostat card with some controls. How can I make it glow around the border based on the thermostat status?
code:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.room_climate_office
name: Office
icon: mdi:briefcase
fill_container: false
show_temperature_control: true
layout: horizontal
collapsible_controls: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: light.office_group_1
icon: mdi:ceiling-light
icon_color: |
{% if is_state('light.office_group_1', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
primary: ''
layout: vertical
secondary: Lights1
badge_color: ''
- type: custom:mushroom-template-card
entity: light.office_group_2
icon: mdi:ceiling-light
icon_color: |
{% if is_state('light.office_group_2', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
primary: ''
layout: vertical
secondary: Lights2
- type: custom:mushroom-template-card
primary: ''
secondary: >-
{% if is_state_attr('climate.room_climate_office', 'preset_mode',
'boost') %}
Boost ON
{% else %}
Boost OFF
{% endif %}
icon: mdi:radiator
layout: vertical
tap_action:
action: call-service
service: script.climate_boost_toggle
data:
climate_entity: climate.room_climate_office
target: {}
icon_color: >-
{% if is_state_attr('climate.room_climate_office', 'preset_mode',
'boost') %}
red
{% else %}
disabled
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: |-
T: {{states('sensor.temperature_office')}}Ā°C
H: {{states('sensor.humidity_office')}}%
V: {{states('sensor.office_thermostat_valvetappet')}}%
icon: ''
layout: vertical
icon_color: ''
multiline_secondary: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
1 Like
First of all thank you very much for sharing this code. I used it and it looks great!
I have an issue when i use 1 decimal for setting the temperature. The minus sign gets under the temperature and the layout is ruined. i tried altering the lettertype size but css not really my thing. Any suggestions would really be appreciated.
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 16px;
--st-font-size-m: 14px;
--st-font-size-title: 16px;
--st-font-size-sensors: 18px;
--st-spacing: 2px;
}
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
Full code:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Office
secondary: |
{{ state_attr('climate.office_thermostaat', 'hvac_action') }}
icon: |-
{% set mode = states('climate.office_thermostaat') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: >-
{% set status = state_attr('climate.office_thermostaat','hvac_action')
%}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.office_thermostaat
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.office_thermostaat
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} Ā°C'
entity: climate.office_thermostaat
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.office_thermostaat
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% '
entity: sensor.lumi_lumi_sens_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown_office
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown_office
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.19791209321807_outdoor_temperature
primary_info: state
secondary_info: name
name: Out
icon_color: blue
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.6px;
--st-mode-background: #2d2d2d;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.werkkamer_airco
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan_only: false
dry: false
auto: false
fan:
LOW_MID: false
NATURE: false
MID_HIGH: false
MID:
icon: mdi:fan-speed-2
name: false
HIGH:
icon: mdi:fan-speed-3
name: false
Auto: false
LOW:
name: 'On'
icon: mdi:fan-speed-1
- type: custom:mini-graph-card
entities:
- entity: sensor.lumi_lumi_sens_temperature
name: Inside Temperature
color: '#4caf50'
- entity: sensor.19791209321807_outdoor_temperature
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Screenshot_2022-12-28-17-30-46-51_40deb401b9ffe8e1df2f1cc5ba480b12|320x500
2 Likes
You did a great job here. Do you mind sending us the whole dashboard source config so we can reuse?
deeef
December 28, 2022, 7:34pm
4610
Hi,
In the picture from 7ahang that @piitaya lists as an inspiration, there is a ādevice countā under the āliving roomā title, and Iāve been wanting to make a similar count to use in my āroom cardsā.
I have a regular āareaā for all the devices, so I was hoping to just do some template area count.
bobboviking
December 28, 2022, 7:47pm
4611
Hi, a css style question. I would like to center bottom button but my css skills are failing me, anyone have a take? They are horizontally stacked, mushroom template cards (I have card mod etc installed). Been searching the forum and perhaps css god @rhysb could help?
Thanks in advance.
How can I make this only animate when its on?
features:
- type: light-brightness
type: tile
entity: light.master_bedroom_main_lights
icon: mdi:lightbulb-on
card_mod:
style:
ha-tile-icon$: |
ha-icon {
animation: illumination 1s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
check this ā¦
animation:
{% if is_state('light.master_bedroom_main_lights', 'on') %}
illumination 1s infinite;
{% endif %}
Did you ever figure this one at? Iām at the same point right now.
nice man & can you share you code pleas ?
