Hi Thomas,
I’ve been frustrated looking a week on one view to find out WHY my popup doesn’t work. Could you please give me a hint ? Don’t know where to look:
- title: Merc
icon: 'mdi:car-sports'
path: auto
type: custom:grid-layout
layout:
grid-template-columns: 50% 50%
grid-template-rows: auto ## or 4 if you want to be strict about it
grid-template-areas: |
"buttons1 buttons1 "
"picture1 picture1 "
"buttons2 buttons2 "
cards:
- type: custom:button-card
view_layout: buttons1
title : Mercedes GLE350 DE
- type: horizontal-stack
view_layout:
grid-area: picture1
cards:
- type: picture-elements
image: /local/merclogo.png
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: "Dit is een test"
card:
type: custom:layout-card
title: Dit is test 2
elements:
- type: state-badge
entity: sensor.2_amu_833_fuel_level
title: Fuel level
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Mercedes
hide_header: true
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
}
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
}
card:
- type: custom:layout-card
column_num: 3
column_width: [385, 385, 385]
layout: vertical
cards:
- type: entities
title: Battery and Range
class: add_header
state_color: true
show_header_toggle: false
entities:
- entity: sensor.2_amu_833_state_of_charge
name: Charging Status
- entity: sensor.2_amu_833_starter_battery_state
name: Starter Battery
- entity: sensor.2_amu_833_oil_level
name: Oil Level
- type: 'custom:bar-card'
width: 70%
height: 2em
entities:
- name: Battery
entity: sensor.2_amu_833_state_of_charge
severity:
- color: '#e63917'
from: 0
style:
top: 15%
left: 10%
- type: picture-elements
image: /local/mercnew.png
elements:
- entity: sensor.2_amu_833_fuel_level
prefix: ''
style:
transform: 'translate(-50%, -50%) scale(1.3, 1.3)'
color: lightgrey
left: 15%
top: 17%
type: state-label
- entity: sensor.2_amu_833_odometer
prefix: ' '
style:
transform: 'translate(-50%, -50%) scale(1.3, 1.3)'
color: lightgrey
left: 39%
top: 17%
type: state-label
- entity: sensor.car_window_sunroof
style:
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
'--paper-item-icon-color': null
left: 57%
top: 17.5%
type: state-icon
- entity: binary_sensor.2_amu_833_tire_warning
prefix: ''
style:
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
color: '#FFFFFF'
left: 66.5%
top: 17.5%
type: state-icon
- entity: binary_sensor.2_amu_833_low_brake_fluid_warning
prefix: ''
style:
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
color: '#FFFFFF'
left: 76%
top: 17.5%
type: state-icon
- entity: binary_sensor.2_amu_833_low_coolant_level_warning
prefix: ''
style:
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
color: '#FFFFFF'
left: 85.5%
top: 17.5%
type: state-icon
- entity: binary_sensor.2_amu_833_low_wash_water_warning
prefix: ''
style:
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
color: '#FFFFFF'
left: 95%
top: 17.5%
type: state-icon
- entity: sensor.car_tire_pressure_front_right
style:
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
color: lightgrey
left: 38%
top: 32%
type: state-label
- entity: sensor.car_tire_pressure_rear_right
style:
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
color: lightgrey
left: 84%
top: 32%
type: state-label
- entity: sensor.car_tire_pressure_front_left
style:
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
color: lightgrey
left: 38%
top: 90%
type: state-label
- entity: sensor.car_tire_pressure_rear_left
style:
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
color: lightgrey
left: 84%
top: 90%
type: state-label
- entity: sensor.car_lock_front_right
style:
'--paper-item-icon-color': white
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 61%
top: 38%
type: state-icon
- entity: sensor.car_lock_rear_right
style:
'--paper-item-icon-color': white
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 68%
top: 38%
type: state-icon
- entity: sensor.car_lock_front_left
style:
'--paper-item-icon-color': white
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 61%
top: 83%
type: state-icon
- entity: sensor.car_lock_rear_left
style:
'--paper-item-icon-color': white
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 68%
top: 83%
type: state-icon
- entity: sensor.car_lock_trunk
style:
'--paper-item-icon-color': white
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 95%
top: 60%
type: state-icon
- entity: sensor.car_window_front_right
style:
'--paper-item-icon-color': lightgrey
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 56%
top: 31%
type: state-icon
- entity: sensor.car_window_rear_right
style:
'--paper-item-icon-color': lightgrey
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 73%
top: 31%
type: state-icon
- entity: sensor.car_window_front_left
style:
'--paper-item-icon-color': lightgrey
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 56%
top: 90%
type: state-icon
- entity: sensor.car_window_rear_left
style:
'--paper-item-icon-color': lightgrey
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
left: 73%
top: 90%
type: state-icon
- entity: binary_sensor.2_amu_833_park_brake_status
prefix: ''
style:
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
color: '#FFFFFF'
left: 11%
top: 42%
type: state-icon
- entity: binary_sensor.2_amu_833_windows_closed
prefix: ''
style:
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
color: '#FFFFFF'
left: 11%
top: 52%
type: state-icon
- entity: sensor.2_amu_833_lock
prefix: ''
style:
color: '#FFFFFF'
left: 11%
top: 64%
type: state-label
- entity: device_tracker.2_amu_833_device_tracker
prefix: ''
style:
color: lightgrey
left: 11%
top: 77%
type: state-label
Much gratitude in advance
Kr,
Bart
