lovelace:
mode: yaml
resources:
[ {url: /hacsfiles/bring-shopping-list/bring_shopping_list_card.js, type: module},
{url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module},
{url: /hacsfiles/mini-media-player/mini-media-player-bundle.js, type: module},
{url: /hacsfiles/vacuum-card/vacuum-card.js, type: module},
{url: /hacsfiles/tankerkoenig-card/tankerkoenig-card.js, type: module},
{url: /hacsfiles/bar-card/bar-card.js, type: module},
{url: /hacsfiles/button-card/button-card.js, type: module},
{url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module},
{url: /hacsfiles/light-entity-card/light-entity-card.js, type: module},
{url: /hacsfiles/light-popup-card/light-popup-card.js, type: module},
{url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module},
{url: /hacsfiles/lovelace-hui-element/hui-element.js, type: module},
{url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module},
{url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module},
{url: /hacsfiles/swipe-card/swipe-card.js, type: module},
{url: /hacsfiles/transmission-card/transmission-card.js, type: module},
{url: '/local/calendar-card.js?v=31091', type: module},
{url: '/local/stack-in-card.js?v=101', type: module},
{url: '/local/valetudo-map-card.js?v=42dbceb', type: module},
{url: '/local/custom_icons.js?v=25052001', type: module},
{url: /local/font.css, type: css} ]
This is in my conf file and this is my Lovelace yaml
##########################################################################
# #
# * SETTINGS * #
# #
##########################################################################
anchors:
⚓₁: &title
entity: sensor.placeholder
tap_action:
action: none
hold_action:
action: none
type: state-label
⚓₂: &title-style
color: '#bcbebf'
font-family: SF Text
font-size: 2.4vw
font-weight: 500
max-width: 1px
cursor: default
button_card_templates: !include button_card_templates.yaml
##########################################################################
# #
# * LOVELACE * #
# #
##########################################################################
title: Home
views:
- panel: true
path: default_view
cards:
- type: picture-elements
image: /local/background.png
elements:
# markdown fix
- type: custom:hui-element
card_type: markdown
style: {opacity: 0}
content: preload
#################################################
# #
# COVID-19 #
# #
#################################################
- type: custom:hui-markdown-card
class: coronavirus
style:
{top: 93.65%, left: 70.2%}
content: >
{% if is_state('sensor.covid_19_folkhalsomyndigheten', 'Tillgänglig') %}
{% set data = state_attr('sensor.covid_19_folkhalsomyndigheten', 'embedCode') %}
{% set total = data | regex_findall_index('Totalt[^,]*?(\d+)[^,]*?(\d+)[^,]*?(\d+)') | list %}
{% set break = ' <font color="#2f3436">|</font> ' %}
<font color='#6a7377'>
<ha-icon icon="mdi:virus"></ha-icon> <b>Coronavirus</b>{{ break -}}
<ha-icon icon="mdi:chart-bar"></ha-icon> <b>{{ ((total[0] | int / 10327589) * 100) | round(2) }}%</b> av Sverige{{ break -}}
<ha-icon icon="mdi:emoticon-sad"></ha-icon> <b>{{ total[0] }}</b> fall{{ break -}}
<ha-icon icon="mdi:grave-stone"></ha-icon> <b>{{ total[2] }}</b> avlidna{{ break -}}
<ha-icon icon="mdi:map-marker-radius"></ha-icon> <b>{{ data | regex_findall_index('Skåne[^,]*?(\d+)') }}</b> fall i Skåne
</font>
{% endif %}
##########################################################################
# #
# * SIDEBAR * #
# #
##########################################################################
- type: image
image: local/sidebar.png
style:
{top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,0.2)'}
#################################################
# #
# MARKDOWN #
# #
#################################################
- type: custom:hui-markdown-card
class: sidebar
style:
{top: 9%, left: 11.1%}
content: >
<span>{{ now().strftime('%H') }}<span>:</span>{{ now().strftime('%M') }}</span>
<font color='#6a7377'><b>{{ states('sensor.sidebar_day') }}</b><br>
<b>{{ states('sensor.sidebar_date') }}</b> </font><br>
<b>{{ states('sensor.sidebar_greeting') }}</b>
<b>{{ states('sensor.sidebar_active') }}</b>
<font color='#6a7377'>
<b>{{ states('sensor.sidebar_vacuum') }}</b>
{{ states('sensor.sidebar_weather') }}
{{ states('sensor.tvatta_countdown') }}
{{ states('sensor.mathem_countdown') }}
</font>
#################################################
# #
# VACUUM BUTTON #
# #
#################################################
- type: icon
icon: custom:roborock-vacuum
title: Dammsugare
style:
top: 87.41%
left: 4.8%
color: rgb(255, 255, 255)
opacity: 0.1
padding: 0.8vw
--mdc-icon-size: 4vw
tap_action: !include popup/sidebar_vacuum.yaml
#################################################
# #
# INFO BUTTON #
# #
#################################################
- type: icon
icon: mdi:information-outline
title: Information
style:
top: 87.41%
left: 10.7%
color: rgb(255, 255, 255)
opacity: 0.1
padding: 0.8vw
--mdc-icon-size: 4vw
tap_action: !include popup/sidebar_information.yaml
#################################################
# #
# UPDATES BUTTON #
# #
#################################################
- type: icon
icon: mdi:arrow-up-bold-circle-outline
title: Uppdateringar
style:
top: 87.41%
left: 16.55%
color: rgb(255, 255, 255)
opacity: 0.1
padding: 0.8vw
--mdc-icon-size: 4vw
tap_action: !include popup/sidebar_update.yaml
