T1ppes
September 25, 2022, 10:37am
2708
I like how the custom person card info includes the battery state for the personal device.
Has someone ammendet the binary sensor card to include the same information?
I have a some battery powered Zigbee devices across the house (i.e. door and window sensors, or motion sensors). If the battery information would be visible in the binary sensor card , I would not need to waste additional space showing a battery card next to it.
1 Like
stiw47
(mikri maus)
September 25, 2022, 2:05pm
2709
Never mind, I will answer on my own question
I found what I need in default installation files:
config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/popup_templates/popups/popup_light_brightness.yaml
At this moment, line 388 is: effects_list: false
per default.
Changing it to true
gives me exactly what I wanted - effects drop-down appear on this beautiful pop-up card:
Of course, this is not right approach, cause with first next update of ui-minimalist, this will be overwritten I believe. Tried to copy popup_light_brightness.yaml
somewhere to config/ui_lovelace_minimalist
, similar way as we are making custom cards, dashboards, etc. instead in config/custom_components/ui_lovelace_minimalist
, but didnāt figured out right folder structure yet and not sure if this is doable at all.
Se7enair
(Se7enair)
September 25, 2022, 3:05pm
2710
Unfortunately I cannot share the code at the moment. I am not at home and VS Code seems to not work on a iPad. Neither in the App nor in Chrome of Safari.
You have to wait till next week. But for the calendar, just create a new custom: button-card
And add the calendar as content of the card. I use atomic-calendar-revive
1 Like
Jogi1989
(Jo)
September 25, 2022, 4:07pm
2711
Thank you very much for your answer, Iāll try it
Se7enair
(Se7enair)
September 25, 2022, 6:26pm
2712
Today is your lucky day. Just checked something and et voila, VS Code is working.
As I wrote, this is a Work in Progress. So not everything is working. At the moment I am working on the popups and templates.
---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
kiosk_mode:
hide_header: true
hide_sidebar: true
mobile_settings:
hide_sidebar: false
ignore_entity_settings: true
custom_width: 768
title: "UI Lovelace Minimalist"
theme: "minimalist-desktop"
views:
# Dashboard
- title: "Dashboard"
path: 0
icon: "mdi:flower"
type: custom:grid-layout
layout:
grid-template-columns: 0.5em 5em repeat(3, 3fr) 0.5em
grid-template-rows: 6em 18em 29em 1em
grid-gap: 0.7em
grid-template-areas: |
". . . chips clock ."
". navigation welcome weather camera ."
". navigation calendar rooms house ."
". . footer footer footer ."
cards:
#############
# Chips #
#############
- type: vertical-stack
view_layout:
grid-area: chips
cards:
- type: "custom:button-card"
color_type: blank-card
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: blank-card
- type: 'custom:button-card'
template: custom_card_person_chip
variables:
ulm_custom_card_person_chip_entity: person.christoph
- type: 'custom:button-card'
template: custom_card_person_chip
variables:
ulm_custom_card_person_chip_entity: person.franziska
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: blank-card
#############
# Clock #
#############
- type: "custom:button-card"
view_layout:
grid-area: clock
styles:
label:
- justify-self: "right"
name:
- justify-self: "right"
template: custom_card_nik_clock
variables:
ulm_custom_card_nik_clock_switch_enable: false
##################
# Navigation #
##################
- type: grid
columns: 1
square: true
view_layout:
grid-area: navigation
cards:
# House
- type: custom:button-card
name:
icon: mdi:home
aspect_ratio: 1/1
tap_action:
action: navigate
navigation_path: /home
# Energy
- type: custom:button-card
name:
icon: mdi:fire
aspect_ratio: 1/1
tap_action:
action: navigate
navigation_path: /energy-yaml
# Metrics
- type: custom:button-card
icon: mdi:chart-multiline
aspect_ratio: 1/1
tap_action: !include popup/proxmox.yaml
###############
# Welcome #
###############
- type: "custom:button-card"
view_layout:
grid-area: welcome
template: "custom_card_se7enair_welcome"
styles:
card:
- height: 100%
triggers_update: input_boolean.alarmanlage
variables:
ulm_card_esh_welcome_collapse: input_boolean.alarmanlage
ulm_weather: weather.openweathermap
entity_1:
nav: "house"
icon: "mdi:home"
name: "House"
color: "blue"
entity_2:
nav: "lights"
icon: "mdi:lightbulb"
name: "Lights"
color: "yellow"
entity_3:
nav: "security"
icon: "mdi:shield"
name: Secure
color: "green"
entity_4:
nav: "proxmox"
icon: "mdi:chart-multiline"
name: Proxmox
color: "purple"
entity_5:
nav: "!include popup/wifi.yaml"
icon: "mdi:wifi"
name: Wifi
color: "red"
###############
# Weather #
###############
- type: weather-forecast
view_layout:
grid-area: weather
show_current: true
show_forecast: true
entity: weather.openweathermap
################
# Calendar #
################
- type: custom:atomic-calendar-revive
view_layout:
grid-area: calendar
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 30
entities:
- entity: !secret calendar_entity_primary
- entity: !secret calendar_entity_family
showCurrentEventLine: false
showMonth: false
showWeekDay: true
showNoEventsForToday: true
showEventIcon: false
calShowDescription: true
showLastCalendarWeek: false
dimFinishedEvents: true
showRelativeTime: false
eventCalNameColor: rgba(86, 100, 86, .35)
calWeekDayColor: rgba(86, 100, 86, .35)
showLocation: false
untilText: bis
noEventsForNextDaysText: keine Termine in den nƤchsten Tagen
showProgressBar: false
showDescription: true
noEventText: keine Termine heute
showFullDayProgress: true
disableCalEventLink: false
disableCalLocationLink: false
disableCalLink: false
showDate: false
sortByStartTime: true
cardHeight: 91%
refreshInterval: 60
#############
# House #
#############
- type: grid
columns: 2
square: false
view_layout:
grid-area: house
cards:
- type: 'custom:button-card'
template: custom_card_se7enair_washingmachine
entity: input_select.waschmaschinenstatus
variables:
ulm_card_generic_swap_name: Waschmaschine
- type: custom:button-card
template: custom_card_se7enair_washingmachine
entity: input_select.trocknerstatus
variables:
ulm_card_generic_swap_name: Trockner
- type: "custom:button-card"
entity: lock.nuki_haustuere_lock
template: "custom_card_eraycetinay_lock"
name: "HaustĆ¼re"
variables:
ulm_custom_card_eraycetinay_lock_tap_control: true
ulm_custom_card_eraycetinay_lock_battery_level: sensor.nuki_haustuere_battery
ulm_custom_card_eraycetinay_lock_door_open: binary_sensor.flur_haustuere_tuersensor_contact
triggers_update:
- "sensor.nuki_haustuere_battery"
- "binary_sensor.flur_haustuere_tuersensor_contact"
- type: "custom:button-card"
template: card_cover
entity: cover.garage_tor
variables:
ulm_card_cover_enable_controls: false
ulm_card_cover_enable_slider: false
ulm_card_cover_name: Garage
ulm_card_cover_garage: true
- type: 'custom:button-card'
template: card_generic_swap
entity: switch.nuki_opener_ring_suppression
variables:
ulm_card_generic_swap_name: KlingelunterdrĆ¼ckung
- type: "custom:button-card"
template:
- card_media_player
entity: media_player.wohnzimmer_alexa
variables:
ulm_card_media_player_enable_popup: true
- type: 'custom:button-card'
template: card_generic_swap
entity: calendar.abfallkalender
- type: 'custom:button-card'
template: card_generic_swap
entity: sensor.maehroboter_status_lesbar
variables:
ulm_card_generic_swap_name: MƤhroboter
ulm_card_generic_swap_icon: mdi:robot-mower
- type: "custom:button-card"
template: card_light
entity: light.aussen_licht
variables:
ulm_card_light_enable_slider: false
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: false
#############
# Rooms #
#############
- type: grid
columns: 2
view_layout:
grid-area: rooms
square: false
cards:
# Wohnzimmer
- type: 'custom:button-card'
template:
- card_room
- red_on
name: Wohnzimmer
icon: mdi:sofa
entity: climate.wohnzimmer_heizung
tap_action: !include ../../popup/climate_wohnzimmer.yaml
# action: navigate
# navigation_path: /ui-lovelace-minimalist/wohnzimmer
variables:
entity_1:
entity_id: light.wohnzimmer_licht_gruppe
tap_action:
action: toggle
templates:
- yellow_on
entity_2:
entity_id: media_player.wz_tv
templates:
- yellow_on
entity_3:
entity_id: humidifier.wz_luftbefeuchter
# Esszimmer
- type: 'custom:button-card'
template:
- card_room
name: Esszimmer
icon: mdi:table-furniture
entity: climate.esszimmer_heizung
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/esszimmer
variables:
entity_1:
entity_id: light.esszimmer_licht
templates:
- yellow_on
tap_action:
action: toggle
# KĆ¼che
- type: 'custom:button-card'
template:
- card_room
name: KĆ¼che
icon: mdi:stove
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/kueche
variables:
label_use_temperature: false
entity_1:
entity_id: light.kueche_licht_gruppe
templates:
- yellow_on
tap_action:
action: toggle
# Bad
# - type: 'custom:button-card'
# template:
# - card_room
# name: Bad
# icon: mdi:bathtub
# entity: climate.bad_heizung
# tap_action:
# action: navigate
# navigation_path: /ui-lovelace-minimalist/bad
# variables:
# entity_1:
# entity_id: binary_sensor.bad_fenster_links_contact
# Schlafzimmer
- type: 'custom:button-card'
template:
- card_room
name: Schlafzimmer
icon: mdi:bed
entity: climate.schlafzimmer_heizung
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/schlafzimmer
variables:
entity_1:
entity_id: light.schlafzimmer_licht
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: switch.schlafzimmer_babyphone
templates:
- yellow_on
tap_action:
action: toggle
# BĆ¼ro
# - type: 'custom:button-card'
# template:
# - card_room
# name: BĆ¼ro
# icon: mdi:chair-rolling
# entity: climate.buero_heizung
# tap_action:
# action: navigate
# navigation_path: /ui-lovelace-minimalist/buero
# variables:
# entity_1:
# entity_id: binary_sensor.buero_bewegungsmelder_occupancy
# tap_action:
# action: more-info
# templates:
# - yellow_on
##############
# Camera #
##############
- type: custom:button-card
view_layout:
grid-area: camera
styles:
card:
- height: 100%
custom_fields:
camera:
[top: 0%, left: 0%, width: 111%, position: absolute]
custom_fields:
camera:
card:
type: custom:frigate-card
cameras:
- live_provider: frigate-jsmpeg
camera_entity: camera.garten_kamera_hof
camera_name: hof
view:
default: live
update_seconds: 300
timeout_seconds: 300
update_force: false
menu:
mode: overlay-top
buttons:
clips: true
image: false
download: false
live:
preload: true
draggable: false
actions:
tap_action:
action: custom:frigate-card-action
frigate_card_action: fullscreen
controls:
next_previous:
style: icons
image:
mode: camera
##############
# Footer #
##############
# - type: horizontal-stack
# view_layout:
# grid-area: footer
# cards:
# - type: "custom:button-card"
# color_type: blank-card
# # Wifi
# - type: custom:button-card
# template: card_navigate
# styles:
# card:
# - width: 10em
# tap_action: !include popup/wifi.yaml
# variables:
# ulm_card_navigate_path: /ui-lovelace-minimalist/media
# ulm_card_navigate_title: Wifi
# ulm_card_navigate_icon: mdi:wifi
# # House
# - type: custom:button-card
# template: card_navigate
# styles:
# card:
# - width: 10em
# tap_action: !include popup/house.yaml
# variables:
# ulm_card_navigate_path: /ui-lovelace-minimalist/media
# ulm_card_navigate_title: House
# ulm_card_navigate_icon: mdi:home
# - type: "custom:button-card"
# color_type: blank-card
# # Metrics
# - type: custom:button-card
# template: card_navigate
# styles:
# card:
# - width: 10em
# tap_action: !include popup/proxmox.yaml
# variables:
# ulm_card_navigate_path: /ui-lovelace-minimalist/media
# ulm_card_navigate_title: Wifi
# ulm_card_navigate_icon: mdi:chart-multiline
# # Energy
# - type: custom:button-card
# template: card_navigate
# styles:
# card:
# - width: 10em
# tap_action: !include popup/energy.yaml
# variables:
# ulm_card_navigate_path: /ui-lovelace-minimalist/media
# ulm_card_navigate_title: Energy
# ulm_card_navigate_icon: mdi:fire
# - type: "custom:button-card"
# color_type: blank-card
2 Likes
Jogi1989
(Jo)
September 25, 2022, 6:29pm
2713
many many thanks! I wll sit down at the computer right away. This will be my night ā¦thank you very much! Wow nice!!!
1 Like
Freshhat
(Freshhat)
September 26, 2022, 1:01pm
2714
Does anybody else also have issues with the label from the person card? Since the last update i always have āundefinedā as status. If i click on the card then i can see the correct status āHomeā; āWorkā; etc.
Here is the code
- type: 'custom:button-card'
template: card_person
variables:
ulm_card_person_entity: person.christoph
ulm_card_person_use_entity_picture: true
ulm_card_person_battery: sensor.iphone_battery_level
#ulm_address: sensor.iphone_geocoded_location
If i uncomment the ulm_address then i get the exact address, but i just want the Zone as label.
jarrah
(jarrah)
September 26, 2022, 6:18pm
2715
Iāve been looking into the card yaml code to figure out the amazing ways that custom button card has been used. One thing Iām not sure about is the following:
- margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]"
I get that it translates as āif thereās no entity 1, return -24%, else return -10%ā, but what does the ? mean after variables but before .entity? i.e. !variables? <-
I also see it in other places like this:
entity: "[[[ return variables?.entity_1?.entity_id; ]]]"
Plus, whatās the difference between these two? ie question mark at the end of variables vs exclamation mark at the beginning?
variables: "[[[ return variables?.entity_2; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
Mitssz
September 27, 2022, 7:41pm
2717
Can someone help me? In the beginning of using Minimalist my yaml code changes are applied immediately. But since a few HA updates every code change I need to restart HA for the changes to take effect.
How can I fix the installation so I dont need to restart HA everytime I change something?
Hey Guys, I made a custom card for light groups and it works great so far. But I found a issue with larger screen sizes. I did a bunch of debuging on the issue and narrowed it down to grid-area being set (and I cant figure out how to unset it). Does anyone know how to unset the grid-area of a card? I made a separate post with more info but have not had a response so figured I would ask here.
Any help is appreciated,
I am working on a custom component for Minimalist UI . I have it mostly working but the spacing is a little weird on some screen sizes. Ive found that (in dev tools) I remove (or change to unset) the grid-area css style the layout is what I would expect. The problem is I can not figure out how to change the grid-area (outside of dev tools).
Looking in the button card code I found out why it always gets set. It applies all the css styles that are specified in the yaml and then at the end of the sā¦
basbrus
(Bas)
September 28, 2022, 6:16am
2719
jarrah:
I get that it translates as āif thereās no entity 1, return -24%, else return -10%ā, but what does the ? mean after variables but before .entity? i.e. !variables? <-
@jarrah
?.
Is an āoptional chaining ā operator and returns āundefinedā instead of an error when the variable or a part is not set.
Read: return entity_2 when not undefined (linking of chains and variables)
Read: if variables.entity_2 is false or undefined ā return true (condition)
@Mitssz You should always be able to reload Ui Minimalist from the dev-tools, to see the changes in your dashboard make also sure to reload the dashboard with the 3 dots in the upper-right corner of your dashboard. FAQ - UI Lovelace Minimalist For more info.
PartemImperium:
Any help is appreciated,
@PartemImperium I have took a look at your code. Maybe try changing the full last styles part to something like this:
card: #TODO: Look into if minimalist has any way to have a array of cards in a grid.
type: grid
square: false
columns: 2
styles:
card:
- padding: "0px"
grid:
- grid-template-areas: "lights"
- display: "flex"
- justify-content: "start"
1 Like
stiw47
(mikri maus)
September 28, 2022, 12:07pm
2720
Does anybody else have problems with browser mod popups? In certain, I cannot get Thermostat Popup to work and Iām not sure where to trace this. I already cleared browser cache, restarted browser few times, removed Browser Mod integration, restarted Home Assistant and added integration again, same behavior on all devices, the empty popup:
Thx
That pointed me in the right direction. With that as a starter I ended up on the following.
styles:
card:
- padding-bottom: "0px"
custom_fields:
lights:
- width: "100%"
grid:
- grid-template-areas: "lights"
- display: "flex"
- justify-content: "start"
It works great. No more empty section. Thanks for the help/pointing me in the right direction.
I am running into a new issue now but dont think it will be as easy to fixā¦ In the normal lights card (inside the auto entities on the bottom part) if the name of the light is longer than the width of the card it just overflows (and the slider follows its width). I found that unsetting the overflow on the inline styles for #name fixes it (because it has a ellipsis class on it that has overflow hidden). But because that is a card in a nested custom_field I dont think I can modify the styles like we did here or use card_mod to add a css style. Is it possible to modify these nested custom_fields card styles or will I just have to rename my lights to be shorter?
Jogi1989
(Jo)
September 29, 2022, 5:54pm
2722
Hello, itās me again
Iām now, thanks to you, a big step further. There is still a lot to do on my dream dashboard.
Now I have a small request, if it were possible.
Could you please post me your code custom_card ācustom_card_se7enair_welcomeā here?
That would be great! Iām sorry for bothering you again!
Thanks and regards
Se7enair
(Se7enair)
September 29, 2022, 7:14pm
2723
At the moment there is no difference to the custom-scenes-card.
I tried to exchange scenes with popups. But so far no sucess.
Hello everyone. I am missing the color temperature indicator within the light popup card after update. How can I get it back?!
guims78
(guims)
October 4, 2022, 2:23pm
2726
Hello,
i working on a custon chip icon state that will change background color if state is āonā
here is my code :
custom_chip_icon_state:
template: chip_icon_state
state:
- value: 'on'
styles:
card:
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
but no color change.
Where am i wrong ?
PS: i refresh lovelace-minimalist and so on.
I have timers that I adjust with a input_number shown as a slider. Is there or can we get a numeric slider for minimalist?
Did you get a solution to this? Iām trying to do something similiar (without using templates)ā¦
Hereās my code - but colour never changes.
entity_2:
entity_id: media_player.mass_bose_home_speaker_500_2
templates:
- green_playing
tap_action:
action: toggle