As this could be a bit more extensive, it could be easier, when you start with some info if you know custom!button-card and which mode (yaml, storage or ui) you are using.
1 Like
Iām using default mode because I donāt have experience with yaml. Is there a possibility to use this without switching to yaml?
The problem I have is the following. After following the three installation steps, when I copy one of the example cards I have an error of templates are missing.
Thank you!
This is possible, but not very clear due to the extensive code. If this does not bother you, simply copy the template code you want to use into the raw config above the first line views: The template code must begin with button_card_templates: (no indentation), the rest has to be indentated, for example:
button_card_templates:
icon:
color: var(--google-grey)
show_icon: true
show_name: false
show_label: false
size: 20px
custom_fields:
notification: >
ā¦
Which template you need is shown in the error notice: ā Template blablabla is missing!ā
@pedolsky I havenāt tried that (yet), but shouldnāt it be possible, to just copy the link to the template files in the āraw config editorā? Or does the complete template have to be copied into? 
PS: Will send a PM in a few minutes.
EDIT: Canāt send a PM to youā¦? Is there a way to contact you, maybe you sending a PM and I can respond?
I have setup this with UI mode and can share my raw config if you are interested.
1 Like
Unfortunately, currently it seems not possible to use !include in ui dashboards, here is a feature request: https://community.home-assistant.io/t/ability-to-use-include-directives-in-ui-editor/336167
Mmh, strange, in my settings pm from other users is allowed. I will try to pm you.
Oh great! Can you send me a PM? I appreciate you.
Hi, I would be interested too. In particular Iām looking for some help to set up the localisation tab and the sensor for present/absent chip
It still is a work in progress but it will give you a good start point to work with.
For scenes setup like @tben i have setup automation in shortcuts on my iOS device. (Tasker only work in Android)
Automations are setup so it will call an action in HA app when i leave/arrive home/work.
Just ask and i all give some example on that also.
Paste this in an empty Lovelace dashboard - Lovelace UI ā¢ Minimalist - Pastebin.com
All the credits goes to @tben, i have only copy and paste his great work
Update1.
Mobile themes code. Create a folder in themes folder called mobile. Create an yaml file with name mobile.yaml. Paste this - Lovelace UI ā¢ Minimalist - Mobile themes - Pastebin.com
Desktop themes code. Create a folder in themes folder called desktop. Create an yaml file with name desktop.yaml. Paste this - Lovelace UI ā¢ Minimalist Desktop theme - Pastebin.com
Have an happy tuesday
1 Like
Hello all,
I just created a alarm clock UI, I find it easier than using the keyboard.
If there is any interest, I would clean up the code and share it here.
8 Likes
super-nice, release, please!
1 Like
I am interested 
1 Like
Can I ask what ālocalisationā means in this sense?
Iād translate it to ālocationā in the meaning of presence detection.
1 Like
Hey, how do you set up āsensor.people_count_presentā ?
Have this error
I use Life360 for myself and Iphone tracker for my wife
Since I like to work with NodeRed the alarm was implemented with it, of course this would also be possible with HomeAssistant automations but I prefer NodeRed simpler and more practical.
You need some helpers for this. These are created under: Configuration > Helpers.
Time Helper:
- control_alarm_clock
Dropdown Helper:
- control_alarm_clock_status
Counter Helper:
- control_alarm_clock_minute_counter
- control_alarm_clock_hour_counter
Toggle Helper:
- alarm_clock_counter_minute_plus
- alarm_clock_counter_minute_minus
- alarm_clock_counter_hour_plus
- alarm_clock_counter_hour_minus
The View and the Node Red Flow:
view_alarm_clock.yaml:
- icon: mdi:alarm
badges: []
cards:
- cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Alarm
template: title
double_tap_action:
action: call-service
confirmation:
text: double
- type: horizontal-stack
cards:
- template: edge
type: custom:button-card
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- entity: input_boolean.alarm_clock_counter_hour_plus
template:
- icon_info_bg
- outlet
type: custom:button-card
name: ' '
label: Hour
tap_action:
action: toggle
- entity: input_boolean.alarm_clock_counter_hour_minus
template:
- icon_info_bg
- outlet
type: custom:button-card
name: ' '
label: Hour
tap_action:
action: toggle
- type: vertical-stack
cards:
- entity: input_boolean.control_alarm_clock
template:
- icon_info_bg
- outlet
type: custom:button-card
name: Alarm
label: |
[[[
return states['input_datetime.control_alarm_clock'].state;
]]]
tap_action:
action: toggle
- entity: input_select.control_alarm_clock_status
template:
- icon_info_bg
- outlet
type: custom:button-card
name: Status
label: |
[[[
return states['input_select.control_alarm_clock_status'].state;
]]]
- type: vertical-stack
cards:
- entity: input_boolean.alarm_clock_counter_minute_plus
template:
- icon_info_bg
- outlet
type: custom:button-card
name: ' '
label: Minute
tap_action:
action: toggle
- entity: input_boolean.alarm_clock_counter_minute_minus
template:
- icon_info_bg
- outlet
type: custom:button-card
name: ' '
label: Minute
tap_action:
action: toggle
- template: edge
type: custom:button-card
type: vertical-stack
NodeRed flow.json:
[
{
"id": "d8bc2cec8cc75d72",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "",
"server": "4bbca37b.1700ec",
"version": 3,
"debugenabled": false,
"service_domain": "input_datetime",
"service": "set_datetime",
"entityId": "input_datetime.control_alarm_clock",
"data": "{\"entity_id\":\"input_datetime.control_alarm_clock\",\"time\":\"{{ time }}\"}",
"dataType": "json",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 1620,
"y": 440,
"wires": [
[]
]
},
{
"id": "c2842c07fd1a2c05",
"type": "api-current-state",
"z": "bc22c480e12e0600",
"name": "Minute Counter",
"server": "707fb62d.6e7a88",
"version": 2,
"outputs": 1,
"halt_if": "",
"halt_if_type": "str",
"halt_if_compare": "is",
"entity_id": "counter.control_morgen_wecker_minute_counter",
"state_type": "str",
"blockInputOverrides": false,
"outputProperties": [
{
"property": "payload",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
},
{
"property": "data",
"propertyType": "msg",
"value": "",
"valueType": "entity"
},
{
"property": "minute",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
}
],
"override_topic": false,
"state_location": "payload",
"override_payload": "msg",
"entity_location": "data",
"override_data": "msg",
"x": 1080,
"y": 440,
"wires": [
[
"37db83f5b386feca"
]
]
},
{
"id": "f9c0e0678b2f794e",
"type": "api-current-state",
"z": "bc22c480e12e0600",
"name": "Hour Counter",
"server": "707fb62d.6e7a88",
"version": 2,
"outputs": 1,
"halt_if": "",
"halt_if_type": "str",
"halt_if_compare": "is",
"entity_id": "counter.control_alarm_clock_hour_counter",
"state_type": "str",
"blockInputOverrides": false,
"outputProperties": [
{
"property": "payload",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
},
{
"property": "data",
"propertyType": "msg",
"value": "",
"valueType": "entity"
},
{
"property": "hour",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
}
],
"override_topic": false,
"state_location": "payload",
"override_payload": "msg",
"entity_location": "data",
"override_data": "msg",
"x": 880,
"y": 440,
"wires": [
[
"c2842c07fd1a2c05"
]
]
},
{
"id": "37db83f5b386feca",
"type": "function",
"z": "bc22c480e12e0600",
"name": "Merge Time",
"func": "var newTime = \"New Alarm Clock Time\";\n\nnewTime = msg.hour + \":\" + msg.minute;\nmsg.time = newTime;\n\nreturn msg;\n\n\n// D0doooh from blog.xonatec.ch",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1310,
"y": 440,
"wires": [
[
"d8bc2cec8cc75d72"
]
]
},
{
"id": "23fa339f84e3d45e",
"type": "server-state-changed",
"z": "bc22c480e12e0600",
"name": "hour plus",
"server": "707fb62d.6e7a88",
"version": 3,
"exposeToHomeAssistant": false,
"haConfig": [
{
"property": "name",
"value": ""
},
{
"property": "icon",
"value": ""
}
],
"entityidfilter": "input_boolean.alarm_clock_counter_hour_plus",
"entityidfiltertype": "exact",
"outputinitially": false,
"state_type": "str",
"haltifstate": "on",
"halt_if_type": "str",
"halt_if_compare": "is",
"outputs": 2,
"output_only_on_state_change": true,
"for": 0,
"forType": "num",
"forUnits": "minutes",
"ignorePrevStateNull": false,
"ignorePrevStateUnknown": false,
"ignorePrevStateUnavailable": false,
"ignoreCurrentStateUnknown": false,
"ignoreCurrentStateUnavailable": false,
"outputProperties": [
{
"property": "payload",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
},
{
"property": "data",
"propertyType": "msg",
"value": "",
"valueType": "eventData"
},
{
"property": "topic",
"propertyType": "msg",
"value": "",
"valueType": "triggerId"
}
],
"x": 220,
"y": 200,
"wires": [
[
"27435f33b5d56346",
"e09c78909b1072ec"
],
[]
]
},
{
"id": "3e5d365e7ea908e8",
"type": "server-state-changed",
"z": "bc22c480e12e0600",
"name": "hour minus",
"server": "707fb62d.6e7a88",
"version": 3,
"exposeToHomeAssistant": false,
"haConfig": [
{
"property": "name",
"value": ""
},
{
"property": "icon",
"value": ""
}
],
"entityidfilter": "input_boolean.alarm_clock_counter_hour_minus",
"entityidfiltertype": "exact",
"outputinitially": false,
"state_type": "str",
"haltifstate": "on",
"halt_if_type": "str",
"halt_if_compare": "is",
"outputs": 2,
"output_only_on_state_change": true,
"for": 0,
"forType": "num",
"forUnits": "minutes",
"ignorePrevStateNull": false,
"ignorePrevStateUnknown": false,
"ignorePrevStateUnavailable": false,
"ignoreCurrentStateUnknown": false,
"ignoreCurrentStateUnavailable": false,
"outputProperties": [
{
"property": "payload",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
},
{
"property": "data",
"propertyType": "msg",
"value": "",
"valueType": "eventData"
},
{
"property": "topic",
"propertyType": "msg",
"value": "",
"valueType": "triggerId"
}
],
"x": 220,
"y": 360,
"wires": [
[
"770a70af063796b2",
"5511ebfa738a2319"
],
[]
]
},
{
"id": "27435f33b5d56346",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "hour plus off",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "input_boolean",
"service": "turn_off",
"entityId": "input_boolean.alarm_clock_counter_hour_plus",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 210,
"y": 240,
"wires": [
[]
]
},
{
"id": "770a70af063796b2",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "hour plus off",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "input_boolean",
"service": "turn_off",
"entityId": "input_boolean.alarm_clock_counter_hour_minus",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 210,
"y": 400,
"wires": [
[]
]
},
{
"id": "e09c78909b1072ec",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "counter",
"service": "increment",
"entityId": "counter.control_alarm_clock_hour_counter",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 500,
"y": 200,
"wires": [
[
"f9c0e0678b2f794e"
]
]
},
{
"id": "5511ebfa738a2319",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "counter",
"service": "decrement",
"entityId": "counter.control_alarm_clock_hour_counter",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 510,
"y": 360,
"wires": [
[
"f9c0e0678b2f794e"
]
]
},
{
"id": "d973e869a3658ac8",
"type": "server-state-changed",
"z": "bc22c480e12e0600",
"name": "Minute plus",
"server": "707fb62d.6e7a88",
"version": 3,
"exposeToHomeAssistant": false,
"haConfig": [
{
"property": "name",
"value": ""
},
{
"property": "icon",
"value": ""
}
],
"entityidfilter": "input_boolean.alarm_clock_counter_minute_plus",
"entityidfiltertype": "exact",
"outputinitially": false,
"state_type": "str",
"haltifstate": "on",
"halt_if_type": "str",
"halt_if_compare": "is",
"outputs": 2,
"output_only_on_state_change": true,
"for": 0,
"forType": "num",
"forUnits": "minutes",
"ignorePrevStateNull": false,
"ignorePrevStateUnknown": false,
"ignorePrevStateUnavailable": false,
"ignoreCurrentStateUnknown": false,
"ignoreCurrentStateUnavailable": false,
"outputProperties": [
{
"property": "payload",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
},
{
"property": "data",
"propertyType": "msg",
"value": "",
"valueType": "eventData"
},
{
"property": "topic",
"propertyType": "msg",
"value": "",
"valueType": "triggerId"
}
],
"x": 230,
"y": 540,
"wires": [
[
"a9cb9aecf1da9875",
"98d7bb141e327313"
],
[]
]
},
{
"id": "20b4c719c9988d33",
"type": "server-state-changed",
"z": "bc22c480e12e0600",
"name": "Minute minus",
"server": "707fb62d.6e7a88",
"version": 3,
"exposeToHomeAssistant": false,
"haConfig": [
{
"property": "name",
"value": ""
},
{
"property": "icon",
"value": ""
}
],
"entityidfilter": "input_boolean.alarm_clock_counter_minute_minus",
"entityidfiltertype": "exact",
"outputinitially": false,
"state_type": "str",
"haltifstate": "on",
"halt_if_type": "str",
"halt_if_compare": "is",
"outputs": 2,
"output_only_on_state_change": true,
"for": 0,
"forType": "num",
"forUnits": "minutes",
"ignorePrevStateNull": false,
"ignorePrevStateUnknown": false,
"ignorePrevStateUnavailable": false,
"ignoreCurrentStateUnknown": false,
"ignoreCurrentStateUnavailable": false,
"outputProperties": [
{
"property": "payload",
"propertyType": "msg",
"value": "",
"valueType": "entityState"
},
{
"property": "data",
"propertyType": "msg",
"value": "",
"valueType": "eventData"
},
{
"property": "topic",
"propertyType": "msg",
"value": "",
"valueType": "triggerId"
}
],
"x": 230,
"y": 700,
"wires": [
[
"79ff82c54726aff9",
"09d5a56aa874110a"
],
[]
]
},
{
"id": "a9cb9aecf1da9875",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "minute plus off",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "input_boolean",
"service": "turn_off",
"entityId": "input_boolean.alarm_clock_counter_minute_plus",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 220,
"y": 580,
"wires": [
[]
]
},
{
"id": "79ff82c54726aff9",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "minute minus off",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "input_boolean",
"service": "turn_off",
"entityId": "input_boolean.alarm_clock_counter_minute_minus",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 230,
"y": 740,
"wires": [
[]
]
},
{
"id": "98d7bb141e327313",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "counter",
"service": "increment",
"entityId": "counter.control_alarm_clock_minute_counter",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 500,
"y": 540,
"wires": [
[
"f9c0e0678b2f794e"
]
]
},
{
"id": "09d5a56aa874110a",
"type": "api-call-service",
"z": "bc22c480e12e0600",
"name": "",
"server": "707fb62d.6e7a88",
"version": 3,
"debugenabled": false,
"service_domain": "counter",
"service": "decrement",
"entityId": "counter.control_alarm_clock_minute_counter",
"data": "",
"dataType": "jsonata",
"mergecontext": "",
"mustacheAltTags": false,
"outputProperties": [],
"queue": "none",
"x": 510,
"y": 700,
"wires": [
[
"f9c0e0678b2f794e"
]
]
},
{
"id": "4bbca37b.1700ec",
"type": "server",
"name": "Home Assistant",
"version": 1,
"addon": true,
"rejectUnauthorizedCerts": true,
"ha_boolean": "y|yes|true|on|home|open",
"connectionDelay": true,
"cacheJson": true
},
{
"id": "707fb62d.6e7a88",
"type": "server",
"name": "TRUE Home Assistant",
"version": 1,
"legacy": false,
"addon": true,
"rejectUnauthorizedCerts": true,
"ha_boolean": "y|yes|true|on|home|open",
"connectionDelay": true,
"cacheJson": true
}
]
9 Likes
Hi Patrick, should we still wait for the āthemeā or give it a go/continue with the current project?
Thanks for asking, if time is not critical for you. Iād say wait. 
It is going forward, but not all things are cleared right now. Shouldnāt take too long from this point on.
3 Likes
What did you do with the entity state if unavailable part from the icon_info template, since there are no entities connected to this example. Curious, because I experience the error if I donāt add an entity
ButtonCardJSTemplateError: TypeError: entity is undefined in 'if (entity.state =='unavailable'){ return `<ha-icon icon="mdi:exclamation" style="width: 12px;...'