These are amazing and your work is greatly appreciated.
I can’t wait for your wiki. I can’t figure out the template crap. I have minimalist installed and using it and mushroom cards, but don’t know where to put the code for your cards. Somewhat of a newb without some UI help.
I was inspired by the look as well and modified my button cards a while back. No confusing templates
i have started work on the wikiin dev, see here for now. more to come.
Looks grate, glad you where inspired, this is what the community is all about. How are you doing your animations, are you using SVG or card-mod ?
here an axample of mine
garage-door_animation:
variables:
timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
# triggers_update: "all"
show_icon: false
custom_fields:
icon: >
[[[
let path = `
<path d="M22 9V20H20V11H4V20H2V9L12 5L22 9M19 12H5V14H19V12M19 18H5V20H19V18M19 15H5V17H19V15Z" />
`,
style = `
<svg viewBox="0 0 24 24">
<style>
@keyframes door_open {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 83%, 15% 83%, 14% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
}
@keyframes door_close {
0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 86% 83%, 15% 83%, 14% 100%, 0 100%); }
75% { clip-path: inset(0 0 0 0); }
}
.start {
animation: door_open 3s steps(1);
}
.on {
clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 45%, 85% 45%, 85% 100%, 100% 100%, 100% 0);
}
.end {
animation: door_close 3s steps(1);
}
.start_timeout {
clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 45%, 85% 45%, 85% 100%, 100% 100%, 100% 0);
}
.end_timeout {
transform-origin: center;
will-change: transform;
}
</style>
`;
if (entity.state === 'open' && variables.timeout < -1000) {
return `${style}<g class="start">${path}</g></svg>`;
}
if (entity.state === 'closed' && variables.timeout < 1000) {
return `${style}<g class="end">${path}</g></svg>`;
}
if (entity.state === 'open' ) {
return `${style}<g class="start_timeout">${path}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path}</g></svg>`;
}
]]]
img_cell: "[[[ return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
Well tbh I’m not doing much other than basic fan spin and vacuum . I mainly just use color states to give me an idea, like I know a window is open when it yellow then I can press and see all my windows. Etc. Animations can be distracting or not necessarily as not staring at the dash all the time. Had these button layouts before mushrooms and your sweet designs came around, I just liked the circle icon background look.
I have just merged the latest cards to the main git.
documents are here
hi guys,
I have been working on adding support for custom popups (requires browser_mod) for my Status Card
you can do stuff like.
yaml code for main card
- type: custom:button-card
entity: sensor.security_state
template:
- custom_card_andyblac_status
variables:
button:
popup_content: !include popup.yaml
templates:
- custom_popup_andyblac_status
yaml code for popup card, just call the named yaml file.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: tile
entity: alarm_control_panel.house_alarm
vertical: true
features:
- type: alarm-modes
modes:
- armed_away
- disarmed
- type: tile
entity: alarm_control_panel.garage_alarm
vertical: true
features:
- type: alarm-modes
modes:
- armed_away
- disarmed
- type: tile
entity: cover.roller_door
vertical: true
features:
- type: cover-open-close
- type: horizontal-stack
cards:
- type: tile
entity: binary_sensor.garage_door
vertical: true
features:
- type: cover-open-close
color: red
- type: horizontal-stack
cards:
- type: tile
entity: binary_sensor.back_door
vertical: true
color: red
- type: horizontal-stack
cards:
- type: tile
entity: binary_sensor.front_door
vertical: true
color: red
Man, I am dying to get these cards working, but still have not figured it out. Forgive my ignorance, I’m still pretty new to this.
What else do I need to do besides drop your card’s yaml files in the folder and reboot?
I have them like this for example:
/config/ui_lovelace_minimalist/custom_cards/custom_card_andyblac_scene.yaml
I still get template not found error when I try to add a card, so I am missing a step.
hi,
place the folder structure like /config/ui_lovelace_minimalist/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml then go to developer tools and restart UI Lovelace Minimalist
Appreciate the help. I changed the file structure and still getting the same template error. I dont know anything about templates, are they located in the card’s yaml file, or do I need to add them somewhere else?
it looks like you have not installed all the required frontend integrations for Lovelace UI Minimalist,
goto to HACS → frontend and install these:
button-card
lovelace-card-mod
mini-graph-card
mini-media-player
my-cards-slider-card
light-entity-card
auto-entities
simple-weather-card
i assume you have isnatlled Lovelace UI minimalist too ?
template and instructions added to dev branch git.
if you guys are interested in my template sensors, I can post them here.
Thank you for making these. They look great. Any thoughts on adding different colors for on devices?
Hi,
Thanks, for the sensor icon you can do with the following variable ulm_custom_card_andyblac_room_sensor_color_on
docs are here.
and for the entity icon color see here
Yeah, that’d be great too.
reworked them, see below
custom_templates/tools.jinja
{% macro list_entities(type, device_class='', state='off', select='', reject='', area='', exclude_area='') %}
{% set ns = namespace(sensors=[]) %}
{% if device_class and area %}
{% for entity in type | selectattr('attributes.device_class', 'eq', device_class) | selectattr('entity_id', 'in', area_entities(area)) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif device_class %}
{% for entity in type | selectattr('attributes.device_class', 'eq', device_class) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif area and reject %}
{% for entity in type | selectattr('entity_id', 'in', area_entities(area)) | rejectattr('entity_id', 'search', reject) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif area and select %}
{% for entity in type | selectattr('entity_id', 'in', area_entities(area)) | selectattr('entity_id', 'match', select) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif area %}
{% for entity in type | selectattr('entity_id', 'in', area_entities(area)) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif exclude_area and reject %}
{% for entity in type | rejectattr('entity_id', 'in', area_entities(exclude_area)) | rejectattr('entity_id', 'search', reject) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif exclude_area %}
{% for entity in type | rejectattr('entity_id', 'in', area_entities(exclude_area)) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif select and reject %}
{% for entity in type | selectattr('entity_id', 'match', select) | rejectattr('entity_id', 'search', reject) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif select %}
{% for entity in type | selectattr('entity_id', 'match', select) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% elif reject %}
{% for entity in type | rejectattr('entity_id', 'search', reject) | selectattr('state','eq',state) %}
{% set ns.sensors = ns.sensors + [dict(entity_id = entity.entity_id, name = entity.name, state = entity.state)] %}
{% endfor %}
{% endif %}
{{ ns.sensors | to_json }}
{% endmacro %}
{% macro count_entities(type, device_class='', state='off', select='', reject='', area='', exclude_area='') %}
{% from 'tools.jinja' import list_entities %}
{{ list_entities(type,device_class,state,select,reject,area,exclude_area) | from_json | count }}
{% endmacro %}
Batttery Template sensor
- name: "Devices with low battery"
unique_id: e9da96dc-aa51-47c1-8a6d-435de1ce5149
attributes:
navigation: batteries
entities: >
{% set ns = namespace(sensors=[]) %}
{% set ignore_entities = ['sensor.andys_iphone_battery_level','sensor.andys_iphone_icloudv3_battery','sensor.christines_iphone_battery_level','sensor.christines_iphone_icloudv3_battery','sensor.ipad_battery_level','sensor.mums_ipad_battery_level'] %}
{% set battery_level = 55 %}
{% for state in states | selectattr('attributes.device_class', 'eq', 'battery') | rejectattr('entity_id', 'in', ignore_entities) %}
{% if 0 <= state.state | int(-1) <= battery_level | int %}
{% set ns.sensors = ns.sensors + [dict(entity_id = state.entity_id, name = state.name | replace(' battery', '') | replace(' Battery', ''), state = state.state | int)] %}
{% endif %}
{% endfor %}
{% set low_batteries = ns.sensors | sort (attribute='state') %}
{{ low_batteries }}
state: "{{ this.attributes.entities | count }}"
icon: >
{% if this.state not in ['unavailable','unknown'] %}
{% if this.state | int > 0 %}
mdi:battery-alert
{% else %}
mdi:battery
{% endif %}
{% else %}
mdi:battery
{% endif %}
Lights on
- name: "Number of Lights On"
unique_id: 3b279d97-e05a-4c8b-9368-2ce58d7fd46c
attributes:
navigation: lights
label: >
{% if this.state not in ['unavailable','unknown'] %}
{% if this.state | int > 0 %}
{{ this.state }} On
{% else %}
All Off
{% endif %}
{% else %}
All Off
{% endif %}
entities: >
{% from 'tools.jinja' import list_entities %}
{{ list_entities(states.light,exclude_area='groups',state='on') }}
count: >
{% from 'tools.jinja' import count_entities %}
{% set ns = namespace(entities=[]) %}
{% for s in states.light | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list %}
{% set ns.entities = ns.entities + [ (s, count_entities(states.light,state='on',area=s,exclude_area='groups') | from_json )] %}
{% endfor %}
{{ dict.from_keys(ns.entities) }}
state: "{{ this.attributes.entities | count }}"
icon: >
{% if this.state not in ['unavailable','unknown'] %}
{% if this.state | int > 0 %}
mdi:lightbulb-group
{% else %}
mdi:lightbulb-group-outline
{% endif %}
{% else %}
mdi:lightbulb-group-outline
{% endif %}
Doors Open
- name: "Number of Doors Open"
unique_id: 905cf252-7adb-4b68-b696-ae089d96b11f
attributes:
navigation: doors
label: >
{% if this.state not in ['unavailable','unknown'] %}
{% if this.state | int > 0 %}
{{ this.state }} Open
{% else %}
All Closed
{% endif %}
{% else %}
All Closed
{% endif %}
entities: >
{% from 'tools.jinja' import list_entities %}
{{ list_entities(states.binary_sensor,device_class='door',state='on') }}
count: >
{% from 'tools.jinja' import count_entities %}
{% set ns = namespace(entities=[]) %}
{% for s in states.binary_sensor | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list %}
{% set ns.entities = ns.entities + [ (s, count_entities(states.binary_sensor,device_class='door',state='on',area=s) | from_json )] %}
{% endfor %}
{{ dict.from_keys(ns.entities) }}
state: "{{ this.attributes.entities | count }}"
icon: >
{% if this.state not in ['unavailable','unknown'] %}
{% if this.state | int > 0 %}
mdi:door-open
{% else %}
mdi:door
{% endif %}
{% else %}
mdi:door
{% endif %}
Sockets on
- name: "Number of Sockets On"
unique_id: c838cee8-1919-4000-8fc0-d6587433e6fc
attributes:
navigation: sockets
label: >
{% if this.state not in ['unavailable','unknown'] %}
{% if this.state | int > 0 %}
{{ this.state }} On
{% else %}
All Off
{% endif %}
{% else %}
All Off
{% endif %}
entities: >
{% from 'tools.jinja' import list_entities %}
{{ list_entities(states.switch,device_class='outlet',state='on') }}
count: >
{% from 'tools.jinja' import count_entities %}
{% set ns = namespace(entities=[]) %}
{% for s in states.switch | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list %}
{% set ns.entities = ns.entities + [ (s, count_entities(states.switch,device_class='outlet',state='on',area=s) | from_json )] %}
{% endfor %}
{{ dict.from_keys(ns.entities) }}
state: "{{ this.attributes.entities | count }}"
icon: mdi:power-socket-uk
Motion Detected
- name: "Number of Motion Detected"
unique_id: 156e99a5-cdb6-4d6b-9bea-5e05d5a3c548
attributes:
navigation: motion-sensors
label: >
{% if this.state not in ['unavailable','unknown'] %}
{% if this.state | int > 0 %}
{{ this.state }} Detected
{% else %}
All Clear
{% endif %}
{% else %}
All Clear
{% endif %}
entities: >
{% from 'tools.jinja' import list_entities %}
{{ list_entities(states.binary_sensor,device_class='motion',state='on') }}
count: >
{% from 'tools.jinja' import count_entities %}
{% set ns = namespace(entities=[]) %}
{% for s in states.binary_sensor | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list %}
{% set ns.entities = ns.entities + [ (s, count_entities(states.binary_sensor,device_class='motion',state='on',area=s) | from_json )] %}
{% endfor %}
{{ dict.from_keys(ns.entities) }}
state: "{{ this.attributes.entities | count }}"
icon: mdi:motion-sensor
for sidebar
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.number_of_lights_on
template:
- custom_card_andyblac_count_info
- custom_popup_andyblac_tap
variables:
ulm_custom_card_andyblac_count_info_color_on: yellow
popup_title: "Lights"
popup_content: !include popups/lights.yaml
# hold_action:
# action: navigate
- type: custom:button-card
entity: sensor.number_of_sockets_on
template:
- custom_card_andyblac_count_info
- custom_popup_andyblac_tap
variables:
ulm_custom_card_andyblac_count_info_color_on: blue
popup_title: "Sockets"
popup_content: !include popups/sockets.yaml
# hold_action:
# action: navigate
- type: custom:button-card
entity: sensor.number_of_doors_open
template:
- custom_card_andyblac_count_info
- custom_popup_andyblac_tap
variables:
ulm_custom_card_andyblac_count_info_color_on: blue
popup_title: "Doors"
popup_content: !include popups/doors.yaml
- type: custom:button-card
entity: sensor.number_of_motion_detected
template:
- custom_card_andyblac_count_info
- custom_popup_andyblac_tap
variables:
ulm_custom_card_andyblac_count_info_color_on: blue
popup_title: "Motion"
popup_content: !include popups/motion.yaml
- type: custom:button-card
entity: sensor.devices_with_low_battery
template:
- custom_card_andyblac_count_info
- custom_popup_andyblac_tap
variables:
ulm_custom_card_andyblac_count_info_color_on: blue
popup_title: "Low Batteries"
popup_content: !include popups/battery.yaml
for individual room
- type: custom:mushroom-chips-card
view_layout:
grid-area: header
chips:
- type: back
- type: entity
entity: binary_sensor.office_door_contact
content_info: none
tap_action:
action: more-info
- type: entity
entity: sensor.wiser_lts_temperature_office
- type: template
icon: mdi:power-socket-uk
content: "{{ state_attr('sensor.number_of_sockets_on', 'count')['Office'] }}"
- type: template
icon: mdi:lightbulb
content: "{{ state_attr('sensor.number_of_lights_on', 'count')['Office'] }}"
I love these room cards - it’s great that they’re so colourful. Any chance you could post your code?