Does anyone use the watchtower docker to update HASS? Or do you have some other method of updating the system from the update pane?
1 Like
Hello!
I can’t seem to be able to make live camera feed aspect ratio 1/1. I tried playing with card mod but no results.
Anyone tried doing something similar?
This is my what i have, all made using your help. Thank you for all the inspiration!
try this code for card_mod…
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2); /* card - rounded corners */
aspect-ratio: 1/1; /* card - square */
}
figure {
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
figcaption {
display: none; /* hide image caption */
}
img {
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
}
.btn {
top: 50% !important; /* center buttons */
}
.modal-content {
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
}
I finally fixed mine. Here’s how I did it:
I re-downloaded Plex Recently Downloaded and I opened the manifest.json file to ensure the version number is accurate. Should look like this:
{
"domain": "plex_recently_added",
"name": "Plex Recently Added",
"version": "0.3.8",
"documentation": "https://github.com/NemesisRE/sensor.plex_recently_added",
"issue_tracker": "https://github.com/NemesisRE/sensor.plex_recently_added",
"dependencies": [],
"codeowners": ["@maykar", "@NemesisRE"],
"requirements": [],
"iot_class": "local_polling"
}
That was step 1. Step 2 was opening logs and dealing specifically with any redundancies (ie, I had a “sensor” callout twice in my sensor.yaml.) These issues in the log weren’t enough to throw huge errors and prevent restarts, but they were messing with a few automations as well as this particular sensor.
I hope these helps you down the right path as well!
Also, none of my log errors were direct callouts of the Plex Recently Added component. So make sure you’re solving as much as you can in those log errors.
1 Like
Great! Can you share your config?
Hi,
I want to strech my sidebar the full window height, can’t get it to work.
margin-bottom has no effect. (top, left and right margin working perfect)
here is part of my sidebar css
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
min-height: 100vh;
}
grid-layout$hui-vertical-stack-card$: |
#root {
top: 0px;
left: 0px;
margin-top: -5px;
margin-bottom: -5px;
padding-left: 40px;
background-color: rgb(0, 0, 0);
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
@media screen and (max-width: 500px) {
#root {
display: none !important;
}
}
seems like the parent container of root has some margin.
can I target the root’s parent container hui-vertical-stack-card ?
Thank you very much for the suggestion
Unfortunately it doesn’t work, the only thing that it fixes is the margin radius that I had wrong.
Here is my code, maybe I did something wrong
- show_state: false
show_name: false
camera_view: live
type: picture-entity
camera_image: camera.front_cam
entity: camera.front_cam
aspect_ratio: 1/1
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2); /* card - rounded corners */
aspect-ratio: 1/1; /* card - square */
}
figure {
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
figcaption {
display: none; /* hide image caption */
}
img {
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
}
.btn {
top: 50% !important; /* center buttons */
}
.modal-content {
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
}
It seems like it doesn’t apply the properties to elements other than ha-card →
Thank you
I’d be happy to, but it’s not ready for that just yet.
Is there anything in particular you’re interested in?
Ok, I understand 
I’d like to see your popups. Especially for cameras and rooms. Sidebar and doorbell popup script would be nice too.
I’m searching for inspiration and I like your approach, too bad I can’t see it all 
Thanks, anyway 
hey guys,
anybody who has successfully replaced one of the custom button cards in the grid with a custom slider card? I don’t know how to adjust the height and width of the slider to match the other buttons.
thanks
simon
Updated since last post with some fine-tuning and new icons.
Rooms popup (dining_room.yaml)
Called from lovelace.yaml with ‘!include popup/dining_room.yaml’
action: fire-dom-event
browser_mod:
command: popup
title: Dining-room
style:
.: |
:host .content {
padding: 1.5em 1.5em 1.5em 1.5em;
}
:host .main-title {
pointer-events: none;
}
$: |
.mdc-dialog__surface {
background: transparent !important;
border-style: none !important;
border: 0px !important;
box-shadow: none;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
#grid-template-columns: 15vw # 510px
grid-template-rows: 1fr
grid-template-areas: |
"dining"
"dining"
mediaquery:
#phone
"(max-width: 800px)":
#grid-template-columns: 1fr
grid-template-rows: 1fr
grid-template-areas: |
"dining"
"dining"
#tablet
"(max-width: 2000px)":
#grid-template-columns: 1fr #20vw
grid-template-rows: 1fr
grid-template-areas: |
"dining"
"dining"
cards:
- type: grid
#title: Dining-room
view_layout:
grid-area: dining
columns: 2
cards:
- type: custom:button-card
entity: light.ecodim_dimmer_downlights_dining_room
name: Spots
template:
- light
- icon_light_recessed
- type: custom:button-card
entity: light.ecodim_dimmer_ceiling_dining_room
name: Ceiling
template:
- light
- icon_ceiling_dining
- type: custom:button-card
entity: vacuum.roborock_s6
name: Rolf
icon: phu:roborock
tap_action:
!include vacuum.yaml
hold_action:
!include vacuum.yaml
template:
- base
- icon_roborock
- type: custom:button-card
entity: light.vitrineskap
name: Cabinets
template:
- light
- icon_vitrineskap
Single camera popup (camera_single.yaml)
Called from lovelace.yaml with ‘!include popup/camera_single.yaml’
action: fire-dom-event
browser_mod:
command: popup
#hide_header: true
large: true
title: Cameras
style:
.: |
:host .main-title {
pointer-events: none;
}
$: |
.mdc-dialog__surface {
background: transparent !important;
border-style: none !important;
border: 0px !important;
box-shadow: none;
}
card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-gap: 0.4vw
grid-template-rows: 1000px
grid-template-areas: |
"cam"
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: 1.5vw
grid-template-columns: auto
grid-template-rows: auto
grid-template-areas: |
"cam"
#tablet
"(max-width: 2000px)":
grid-gap: 0.5vw
grid-template-areas: |
"cam"
cards:
- type: picture-entity
entity: >
[[[ return entity.entity_id ]]]
image: >
[[[ return entity.attributes.entity_picture ]]]
show_info: false
show_state: false
show_name: false
camera_view: live
view_layout:
grid-area: cam
Multiple cameras (cameras.yaml)
Called from lovelace.yaml with ‘!include popup/cameras.yaml’
action: fire-dom-event
browser_mod:
command: popup
#hide_header: true
large: true
title: Cameras
style:
.: |
:host .main-title {
pointer-events: none;
}
$: |
.mdc-dialog__surface {
background: transparent !important;
border-style: none !important;
border: 0px !important;
box-shadow: none;
}
card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-gap: 0.4vw
#grid-template-columns: 860px 860px
grid-template-rows: 540px 540px
grid-template-areas: |
"cam1 cam2"
"cam3 cam4"
mediaquery:
#hide_header: false
#phone
"(max-width: 800px)":
grid-gap: 1.5vw
grid-template-columns: auto
grid-template-rows: auto auto auto auto
grid-template-areas: |
"cam1"
"cam2"
"cam3"
"cam4"
#tablet
"(max-width: 2000px)":
grid-gap: 0.5vw
grid-template-rows: 23vw 23vw
grid-template-areas: |
"cam1 cam2"
"cam3 cam4"
cards:
- type: picture-entity
entity: camera.ringeklokke
aspect_ratio: 50%
show_info: false
show_state: false
show_name: false
camera_view: auto
view_layout:
grid-area: cam1
- type: picture-entity
entity: camera.inngangen
show_info: false
show_state: false
show_name: false
camera_view: auto
view_layout:
grid-area: cam2
- type: picture-entity
entity: camera.stua
show_info: false
show_state: false
show_name: false
camera_view: auto
view_layout:
grid-area: cam3
- type: picture-entity
entity: camera.verandaen
show_info: false
show_state: false
show_name: false
camera_view: auto
view_layout:
grid-area: cam4
Doorbell automation (automations.yaml)
- id: '1641495324562'
alias: Driveway - 5.1 - Doorbell Pressed
description: ''
trigger:
- platform: state
entity_id: binary_sensor.doorbell
from: 'off'
to: 'on'
id: pressed
condition:
- condition: template
value_template: '{{ ( as_timestamp(now()) - as_timestamp(state_attr("automation.driveway_5_1_doorbell","last_triggered"))
| int(0) ) > 30}}'
action:
- parallel:
- service: script.play_doorbell_chime
data: {}
- service: script.notify_doorbell_press
data: {}
- service: script.doorbell_dashboard_popup
data: {}
mode: single
Doorbell scripts called from automation
Chime audio played on SONOS speakers
play_doorbell_chime:
alias: Play Doorbell Chime
sequence:
- if:
- condition: state
entity_id: sensor.home_sleep_mode
state: 'on'
then:
- service: unifiprotect.set_doorbell_message
data:
entity_id: select.ringeklokke_doorbell_text
message: SLEEPING
duration: 30
else:
- if:
- condition: state
entity_id: sensor.home_winding_down
state: 'yes'
then:
- service: sonos.snapshot
data:
entity_id: all
- service: media_player.volume_set
data:
volume_level: 0.4
target:
entity_id:
- media_player.spisestua
- media_player.sonos_one_office
- service: media_player.play_media
data:
media_content_type: music
media_content_id: '{{states.sensor.base_url.state}}/local/sound/Chime.wav'
target:
entity_id:
- media_player.spisestua
- media_player.sonos_one_office
- delay:
hours: 0
minutes: 0
seconds: 4
milliseconds: 0
- service: sonos.restore
data:
entity_id: all
else:
- service: sonos.snapshot
data:
entity_id: all
- service: media_player.volume_set
data:
volume_level: 0.5
target:
entity_id:
- media_player.spisestua
- media_player.sonos_one_office
- service: media_player.play_media
data:
media_content_type: music
media_content_id: '{{states.sensor.base_url.state}}/local/sound/Chime.wav'
target:
entity_id:
- media_player.spisestua
- media_player.sonos_one_office
- delay:
hours: 0
minutes: 0
seconds: 4
milliseconds: 0
- service: sonos.restore
data:
entity_id: all
mode: single
icon: ios:bell-and-waveform-fill
Notifications sent to my PC and iPhone
notify_doorbell_press:
alias: Notify Doorbell Press
sequence:
- parallel:
- service: notify.mobile_app_iphone
data:
title: Doorbell
message: Someone rang the doorbell
data:
ttl: 0
priority: high
time-sensitive: 1
image: '{{ states.sensor.base_url.state }}{{ state_attr("camera.ringeklokke",
"entity_picture") }}'
attachment:
url: '{{ states.sensor.base_url.state }}{{ state_attr("camera.ringeklokke",
"entity_picture") }}'
- if:
- condition: state
entity_id: sensor.office_pc_real_session_state
state: Active
then:
- service: notify.sagasdesktop
data:
title: Doorbell
message: Someone rang the doorbell
data:
duration: 8
ttl: 0
priority: high
time-sensitive: 1
image: '{{ states.sensor.base_url.state }}{{ state_attr("camera.inngangen","entity_picture")
}}'
attachment:
url: '{{ states.sensor.base_url.state }}{{ state_attr("camera.inngangen","entity_picture")
}}'
mode: single
icon: ios:bell-fill
Popup on tablet
doorbell_dashboard_popup:
alias: Doorbell Dashboard Popup
sequence:
- service: light.turn_on
data: {}
target:
entity_id: light.galaxy_tab_a7_screen
- service: browser_mod.popup
data:
large: true
title: Doorbell
style:
$: ".mdc-dialog__surface {\n background: transparent !important;\n border-style:
none !important;\n border: 0px !important;\n box-shadow: none;\n}\n"
card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-gap: 0.4vw
grid-template-rows: 1000px
grid-template-areas: '". cam1 ."
'
mediaquery:
'(max-width: 800px)':
grid-gap: 1.5vw
grid-template-columns: auto
grid-template-rows: auto
grid-template-areas: '"cam1"
'
cards:
- type: picture-entity
entity: camera.inngangen
state_image: entity.attributes.entity_picture
show_info: false
show_state: false
show_name: false
camera_view: live
view_layout:
grid-area: cam1
- delay:
hours: 0
minutes: 2
seconds: 0
milliseconds: 0
- service: browser_mod.close_popup
data: {}
mode: single
icon: mdi:tablet-dashboard
Sidebar
- unique_id: sidebar
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: |
<span class="date">
<font color='#6a7377'><b>
{{- state_attr('sensor.fancy_date', 'week_day') }}<br>
{{- state_attr('sensor.fancy_date', 'short_date') }}
</b></font>
</span>
greet: |
<span class="greet">
{%- set time = now().hour %}
{%- if time <= 1 -%} <b>Good night</b> {{'💤'}}
{%- elif time <= 3 -%} <b>Good night</b> {{'😴'}}
{%- elif time <= 5 -%} <b>Good night</b> {{'😪'}}
{%- elif time <= 7 -%} <b>Good morning</b> {{'🧠'}}
{%- elif time <= 9 -%} <b>Good morning</b> {{'🤟'}}
{%- elif time <= 10 -%} <b>Good morning</b> {{'😘'}}
{%- elif time <= 13 -%} <b>Good day</b> {{'😍'}}
{%- elif time <= 15 -%} <b>Good day</b> {{'😏'}}
{%- elif time <= 17 -%} <b>Good day</b> {{'🖖'}}
{%- elif time <= 19 -%} <b>Good evening</b> {{'🤩'}}
{%- elif time <= 22 -%} <b>Good evening</b> {{'🤗'}}
{%- elif time <= 23 -%} <b>Good night</b> {{'🤫'}}
{%- else %} <b>Good night</b> {{'🤫'}}
{%- endif -%}
</span>
weather: |
{%- set temperature = states('sensor.netatmo_hjemme_weather_station_outdoor_module_temperature') %}
{%- set apparent = states('sensor.netatmo_hjemme_weather_station_outdoor_module_temperature') | round %}
{%- set precip = states('sensor.pirateweather_precip_probability') | round %}
{% if states.sensor.netatmo_hjemme_weather_station_outdoor_module_temperature.state %}
{%- if temperature | float(default=0) <= 0.0 -%}
It feels like {{ apparent }}° with {{ precip }}% risk for snow {{'\u2744\uFE0F'}}
{%- elif temperature | float(default=0) > 0.0 -%}
It feels like {{ apparent }}° with {{ precip }}% risk for rain {{ '\u2614\uFE0F' if precip > 30 }}
{%- endif %}
{%- else %}
Can't gather weather info...
{%- endif %}
occasion: |
{%- set occasion = states.sensor.special_occasions.state %}
{%- if occasion == "New year" -%} {{'🎉'}} <b>Happy new year!!</b>
{%- elif occasion == "Christmas" -%} {{'🎄'}} <b>Merry Christmas!</b> {{'🎅🏼'}}
{%- elif "Pappa" in occasion -%} {{'🎂'}} <b>Special occasion!</b><br>It's dad's birthday <strong>today</strong>! He turns {{now().strftime('%Y') | round(0) - 1961}}</b> {{'👴'}}
{%- elif "Mamma" in occasion -%} {{'🎂'}} <b>Special occasion!</b><br>It's mom's birthday <strong>today</strong>! She turns {{now().strftime('%Y') | round(0) - 1968}}</b> {{'👵'}}
{%- elif "Birthday" in occasion -%} {{'🎂'}} <b>Happy birthday, André!!</b>
{%- elif "Constitution" in occasion -%} {{'🤝🏼'}} <b>Happy birthday, Norway!</b>
{%- elif "Mother" in occasion -%} {{'🎖️'}} <b>Remember Mother's day's today!</b>
{%- elif "Father" in occasion -%} {{'🎖️'}} <b>Remember Father's day's today!</b>
{%- endif %}
active: |
{%- set lights = [
states.light.kommode,
states.light.hue_color_trapp_kommode,
states.light.vitrineskap,
states.light.ecodim_dimmer_kitchen_cabinets,
states.light.ecodim_dimmer_downlights_kitchen,
states.light.ecodim_dimmer_downlights_hallway,
states.light.ecodim_dimmer_ceiling_dining_room,
states.light.ecodim_dimmer_downlights_dining_room,
states.light.ecodim_dimmer_downlights_living_room,
states.light.ecodim_dimmer_downlights_bathroom,
states.light.ecodim_dimmer_downlights_wc,
states.light.hue_fair_ceiling_office,
states.light.superman_symbol,
states.light.hue_play_1,
states.light.hue_play_2,
states.light.ecodim_dimmer_ceiling_bedroom
] %}
{%- set switches = [
states.media_player.lg_tv_77,
states.media_player.lg_tv_55,
states.switch.office_pc
] %}
{%- set media_players = [
states.media_player.apple_tv_1,
states.media_player.apple_tv_2,
states.media_player.shield,
states.media_player.sonos_connect_stua,
states.media_player.spisestua,
states.media_player.play_one_2,
states.media_player.badet
] %}
{%- set lights_on = lights | selectattr('state','eq','on') | list %}
{%- set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{%- set switches_on = switches | selectattr('state','eq','on') | list %}
{%- set media_players_playing = media_players | selectattr('state','eq','playing') | list %}
{%- set append = switches_on + media_players_playing %}
{%- set switches_name = append | map(attribute='name') | join(', ') %}
{%- if (lights_on | length == 0) and (switches_on | length > 0) -%}
<b>{{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} is on</b>
{%- elif (lights_on | length == 1) and (switches_on | length == 1) -%}
<b>{{ lights_name }} and {{switches_name }} is on</b>
{%- elif (lights_on | length == 1) and (switches_on | length > 1) -%}
<b>{{ lights_name }}, {{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} is on</b>
{%- elif (lights_on | length > 1) and (switches_on | length == 1) -%}
<b>{{ lights_on | length }} lights and {{ switches_name }} are on</b>
{%- elif (lights_on | length > 1) and (switches_on | length > 1) -%}
<b>{{ lights_on | length }} lights, {{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} are on</b>
{%- elif (lights_on | length == 1) and (switches_on | length == 0) -%}
{{'💡'}} <b>{{ lights_name }} is on</b>
{%- elif (lights_on | length > 1) and (switches_on | length == 0) -%}
{{'💡'}} <b>{{ lights_on | length }} lights are on</b>
{%- else %}
<b><font color='#6a7377'>Everything is off</font></b>
{%- endif -%}
power: |
{%- set nordpool = states('sensor.nordpool') %}
{% if nordpool not in ['unavailable', 'unknown'] %}
{%- set elprice = states('sensor.nordpool') | round(2) %}
{% if elprice >= 5 -%} {{'⚡'}} price is: <strong>{{ elprice }}</strong>,- {{'🚀'}}
{%- elif elprice >= 4 -%} {{'⚡'}} price is: <strong>{{ elprice }}</strong>,- {{'📈'}}
{%- elif elprice >= 3 -%} {{'⚡'}} price is: <strong>{{ elprice }}</strong>,- {{'💰'}}
{%- elif elprice >= 2 -%} {{'⚡'}} price is: <strong>{{ elprice }}</strong>,- {{'💸'}}
{%- elif elprice >= 1 -%} {{'⚡'}} price is: <strong>{{ elprice }}</strong>,-
{%- endif %}
{%- endif %}
battery: |
{% set entities = states.sensor
| selectattr('entity_id', 'search', 'battery')
| rejectattr('entity_id', 'search', 'iphone')
| map(attribute = 'entity_id') | list %}
{%- for sensor in entities if states(sensor) != 'unknown' and states(sensor) != 'Not Charging' and
states(sensor) != 'unavailable' and states(sensor) != 'None' and states(sensor) | int(default=0) <= 10 %}
{%- if loop.first %} {{-'\u26A0\uFE0F'}} {% else %}, {% endif -%}
{{ state_attr(sensor, 'friendly_name') }}: {% if states(sensor) | int(default=0) == 0 %}<strong>dead</strong>{% else %}{{ states(sensor) }}%{% endif -%}
{%- endfor %}
plex: |
{% if states.switch.wol_plex.state != 'on' -%}
{{-'\u26A0\uFE0F'}} Plex is down...
{%- endif %}
nas: |
{% if states.binary_sensor.ping_rackstation.state != 'on' -%}
{{-'\u26A0\uFE0F'}} RackStation is down...
{%- endif %}
{% if states.binary_sensor.ping_diskstation.state != 'on' -%}
{{-'\u26A0\uFE0F'}} DiskStation is down...
{%- endif %}
waste: |
{%- if states.sensor.waste_pickup.state != 'off' -%}
{%- set time = now().hour %}
{%- set today = state_attr('sensor.waste_pickup','today') %}
{%- set waste_today = today | join(', ')%}
{%- set tomorrow = state_attr('sensor.waste_pickup','tomorrow') %}
{%- set waste_tomorrow = tomorrow | join(', ')%}
{%- if waste_tomorrow != "nothing" -%} The <strong>{{waste_tomorrow | regex_replace(',([^,]*)$',' and\\1')}}</strong> waste gets picked up <strong>tomorrow</strong>
{%- elif waste_today != "nothing" -%}
{%- if time <= 7 -%}
The <strong>{{waste_today | regex_replace(',([^,]*)$',' and\\1')}}</strong> waste<br> gets picked up <strong>today</strong>
{%- endif %}
{%- endif %}
{%- endif %}
Let me know if you’re missing something
18 Likes
Thanks for sharing … great work.
What kind of tablet you are using ?
Thx
Amazing… would you share the code for the garage, the door lock, the cameras and the bathroom?
how did you setup the occasion sensor?
and show more pictures from the footer popups like Home Assistant, Tablet etc…
Galaxy Tab A7
1 Like
Sure. Here you go:
Door lock/handle
icon_aqara_lock:
styles:
custom_fields:
icon:
- width: 90%
- margin-left: -20%
- margin-top: 1%
custom_fields:
icon: >
[[[
let style = `
<style>
@keyframes icon {
from {
fill: red;
}
to {
fill: transparent;
}
}
.icon{
animation: icon 1s infinite linear;
}
</style>
`,
paths = `
<g id="lock">
<path id="lockBody" d="M21.9407 1.60696H16.3609C15.181 1.60696 14.2245 2.56344 14.2245 3.74331V46.2411C14.2245 47.4209 15.181 48.3774 16.3609 48.3774H21.9407C23.1206 48.3774 24.077 47.4209 24.077 46.2411V3.74331C24.077 2.56344 23.1206 1.60696 21.9407 1.60696Z" fill="#333333"/>
<path id="touchPad" d="M21.9616 2.00684H16.34C15.3871 2.00684 14.6146 2.77934 14.6146 3.73226V36.2022C14.6146 37.1552 15.3871 37.9277 16.34 37.9277H21.9616C22.9145 37.9277 23.687 37.1552 23.687 36.2022V3.73226C23.687 2.77934 22.9145 2.00684 21.9616 2.00684Z" fill="#1A1A1A"/>
<path id="ringLight" d="M19.1493 27.2063C20.3207 27.2063 21.2703 26.2567 21.2703 25.0853C21.2703 23.9139 20.3207 22.9643 19.1493 22.9643C17.9779 22.9643 17.0283 23.9139 17.0283 25.0853C17.0283 26.2567 17.9779 27.2063 19.1493 27.2063Z" fill="#1E1E1E"/>
<g id="handle">
<path id="handleBody" d="M33.874 23.246H19.2371C18.187 23.246 17.3356 24.0606 17.3356 25.0654C17.3356 26.0703 18.187 26.8848 19.2371 26.8848H33.874C34.9241 26.8848 35.7755 26.0703 35.7755 25.0654C35.7755 24.0606 34.9241 23.246 33.874 23.246Z" fill="#333333"/>
<path id="ringerSensor" d="M19.4841 24.1373H18.7891C18.2987 24.1373 17.9011 24.5349 17.9011 25.0253V25.1425C17.9011 25.6329 18.2987 26.0305 18.7891 26.0305H19.4841C19.9745 26.0305 20.372 25.6329 20.372 25.1425V25.0253C20.372 24.5349 19.9745 24.1373 19.4841 24.1373Z" fill="#1A1A1A"/>
</g>
</g>
<g id="lockIcon">
<path id="icon" d="M16.9109 15.157C16.84 15.1632 16.7768 15.1991 16.7356 15.2564C16.7281 15.2669 16.7219 15.2773 16.7155 15.2903C16.706 15.3096 16.7 15.3269 16.6958 15.3472C16.6909 15.3713 16.6905 15.3803 16.6905 15.4631V15.5309H16.6602H16.6299V15.7695V16.0081H16.9281H17.2262V15.7695V15.5309H17.198H17.1697V15.4582C17.1697 15.4155 17.1694 15.3822 17.169 15.3775C17.1649 15.3279 17.1475 15.2842 17.1162 15.2451C17.1093 15.2365 17.0894 15.2165 17.0808 15.2097C17.044 15.1804 17.0046 15.1637 16.958 15.1578C16.9481 15.1566 16.9206 15.1561 16.9109 15.157ZM16.9397 15.2507C16.9809 15.2541 17.0153 15.2716 17.0419 15.303C17.0554 15.3189 17.066 15.3396 17.0711 15.3605C17.0754 15.378 17.0753 15.375 17.0756 15.4565L17.076 15.5309H16.9305H16.785V15.4575C16.785 15.379 16.785 15.3788 16.7884 15.3637C16.7917 15.3485 16.8002 15.3287 16.8086 15.3159C16.8295 15.2848 16.8609 15.2627 16.8965 15.2544C16.9124 15.2507 16.9254 15.2496 16.9397 15.2507Z" fill="#1A1A1A" fill-opacity="0.894118"/>
</g>
`;
if (variables.state === 'on' && variables.timeout < 2000) {
return `
<svg viewBox="0 0 50 50">
${style}
${paths}
</svg>
`;
}
return variables.state === 'on' && variables.timeout > 2000 ? `
<svg viewBox="0 0 50 50">
${paths}
</svg>
` : `
<svg viewBox="0 0 50 50">
<g id="lock">
<path id="lockBody" fill="#9DA0A2" d="M21.9407 1.60696H16.3609C15.181 1.60696 14.2245 2.56344 14.2245 3.74331V46.2411C14.2245 47.4209 15.181 48.3774 16.3609 48.3774H21.9407C23.1206 48.3774 24.077 47.4209 24.077 46.2411V3.74331C24.077 2.56344 23.1206 1.60696 21.9407 1.60696Z"/>
<path id="touchPad" fill="#535353" d="M21.9616 2.00684H16.34C15.3871 2.00684 14.6146 2.77934 14.6146 3.73226V36.2022C14.6146 37.1552 15.3871 37.9277 16.34 37.9277H21.9616C22.9145 37.9277 23.687 37.1552 23.687 36.2022V3.73226C23.687 2.77934 22.9145 2.00684 21.9616 2.00684Z"/>
<path id="ringLight" fill="#535353" d="M19.1493 27.2063C20.3207 27.2063 21.2703 26.2567 21.2703 25.0853C21.2703 23.9139 20.3207 22.9643 19.1493 22.9643C17.9779 22.9643 17.0283 23.9139 17.0283 25.0853C17.0283 26.2567 17.9779 27.2063 19.1493 27.2063Z" fill="#1E1E1E"/>
<g id="handle">
<path id="handleBody" fill="#9DA0A2" d="M33.874 23.246H19.2371C18.187 23.246 17.3356 24.0606 17.3356 25.0654C17.3356 26.0703 18.187 26.8848 19.2371 26.8848H33.874C34.9241 26.8848 35.7755 26.0703 35.7755 25.0654C35.7755 24.0606 34.9241 23.246 33.874 23.246Z"/>
<path id="FingerSensor" fill="#535353" d="M19.4841 24.1373H18.7891C18.2987 24.1373 17.9011 24.5349 17.9011 25.0253V25.1425C17.9011 25.6329 18.2987 26.0305 18.7891 26.0305H19.4841C19.9745 26.0305 20.372 25.6329 20.372 25.1425V25.0253C20.372 24.5349 19.9745 24.1373 19.4841 24.1373Z"/>
</g>
</g>
<g id="lockIcon">
<path id="icon" fill="#535353" fill-opacity="0.894118" d="M16.9109 15.157C16.84 15.1632 16.7768 15.1991 16.7356 15.2564C16.7281 15.2669 16.7219 15.2773 16.7155 15.2903C16.706 15.3096 16.7 15.3269 16.6958 15.3472C16.6909 15.3713 16.6905 15.3803 16.6905 15.4631V15.5309H16.6602H16.6299V15.7695V16.0081H16.9281H17.2262V15.7695V15.5309H17.198H17.1697V15.4582C17.1697 15.4155 17.1694 15.3822 17.169 15.3775C17.1649 15.3279 17.1475 15.2842 17.1162 15.2451C17.1093 15.2365 17.0894 15.2165 17.0808 15.2097C17.044 15.1804 17.0046 15.1637 16.958 15.1578C16.9481 15.1566 16.9206 15.1561 16.9109 15.157ZM16.9397 15.2507C16.9809 15.2541 17.0153 15.2716 17.0419 15.303C17.0554 15.3189 17.066 15.3396 17.0711 15.3605C17.0754 15.378 17.0753 15.375 17.0756 15.4565L17.076 15.5309H16.9305H16.785V15.4575C16.785 15.379 16.785 15.3788 16.7884 15.3637C16.7917 15.3485 16.8002 15.3287 16.8086 15.3159C16.8295 15.2848 16.8609 15.2627 16.8965 15.2544C16.9124 15.2507 16.9254 15.2496 16.9397 15.2507Z"/>
</g>
</svg>
`;
]]]
Garage
icon_garage:
styles:
custom_fields:
icon:
#- width: 95%
- margin-left: -7%
- margin-top: -15%
custom_fields:
icon: >
[[[
let style = `
<style>
@keyframes on {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.on {
animation: on 0.1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
@keyframes off {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
.off {
animation: off 0.1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
</style>
`,
path = `
<path fill="#9da0a2" d="M24.933 11.355l19.948 3.894c.082.14.09 1.51 0 1.8l-39.761-.033c-.089-.283-.085-1.618.01-1.821z"/>
<rect fill="#9da0a2" width="1.966" height="20.53" x="5.006" y="18.115" rx=".256" paint-order="fill markers stroke"/>
<rect fill="#9da0a2" width="1.966" height="20.53" x="43.028" y="18.115" rx=".256" paint-order="fill markers stroke"/>
<rect fill="#707070" id="port1" width="34.328" height="5.932" x="7.836" y="18.115" rx=".186" paint-order="fill markers stroke"/>
<rect fill="#707070" id="port2" width="34.328" height="7.032" x="7.836" y="24.863" rx=".186" ry=".22" paint-order="fill markers stroke"/>
<rect fill="#707070" id="port3" width="34.328" height="5.932" x="7.836" y="32.71" rx=".186" paint-order="fill markers stroke"/>
`;
if (variables.state === 'open') {
return `
<svg viewBox="0 0 50 50"> ${style}
<path fill="#9da0a2" id="garage" d="M24.9336 11.3555L5.12891 15.1934C5.03393 15.3966 5.03035 16.7323 5.11914 17.0156L44.8809 17.0488C44.9706 16.7588 44.9627 15.3882 44.8809 15.248L24.9336 11.3555ZM5.26172 18.1152C5.11983 18.1152 5.00586 18.2292 5.00586 18.3711V38.3887C5.00586 38.5306 5.11983 38.6445 5.26172 38.6445H6.7168C6.85868 38.6445 6.97266 38.5306 6.97266 38.3887V18.3711C6.97266 18.2292 6.85868 18.1152 6.7168 18.1152H5.26172ZM43.2832 18.1152C43.1413 18.1152 43.0273 18.2292 43.0273 18.3711V38.3887C43.0273 38.5306 43.1413 38.6445 43.2832 38.6445H44.7383C44.8802 38.6445 44.9941 38.5306 44.9941 38.3887V18.3711C44.9941 18.2292 44.8802 18.1152 44.7383 18.1152H43.2832Z"/>
<path fill="#474b4d" id="car" d="M16.0195 23.7109C15.5919 24.4049 15.1131 25.2714 14.5781 26.3223L11.8164 29.0801V37.6621C11.8164 38.17 12.2304 38.584 12.7383 38.584H15.8027C16.3107 38.584 16.7246 38.17 16.7246 37.6621V36.7441H33.2754V37.6621C33.2754 38.17 33.6893 38.584 34.1973 38.584H37.2617C37.7696 38.584 38.1836 38.17 38.1836 37.6621V29.0801L35.4219 26.3223C34.8869 25.2714 34.4081 24.4049 33.9805 23.7109H33.3809C33.8204 24.3917 34.2878 25.2148 34.7617 26.2207L15.2852 26.2051C15.6558 25.3312 16.1128 24.4762 16.6191 23.7109L16.0195 23.7109ZM14.5469 29.3867C15.0067 29.3867 15.4252 29.401 15.8027 29.4316C16.5579 29.4929 17.4783 29.5952 18.5625 29.7383C18.4603 29.9427 18.3059 30.1491 18.1016 30.3535C17.795 30.6601 15.498 31.2715 15.1914 31.2715H13.9629C13.6563 31.2715 13.3505 30.9644 13.1973 30.6445C13.0951 30.4313 13.0449 30.027 13.0449 29.4316C13.587 29.401 14.087 29.3867 14.5469 29.3867V29.3867ZM35.4531 29.3867C35.913 29.3867 36.413 29.401 36.9551 29.4316C36.9551 30.027 36.9049 30.4313 36.8027 30.6445C36.6494 30.9644 36.3437 31.2715 36.0371 31.2715H34.8086C34.502 31.2715 32.205 30.6601 31.8984 30.3535C31.6941 30.1491 31.5397 29.9427 31.4375 29.7383C32.5217 29.5952 33.4421 29.4929 34.1973 29.4316C34.5748 29.401 34.9933 29.3867 35.4531 29.3867V29.3867ZM20.707 30H29.293L30.5176 31.5332C29.7001 33.7813 29.0884 34.9043 28.6797 34.9043H21.3203C20.9116 34.9043 20.2999 33.7813 19.4824 31.5332L20.707 30Z"/>
<path fill="#707070" id="door" d="M8.02148 18.1152L7.83594 22.8398C7.83594 22.9244 7.91866 22.9922 8.02148 22.9922H41.9785C42.0813 22.9922 42.1641 22.9244 42.1641 22.8398L41.9785 18.1152H8.02148Z"/>
</svg>
`;
}
if (variables.state === 'closed') {
return `
<svg viewBox="0 0 50 50"> ${style}
${path}
</svg>
`;
} else {
return `
<svg viewBox="0 0 50 50"> ${style}
${path}
</svg>
`;
}
]]]
Camera
icon_unifi_cam:
styles:
custom_fields:
icon:
- width: 95%
- margin-left: -27%
- margin-top: -8%
custom_fields:
icon: >
[[[
let path = `
<g id="unifi_cam">
<path id="BottomBody" d="M25.4029 33.1482C32.5202 33.1572 34.049 32.8907 34.049 32.8907L34.0476 42.9924C34.0476 42.9924 33.7847 43.7983 25.2763 43.7668C17.5461 43.7986 17.0074 43.0119 17.0074 43.0119L17.0356 32.894C17.0356 32.894 18.7469 33.1734 25.403 33.1482L25.4029 33.1482Z" fill="url(#unifi_g4_paint0_linear_1_2)"/>
<g id="TopBody">
<path id="rect1631" d="M25.5681 5.15724C30.289 5.15724 34.1007 8.92111 34.0896 13.5964L34.0441 32.6626C34.0441 32.6626 31.7224 33.0036 25.5247 32.9528C17.2365 32.8848 17.0033 32.6511 17.0033 32.6511L17.0467 13.5964C17.0573 8.92111 20.8473 5.15724 25.5681 5.15724H25.5681Z" fill="url(#unifi_g4_paint1_linear_1_2)"/>
<path id="path26713" d="M25.5876 6.28206C29.8706 6.28206 33.3106 8.93542 33.3187 12.2313L33.3408 21.1665C32.9929 24.5645 30.6552 25.8211 25.5363 25.9361C20.3005 26.0536 17.8828 24.0377 17.8128 21.0478L17.8564 12.2313C17.8727 8.93545 21.3045 6.28206 25.5876 6.28206H25.5876Z" fill="url(#unifi_g4_paint2_linear_1_2)"/>
<path id="rect3378" opacity="0.73718" d="M32.5782 13.4998C32.5782 9.61689 29.4304 6.46918 25.5475 6.46918C21.6646 6.46918 18.5169 9.61689 18.5169 13.4998V14.8764C18.5169 18.7593 21.6646 21.907 25.5475 21.907C29.4304 21.907 32.5782 18.7593 32.5782 14.8764V13.4998Z" fill="url(#unifi_g4_paint3_linear_1_2)"/>
<path id="rect4038" d="M29.7107 13.6797C29.7107 11.248 27.8357 9.27679 25.5226 9.27679C23.2096 9.27679 21.3345 11.248 21.3345 13.6797V14.5418C21.3345 16.9734 23.2096 18.9447 25.5226 18.9447C27.8357 18.9447 29.7107 16.9734 29.7107 14.5418V13.6797Z" fill="#1A1A1A"/>
<path id="path5422" opacity="0.330128" d="M25.5318 16.8095C27.0803 16.8095 28.3356 15.5542 28.3356 14.0057C28.3356 12.4572 27.0803 11.2019 25.5318 11.2019C23.9833 11.2019 22.728 12.4572 22.728 14.0057C22.728 15.5542 23.9833 16.8095 25.5318 16.8095Z" fill="#333333"/>
<g id="InfraRed">
<path id="circle5990" d="M25.5436 18.4052C25.739 18.4052 25.8975 18.2468 25.8975 18.0514C25.8975 17.856 25.739 17.6976 25.5436 17.6976C25.3482 17.6976 25.1898 17.856 25.1898 18.0514C25.1898 18.2468 25.3482 18.4052 25.5436 18.4052Z" fill="#1A1A1A"/>
<path id="circle5992" d="M25.5436 10.512C25.739 10.512 25.8975 10.3536 25.8975 10.1582C25.8975 9.96277 25.739 9.80436 25.5436 9.80436C25.3482 9.80436 25.1898 9.96277 25.1898 10.1582C25.1898 10.3536 25.3482 10.512 25.5436 10.512Z" fill="#1A1A1A"/>
</g>
<path id="Reflection" opacity="0.63782" d="M28.8255 8.57382L27.995 10.0713C27.995 10.0713 28.7514 10.7471 29.0328 11.194C29.2959 11.612 29.6225 12.5923 29.6225 12.5923L31.552 12.3154C31.552 12.3154 31.3661 11.2172 30.6628 10.1846C29.9774 9.17826 28.8255 8.57382 28.8255 8.57382Z" fill="url(#unifi_g4_paint4_radial_1_2)"/>
<path id="StatusLED" d="M26.2676 27.1703H24.8169C24.6807 27.1703 24.5703 27.2807 24.5703 27.417C24.5703 27.5532 24.6807 27.6636 24.8169 27.6636H26.2676C26.4038 27.6636 26.5143 27.5532 26.5143 27.417C26.5143 27.2807 26.4038 27.1703 26.2676 27.1703Z" fill="#808080"/>
<path id="circle21643" opacity="0.830128" d="M25.5436 16.1275C26.722 16.1275 27.6773 15.1722 27.6773 13.9938C27.6773 12.8155 26.722 11.8602 25.5436 11.8602C24.3653 11.8602 23.41 12.8155 23.41 13.9938C23.41 15.1722 24.3653 16.1275 25.5436 16.1275Z" fill="url(#unifi_g4_paint5_linear_1_2)"/>
<path id="CameraLens" d="M25.5279 14.541C25.8234 14.541 26.063 14.3014 26.063 14.0059C26.063 13.7103 25.8234 13.4708 25.5279 13.4708C25.2324 13.4708 24.9928 13.7103 24.9928 14.0059C24.9928 14.3014 25.2324 14.541 25.5279 14.541Z" fill="url(#unifi_g4_paint6_linear_1_2)"/>
<path id="UnifiLogo" d="M24.965 30.948H24.8561V30.839H24.9651L24.965 30.948ZM25.5932 32.2698C25.4462 32.2632 25.333 32.2258 25.2455 32.1719C25.3048 32.4295 25.5267 32.556 25.5375 32.562L25.6029 32.5981C26.1037 32.5647 26.3968 32.2414 26.3968 31.8187V31.7271C26.2778 32.1153 26.0007 32.2882 25.5932 32.2698L25.5932 32.2698ZM24.8556 31.4121H24.9656V31.655H25.076V31.2487H25.1863V32.0427C25.1862 32.4195 25.5159 32.6012 25.5159 32.6012C24.962 32.6012 24.635 32.2654 24.635 31.8187V30.9202H24.7452V31.5211H24.8556V31.4121ZM24.7452 30.7289H24.635V30.6187H24.7452L24.7452 30.7289ZM24.965 31.3032H24.856V31.1942H24.965L24.965 31.3032ZM25.0752 31.1397H24.9662V31.0306H25.0752V31.1397ZM25.1862 31.0025H25.076V30.8935H25.1862L25.1862 31.0025ZM25.076 30.8379H24.9656V30.7289H25.076V30.8379ZM26.3541 31.714L26.3968 31.5746V30.6199C25.8975 30.6199 25.8455 30.8113 25.8455 30.9942V32.0428C25.8455 32.0971 25.8402 32.1546 25.8292 32.2111C26.094 32.1629 26.2667 31.9992 26.3541 31.7141L26.3541 31.714Z" fill="#808080"/>
</g>
</g>
`,
gradient = `
<defs>
<linearGradient id="unifi_g4_paint0_linear_1_2" x1="26.2752" y1="38.0201" x2="53.0537" y2="37.349" gradientUnits="userSpaceOnUse">
<stop stop-color="#999999"/>
<stop offset="1" stop-color="#999999" stop-opacity="0"/>
</linearGradient>
<linearGradient id="unifi_g4_paint1_linear_1_2" x1="25.5349" y1="24.4603" x2="52.907" y2="24.326" gradientUnits="userSpaceOnUse">
<stop stop-color="#999999"/>
<stop offset="1" stop-color="#999999" stop-opacity="0"/>
</linearGradient>
<linearGradient id="unifi_g4_paint2_linear_1_2" x1="25.6376" y1="28.6577" x2="25.604" y2="17.953" gradientUnits="userSpaceOnUse">
<stop stop-color="#B3B3B3"/>
<stop offset="1" stop-color="#B3B3B3" stop-opacity="0"/>
</linearGradient>
<linearGradient id="unifi_g4_paint3_linear_1_2" x1="25.4027" y1="14.5302" x2="27.8188" y2="39.0604" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<radialGradient id="unifi_g4_paint4_radial_1_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(30.1762 10.432) rotate(-168.532) scale(4.62095 3.49989)">
<stop stop-color="#4D4D4D"/>
<stop offset="1" stop-color="#4D4D4D" stop-opacity="0"/>
</radialGradient>
<linearGradient id="unifi_g4_paint5_linear_1_2" x1="25.4027" y1="17.2819" x2="27.0134" y2="10.302" gradientUnits="userSpaceOnUse">
<stop stop-color="#1A1A1A"/>
<stop offset="1" stop-color="#1A1A1A" stop-opacity="0"/>
</linearGradient>
<linearGradient id="unifi_g4_paint6_linear_1_2" x1="25.6376" y1="13.5192" x2="25.4696" y2="14.829" gradientUnits="userSpaceOnUse">
<stop stop-color="#002C00"/>
<stop offset="1" stop-color="#002C00" stop-opacity="0"/>
</linearGradient>
</defs>
`;
if (entity.attributes.is_dark === 'true') {
return `
<svg viewBox="0 0 50 50"> ${gradient}
${path}
<path id="circle5990" fill="#A02C2C" d="M25.5436 18.4052C25.739 18.4052 25.8975 18.2468 25.8975 18.0514C25.8975 17.856 25.739 17.6976 25.5436 17.6976C25.3482 17.6976 25.1898 17.856 25.1898 18.0514C25.1898 18.2468 25.3482 18.4052 25.5436 18.4052Z"/>
<path id="circle5992" fill="#A02C2C" d="M25.5436 10.512C25.739 10.512 25.8975 10.3536 25.8975 10.1582C25.8975 9.96277 25.739 9.80436 25.5436 9.80436C25.3482 9.80436 25.1898 9.96277 25.1898 10.1582C25.1898 10.3536 25.3482 10.512 25.5436 10.512Z"/>
<path id="StatusLED" fill="#0067FF" d="M26.2676 27.1703H24.8169C24.6807 27.1703 24.5703 27.2807 24.5703 27.417C24.5703 27.5532 24.6807 27.6636 24.8169 27.6636H26.2676C26.4038 27.6636 26.5143 27.5532 26.5143 27.417C26.5143 27.2807 26.4038 27.1703 26.2676 27.1703Z"/>
</svg>
`;
}
if (variables.state === 'error') {
return `
<svg viewBox="0 0 50 50"> ${gradient}
${path}
<path id="StatusLED" fill="#0067FF" d="M26.2676 27.1703H24.8169C24.6807 27.1703 24.5703 27.2807 24.5703 27.417C24.5703 27.5532 24.6807 27.6636 24.8169 27.6636H26.2676C26.4038 27.6636 26.5143 27.5532 26.5143 27.417C26.5143 27.2807 26.4038 27.1703 26.2676 27.1703Z"/>
</svg>
`;
}
if (variables.state === 'off') {
return `
<svg viewBox="0 0 50 50">
${path}
</svg>
`;
} else {
return `
<svg viewBox="0 0 50 50">
<path id="BottomBody" d="M25.4029 33.1482C32.5202 33.1572 34.049 32.8907 34.049 32.8907L34.0476 42.9924C34.0476 42.9924 33.7847 43.7983 25.2763 43.7668C17.5461 43.7986 17.0074 43.0119 17.0074 43.0119L17.0356 32.894C17.0356 32.894 18.7469 33.1734 25.403 33.1482L25.4029 33.1482Z" fill="#9da0a2"/>
<path id="rect1631" d="M25.5681 5.15724C30.289 5.15724 34.1007 8.92111 34.0896 13.5964L34.0441 32.6626C34.0441 32.6626 31.7224 33.0036 25.5247 32.9528C17.2365 32.8848 17.0033 32.6511 17.0033 32.6511L17.0467 13.5964C17.0573 8.92111 20.8473 5.15724 25.5681 5.15724H25.5681Z" fill="#9da0a2"/>
<path id="path26713" d="M25.5876 6.28206C29.8706 6.28206 33.3106 8.93542 33.3187 12.2313L33.3408 21.1665C32.9929 24.5645 30.6552 25.8211 25.5363 25.9361C20.3005 26.0536 17.8828 24.0377 17.8128 21.0478L17.8564 12.2313C17.8727 8.93545 21.3045 6.28206 25.5876 6.28206H25.5876Z" fill="#b6b9bc"/>
<path id="rect3378" d="M32.5782 13.4998C32.5782 9.61689 29.4304 6.46918 25.5475 6.46918C21.6646 6.46918 18.5169 9.61689 18.5169 13.4998V14.8764C18.5169 18.7593 21.6646 21.907 25.5475 21.907C29.4304 21.907 32.5782 18.7593 32.5782 14.8764V13.4998Z" fill="#212121"/>
<path id="rect4038" d="M29.7107 13.6797C29.7107 11.248 27.8357 9.27679 25.5226 9.27679C23.2096 9.27679 21.3345 11.248 21.3345 13.6797V14.5418C21.3345 16.9734 23.2096 18.9447 25.5226 18.9447C27.8357 18.9447 29.7107 16.9734 29.7107 14.5418V13.6797Z" fill="#1A1A1A"/>
<path id="path5422" d="M25.5318 16.8095C27.0803 16.8095 28.3356 15.5542 28.3356 14.0057C28.3356 12.4572 27.0803 11.2019 25.5318 11.2019C23.9833 11.2019 22.728 12.4572 22.728 14.0057C22.728 15.5542 23.9833 16.8095 25.5318 16.8095Z" fill="#333333"/>
<path id="circle21643" opacity="0.830128" d="M25.5436 16.1275C26.722 16.1275 27.6773 15.1722 27.6773 13.9938C27.6773 12.8155 26.722 11.8602 25.5436 11.8602C24.3653 11.8602 23.41 12.8155 23.41 13.9938C23.41 15.1722 24.3653 16.1275 25.5436 16.1275Z" fill="#212121"/>
<path id="CameraLens" d="M25.5279 14.541C25.8234 14.541 26.063 14.3014 26.063 14.0059C26.063 13.7103 25.8234 13.4708 25.5279 13.4708C25.2324 13.4708 24.9928 13.7103 24.9928 14.0059C24.9928 14.3014 25.2324 14.541 25.5279 14.541Z" fill="#1A1A1A"/>
</svg>
`;
}
]]]
Bathroom
icon_colgate:
styles:
custom_fields:
icon:
- width: 85%
- margin-top: -4%
#- margin-left: -1%
custom_fields:
icon: >
[[[
let paths = `
<path id="white-parts" fill="#9ca2a5" d="M14.746 2.46901C13.909 2.47601 14.078 2.56601 13.574 3.65101L9.713 3.79701C9.412 3.80901 9.164 4.04301 9.164 4.34401V4.61001C9.44 5.55101 9.577 5.43801 9.275 6.44001C9.055 7.16601 9.636 7.47101 9.339 8.54001C9.135 9.27401 9.687 9.58601 9.376 10.636C9.153 11.39 9.751 11.914 9.507 12.993C9.336 13.754 9.978 13.913 9.693 14.823V15.089C9.693 15.398 9.947 15.662 10.256 15.65L13.86 15.517L14.092 16.371L11.906 23.963C12.371 23.833 12.808 23.762 13.226 23.762C13.6547 23.7632 14.0803 23.8344 14.486 23.973L16.148 16.174H16.156L15.73 3.04701C15.716 2.63901 15.593 2.46901 15.171 2.46901C15.006 2.46901 14.865 2.46801 14.745 2.46901H14.746ZM24.17 2.48101L24.352 5.11601L40.641 5.12001L40.825 2.48101H24.17ZM28.461 40.018L28.498 40.782C29.62 41.634 30.736 46.266 29.285 46.852C29.078 46.936 29.365 47.516 29.365 47.516H35.635L36.467 40.018H28.461Z"/>
`;
return variables.state === 'on' ? `
<svg viewBox="0 0 50 50">
${paths}
<path id="tube-bottom" fill="#DD221D" stroke="#FF0000" d="M25.777 25.39L24.916 12.775C24.922 12.769 25.065 13.093 25.234 13.494C25.877 15.017 26.881 16.898 27.623 17.965C28.024 18.542 28.567 19.213 28.998 19.662C30.259 20.976 32.126 22.046 33.989 22.522C34.774 22.723 35.294 22.786 36.166 22.786C37.235 22.786 38.128 22.621 39.045 22.254L39.411 22.125C39.411 22.125 39.171 25.7 38.865 30.054L38.307 37.969L32.478 37.981L26.649 37.993L25.777 25.39Z" stroke-width="0.024" stroke-linejoin="round"/>
<path id="tube-top" fill="#0262B9" stroke="#FF0000" d="M35.283 22.133C33.896 21.924 32.764 21.528 31.592 20.845C30.687 20.317 30.259 19.994 29.621 19.357C27.909 17.649 26.193 14.576 24.962 11.013L24.745 10.386L24.654 9.16301L24.562 7.73601L24.561 7.53201H32.5L40.439 7.59901C40.439 7.63601 40.223 10.725 39.959 14.464L39.479 21.304C39.479 21.366 38.987 21.603 38.505 21.773C37.761 22.035 37.246 22.12 36.289 22.138C35.814 22.147 35.361 22.144 35.282 22.132L35.283 22.133Z" stroke-width="0.024" stroke-linejoin="round"/>
<path id="brush-handle" fill="#9ca2a5" d="M13.217 24.449C12.801 24.451 12.355 24.542 11.834 24.717L12.162 46.942L12.164 46.94C12.168 47.237 12.406 47.479 12.703 47.479H14.269C14.574 47.479 14.826 47.231 14.82 46.928L14.488 24.723C14.055 24.542 13.649 24.448 13.217 24.45V24.449Z"/>
</svg>
` : `
<svg viewBox="0 0 50 50">
${paths}
<path id="tube-bottom" fill="#9ca2a5" stroke="#9ca2a5" d="M25.777 25.39L24.916 12.775C24.922 12.769 25.065 13.093 25.234 13.494C25.877 15.017 26.881 16.898 27.623 17.965C28.024 18.542 28.567 19.213 28.998 19.662C30.259 20.976 32.126 22.046 33.989 22.522C34.774 22.723 35.294 22.786 36.166 22.786C37.235 22.786 38.128 22.621 39.045 22.254L39.411 22.125C39.411 22.125 39.171 25.7 38.865 30.054L38.307 37.969L32.478 37.981L26.649 37.993L25.777 25.39Z" stroke-width="0.024" stroke-linejoin="round"/>
<path id="tube-top" fill="#9ca2a5" stroke="#9ca2a5" d="M35.283 22.133C33.896 21.924 32.764 21.528 31.592 20.845C30.687 20.317 30.259 19.994 29.621 19.357C27.909 17.649 26.193 14.576 24.962 11.013L24.745 10.386L24.654 9.16301L24.562 7.73601L24.561 7.53201H32.5L40.439 7.59901C40.439 7.63601 40.223 10.725 39.959 14.464L39.479 21.304C39.479 21.366 38.987 21.603 38.505 21.773C37.761 22.035 37.246 22.12 36.289 22.138C35.814 22.147 35.361 22.144 35.282 22.132L35.283 22.133Z" stroke-width="0.024" stroke-linejoin="round"/>
<path id="brush-handle" fill="#9ca2a5" d="M13.217 24.449C12.801 24.451 12.355 24.542 11.834 24.717L12.162 46.942L12.164 46.94C12.168 47.237 12.406 47.479 12.703 47.479H14.269C14.574 47.479 14.826 47.231 14.82 46.928L14.488 24.723C14.055 24.542 13.649 24.448 13.217 24.45V24.449Z"/>
</svg>
`;
]]]
Special occasions (template.yaml)
# SENSOR - SPECIAL OCCASIONS
- unique_id: special_occasions
name: 'Special Occasions'
state: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
{% set date = now().strftime('%D') %}
{% if "01/01" in date %}
New year
{% elif "12/24" in date %}
Christmas
{% elif "12/25" in date %}
First Christmas day
{% elif "12/26" in date %}
Second Christmas day
{% elif "01/30" in date %}
Mamma
{% elif "02/13" in date %}
Mother's day
{% elif "02/14" in date %}
Valentine's day
{% elif "05/17" in date %}
Constitution Day
{% elif "05/20" in date %}
Birthday
{% elif "09/02" in date %}
Pappa
{% elif "11/13" in date %}
Father's day
{% else %}
nothing
{% endif %}
icon: >
{% set state = states.sensor.special_occasions.state %}
{% if state == "New year" %}
mdi:party-popper
{% elif state == "Christmas" %}
phu:christmas-tree-v2
{% elif state == "Constitution Day" %}
mdi:flag-variant
{% elif state == "Birthday" %}
mdi:cake-variant
{% elif state == "Mamma" %}
mdi:cake-variant
{% elif state == "Pappa" %}
mdi:cake-variant
{% else %}
mdi:calendar-star
{% endif %}
Footer popup examples
PC
Plex
Home Assistant
Tablet
6 Likes
Thx a lot. As i see it’s bigger then the Fire Tablet. So more space for the buttons
Yea, and I believe there’s a difference when using Fully Kiosk as well. Might be wrong on that. But it works well - they way it’s set up right now.
1 Like
Can you share Information ha card??
action: fire-dom-event
browser_mod:
command: popup
title: Information
style:
.: |
:host .main-title {
pointer-events: none;
}
layout-card:
$grid-layout$:
hui-entities-card:
$: |
.card-content {
padding: 1.5em 2.2em 2.3em 2em;
}
ha-card {
animation: border 1s forwards;
border-radius: 0;
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
animation: none;
}
}
$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly;
margin-top: 1.9em;
margin-left: 0.8em;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-rows: 1fr
grid-template-areas: |
"hass"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(1, 1fr)
grid-template-areas: |
"hass"
cards:
#################################################
# #
# HOME ASSISTANT #
# #
#################################################
- type: entities
view_layout:
grid-area: hass
title: Home Assistant
show_header_toggle: false
card_mod:
class: header
style: |
ha-card {
margin: 0px !important;
}
entities:
- entity: sensor.hass_version_installed
name: Installed
icon: mdi:home-assistant
- entity: sensor.hass_version_latest
name: Latest
- entity: sensor.hass_version_latest_beta
name: Beta
- entity: sensor.database
name: Database
icon: mdi:database
- entity: sensor.home_assistant_log_size
name: Log file
- entity: sensor.home_assistant_uptime
name: Last restart
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: &bar_card_positions
icon: outside
indicator: 'off'
name: outside
severity: &bar_card_severity
- color: '#303435'
from: 0
to: 89
- color: '#6d2525'
from: 90
to: 200
entity_row: true
entities:
- entity: sensor.processor_use_percent
name: Processor
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.processor_use_percent
- entity: sensor.memory_use_percent
name: Memory
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.memory_use_percent
- entity: input_boolean.notify_visible
name: Notifications
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
name: Home Assistant
icon: mdi:reload
tap_action:
services: |
[[[
return `[[[
hass.callService('browser_mod', 'toast', {
message: 'Restarting Home Assistant...'
});
hass.callService('homeassistant', 'restart');
]]]`
]]]
template: icon_name
- type: custom:button-card
name: Theme
icon: mdi:reload
tap_action:
services: |
[[[
return `[[[
hass.callService('browser_mod', 'toast', {
message: 'Restarting Theme Service...'
});
hass.callService('frontend', 'reload_themes');
]]]`
]]]
template: icon_name
3 Likes