šŸŒ» Lovelace UI ā€¢ Minimalist

@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? :slight_smile:

PS: Will send a PM in a few minutes. :slight_smile:

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 :slight_smile:

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. :slight_smile:

8 Likes

super-nice, release, please!

1 Like

I am interested :pray:

1 Like

Can I ask what ā€œlocalisationā€ means in this sense?

Iā€™d translate it to ā€œlocationā€ in the meaning of presence detection. :slight_smile:

1 Like

Hey, how do you set up ā€œsensor.people_count_presentā€ ?

Have this error :slight_smile:

I use Life360 for myself and Iphone tracker for my wife

tben posted his solution a few days ago. :slightly_smiling_face:


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. :slight_smile: :wink: It is going forward, but not all things are cleared right now. :slight_smile: Shouldnā€™t take too long from this point on. :slight_smile:

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;...'

That case isnā€™t handled in this example. The template definition from icon_info_bg needs an entity set to work correctly.

Change the code to set the entity as a variable. If you set the entity as ā€œentityā€ in button-card, you will break the design.

I can post a solution later this day, Iā€™m in a hurry. :slight_smile:

Please share an example when you have some more time since i dont know how to set the entity as variable

Need some help my friends with my conditional cards. My second card does not show even that it should(what i think)
I think it shows behind the first conditional but i might be wrong.
Solved!