Try to playing with the next settings:
ha-card {
height: XXXpx;
}
apologies - here is the yaml.
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Front
fill_container: true
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_front_battery') | int(0) < 50
%} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_signal') | int < 30 %} red {%
elif states ('sensor.linktap_tap_front_signal') | int < 50 %} orange
{% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_signal'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod:
style: |
ha-card {
position: absolute;
top: 5px;
right: 15px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
I have several fans and when turned off, they all show the last used percentage and do not reset to zero, although they are turned off. Moreover, the Code provided by the standard card works correctly (it is attached to the letter). Apparently it monitors the fan turning off in some other way.
type: custom:mushroom-fan-card
entity: fan.esphome_web_a345e4_pwm_fan
icon_animation: true
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
fill_container: true
Then we need to come up with a slightly different approach. It’s still doable.
Thank you for your help, your opinion is very valuable to me. Perhaps this is a nuance of the ESP32. All fans work through the ESPhome add-on. Just in case, I’ll attach the code that was used to flash the ESP32. Maybe this will somehow help solve this problem. Thank you!!!
sensor:
- platform: pulse_counter
pin: GPIO13
name: PWM Fan RPM
id: fan_pulse
unit_of_measurement: 'RPM'
filters:
- multiply: 0.5
count_mode:
rising_edge: INCREMENT
falling_edge: DISABLE
update_interval: 3s
output:
- platform: ledc
pin: GPIO12
frequency: 10000 Hz
id: fanhub_pwm1
fan:
- platform: speed
output: fanhub_pwm1
name: "PWM Fan"
100% yes! Can you explain how you have achieved this?
I combined the stack-in-card with a layout-card. This gives you control over the columns and define them evenly.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Front
fill_container: true
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Back
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_front_battery') | int(0) < 50
%} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_signal') | int < 30 %} red
{% elif states ('sensor.linktap_tap_front_signal') | int < 50 %}
orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_signal'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 5px;
right: 25px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
.
I’ll just rewrite the code to include the off state in a different way. Give me a little bit.
What is the fan speed range 1 thru ? I see the step size is 1.
Let’s try this…
type: custom:mushroom-template-card
entity: fan.bedroom_fan
icon: mdi:fan
card_mod:
style: |
ha-state-icon {
animation:
{% set pwr = states(config.entity) %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set spd = 'rotation infinite linear' %}
{% if ( pwr == 'off') %} 0s {{spd}}
{% elif (perc <= 17 and pwr == 'on') %} 2.5s {{spd}}
{% elif (perc <= 34 and pwr == 'on') %} 2s {{spd}}
{% elif (perc <= 51 and pwr == 'on') %} 1.5s {{spd}}
{% elif (perc <= 67 and pwr == 'on') %} 1s {{spd}}
{% elif (perc <= 84 and pwr == 'on') %} .75s {{spd}}
{% elif (perc <= 100 and pwr == 'on') %} .5s {{spd}}
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
First of all, as a silent reader - thank you very much for your work! Is is absolutely incredible what y’all @rhysb @LiQuid_cOOled @dimitri.landerloos etc. etc. etc. are doing. I spent some nights to get my mobile dashboard up & running.
My attepmt was to create a dense mobile dashboard where you can see nearly anything whats going on.
used:
- HASS.agent to read your pc
- many integrations, as well als custom sensors
- theme: waves
- custom:weather-card
- mini-graph-card
- bubble-card
- mushroom
- card-mod
- conditional-card
- apex-charts
- auto-entities
- stack-in-card
- better-thermostat
- etc.
Ask, if you like to see the code.
18 Likes
Thank you - I have modified the grid to include an additional row and is working well on PC but does not render correctly on a mobile as the column widths are less than on the computer.
I think I need a way to align the chips in relation to the grid cell rather than absolute. Is this possible?
pic below is from my phone so you can see the issue I have with placement of the chips
Here is my yaml
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 75px 75px
margin: 5px 0px -10px 0px
cards:
- type: custom:mushroom-template-card
primary: Watering Setup
secondary: |
Profile: {{ states ('input_select.watering_schedule') }}
icon: mdi:sprinkler-variant
tap_action:
action: call-service
service: script.set_watering_schedule
target: {}
hold_action:
action: none
multiline_secondary: true
fill_container: false
double_tap_action:
action: none
entity: script.set_watering_schedule
icon_color: >-
{% if state_attr ('script.set_watering_schedule', 'last_triggered') +
timedelta (hours = 24) < now() %} red {% else %} green {% endif %}
- type: custom:mushroom-entity-card
entity: input_boolean.watering_smart
name: Smart Watering
icon: mdi:toggle-switch
layout: horizontal
tap_action:
action: toggle
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Front
fill_container: true
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_back
name: Back
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_front_battery') | int(0)
< 50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_signal') | int < 30 %}
red {% elif states ('sensor.linktap_tap_front_signal') | int < 50
%} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_signal'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 85px;
left: 160px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_back_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_back_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_back_battery') | int(0) <
50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_back_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_back_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_back_signal') | int < 30 %} red
{% elif states ('sensor.linktap_tap_back_signal') | int < 50 %}
orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_back_signal'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 85px;
right: 20px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
Let me see if I can reduce the padding on the chips. You can also set a different set of rules for mobile with @media
Let me know how this looks on the PC and mobile?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.watering_smart
name: Front
fill_container: true
- type: custom:mushroom-entity-card
entity: input_boolean.watering_smart
name: Back
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %} red {%
elif states ('sensor.linktap_tap_front_battery') | int(0) < 50 %} orange {%
else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int < 30 %} red {% elif
states ('sensor.linktap_tap_front_battery') | int < 50 %} orange {% else %}
green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 5px;
left: 125px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
@media screen and (max-width: 400px) {
ha-card {
position: absolute;
top: 5px;
left: 110px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %} red {%
elif states ('sensor.linktap_tap_front_battery') | int(0) < 50 %} orange {%
else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int < 30 %} red {% elif
states ('sensor.linktap_tap_front_battery') | int < 50 %} orange {% else %}
green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 5px;
right: 30px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
@media screen and (max-width: 400px) {
ha-card {
position: absolute;
top: 5px;
right: 20px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
}
1 Like
Thanks @LiQuid_cOOled - much appreciated. Working fine on both PC and iphone now. Had to tweak a few things to get the prefect placement but all good.
That grid layout card is quite powerful. Is it possible to configure a 4 column grid and then then customise each row to span across a number of columns?
I’m thinking I would like to do something like the this - see below
Each row in your declaration needs to have the same number of cells, so yes if you have four columns like your diagram.
1 Like
Only issue with this setup now is if I change my phone from portrait to landscape the chip cards are not placed correctly.
I think I will see if I can get the chips ‘stacked’ into the entity card or if there was a way to map/align the chips with the cells of the grid it would be a more robust and repeatable approach.
Any ideas?
Thanks for this I was just looking at the CSS grid trick docs. I will see if I can make progress and report back if I need any more help.
I need a way to align chips to the grid cell first then I can try to play with spanning columns.
When you rotate your phone, your @media settings are affected because its a 3rd layout. This is why the new sections dashboard was created. It helps with cross media platforms.
All good. There is a lot to learn for sure. Thanks for helping me out with this stuff.