chezpaul2
January 21, 2022, 7:22pm
2524
pex81:
- platform: template
sensors:
pretty_date:
friendly_name: Data di oggi
value_template: >-
{% set today = states("sensor.date") %}
{% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
{% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}
{% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
{% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
{% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
{{ day }} {{ arr_months[month-1] }} {{ year }}
attribute_templates:
week_day: >-
{% set today = states("sensor.date") %}
{% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
{% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
{{ arr_week_days[week_day] }}
day: >-
{% set today = states("sensor.date") %}
{% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
{{ day }}
month_num: >-
{% set today = states("sensor.date") %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | round %}
{{ month }}
month_name: >-
{% set today = states("sensor.date") %}
{% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
{{ arr_months[month-1] }}
year: >-
{% set today = states("sensor.date") %}
{% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
{{ year }}
I’m trying to make this work for me setup. Love the button.
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 2%
- align-items: start
name:
- justify-self: start
- line-height: 115%
state:
- justify-self: start
- line-height: 115%
You use this one:
grid:
- grid-template-areas: |
"giorno"
"numero"
"testo"
"eventi"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content 1fr
- gap: 0%
- overflow: hidden
Am I totally wrong?
EDIT: Yeah, you don’t even need the base template. It works the same without it.
pex81
January 21, 2022, 7:37pm
2525
Sorry but I don’t understand what you mean. They are two different grids for two different widgets, one for the calendar widget and the other I don’t remember.
chezpaul2
January 21, 2022, 7:41pm
2526
Well you have it in the calendar button
- type: custom:button-card
entity: calendar.family
template:
- base
- widget_calendar
chezpaul2
January 22, 2022, 6:13pm
2527
I can never stop expanding this beautiful theme. Thank Mattias!
This is the @pex81 template that I used:
widget_calendar:
aspect_ratio: 2/1
show_icon: false
show_name: false
show_state: false
show_label: false
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
"day"
"numero"
"text"
"event"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content 1fr
- gap: 0%
- overflow: hidden
card:
- font-family: Sf Display
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
- transition: none
- padding: 5%
# - height: 80%
- color: >
[[[
if (states['sun.sun'].state == 'below_horizon'){
return 'rgba(0, 0, 0, 0.6)';
} else
return 'rgba(255, 255, 255, 0.8)';
]]]
- background-color: >
[[[
if (states['sun.sun'].state == 'below_horizon'){
return '#1c1c1e';
} else
return 'rgba(255, 255, 255, 0.8)';
]]]
custom_fields:
day:
- place-self: start
- color: '#ff3b2f'
- text-transform: uppercase
- font-weight: 500
numero:
- place-self: start
- color: >
[[[
if (states['sun.sun'].state == 'below_horizon'){
return 'rgba(255, 255, 255, 0.8)';
} else
return 'rgba(0, 0, 0, 0.6)';
]]]
- font-weight: 500
- margin-top: -10px
text:
- place-self: start
- text-transform: uppercase
- color: '#8e8e90'
event:
- place-self: start
- border-left: 3px blue solid
- padding-left: 3px
- color: >
[[[
if (states['sun.sun'].state == 'below_horizon'){
return 'rgba(255, 255, 255, 0.8)';
} else
return 'rgba(0, 0, 0, 0.6)';
]]]
custom_fields:
day: >
[[[ return `${states['sensor.pretty_date'].attributes.week_day}` ]]]
numero: >
[[[ return `${states['sensor.pretty_date'].attributes.day}` ]]]
text: >
[[[
if (states['sun.sun'].state == 'below_horizon'){
return "Tomorrow";
} else
return " ";
]]]
event: '[[[ return entity.attributes.message ]]]'
From a button-card:
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: calendar.family
template:
- widget_calendar
pex81
January 22, 2022, 7:34pm
2528
you can try to use a gap in the sidebar grid.
Hey chezpaul2,
Do you host your home assistant config via GitHub? I would love to take a look at the source code and incorporate your background into mine.
Thanks!
I`ve got some error in the Firefox Devbar:
_evalTemplate@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:425:9295
_getTemplateOrValue@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:425:9964
_buildCustomFields/<@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:433:400
_buildCustomFields@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:433:292
_gridHtml@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:517:25
_buttonContent@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:499:433
_cardHtml@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:479:18
render@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:425:6916
update@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:1:19896
performUpdate@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:1:16782
_enqueueUpdate@http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:1:16434
Uncaught (in promise) TypeError: e.setConfig is not a function
render http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:425
update http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:1
performUpdate http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:1
_enqueueUpdate http://192.168.178.57:8123/hacsfiles/button-card/button-card.js:1
How can I fix this?
chezpaul2
January 23, 2022, 8:11am
2531
How would you do that? I have no clue what so ever
chezpaul2
January 23, 2022, 8:14am
2532
I don’t host my code anywhere. Maybe when I’m done tweaking even though I have, no clue how to do it.
Jshaw20
January 23, 2022, 8:18am
2533
I am trying to get a popup be wider on a desktop and tablet but narrow on a phone, but the width seems to stay narrow on all devices;
this is my current config for the information popup card;
action: fire-dom-event
browser_mod:
command: popup
title: Information
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
}
/* phone */
@media screen and (max-width: 800px) {
:host .content {
max-width: 100vw;
}
}
layout-card:
$grid-layout$:
hui-entities-card:
$: |
.card-content {
padding: 1.5em 2.7em 2.3em 2em;
}
ha-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
$hui-horizontal-stack-card:
$: |
#root {
justify-content: space-evenly;
margin-top: 1.9em;
max-width: 82vw; /* iphonex */
}
pex81
January 23, 2022, 9:07am
2534
in your home have you removed this value? because in the original file there is already a bit of a gap.
- type: custom:grid-layout
path: 0
icon: mdi:home
layout:
#default
grid-gap: var(--custom-layout-card-padding) <<<---- this line in your home?
Jshaw20
January 23, 2022, 4:42pm
2535
full code is:
action: fire-dom-event
browser_mod:
command: popup
title: Information
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
}
/* phone */
@media screen and (max-width: 800px) {
:host .content {
max-width: 100vw;
}
}
layout-card:
$grid-layout$:
hui-entities-card:
$: |
.card-content {
padding: 1.5em 2.7em 2.3em 2em;
}
ha-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
$hui-horizontal-stack-card:
$: |
#root {
justify-content: space-evenly;
margin-top: 1.9em;
max-width: 82vw; /* iphonex */
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(3, 1fr)
grid-template-rows: 1fr
grid-template-areas: |
"hass tablet nas"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(3, 1fr)
grid-template-areas: |
"hass"
"tablet"
"nas"
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.template_hass_version
- entity: switch.watchtower
- entity: sensor.template_hass_dev_release
- entity: sensor.databas
- entity: sensor.home_assistant_log
- entity: sensor.uptime
- 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.docker_cpu
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.docker_cpu
- entity: sensor.template_dockermon_mem
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.template_dockermon_mem
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
name: Home Assistant
icon: mdi:reload
tap_action:
services: |
[[[
hass.callService('browser_mod', 'toast', {
message: 'Startar om Home Assistant...'
});
hass.callService('homeassistant', 'restart');
]]]
template: icon_name
- type: custom:button-card
name: Container
icon: mdi:reload
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.homeassistant_restart
template: icon_name
#################################################
# #
# TABLET #
# #
#################################################
- type: entities
view_layout:
grid-area: tablet
title: Galaxy Tab A 10.1
show_header_toggle: false
card_mod:
class: header
style: |
ha-card {
margin: 0px !important;
}
entities:
- entity: switch.galaxy_tab_a_screensaver
- entity: light.galaxy_tab_a_screen
- type: custom:slider-entity-row
entity: light.galaxy_tab_a_screen
name: Ljusstyrka
icon: mdi:brightness-6
hide_state: false
- entity: binary_sensor.galaxy_tab_a_plugged_in
- entity: sensor.galaxy_tab_a_last_app_start
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: *bar_card_positions
severity:
- color: '#6d2525'
from: 0
to: 89
- color: '#303435'
from: 90
to: 100
entity_row: true
entities:
- entity: sensor.galaxy_tab_a_battery_level
icon: mdi:battery
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: *bar_card_positions
severity: *bar_card_severity
entity_row: true
entities:
- entity: sensor.template_fullykiosk_memory
name: Minne - 2GB
icon: mdi:memory
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.template_fullykiosk_memory
- entity: sensor.template_fullykiosk_storage
name: Lagring - 32GB
icon: mdi:sd
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.template_fullykiosk_storage
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
name: Startsidan
icon: mdi:reload
tap_action:
services: |
[[[
hass.callService('browser_mod', 'toast', {
message: 'Laddar om startsidan...'
});
hass.callService('button', 'press', {
entity_id: 'button.galaxy_tab_a_load_start_url'
});
]]]
template: icon_name
- type: custom:button-card
name: Hela appen
icon: mdi:reload
tap_action:
services: |
[[[
hass.callService('browser_mod', 'toast', {
message: 'Startar om Fully Kiosk Browser...'
});
hass.callService('button', 'press', {
entity_id: 'button.galaxy_tab_a_restart_browser'
});
]]]
template: icon_name
#################################################
# #
# NAS #
# #
#################################################
- type: entities
view_layout:
grid-area: nas
title: Synology DS918+
show_header_toggle: false
card_mod:
class: header
style:
.: |
ha-card {
animation: none !important;
margin: 0px !important;
}
mini-graph-card:
$: |
ha-card {
padding: 0px !important;
}
hui-horizontal-stack-card:
$:
.: |
#root {
margin-top: 1em;
margin-right: 1.5em;
}
#root > * {
flex: none !important;
}
hui-entities-card:
$:
.: |
#states {
padding: 0;
}
hui-sensor-entity-row:
$hui-generic-entity-row$: |
.info {
margin: 0 8px 0 8px !important;
}
entities:
- entity: sensor.template_nas_status
- entity: binary_sensor.nas_security_status
name: Säkerhetsstatus
- entity: sensor.nas_volume_1_average_disk_temp
- entity: sensor.last_boot
name: Senast omstart
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: *bar_card_positions
severity: *bar_card_severity
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: Minne - 4GB
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.memory_use_percent
- entity: sensor.disk_use_percent
name: Lagring - 10.5TB
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.disk_use_percent
footer:
type: custom:apexcharts-card
layout: minimal
graph_span: 1h
locale: se
show:
loading: false
apex_config:
chart:
fontFamily: Roboto
height: 135px
offsetY: -20px
grid:
padding:
top: -20
tooltip:
style:
fontSize: 14px
x:
show: true
format: dddd HH:mm
xaxis:
crosshairs:
show: false
legend:
fontSize: 14px
fontWeight: 400
itemMargin:
horizontal: 25
formatter: |
EVAL:(seriesName, opts) => {
var arr = opts.w.globals.series[opts.seriesIndex],
value = arr[arr.length - 1],
convert = (value / 1024).toFixed(2);
if (value == null) {
return seriesName;
} else {
return value < 1024 ? `${Math.round(value)} kB/s` : `${convert} MB/s`;
}
}
markers:
width: 26
height: 23
customHTML:
- 'EVAL:() => {return `<ha-icon icon="mdi:arrow-down-bold" style="--mdc-icon-size: 23px;"></ha-icon>`}'
- 'EVAL:() => {return `<ha-icon icon="mdi:arrow-up-bold" style="--mdc-icon-size: 23px;"></ha-icon>`}'
fillColors:
- none
- none
fill:
type: gradient
gradient:
type: vertical
opacityFrom: 0.8
opacityTo: 0
stops:
- 0
- 99
- 100
stroke:
width: 3
all_series_config:
type: area
fill_raw: last
series:
- entity: sensor.nas_network_down
name: Ned
color: green
- entity: sensor.nas_network_up
name: Upp
color: '#385581'
has anyone else got the same problem?
Thanks
chezpaul2
January 23, 2022, 7:14pm
2536
I did not remove that. It’s still in there.
chezpaul2
January 24, 2022, 6:29am
2538
Shouldn’t it work when I add the Grid-gap in the themes sidebar section?
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
grid-gap: 10px
Mike1977
January 24, 2022, 6:10pm
2539
Hello together,
Yesterday i found this great looking Lovelace UI and i started to adopt and more imortantly understand how everythings work.
Is there perhaps a good documentation for the themes.yaml
Can you please share your .svg files please
larsvb88
January 24, 2022, 8:16pm
2541
Hi
msymms
January 24, 2022, 8:22pm
2542
Mike1977,Home Assistant Frontend - Home Assistant .@Mattias_Persson did not document this, as it is for his personal configuration, but he is very active on this thread. God Bless him!
jsmith
January 24, 2022, 11:05pm
2543
Curious where to copy the files/folders?
ui-lovelace.yamlbutton_card_templates.yaml
popup folder
include/themes.yaml
Do they go in /config?
1 Like
larsvb88
January 25, 2022, 6:46am
2544
Yes put them in config foldrr
