I am trying to get a button card template for a binary_sensor, with an embedded graph that will show 0/1.
This is my template:
live_tile_with_graph_binary:
variables:
picture: '[[[ return entity.attributes.entity_picture ]]]'
aggregate_func: max
hours_to_show: 12
group_by: interval
points_per_hour: 1800
graph_height: 2
line_width: 4
line_color: var(--rgb-accent-color)
graph: line
lower_bound: ~2
upper_bound: ~0
bar_spacing: 50
template: live_tile_card
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- entity: '[[[ return entity.entity_id ]]]'
aggregate_func: '[[[ return variables.aggregate_func ]]]'
show:
graph: '[[[ return variables.graph ]]]'
name: false
icon: false
state: false
labels: false
points: false
line_width: '[[[ return variables.line_width ]]]'
line_color: '[[[ return `rgb(${variables.line_color}` ]]]'
hours_to_show: '[[[ return variables.hours_to_show ]]]'
group_by: '[[[ return variables.group_by ]]]'
points_per_hour: '[[[ return variables.points_per_hour ]]]'
animate: true
upper_bound: '[[[ return variables.upper_bound ]]]'
lower_bound: '[[[ return variables.lower_bound ]]]'
height: '[[[ return variables.graph_height ]]]'
bar_spacing: '[[[ return variables.bar_spacing ]]]'
card_mod:
style: |
ha-card { background: none; border-radius: 0; }
styles:
grid:
- grid-template-areas: '"s s" "l l" "graph graph" "n i"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content auto 0 min-content
card:
- color: var(--primary-text-color)
- background: var(--ha-card-background)
custom_fields:
graph:
- position: absolute
- bottom: 0
- width: 100%
- border-bottom: |
[[[
if (variables.graph == "line") { return `3.25rem solid rgba(${variables.line_color}, .15)` } else { return "3.25rem solid transparent" }
]]]
- border-radius: 0
# # rgba(var(--rgb-accent-color),.15)
name:
- z-index: 2
icon:
- z-index: 2
I call this in my frontend:
- type: 'custom:button-card'
template:
- live_tile_with_graph_binary
entity: binary_sensor.office_motion_sensor_occupancy
icon: 'mdi:motion-sensor'
name: Motion
But I get this:
The graph in the card is a flat line, does not show motion up and down like a square wave which is what I am expecting.
Also, not sure why it shws Off and On for motion, vs. Cleared/Detected, I tried defining the states, but keeps coming back with On/Off.
The best I could find online is that I need to template my binary_sensor from Clear/Detected to 0/1 then plot it as a sensor, but I have too many of the motion sensors to do that, and I could not figure out a way to us to it in the template here only to graph it.
Any ideas?