Do you mean this one?
This is picture-elements card:
type: picture-elements
elements:
- type: state-badge
entity: sensor.hp_outlet_temp
style:
top: 5%
left: 5%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-text-color: rgba(0,0,0,1);
--label-badge-blue: rgba(19,114,158,1);
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: sensor.hp_inlet_temp
style:
top: 5%
left: 21%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-text-color: rgba(0,0,0,1);
--label-badge-blue: rgba(19,114,158,1);
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: sensor.hp_outside_temp
style:
top: 5%
left: 37%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-text-color: rgba(0,0,0,1);
--label-badge-blue: rgba(19,114,158,1);
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: sensor.hp_indoor_temp
style:
top: 5%
left: 53%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-text-color: rgba(0,0,0,1);
--label-badge-blue: rgba(19,114,158,1);
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: binary_sensor.hp_water_pump_status
style:
top: 50%
left: 5%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-blue: rgba(19,114,158,1);
--label-badge-text-color: {% if is_state('binary_sensor.hp_water_pump_status', 'on') %} rgba(204,0,0,1) {% else %} grey {% endif %};
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: sensor.hp_flow_rate
style:
top: 5%
left: 70%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-text-color: rgba(0,0,0,1);
--label-badge-blue: rgba(19,114,158,1);
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: binary_sensor.hp_compressor_status
style:
top: 50%
left: 21%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-text-color: {% if is_state('binary_sensor.hp_compressor_status', 'on') %} rgba(204,0,0,1) {% else %} grey {% endif %};
--label-badge-blue: rgba(19,114,158,1);
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: sensor.hp_compressor_rpm
style:
top: 50%
left: 37%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-text-color: rgba(0,0,0,1);
--label-badge-blue: rgba(19,114,158,1);
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: binary_sensor.hp_error_status
style:
top: 50%
left: 53%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-blue: rgba(19,114,158,1);
--label-badge-text-color: {% if is_state('binary_sensor.hp_error_status', 'on') %} rgba(204,0,0,1) {% else %} grey {% endif %};
--label-badge-background-color: rgba(255,255,255,0.6);
}
- type: state-badge
entity: sensor.hp_error_code
style:
top: 50%
left: 70%
transform: scale(0.9,0.9)
card_mod:
style: |
:host
{
--label-badge-blue: rgba(19,114,158,1);
--label-badge-text-color: {% if is_state('binary_sensor.hp_defrosting_status', 'on') %} rgba(204,0,0,1) {% else %} grey {% endif %};
--label-badge-background-color: rgba(255,255,255,0.6);
}
image: local/lg_banner_2.png
As for KW consumption, I think there is no such information in modbus as I searched all registers available in heat pump, so I am using SmartThinQ LGE Sensors, custom cloud integration, to retrive current consumption. Based on that you can create integral sensor which will track your consumption in kWh so you can see daily, weekly,… consumtion from history…