You can round it like this:
{{ states('sensor.bedroom_thermal_comfort_humidex') | round(1) }}
You can round it like this:
{{ states('sensor.bedroom_thermal_comfort_humidex') | round(1) }}
Thank you very much. You are amazing.
The seekbar only appears when the music is paused, it disappears when music is playing, also seekbar is grey in color, any odea on how to fix it?
Hello!
Why do I have pop-ups displayed in the background and not in the foreground?
Even the system ones.
I have a button that when pressed, the icon has to blink until a binary sensor is āonā. when it is not pressed it has to be mdi.wifi-off. when binary sensor is on, the blinking has to stop and icon has just to be greenā¦
How can I do this ?
Hi
fixing only works if I have enough cards. If there are too few boxes, the bar slides back up. Is there a way to do that too?
EDIT: Iāve solved it for already. Thank you.
@WW983 can you tell me how you built the selection-card for the rooms and how you built the ātitleā cards regarding the used font and colors. In general my setup is a little bit similiar but i want to improve styling and usabilityā¦
Thanks
greetings from germany
WOW, love the bar card!
Could you please share the bar card? please!!!
Sure. hereās the code. But look at the code from the @Mattia2399 . Itās much more professional. The code is specifically balanced for my case. If you have any questions, you can write me a message
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card { border-radius: 50px;
background: rgb(45, 45, 45);}
:host {
position: sticky;
bottom: 5px;
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 60% 40%
grid-template-rows: auto
grid-template-areas: |
"eins1 zwei2"
cards:
- type: custom:stack-in-card
mode: horizontal
view_layout:
grid-area: eins1
card_mod:
style: |
ha-card { border-radius: 50px;
background: rgb(208, 208, 208);
box-shadow: none;
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 90% 10%
grid-template-rows: auto
grid-template-areas: |
"eins zwei"
card_mod:
style: |
ha-card {
background: rgb(208, 208, 208);
box-shadow: none;
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: eins
icon_color: black
icon: mdi:home
primary: Home
entity: input_boolean.menu
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
background: rgb(208, 208, 208);
box-shadow: none;
--spacing: 8px;
--icon-size: 35px;
--primary-text-color: rgb(var(--rgb-black));
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
view_layout:
grid-area: zwei
chips:
- type: template
card_mod:
style: |
ha-card {
position: absolute;
right: 0px;
top: 10px;
background: green;
box-shadow: none;
}
entity: input_boolean.menu
double_tap_action:
action: none
icon_color: white
icon: mdi:chevron-up
tap_action:
action: more-info
hold_action:
action: more-info
- type: custom:stack-in-card
mode: horizontal
view_layout:
grid-area: zwei2
card_mod:
style: |
ha-card { border-radius: 50px;
background: rgb(45, 45, 45);
box-shadow: none;}
cards:
- type: custom:mushroom-entity-card
tap_action:
action: navigate
navigation_path: home
entity: person.waldemar
layout: horizontal
primary_info: none
secondary_info: none
icon_color: blue
icon: mdi:home
- type: custom:mushroom-entity-card
entity: alarm_control_panel.alarm
layout: horizontal
primary_info: none
secondary_info: none
icon_color: green
icon: mdi:shield-home
- type: custom:mushroom-entity-card
tap_action:
action: navigate
navigation_path: kameras
entity: input_button.kameras
layout: horizontal
primary_info: none
secondary_info: none
icon_color: blue
icon: mdi:video
Hi everyone,
I am trying to make an icon that shows ādancing barsā to show that there is music playing.
I found a tutorial for scripting it in CSS but I canāt figure out how to implement that to an icon in Home Assistant. Can someone help?
The tutorial:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
primary: 'Washing Machine #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
I work with my 1 PM
How do I enter this value into the system here?
sensor.washing_machine_power
Thank you
Can you share all the code please :):
hi,
Does anyone have the option of sharing their entire room view?
I have finished my main page, and now I want to move on to room views
Hello.
I`m having a question about badges.
Is there any possibility to place badge on top of main icon instead how it is right now on current photo?
You can move the badge around like this:
card_mod:
style: |
mushroom-badge-icon {
left: 15px;
top: 15px;
}
Thank You very much!
It may be useful for some of you - hereās my Custom Chips card for my Solar import / export
it changes icon, colour and text and value depending on values coming from my IotaWatt
two sensors used are
āimportingā which is just measuring the current drawn from the grid
and āexportingā which an integrator on the IotaWatt that pretty much just removes the negative from the number and reports as a positive Export
Hereās how it looksā¦
and
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.exporting
icon: |-
{% set state=states('sensor.exporting') %}
{% if state | is_number and state | float > 0 %}
mdi:transmission-tower-export
{% elif state | is_number and state | float < 0 %}
mdi:transmission-tower-off
{% else %}
mdi:transmission-tower-import
{% endif %}
icon_color: |-
{% set state=states('sensor.exporting') %}
{% if state | is_number and state | float > 0 %}
green
{% elif state | is_number and state | float < 0 %}
blue
{% else %}
red
{% endif %}
content: >-
{% set state=states('sensor.exporting') %} {% if state | is_number and
state | float > 0 %}
Exporting {{ states('sensor.exporting') }} {{ state_attr('sensor.exporting', 'unit_of_measurement') }}
{% elif state | is_number and state | float < 0 %}
Error
{% else %}
Importing {{ states('sensor.importing') }} {{ state_attr('sensor.importing', 'unit_of_measurement') }}
{% endif %}
- type: template
entity: sensor.solar_production
icon: mdi:solar-panel
icon_color: |-
{% set state=states('sensor.solar_production') %}
{% if state | is_number and state | float > 0 %}
green
{% elif state | is_number and state | float < 0 %}
blue
{% else %}
red
{% endif %}
content: >-
{{ states('sensor.solar_production') }} {{
state_attr('sensor.solar_production', 'unit_of_measurement') }}
- type: entity
entity: sensor.total_pv_in_kw
icon: mdi:solar-power-variant-outline
name: Production