Here below the code for part 4:
This part is the most difficult, because you also have to deal with card mod and you will have to type some code in your configuration file to creat a senssor to get your battery levels.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: RING ALARM MOTION SENSORS
subtitle: >-
Last Communication: {{
state_attr('sensor.villemomble_base_station_info', 'lastCommTime') }}
- type: horizontal-stack
cards:
- type: picture
image: /local/images/Ring_motion_sensor.png
tap_action:
action: none
hold_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.ring_motion_sensor_chambre_rdc
icon: mdi:motion-sensor
name: Chambre RDC
show_name: false
styles:
card:
- background-color: |
[[[
if (states["binary_sensor.ring_motion_sensor_chambre_rdc"].state == 'on') return 'rgb(255, 183, 18)';
else return 'rgb(227, 228, 230)';
]]]
- padding: 5%
- color: black
- font-size: 12px
- font-weight: bold
- text-transform: capitalize
grid:
- grid-template-areas: '"i battery_wifi" "name name" "status status" "info tamper " '
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == 'off') return 'blue';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
custom_fields:
battery_wifi:
- align-self: start
- justify-self: end
name:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
status:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if
(states["binary_sensor.ring_motion_sensor_chambre_rdc"].state
== "off") return "blue"; ]]]
info:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if
(states["sensor.ring_motion_sensor_chambre_rdc_battery"].state
> 80) return "red"; ]]]
tamper:
- align-self: bottom
- justify-self: end
- '--text-color-sensor': >-
[[[ if
(states["sensor.ring_motion_sensor_chambre_rdc_battery"].state
> 80) return "red"; ]]]
custom_fields:
battery_wifi: |
[[[
var battery = (states['sensor.ring_motion_sensor_chambre_rdc_battery'].attributes.batteryLevel);
var battery_icon = (states['sensor.battery_percentagering_motion_sensor_chambre_rdc_template'].attributes.icon);
var battery_icon_color = states['sensor.ring_motion_sensor_chambre_rdc_battery'].attributes.batteryLevel > '30' ? 'green' : 'red';
return '</ha-icon> <ha-icon icon="' + battery_icon +'" style="width: 20px; height: 20px; color:' + battery_icon_color +';"></ha-icon>'
+ battery + '%'
]]]
name: |
[[[
return `<ha-icon
icon="mdi:rename-box"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Name: <span style="color: rgb(0, 0, 0);">Chambre RDC</span></span>`
]]]
status: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Status: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_chambre_rdc'].state} </span></span>`
]]]
info: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Info: <span style="color: rgb(0, 0, 0);">${states['sensor.ring_motion_sensor_chambre_rdc_info'].state}</span></span>`
]]]
tamper: |
[[[
return `<ha-icon
icon="mdi:hand-back-left"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Tamper: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_chambre_rdc_tamper'].state}</span></span>`
]]]
- type: custom:button-card
entity: binary_sensor.ring_motion_sensor_salon
icon: mdi:motion-sensor
name: Chambre RDC
show_name: false
styles:
card:
- background-color: |
[[[
if (states["binary_sensor.ring_motion_sensor_salon"].state == 'on') return 'rgb(255, 183, 18)';
else return 'rgb(227, 228, 230)';
]]]
- padding: 5%
- color: black
- font-size: 12px
- font-weight: bold
- text-transform: capitalize
grid:
- grid-template-areas: '"i battery_wifi" "name name" "status status" "info tamper " '
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == 'off') return 'blue';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
custom_fields:
battery_wifi:
- align-self: start
- justify-self: end
name:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
status:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["binary_sensor.ring_motion_sensor_salon"].state
== "off") return "blue"; ]]]
info:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.ring_motion_sensor_salon_info"].state >
80) return "red"; ]]]
tamper:
- align-self: bottom
- justify-self: end
- '--text-color-sensor': >-
[[[ if (states["sensor.ring_motion_sensor_salon_info"].state >
80) return "red"; ]]]
custom_fields:
battery_wifi: |
[[[
var battery = (states['sensor.ring_motion_sensor_salon_info'].attributes.batteryLevel);
var battery_icon = (states['sensor.battery_percentagering_motion_sensor_salon_template'].attributes.icon);
var battery_icon_color = states['sensor.ring_motion_sensor_salon_info'].attributes.batteryLevel > '30' ? 'green' : 'red';
return '</ha-icon> <ha-icon icon="' + battery_icon +'" style="width: 20px; height: 20px; color:' + battery_icon_color +';"></ha-icon>'
+ battery + '%'
]]]
name: |
[[[
return `<ha-icon
icon="mdi:rename-box"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Name: <span style="color: rgb(0, 0, 0);">Salon</span></span>`
]]]
status: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Status: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_salon'].state} </span></span>`
]]]
info: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Info: <span style="color: rgb(0, 0, 0);">${states['sensor.ring_motion_sensor_salon_info'].state}</span></span>`
]]]
tamper: |
[[[
return `<ha-icon
icon="mdi:hand-back-left"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Tamper: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_salon_tamper'].state}</span></span>`
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.ring_motion_sensor_entrance
icon: mdi:motion-sensor
name: Entrée RDC
show_name: false
styles:
card:
- background-color: |
[[[
if (states["binary_sensor.ring_motion_sensor_entrance"].state == 'on') return 'rgb(255, 183, 18)';
else return 'rgb(227, 228, 230)';
]]]
- padding: 5%
- color: black
- font-size: 12px
- font-weight: bold
- text-transform: capitalize
grid:
- grid-template-areas: '"i battery_wifi" "name name" "status status" "info tamper " '
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == 'off') return 'blue';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
custom_fields:
battery_wifi:
- align-self: start
- justify-self: end
name:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
status:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if
(states["binary_sensor.ring_motion_sensor_entrance"].state ==
"off") return "blue"; ]]]
info:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if
(states["sensor.ring_motion_sensor_entrance_battery"].state >
80) return "red"; ]]]
tamper:
- align-self: bottom
- justify-self: end
- '--text-color-sensor': >-
[[[ if
(states["sensor.ring_motion_sensor_entrance_battery"].state >
80) return "red"; ]]]
custom_fields:
battery_wifi: |
[[[
var battery = (states['sensor.ring_motion_sensor_entrance_battery'].attributes.batteryLevel);
var battery_icon = (states['sensor.battery_percentagering_motion_sensor_entrance_template'].attributes.icon);
var battery_icon_color = states['sensor.ring_motion_sensor_entrance_battery'].attributes.batteryLevel > '30' ? 'green' : 'red';
return '</ha-icon> <ha-icon icon="' + battery_icon +'" style="width: 20px; height: 20px; color:' + battery_icon_color +';"></ha-icon>'
+ battery + '%'
]]]
name: |
[[[
return `<ha-icon
icon="mdi:rename-box"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Name: <span style="color: rgb(0, 0, 0);">Entrée RDC</span></span>`
]]]
status: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Status: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_entrance'].state} </span></span>`
]]]
info: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Info: <span style="color: rgb(0, 0, 0);">${states['sensor.ring_motion_sensor_entrance_info'].state}</span></span>`
]]]
tamper: |
[[[
return `<ha-icon
icon="mdi:hand-back-left"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Tamper: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_entrance_tamper'].state}</span></span>`
]]]
- type: custom:button-card
entity: binary_sensor.ring_motion_sensor_salon
icon: mdi:motion-sensor
name: Chambre RDC
show_name: false
styles:
card:
- background-color: |
[[[
if (states["binary_sensor.ring_motion_sensor_salon"].state == 'on') return 'rgb(255, 183, 18)';
else return 'rgb(227, 228, 230)';
]]]
- padding: 5%
- color: black
- font-size: 12px
- font-weight: bold
- text-transform: capitalize
grid:
- grid-template-areas: '"i battery_wifi" "name name" "status status" "info tamper " '
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == 'off') return 'blue';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
custom_fields:
battery_wifi:
- align-self: start
- justify-self: end
name:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
status:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["binary_sensor.ring_motion_sensor_salon"].state
== "off") return "blue"; ]]]
info:
- padding-bottom: 2px
- align-self: bottom
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.ring_motion_sensor_salon_info"].state >
80) return "red"; ]]]
tamper:
- align-self: bottom
- justify-self: end
- '--text-color-sensor': >-
[[[ if (states["sensor.ring_motion_sensor_salon_info"].state >
80) return "red"; ]]]
custom_fields:
battery_wifi: |
[[[
var battery = (states['sensor.ring_motion_sensor_salon_info'].attributes.batteryLevel);
var battery_icon = (states['sensor.battery_percentagering_motion_sensor_salon_template'].attributes.icon);
var battery_icon_color = states['sensor.ring_motion_sensor_salon_info'].attributes.batteryLevel > '30' ? 'green' : 'red';
return '</ha-icon> <ha-icon icon="' + battery_icon +'" style="width: 20px; height: 20px; color:' + battery_icon_color +';"></ha-icon>'
+ battery + '%'
]]]
name: |
[[[
return `<ha-icon
icon="mdi:rename-box"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Name: <span style="color: rgb(0, 0, 0);">Salon</span></span>`
]]]
status: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Status: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_salon'].state} </span></span>`
]]]
info: |
[[[
return `<ha-icon
icon="mdi:information"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Info: <span style="color: rgb(0, 0, 0);">${states['sensor.ring_motion_sensor_salon_info'].state}</span></span>`
]]]
tamper: |
[[[
return `<ha-icon
icon="mdi:hand-back-left"
style="width: 19px; height: 19px; color: rgb(0, 0, 0);">
</ha-icon><span>Tamper: <span style="color: rgb(0, 0, 0);">${states['binary_sensor.ring_motion_sensor_salon_tamper'].state}</span></span>`
]]]
Code to add in the configuration section
In my configuration file I call a file named “sensor”, maybe you have the senssor section directly in the configuration file. So just be careful where you paste the following code. Also I’m just giving two as an example, because you just have to repeat the process for all of your sensors.
# Ring Alarm Sensor's battery levels
- platform: template
sensors:
battery_percentagering_motion_sensor_chambre_rdc_template:
value_template: >-
{{ state_attr('sensor.ring_motion_sensor_chambre_rdc_battery','batteryLevel') }}
icon_template: >-
{%- set batteryLevel = state_attr('sensor.ring_motion_sensor_chambre_rdc_battery','batteryLevel') -%}
{% if batteryLevel <= 30 %}
mdi:battery-alert
{% elif batteryLevel > 30 and batteryLevel <= 40 %}
mdi:battery-30
{% elif batteryLevel > 40 and batteryLevel <= 50 %}
mdi:battery-40
{% elif batteryLevel > 50 and batteryLevel <= 60 %}
mdi:battery-50
{% elif batteryLevel > 60 and batteryLevel <= 70 %}
mdi:battery-60
{% elif batteryLevel > 70 and batteryLevel <= 80 %}
mdi:battery-70
{% elif batteryLevel > 80 and batteryLevel <= 90 %}
mdi:battery-80
{% elif batteryLevel > 90 %}
mdi:battery
{% endif %}
- platform: template
sensors:
battery_percentagering_motion_sensor_salon_template:
value_template: >-
{{ state_attr('sensor.ring_motion_sensor_salon_info','batteryLevel') }}
icon_template: >-
{%- set batteryLevel = state_attr('sensor.ring_motion_sensor_salon_info','batteryLevel') -%}
{% if batteryLevel <= 30 %}
mdi:battery-alert
{% elif batteryLevel > 30 and batteryLevel <= 40 %}
mdi:battery-30
{% elif batteryLevel > 40 and batteryLevel <= 50 %}
mdi:battery-40
{% elif batteryLevel > 50 and batteryLevel <= 60 %}
mdi:battery-50
{% elif batteryLevel > 60 and batteryLevel <= 70 %}
mdi:battery-60
{% elif batteryLevel > 70 and batteryLevel <= 80 %}
mdi:battery-70
{% elif batteryLevel > 80 and batteryLevel <= 90 %}
mdi:battery-80
{% elif batteryLevel > 90 %}
mdi:battery
{% endif %}
Here below the code for part 5:
This is exactly the same as Part 4, so I will not add it here.
I Hope this process is clear for all of you. Please ask questions if you have any. I’ll try my best to reply in time.