Hi all, I would like to ask a little bit of help on this, I’ve been struggling around with it, searching through internet but I still can’t understand where is the error on this.
I have the following button_card that I found and loved in internet:
It has the following code:
aspect_ratio: 1.2/1
type: custom:button-card
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
</ha-icon><span> CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
</ha-icon><span> RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
]]]
ssd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
</ha-icon><span> SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_config'].state}%</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: var(--text-color-sensor);">
</ha-icon><span>${entity.state}°C</span>`
]]]
entity: sensor.processor_temperature
icon: mdi:raspberry-pi
name: RPi 3B+
styles:
card:
- padding: 10%
- font-size: 12px
- text-shadow: 0px 0px 0px black
- text-transform: uppercase
- font-variant: small-caps
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.processor_use"].state >= 5) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.memory_use_percent"].state >= 80) return "red";
]]]
ssd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.disk_use_percent_config"].state >= 80) return
"red"; ]]]
temp:
- align-self: start
- justify-self: end
- '--text-color-sensor': >
[[[ if (entity.state < 50) return 'green'; if (entity.state >= 60 &&
entity.state < 80) return 'orange'; else return 'red'; ]]]
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "ssd ssd"'
icon:
- color: |
[[[
if (entity.state < 50) return 'green';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 50%
- margin-top: '-10%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 12px
- color: black
- padding-bottom: 4px
- justify-self: start
Here everything works ok.
Now I would like that if someone clicks on it, a custom “more-info” pop up, the result should be like this:
The code is as follows:
type: custom:vertical-stack-in-card
cards:
- entities:
- entity: sensor.last_boot
icon: mdi:clock
name: Último Boot
show_header_toggle: false
title: Raspberry Pi 3B+
type: entities
- cards:
- color_thresholds:
- color: '#bf4040'
from: 50
to: 100
- color: '#ffde00'
from: 10
to: 49
- color: '#40bf40'
from: 0
to: 9
entities:
- entity: sensor.processor_use
index: 0
name: Max
aggregate_func: max
color: green
show_fill: false
- entity: sensor.processor_use
index: 0
name: Avg
aggregate_func: avg
show_fill: false
- entity: sensor.processor_use
index: 0
name: Min
aggregate_func: min
color: lime
show_fill: false
icon: mdi:memory
type: custom:mini-graph-card
- color_thresholds:
- color: '#bf4040'
from: 56
to: 100
- color: '#ffde00'
from: 51
to: 55
- color: '#40bf40'
from: 0
to: 50
decimals: 0
state_adaptive_color: true
entities:
- entity: sensor.processor_temperature
index: 0
name: max
aggregate_func: Max
color: green
show_fill: false
- entity: sensor.processor_temperature
index: 0
name: avg
aggregate_func: Avg
show_fill: false
- entity: sensor.processor_temperature
index: 0
name: Min
aggregate_func: min
color: lime
show_fill: false
type: custom:mini-graph-card
type: horizontal-stack
- cards:
- aspect_ratio: 1/1
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
</ha-icon><span> CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
</ha-icon><span> RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
]]]
ssd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
</ha-icon><span> SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_config'].state}%</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: var(--text-color-sensor);">
</ha-icon><span>${entity.state}°C</span>`
]]]
entity: sensor.processor_temperature
icon: mdi:desktop-tower-monitor
name: Raspberry Pi4 4gb
styles:
card:
- padding: 10%
- font-size: 12px
- text-shadow: 0px 0px 0px black
- text-transform: uppercase
- font-variant: small-caps
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.processor_use"].state > 5) return
"red"; ]]]
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.memory_use_percent"].state > 80) return
"red"; ]]]
ssd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.disk_use_percent_config"].state > 80)
return "red"; ]]]
temp:
- align-self: start
- justify-self: end
- '--text-color-sensor': >
[[[ if (entity.state < 50) return 'green'; if (entity.state >=
60 && entity.state < 80) return 'orange'; else return 'red';
]]]
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "ssd ssd"'
icon:
- color: |
[[[
if (entity.state < 50) return 'green';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-10%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 12px
- padding-bottom: 4px
type: custom:button-card
- entity: sensor.speedtest_download
name: Download (Mbps)
type: gauge
unit: []
- entity: sensor.speedtest_upload
name: Upload (Mbps)
type: gauge
unit: []
type: horizontal-stack
- align: split
animation: auto
attribute: false
card_style: false
charge_entity: false
columns: 1
decimal: 0
delay: 5000
direction: right
entities:
- entity: sensor.disk_use_percent_config
severity:
- color: '#40bf40'
value: 10
- color: '#ffde00'
value: 50
- color: '#bf4040'
value: 100
- entity: sensor.memory_use_percent
severity:
- color: '#40bf40'
value: 0
- color: '#ffde00'
value: 50
- color: '#bf4040'
value: 100
entity_config: true
height: 40px
icon: false
icon_position: 'off'
icon_style:
filter: none
height: 34px
width: 34px
indicator: auto
limit_value: false
max: 100
min: 0
minmax_style: false
padding: 5px
positions:
icon: 'off'
indicator: 'off'
title: outside
rounding: 5px
saturation: 50%
severity:
- color: '#bf4040'
from: 50
to: 100
- color: '#ffde00'
from: 20
to: 49
- color: '#40bf40'
from: 0
to: 19
show_icon: true
show_minmax: false
show_value: true
speed: 1000
style: |-
bar-card-current, bar-card-backgroundbar {
border-radius: 20px;
}
bar-card-value {
margin-right: auto;
}
target: false
title: false
title_position: inside
title_style:
color: '#00000'
font-weight: normal
text-shadow: none
type: custom:bar-card
unit_of_measurement: false
value_style:
color: '#00000'
font-size: 18px
font-weight: normal
text-shadow: none
visibility: false
width: 100%
The problem is that if I introduce this code at the end of the button_card:
...
tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: true
card:
- type: custom:vertical-stack-in-card
cards:
- entities:
- entity: sensor.last_boot
...
It does nothing. It still shows the original more-info from sensor.processor_temperature:
I need your help and knowledge please!!
Thank you very much in advance.