looks nice , like the status icons in top, the weather status and the quick media layout
Just wanted to give you a heads up, that bug report for the Spotify progress issue was finally closed and the fix is in 2023.10.3+
The progress bar now works with Spotify without any code modifications.
3 Likes
Your dashboard looks fantastic. Could you please share the /Packages folder?
Nevermind! I found a solution here: A different take on designing a Lovelace UI - #1406 by pex81! Thanks @pex81!
i try it but it does not showing proper, only script…
really beautiful, compliments, but I notice that if I pause during a song, the progress bar continues to move forward, while when I put play back on it goes back and resumes from the right point. still really beautiful
This is kind of a limitation of the “fix” or workaround of the spotify API. Their API has an endpoint for timestamp which is described as “Unix Millisecond Timestamp when data was fetched” but that is not accurate. It fails to update when other information is updated like progress_ms and is_playing.
The spotify info still only updates every 30 seconds, but when that happens HA now grabs it’s own timestamp and updates the HA media_position_updated_at as a workaround. This makes the track progress correct, but it still won’t update play/pause until it grabs info from spotify. Which, worst case could be 30 seconds.
So unfortunately there isn’t a lot that can be done outside of spotify fixing their API. But, tracks will no longer show progress well past the total track length, and it will show progress more than every 30 seconds.
2 Likes
Does someone have any idea or can point me to the location where I can change the settings to make this space smaller for the portrait mode/tablet mode?
grid-gap
# phone
'(max-width: 800px)':
# grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-gap: 1.8vw
margin: 0
# grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-columns: 0 1fr 1fr 0
grid-template-rows: 0 min-content min-content fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%)
grid-template-areas: |
". . . ."
". header weather ."
". chips chips ."
". home security ."
2 Likes
This helped.
Thanks!
I don’t use any scripts, only the decluttering card because I also use it for another dashboard. I’m not a developer or programmer, all the stuff used here is from this topic. So try to read this whole thread and maybe you will get more inspiration. 
2 Likes
Hello VietNgoc,
Can you explain what is you sensor.home_mode and how its configurate ?
It’s just a sensor that shows the current scene settings, I use it simultaneously with Siri in Homekit. For example, a scene for leaving home, or for a guest with different automations, etc.
2 Likes
I lost tilt and button function when I insert swipe-card pagination that is in media section.
Is there any solution?
- type: custom:swipe-card
parameters:
# pagination:
# type: bullets
# clickable: true
speed: 550
spaceBetween: 40
threshold: 5
cards:
- type: horizontal-stack
cards:
- type: conditional
...
icon_ac:
styles:
custom_fields:
icon:
- width: 90%
- margin-top: -6%
- margin-left: 1%
custom_fields:
icon: >
[[[
let style = `
<style>
@keyframes bottom-flap {
0% {
transform: rotateX(100deg);
}
100% {
transform: rotateX(0deg);
}
}
.bottom-flap{
animation: bottom-flap 4s ease-in-out;
transform-origin: top;
transform-box: fill-box;
}
@keyframes flow-control {
0% {
transform: rotateX(100deg);
}
50% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
.flow-control{
animation: flow-control 5s ease-in-out;
transform-origin: top;
transform-box: fill-box;
}
</style>
`,
path = `
<path fill="url(#aircon_paint2_linear_1_2)" id="aircon-unit" d="M1.21287 15.9548C0.98527 15.9548 0.801849 16.1382 0.801849 16.3658V31.8749C0.801849 32.1025 0.98527 32.2859 1.21287 32.2859H42.9177V32.5189C42.9177 32.6006 43.0462 32.6648 43.2055 32.6648H46.0787C46.062 32.7554 46.0539 32.8473 46.0546 32.9393V33.6502C46.0546 33.8685 46.0907 34.0452 46.1362 34.0452H47.3961C47.4416 34.0452 47.4778 33.8685 47.4778 33.6502V32.9393C47.4784 32.8473 47.4703 32.7554 47.4537 32.6648H47.6491C47.8085 32.6648 47.937 32.6006 47.937 32.5189V32.2859H48.7872C49.0148 32.2859 49.1982 32.1025 49.1982 31.8749V16.3658C49.1982 16.1382 49.0148 15.9548 48.7872 15.9548H1.21287ZM2.72978 23.7576H47.3613C47.4001 23.7576 47.4322 23.7897 47.4322 23.8312V24.4404C47.4322 24.4819 47.4001 24.5167 47.3613 24.5167H2.72844C2.68961 24.5167 2.65748 24.4819 2.65748 24.4404V23.8312C2.65748 23.7897 2.68961 23.7576 2.72844 23.7576H2.72978Z"/>
`,
gradient = `
<linearGradient id="aircon_paint0_linear_1_2" x1="22.9118" y1="35.1798" x2="22.9118" y2="32.2111" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCCCCC"/>
<stop offset="1" stop-color="#585858"/>
</linearGradient>
<linearGradient id="aircon_paint1_linear_1_2" x1="22.8125" y1="32.9688" x2="22.8125" y2="34.5938" gradientUnits="userSpaceOnUse">
<stop stop-color="#4D4D4D"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
<linearGradient id="aircon_paint2_linear_1_2" x1="25.375" y1="14.625" x2="25.9375" y2="60.75" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCCCCC"/>
<stop offset="1" stop-color="#2C2C2C"/>
</linearGradient>
`;
if (variables.state !== 'off') {
return `
<svg viewBox="0 0 50 50"> ${gradient}
${path}
<path id="bottom-flap" d="M3.38065 31.8435H40.2322C40.2647 31.8435 40.2908 31.8697 40.2908 31.9022C40.3213 32.714 40.6142 33.7062 40.7243 34.4498L2.88846 34.4536C2.969 33.7186 3.32197 32.7133 3.32197 31.9022C3.32197 31.8697 3.34814 31.8435 3.38065 31.8435V31.8435Z" fill="url(#aircon_paint0_linear_1_2)"/>
<path id="flow-control" d="M4.01023 31.2383H39.6673C39.6988 31.2383 39.7241 31.265 39.7241 31.2982C39.7756 33.3753 40.037 33.1396 40.1436 33.8985L3.534 33.9025C3.61192 33.1523 3.88716 33.4851 3.95346 31.2982C3.95346 31.265 3.97878 31.2383 4.01023 31.2383L4.01023 31.2383Z" fill="url(#aircon_paint1_linear_1_2)"/>
${style}
</svg>
`;
}
if (variables.state === 'off') {
return `
<svg viewBox="0 0 50 50"> ${style}
<path fill="#9da0a2" id="aircon-unit" d="M1.21287 15.9548C0.98527 15.9548 0.801849 16.1382 0.801849 16.3658V31.8749C0.801849 32.1025 0.98527 32.2859 1.21287 32.2859H42.9177V32.5189C42.9177 32.6006 43.0462 32.6648 43.2055 32.6648H46.0787C46.062 32.7554 46.0539 32.8473 46.0546 32.9393V33.6502C46.0546 33.8685 46.0907 34.0452 46.1362 34.0452H47.3961C47.4416 34.0452 47.4778 33.8685 47.4778 33.6502V32.9393C47.4784 32.8473 47.4703 32.7554 47.4537 32.6648H47.6491C47.8085 32.6648 47.937 32.6006 47.937 32.5189V32.2859H48.7872C49.0148 32.2859 49.1982 32.1025 49.1982 31.8749V16.3658C49.1982 16.1382 49.0148 15.9548 48.7872 15.9548H1.21287ZM2.72978 23.7576H47.3613C47.4001 23.7576 47.4322 23.7897 47.4322 23.8312V24.4404C47.4322 24.4819 47.4001 24.5167 47.3613 24.5167H2.72844C2.68961 24.5167 2.65748 24.4819 2.65748 24.4404V23.8312C2.65748 23.7897 2.68961 23.7576 2.72844 23.7576H2.72978Z"/>
</svg>
`;
} else {
return `
<svg viewBox="0 0 50 50"> ${style}
<path fill="#9da0a2" id="aircon-unit" d="M1.21287 15.9548C0.98527 15.9548 0.801849 16.1382 0.801849 16.3658V31.8749C0.801849 32.1025 0.98527 32.2859 1.21287 32.2859H42.9177V32.5189C42.9177 32.6006 43.0462 32.6648 43.2055 32.6648H46.0787C46.062 32.7554 46.0539 32.8473 46.0546 32.9393V33.6502C46.0546 33.8685 46.0907 34.0452 46.1362 34.0452H47.3961C47.4416 34.0452 47.4778 33.8685 47.4778 33.6502V32.9393C47.4784 32.8473 47.4703 32.7554 47.4537 32.6648H47.6491C47.8085 32.6648 47.937 32.6006 47.937 32.5189V32.2859H48.7872C49.0148 32.2859 49.1982 32.1025 49.1982 31.8749V16.3658C49.1982 16.1382 49.0148 15.9548 48.7872 15.9548H1.21287ZM2.72978 23.7576H47.3613C47.4001 23.7576 47.4322 23.7897 47.4322 23.8312V24.4404C47.4322 24.4819 47.4001 24.5167 47.3613 24.5167H2.72844C2.68961 24.5167 2.65748 24.4819 2.65748 24.4404V23.8312C2.65748 23.7897 2.68961 23.7576 2.72844 23.7576H2.72978Z"/>
</svg>
`;
}
]]]
Hi!
Can someone help me.
I have setup this before in HassOs, see pic. And its working
Now i moved it to docker and moved all my stuff but geting error, see pic.
Pic of maps:
String from config
I will send all my code here from my ui:
This is the same code as my HassOS setup and all files!
> button_card_templates:
> !include_dir_merge_named button_card_templates
>
> views:
> - type: custom:grid-layout
> title: Home
> layout:
> #default
> margin: 0
> grid-gap: var(--custom-layout-card-padding)
> grid-template-columns: repeat(4, 1fr) 0
> grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
> grid-template-areas: |
> "sidebar . . . ."
> "sidebar vardagsrum studio sovrum ."
> "sidebar media övrigt hemma ."
> "sidebar footer footer footer ."
> mediaquery:
> #phone
> "(max-width: 800px)":
> grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
> grid-template-columns: 0 repeat(2, 1fr) 0
> grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
> grid-template-areas: |
> ". . . ."
> ". sidebar sidebar ."
> ". vardagsrum sovrum ."
> ". studio övrigt ."
> ". media hemma ."
> ". footer footer ."
> ". . . ."
> #portrait
> "(max-width: 1200px)":
> grid-gap: var(--custom-layout-card-padding)
> grid-template-columns: repeat(3, 1fr) 0
> grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
> grid-template-areas: |
> "sidebar . . ."
> "sidebar vardagsrum sovrum ."
> "sidebar studio övrigt ."
> "sidebar media hemma ."
> "sidebar footer footer ."
> "sidebar . . ."
> cards:
>
> #extra_styles fix, do not remove
> #also warn if theme is not set
>
> - type: custom:button-card
> view_layout:
> grid-area: 1 / 2 / 2 / 5
> name: SET THEME TO "tablet" IN PROFILE
> tap_action:
> action: navigate
> navigation_path: /profile
> styles:
> card:
> - display: >
> [[[
> return hass.themes.theme === 'tablet'
> ? 'none'
> : 'initial';
> ]]]
> name:
> - z-index: 1
> - overflow: visible
> - color: red
> - font-weight: bolder
> - font-size: xxx-large
> - background: yellow
>
> #################################################
> # #
> # SIDEBAR #
> # #
> #################################################
>
> - type: vertical-stack
> view_layout:
> grid-area: sidebar
> cards:
>
> - type: custom:button-card
> entity: sensor.template_sidebar
> template: sidebar
> - type: custom:button-card
> entity: sensor.template_sidebar_uptime
> template: up_time
>
>
> #################################################
> # #
> # HALL / SOVRUM #
> # #
> #################################################
>
> - type: grid
> title: Hall & Sovrum
> view_layout:
> grid-area: vardagsrum
> columns: 2
> cards:
>
> - type: custom:button-card
> entity: light.hall
> name: Hallen
> template:
> - light
> - icon_coat_stand
>
> - type: custom:button-card
> entity: light.sovrum_group
> name: Sovrum
> hold_action:
> template:
> - light
> - icon_bed
>
> - type: custom:button-card
> entity: media_player.sony_tv
> name: Sony TV
> template:
> - base
> - icon_tv
> - loader
>
> - type: custom:button-card
> entity: switch.uttag_group
> name: Eluttag
> triggers_update:
> - switch.uttag_group
> state_display: >
> [[[
> if (variables.state == 'on') {
> return 'På';
> } else if (variables.state == 'off') {
> return 'Av';
> }
> ]]]
> template:
> - base
> - icon_superman
> - loader
>
> #################################################
> # #
> # BADRUM / KÖK #
> # #
> #################################################
>
> - type: grid
> title: Badrum & Kök
> view_layout:
> grid-area: studio
> columns: 2
> cards:
>
> - type: custom:button-card
> entity: light.badrum
> name: Badrum
> template:
> - light
> - icon_bathroom
>
> - type: custom:button-card
> entity: light.badrum
> name: Rörelse
> template:
> - base
> - icon_away
>
> - type: custom:button-card
> entity: media_player.hogtalare_group
> name: Högtalare
> tap_action:
> state_display: >
> [[[
> if (variables.state == 'playing') {
> return 'Spelar';
> } else if (variables.state == 'off') {
> return 'Av';
> } else if (variables.state == 'paused') {
> return 'Pausad';
> } else if (variables.state == 'idle') {
> return 'Väntar';
> }
> ]]]
> template:
> - base
> - icon_monitors
>
> - type: custom:button-card
> entity: light.kok_group
> name: Kök
> template:
> - light
> - icon_kitchen
>
> #################################################
> # #
> # VARDAGSRUM #
> # #
> #################################################
>
> - type: grid
> title: Vardagsrum
> view_layout:
> grid-area: sovrum
> columns: 2
> cards:
>
> - type: custom:button-card
> entity: light.vardagsrum_group
> name: Lampor
> template:
> - light
> - icon_sofa
>
> - type: custom:button-card
> entity: vacuum.billy
> name: Billy
> template:
> - base
> - icon_roborock
> state_display: >
> [[[
> if (variables.state == 'docked') {
> return 'Dockad';
> } else if (variables.state == 'cleaning') {
> return 'Städar';
> } else if (variables.state == 'unavailable') {
> return 'Pausad';
> } else if (variables.state == 'returning') {
> return 'Återv';
> }
> ]]]
>
> - type: custom:button-card
> entity: sensor.ps5_activity
> name: PS5
> state_display: >
> [[[
> if (variables.state == 'on') {
> return 'På';
> } else if (variables.state == 'unavailable') {
> return 'Av';
> } else if (variables.state == 'playing') {
> return 'Spelar';
> } else if (variables.state == 'idle') {
> return 'Menyn';
> }
> ]]]
> template:
> - base
> - icon_ps5
>
>
> - type: custom:button-card
> entity: media_player.lg_tv
> name: LG TV
> template:
> - icon_tv
> - loader
> - base
>
> #################################################
> # #
> # MEDIA #
> # #
> #################################################
>
> - type: grid
> title: Media ↔
> view_layout:
> grid-area: media
> columns: 1
> cards:
>
> - type: custom:swipe-card
> parameters:
> speed: 550
> spaceBetween: 40
> threshold: 5
> cards:
>
> - type: horizontal-stack
> cards:
>
> # SPOTIFY
> - type: conditional
> conditions:
> - entity: select.conditional_media
> state_not: Apple TV
> card:
> type: custom:button-card
> entity: media_player.spotify_novaare
> name: Spotify
> tap_action:
> action: none
> template:
> - conditional_media
> - icon_spotify
>
> - type: grid
> columns: 2
> cards:
>
> - type: custom:button-card
> entity: media_player.vardagsrum
> triggers_update: sensor.youtube_watching
> name: 1
> template:
> - conditional_media
> - icon_spotify
>
> - type: custom:button-card
> entity: media_player.sovrum
> triggers_update: sensor.youtube_watching
> name: 2
> template:
> - conditional_media
> - icon_spotify
>
> - type: custom:button-card
> entity: media_player.spotify
> name: 3
> template:
> - conditional_media
> - icon_spotify
>
> - type: custom:button-card
> entity: media_player.kok
> name: 4
> template:
> - conditional_media
> - icon_spotify
>
> - type: horizontal-stack
> cards:
>
> # PS5
> - type: conditional
> conditions:
> - entity: select.conditional_media
> state_not: Apple TV
> card:
> type: custom:button-card
> entity: sensor.ps5_activity
> name: PS5
> tap_action:
> action: none
> template:
> - conditional_media
> - icon_playstation
>
> - type: horizontal-stack
> cards:
>
> # APPLE TV
> - type: conditional
> conditions:
> - entity: select.conditional_media
> state_not: PS5
> card:
> type: custom:button-card
> entity: media_player.apple_tv
> triggers_update: sensor.youtube_watching
> name: Apple TV
> tap_action:
> action: none
> template:
> - conditional_media
> - icon_apple_tv
>
> - type: horizontal-stack
> cards:
>
> # PLEX
> - type: conditional
> conditions:
> - entity: select.conditional_media
> state_not: PS5
> card:
> type: custom:button-card
> entity: sensor.plex_recently_added
> triggers_update: sensor.youtube_watching
> name: Senast tillagt
> tap_action:
> action: none
> template:
> - conditional_media
> - icon_plex
>
>
> #################################################
> # #
> # SÄKERHET #
> # #
> #################################################
>
> - type: grid
> title: Säkerhet
> view_layout:
> grid-area: övrigt
> columns: 2
> cards:
>
> - type: custom:button-card
> entity: alarm_control_panel.alarmo
> aspect_ratio: 1/1
> show_entity_picture: true
> show_state: true
> show_name: true
> name: Securitas
> show_icon: true
> style:
> - padding: 0px
> styles:
> entity_picture:
> - width: 80%
> - height: 100%
> - padding-bottom: 0%
> card:
> - border-radius: 10%
> - background-color: 'rgba(115, 115, 115, 0.2)'
> icon: mdi:shield-off-outline
> state:
> - value: 'arming'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Larmar på';
> }
> else {
> return 'Larmar på';
> }
> ]]]
> icon: mdi:shield-key
> styles:
> card:
> - animation: blink 3s ease infinite
> - background-color: '#FAA255'
> - value: 'armed_away'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Larmat';
> }
> else {
> return 'Larmat';
> }
> ]]]
> icon: mdi:shield-lock
> styles:
> card:
> - background-color: '#BA494B'
> - value: 'armed_home'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Hemma';
> }
> else {
> return 'Hemma';
> }
> ]]]
> icon: mdi:shield-home
> styles:
> card:
> - background-color: '#F0C438'
> - value: 'armed_night'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Nattläge';
> }
> else {
> return 'Nattläge';
> }
> ]]]
> icon: mdi:shield-moon
> styles:
> card:
> - background-color: '#66C6F2'
> - value: 'disarmed'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Avlarmat';
> }
> else {
> return 'Avlarmat';
> }
> ]]]
> icon: mdi:shield-lock-open
> styles:
> card:
> - background-color: '#7F7CE6'
> - value: 'pending'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Nedräkning';
> }
> else {
> return 'Nedräkning';
> }
> ]]]
> icon: mdi:shield-sync
> styles:
> card:
> - animation: blink 4s ease infinite
> - background-color: '#FAA255'
> - value: 'triggered'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Larm utlöst';
> }
> else {
> return 'Larm utlöst';
> }
> ]]]
> icon: mdi:bell-alert
> styles:
> card:
> - animation: blink 1s ease infinite
> - background-color: '#f70d1a'
> - value: 'unavailable'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Funkar inte';
> }
> else {
> return 'Funkar inte';
> }
> ]]]
> icon: mdi:shield-alert
> styles:
> card:
> - animation: blink 10s ease infinite
> - background-color: '#657c80'
> - value: 'unknown'
> state_display: >
> [[[
> if (entity.state == 'on') {
> return 'Funkar inte';
> }
> else {
> return 'Funkar inte';
> }
> ]]]
> icon: mdi:shield-alert
> styles:
> card:
> - animation: blink 10s ease infinite
> - background-color: '#6f8499'
>
> - type: custom:button-card
> entity: binary_sensor.dorrmagnet_hallen
> name: Dörrmag.
> triggers_update:
> - sensor.dorrmagnet_hallen_last_changed
> state_display: >
> [[[
> if (variables.state === 'off') {
> return 'Stängd';
> }
> if (variables.state === 'on') {
> return 'Öppen';
> }
> ]]]
> variables:
> retain: sensor.dorrmagnet_halle_last_changed
> template:
> - base
> - circle_state
> - icon_aqara_lock
>
> - type: custom:button-card
> entity: camera.uvc_g3_dome_high
> name: Kamera
> template:
> - base
> - icon_unifi_cam
> state_display: >
> [[[
> if (variables.state == 'idle') {
> return 'Påslagen';
> } else if (variables.state == 'unavailable') {
> return 'Av';
> }
> ]]]
>
> - type: custom:button-card
> entity: camera.uvc_g3_dome_high
> name: Hallen
> template:
> - base
> - icon_contact_sensor
> - conditional_media
> state_display: >
> [[[
> if (variables.state == 'on') {
> return 'Påslagen';
> } else if (variables.state == 'off') {
> return 'Av';
> } else if (variables.state == 'unavailable') {
> return 'Av';
> } else if (variables.state == 'idle') {
> return 'Påslagen';
> }
> ]]]
>
>
>
> #################################################
> # #
> # HEMMA #
> # #
> #################################################
>
> - type: grid
> title: Hemma
> view_layout:
> grid-area: hemma
> columns: 2
> cards:
>
> - type: custom:button-card
> entity: person.xx
> name: xx
> triggers_update:
> - sensor.matte_last_changed
> variables:
> retain: sensor.matte_last_changed
> template:
> - person
> - circle
>
> - type: custom:button-card
> entity: person.xx
> name: xx
> triggers_update:
> - sensor.sanja_last_changed
> variables:
> retain: sensor.sanja_last_changed
> template:
> - person
> - circle
>
> - type: custom:button-card
> entity: weather.openweathermap
> name: XX
> template:
> - base
> - weather_forecast
> variables:
> current_weather: weather.openweathermap
>
> - type: custom:button-card
> entity: person.xx
> entity: person.xx
> name: Hemma
> variables:
> circle_input: >
> [[[
> return entity === undefined || Math.round(states['zone.home'].state / 2 * 100 ) ;
> ]]]
> hold_action:
> action: more-info
> tap_action:
> action: call-service
> service: input_select.select_next
> service_data:
> entity_id: input_select.state_home
> double_tap_action:
> action: call-service
> service: input_select.previous
> service_data:
> entity_id: input_select.state_home
> custom_fields:
> circle: >
> [[[
> let input = variables.circle_input,
> radius = 20.5,
> circumference = radius * 2 * Math.PI;
> let inner_text = states['zone.home'].state
> return `
> <svg viewBox="0 0 50 50">
> <style>
> circle {
> transform: rotate(-90deg);
> transform-origin: 50% 50%;
> stroke-dasharray: ${circumference};
> stroke-dashoffset: ${circumference - input / 100 * circumference};
> }
> tspan {
> font-size: 10px;
> }
> </style>
> <circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
> <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${inner_text}/2</text>
> </svg>
> `;
> ]]]
> template:
> - base
> - icon_home
> - circle
>
> #################################################
> # #
> # FOOTER #
> # #
> #################################################
>
> - type: horizontal-stack
> view_layout:
> grid-area: footer
> cards:
>
> #NAS
> - type: custom:button-card
> name: >
> <ha-icon icon="mdi:nas"></ha-icon> NAS
> template: footer
>
> #DOCKER
> - type: custom:button-card
> name: >
> <ha-icon icon="mdi:docker"></ha-icon> Docker
> template: footer
>
> #ADGUARD
> - type: custom:button-card
> name: >
> <ha-icon icon="mdi:shield"></ha-icon> AdGuard
> template: footer
>
> #INTERNET
> - type: custom:button-card
> name: >
> <ha-icon icon="mdi:router-wireless"></ha-icon> UniFi
> variables:
> notify: >
> [[[
> let ping = states['sensor.speedtest_ping'];
> if (ping) {
> return ping.state === 'off';
> }
> ]]]
> template: footer
>
> #UPPDATERA
> - type: custom:button-card
> entity: sensor.template_updates
> name: >
> <ha-icon icon="mdi:arrow-up-bold-circle-outline"></ha-icon> Uppdatera
> variables:
> notify: >
> [[[
> return parseInt(entity?.state);
> ]]]
> template: footer
>
> # PLEX
> - type: custom:button-card
> name: >
> <ha-icon icon="mdi:plex"></ha-icon> Plex
> variables:
> notify: >
> [[[
> let ping = states['binary_sensor.ping_rackstationmedia_volume'];
> if (ping) {
> return ping.state === 'off';
> }
> ]]]
> template: footer
The template light is not missing. Imported it many times and tryied refresh my browser, i have also tablet theme on with dark, restarted my homeassistant docker.
What i have done is that i running Luke setup on my Ipad:
And i want to run Mattias setup on my phone becuse i know it was working on my iphone.
See when i login with diffrent account i have setup diffrent layouts to view.
do you have the correct path to the folder?
Where do i find it?
it should be on diffrent place. In docker i have setup it with map-structrue: /opt/homeassistant/config
never mind, i did find the soulution!