diff --git a/custom_cards/custom_card_person_info_small/README.md b/custom_cards/custom_card_person_info_small/README.md new file mode 100644 index 000000000..ef9c16bcd --- /dev/null +++ b/custom_cards/custom_card_person_info_small/README.md @@ -0,0 +1,57 @@ +--- +title: Person Info Card +--- + + + +## Description + +![Person Info](../../docs/assets/img/custom_card_person_info_small_dark.png) +![Person Info](../../docs/assets/img/custom_card_person_info_small_light.png) + +The `custom_card_person_info_small` is based on `card_person_info`. + +## Credits + +- Author: Imaginelenses <@imaginelenses> +- Based on [person info card](https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_person_info/#variables) by Jordan Janzen <@jordandrako> +- Version: 1.0.0 + +## Variables + +| Variable | Default | Required | Notes | +| -------------------------------------------- | -------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| ulm_card_person_entity | | :material-check: | The person entity | +| ulm_card_person_use_entity_picture | true | :material-close: | If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false. | +| ulm_card_person_zone1 | | :material-close: | Set another zone (beside "home") to use for the card. You can set up two zones besides "home". | +| ulm_card_person_zone2 | | :material-close: | Set another zone (beside "home") to use for the card. You can set up two zones besides "home". | +| ulm_address | | :material-close: | Show an address as label, add an entity with a geo location | +| ulm_card_person_driving_entity | | :material-close: | Set a binary sensor that depicts when this person is driving | +| ulm_card_person_battery_entity | | :material-close: | Set a battery level sensor | +| ulm_card_person_battery_state_entity | | :material-close: | Set a battery state sensor (eg the battery state sensor from the home assistant companion app will have the states "charging" or "discharging") | +| ulm_card_battery_battery_level_danger | 15 | :material-close: | Changes the color of the Icon, if the battery level falls below the provided value. Must be higher than ulm_card_battery_battery_level_waring +| ulm_card_battery_battery_level_waring | 30 | :material-close: | Changes the color of the Icon, if the battery level falls below the provided value. +| ulm_card_battery_color_battery_level_danger | var(--google-red) | :material-close: | Color of icon if battery level is within the 'danger' zone. +| ulm_card_battery_color_battery_level_warning | var(--google-yellow) | :material-close: | Color of icon if battery level is within the 'warning' zone. +| ulm_card_battery_color_battery_level_ok | var(--google-green) | :material-close: | Color of icon if battery level is not within the 'danger' or 'warning' zone. + +## Usage + +```yaml +- type: "custom:button-card" + template: card_person_info_small + variables: + ulm_card_person_entity: person.imaginelenses + ulm_card_person_zone1: zone.work + ulm_card_person_driving_entity: binary_sensor.driving + ulm_card_person_battery_entity: sensor.phone_battery_level + ulm_card_person_battery_state_entity: sensor.phone_battery_state +``` + +## Template Code + +??? note "Template Code" + + ```yaml title="custom_card_person_info_small.yaml" + --8<-- "custom_cards/custom_card_person_info_small/custom_card_person_info_small.yaml" + ``` diff --git a/custom_cards/custom_card_person_info_small/custom_card_person_info_small.yaml b/custom_cards/custom_card_person_info_small/custom_card_person_info_small.yaml new file mode 100644 index 000000000..b593518c0 --- /dev/null +++ b/custom_cards/custom_card_person_info_small/custom_card_person_info_small.yaml @@ -0,0 +1,148 @@ +--- +card_person_info_small: + template: + - "icon_info_bg" + - "ulm_translation_engine" + variables: + ulm_card_person_use_entity_picture: true + ulm_card_person_zone1: "" + ulm_card_person_zone2: "" + ulm_card_person_icon: "mdi:face-man" + ulm_address: "" + ulm_address_locality: "" + ulm_card_person_driving_entity: "" + ulm_card_person_battery_entity: "" + ulm_card_person_battery_state_entity: "" + ulm_card_battery_battery_level_danger: 15 + ulm_card_battery_battery_level_warning: 30 + ulm_card_battery_color_battery_level_danger: "var(--google-red)" + ulm_card_battery_color_battery_level_warning: "var(--google-yellow)" + ulm_card_battery_color_battery_level_ok: "var(--google-green)" + triggers_update: "all" + tap_action: + action: "more-info" + entity: "[[[ return variables.ulm_card_person_entity; ]]]" + hold_action: + action: "more-info" + entity: "[[[ return variables.ulm_card_person_battery_entity; ]]]" + show_label: true + show_name: true + label: > + [[[ + if (variables.ulm_address){ + return states[variables.ulm_address].state; + } else if (variables.ulm_address_locality){ + return states[variables.ulm_address_locality].attributes.Locality; + } + else if (states[variables.ulm_card_person_driving_entity]?.state === "on") { + let state = states[variables.ulm_card_person_entity].state; + return `Driving - ${variables.ulm_translation_state}`; + } else { + let state = states[variables.ulm_card_person_entity].state; + return hass.resources[hass["language"]]["component.person.entity_component._.state." + state] ? hass.resources[hass["language"]]["component.person.entity_component._.state." + state] : state; + } + ]]] + name: "[[[ return states[variables.ulm_card_person_entity].attributes.friendly_name ]]]" + entity: "[[[ return variables.ulm_card_person_entity; ]]]" + icon: "[[[ return variables.ulm_card_person_icon; ]]]" + show_entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ]]]" + entity_picture: + "[[[ return variables.ulm_card_person_use_entity_picture != false ? states[variables.ulm_card_person_entity].attributes.entity_picture\ + \ : null ]]]" + styles: + grid: + - grid-template-areas: "'i battery' 'n n' 'l l'" + icon: + - color: "rgba(var(--color-theme),0.9)" + - width: "42px" + - place-self: "start" + name: + - place-self: "center" + - margin-left: 0 + - margin-top: "6%" + label: + - place-self: "center" + - margin-left: 0 + - text-transform: "capitalize" + custom_fields: + notification: + - position: "absolute" + - top: "7%" + - left: "38px" + - height: "16px" + - width: "16px" + - border: "2px solid var(--card-background-color)" + - border-radius: "50%" + - font-size: "12px" + - line-height: "14px" + - background-color: > + [[[ + if (states[variables.ulm_card_person_entity].state == 'home') { + return "rgba(var(--color-blue),1)"; + } else { + return "rgba(var(--color-yellow),1)"; + } + ]]] + battery: + - width: "30px" + - height: "30px" + - place-self: "end" + - align-self: "center" + - background-color: "rgba(var(--primary-background-color), 0.5)" + - border: "2px solid var(--card-background-color)" + - border-radius: "50%" + + custom_fields: + notification: > + [[[ + let height = "11px"; + let width = "11px"; + if (states[variables.ulm_card_person_entity].state !== 'home') { + if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone1]?.attributes?.friendly_name) { + var icon = states[variables.ulm_card_person_zone1].attributes.icon !== null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle' + return ``; + } else if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone2]?.attributes?.friendly_name) { + var icon = states[variables.ulm_card_person_zone2].attributes.icon !== null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle' + return ``; + } else { + return ``; + } + } else { + return ``; + } + ]]] + battery: > + [[[ + if (states[variables.ulm_card_person_battery_entity]?.state) { + let battery_level = states[variables.ulm_card_person_battery_entity]?.state; + battery_level = Number(battery_level); + let charging = states[variables.ulm_card_person_battery_state_entity]?.state.toLowerCase() === "charging"; + + var infix = charging ? "-charging" : "" + let icon = "mdi:help-circle-outline"; + if (battery_level == 100) { + icon = "mdi:battery"; + } else if (battery_level < 10) { + icon = "mdi:battery" + infix + "-outline"; + } else if (battery_level == "unknown" || battery_level == "unavailable") { + icon = "mdi:battery-off"; + } else { + icon = "mdi:battery" + infix + "-" + Math.floor(battery_level / 10) * 10; + } + + let color = variables.ulm_card_battery_color_battery_level_ok; + if (battery_level !== "unavailable") { + if (battery_level <= variables.ulm_card_battery_battery_level_danger) { + color = variables.ulm_card_battery_color_battery_level_danger; + } else if (battery_level <= variables.ulm_card_battery_battery_level_warning) { + color = variables.ulm_card_battery_color_battery_level_warning; + } else { + color = variables.ulm_card_battery_color_battery_level_ok; + } + } + + return ` + + `; + } + ]]] diff --git a/docs/assets/img/custom_card_person_info_small_dark.png b/docs/assets/img/custom_card_person_info_small_dark.png new file mode 100644 index 000000000..36ec3c6a9 Binary files /dev/null and b/docs/assets/img/custom_card_person_info_small_dark.png differ diff --git a/docs/assets/img/custom_card_person_info_small_light.png b/docs/assets/img/custom_card_person_info_small_light.png new file mode 100644 index 000000000..aeabb5fc1 Binary files /dev/null and b/docs/assets/img/custom_card_person_info_small_light.png differ