Yes, you need to customize your yaml in adaptive-dash folder
HACS Frontend addon. Itās called āHome assistant swipe navigationā
Hey all,
What are people using for data metrics, upload download ect?
Thanks
1 Like
Hello,
maybe you can help me. Iām trying to open a popup in the room card.
unfortunately that doesnāt work. I tried the code in another entity card and the popup opens.
#Wohnzimmer Room Card#
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Wohnzimmer
entity: light.wohnzimmer
show_entity_picture: true
entity_picture: /local/interior-design.png
label: '[[[ return states["sensor.raumthermostat_temperature"].state + "Ā°C" ]]]'
tap_action:
action: navigate
navigation_path: 'wohnzimmer'
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: light.wohnzimmer
templates:
- yellow_on
tap_action:
action: toggle
hold_action:
action: more-info
entity_2:
entity_id: input_boolean.1
templates:
- blue_on
tap_action:
action: toggle
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sonos Wohnzimmer
content:
card:
type: custom:mini-media-player
entity: media_player.wohnzimmer_sonos
icon: mdi:spotify
artwork: full-cover
hide:
volume: true
power_state: false
power: true
info: short
volume_stateless: false
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.bad
name: Sonos bad
- entity_id: media_player.kuche
name: Sonos wohnzimmer
- entity_id: media_player.schlafzimmer
name: Sonos schlafzimmer
scale: '1'
background: '0.1'
entity_3:
entity_id:
templates:
- green_on
tap_action:
action: toggle
entity_4:
entity_id: input_boolean.bath_mode
templates:
- pink_on
tap_action:
action: toggle
here a example:
- type: 'custom:button-card'
template:
- card_vertical_button
- card_ing_popup_camera
entity: binary_sensor.cam_frontdoor_motion
icon: mdi:cctv
variables:
ulm_card_ing_popup_camera_name: TĆ¼r Kamera
ulm_card_ing_popup_camera: camera.cam_frontdoor
triggers_update: all
name: |-
[[[
if (entity.state === "on") {
return "Bewegungen";
} else if (entity.state === "off") {
return "TĆ¼r Kamera";
} else if (entity.state === "unavailable") {
return "TĆ¼r Kamera";
} else {
return entity.state;
}
]]]
here the popup template (card_ing_popup_camera):
---
card_ing_popup_camera:
tap_action:
action: "fire-dom-event"
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "card_ing_popup_camera_infos"
entity: "[[[ return entity.entity_id; ]]]"
style: |
--popup-background-color: var(--primary-background-color);
--popup-border-radius: 20px;
--popup-padding-x: 24px;
--popup-padding-y: 20px;
--popup-min-width: 1000px;
card_mod:
style:
ha-dialog$: |
@media (max-width: 800px){
div.mdc-dialog__container {
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw;
--mdc-dialog-min-height: 100%;
--ha-dialog-border-radius: 0px;
}
}
Next Development with the atomic-calendar like the Minimalist Theme:
UX Design Example
here a Preview:
(I am not finished yet)
Next Steps:
more Color for the different calendars, disabled-color for āold eventsā ā¦
5 Likes
Hello
How do you do that? To have the rooms in the left side and entities in the right side
Thanks
I have a question regarding the Room Card.
You can define a color if the entity of the room is on, but that doesnāt seem to work together when using a temperature entity.
Is it possible to let the room card change color based on if the state of one of the 4 smaller entity buttons is on or add another entity to look for to change the card color? Because I would like to be able to display the temperature of the room, but also the state of the room based on the color.
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template:
- card_room
name: Begane grond
entity: sensor.temperatuursensor_woonkamer_temperature
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: '/ui-lovelace-minimalist/begane_grond'
variables:
label_use_temperature: true
entity_1:
entity_id: light.lampen_eettafel
templates:
- yellow_on
Currently:
Would like:
1 Like
my gas-station have a closing-time. and then is the output āunknownā for the gas-price.
How can i switch the name from unknown in close?
- type: 'custom:button-card'
template: card_graph
entity: sensor.tankerkoenig_ed_tank_diesel
variables:
ulm_card_graph_color: "var(--google-blue)"
ulm_card_graph_name: ED Tankstelle
ulm_card_graph_entity: sensor.tankerkoenig_ed_tank_diesel
ulm_card_graph_type: fill
ulm_card_graph_hours: 72
ulm_card_graph_group_by: interval
Here is an example of what works:
tankerkoenig_ed_tank_diesel_unknown:
value_template: >
{% if states.sensor.tankerkoenig_ed_tank_diesel.state == "unknown" %}
geschlossen
{% else %}
{{ states.sensor.tankerkoenig_ed_tank_diesel.state }}
{% endif %}
entity_id: sensor.tankerkoenig_ed_tank_diesel
and now is in the new sensor.tankerkoenig_ed_tank_diesel_unknown = geschlossen
thanks
A number of other users have also reported that the * Waste Collection Custom-card is broken and needs some attention.
I found this commit on GitHub, which at least allows to specify the icon for the button-card in my home.yaml file.
My custom_card_paddy_waste_collection.yaml now looks like this:
---
custom_card_paddy_waste_collection:
template:
- "card_generic_swap"
variables:
ulm_card_generic_swap_name: "[[[ return entity.name; ]]]"
ulm_card_generic_swap_icon: "[[[ return entity.icon; ]]]"
state:
- operator: "template"
value: "[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]"
styles:
custom_fields:
notification:
- border-radius: "50%"
- position: "absolute"
- left: "38px"
- top: "8px"
- height: "16px"
- width: "16px"
- border: "2px solid var(--card-background-color)"
- font-size: "12px"
- line-height: "14px"
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
- operator: "template"
value: "[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]"
styles:
custom_fields:
notification:
- border-radius: "50%"
- position: "absolute"
- left: "38px"
- top: "8px"
- height: "16px"
- width: "16px"
- border: "2px solid var(--card-background-color)"
- font-size: "12px"
- line-height: "14px"
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
- value: "unavailable"
styles:
custom_fields:
notification:
- border-radius: "50%"
- position: "absolute"
- left: "38px"
- top: "8px"
- height: "16px"
- width: "16px"
- border: "2px solid var(--card-background-color)"
- font-size: "12px"
- line-height: "14px"
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "icon_more_info"
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
state:
- operator: "template"
value: "[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]"
styles:
img_cell:
- background-color: "rgba(var(--color-red),0.5)"
icon:
- color: "rgba(var(--color-red),1)"
- operator: "template"
value: "[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]"
styles:
img_cell:
- background-color: "rgba(var(--color-red),0.05)"
icon:
- color: "rgba(var(--color-red),1)"
item2:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
notification: >
[[[
if (entity.state == 'unavailable' || states[entity.entity_id].attributes.daysTo == 0 || states[entity.entity_id].attributes.daysTo == 1){
return '<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>'
}
]]]
And my home.yaml now looks like this:
- type: custom:button-card
template:
- custom_card_paddy_waste_collection
entity: sensor.next_residual_waste_collection
variables:
ulm_icon_tap_action: "more-info"
ulm_card_generic_swap_icon: mdi:delete-empty
- type: custom:button-card
template:
- custom_card_paddy_waste_collection
entity: sensor.next_paper_carton_collection
variables:
ulm_icon_tap_action: "more-info"
ulm_card_generic_swap_icon: mdi:package-variant-remove
- type: custom:button-card
template:
- custom_card_paddy_waste_collection
entity: sensor.next_glass_collection
variables:
ulm_icon_tap_action: "more-info"
ulm_card_generic_swap_icon: mdi:liquor
- type: custom:button-card
template:
- custom_card_paddy_waste_collection
entity: sensor.next_valorlux_collection
variables:
ulm_icon_tap_action: "more-info"
ulm_card_generic_swap_icon: mdi:sack
I still donāt understand why the exclamation mark is in the background of the icon instead of in the foreground:
I guess Iāll need to wait till someone with the necessary coding skills fixes that custom card 
.
Sorry, been idle for quite a whileā¦
Code still misses cleanup so, let me know if you still want it 
1 Like
Hi all! I am new here. First of all, thank you for your help.
I am trying to modify the card_esh_welcome in order to delete in the top bar de configuration item:
I created the custom_card_esh_welcome.yaml with the modification of deleting it but is not working. I guess I need to delete de following part of the code (item 3):
item3:
card:
type: "custom:button-card"
template: "chip_mdi_icon_only"
variables:
ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
tap_action:
action: "navigate"
navigation_path: "/config/dashboard"
styles:
card:
- align-self: "end"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
- "--mdc-ripple-press-opacity": 0.12 # allow click animation
I included the modified code inside custom_cards but nothing changes.
Does happened this to someone? How can I modified this? Hope some knows how to do this xD
Thank you again guys!
Exactly, removing that should be enough.
Alternatively, you can simply remove item3 from the grid-template-areas:
card_esh_welcome_topbar:
show_icon: false
show_label: false
show_name: true
styles:
grid:
- grid-template-areas: "'item1 item2 item3'"
- grid-template-columns: "1fr 7fr 1fr"
- grid-template-rows: "min-content"
- justify-items: "center"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
Generally restart home assistant afterwards, because only then - at least for me - the change was applied.
I tried a little bit, because I feel like you. Either or was not enough.
There is the possibility to define a label (see below) and output the temperature in it via javascript.
Example:
- type: "custom:button-card"
template:
- card_room
- red_on
name: WaschkĆ¼che
label: '[[[ return states["sensor.wk_th_waschkueche_temperatur_luftfeuchtigkeit_temperature"].state + " Ā°C / " + states["sensor.wk_th_waschkueche_temperatur_luftfeuchtigkeit_humidity"].state + " %" ]]]'
entity: light.waschkueche_deckenlicht_state
icon: mdi:tumble-dryer
tap_action:
action: navigate
navigation_path: "/ui-lovelace-minimalist/bathroom"
hold_action:
action: toogle
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: light.waschkueche_deckenlicht_state
templates:
- red_on
tap_action:
action: toggle
1 Like
Wow thanks a lot! This saved me a lot of headache and actually I already gave up.
I made an input helper boolean to trigger based on if one of the devices is on and all are off, that now reflects in the status of the enite room based on one or more devices. Amazing, thanks again!
How do you only change the colour of the icon and not the entire room card? For me the entire card changes itās colour.
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template:
- card_room
- yellow_on
name: Begane grond
entity: input_boolean.helper_begane_grond
icon: mdi:sofa
label: '[[[ return states["sensor.temperatuursensor_woonkamer_temperature"].state + " Ā°C / " + states["sensor.temperatuursensor_woonkamer_humidity"].state + " %" ]]]'
tap_action:
action: navigate
navigation_path: '/ui-lovelace-minimalist/begane_grond'
variables:
entity_1:
entity_id: light.lampen_eettafel
templates:
- yellow_on
tap_action:
action: toggle
2 Likes
Youāre welcome. Just uncomment the line with the entity. That should stop that the entire card changes the color.
#entity: input_boolean.helper_begane_grond
I would like only the icon to change the color, and not the entire card. Uncommenting the entity disables the color change all together for me, for the icon and ābackgroundā of the card.
Again, thanks for your help and finding a solution for me, I highly appreciate it!
I had minimalist initially installed and the 2 dashboards were added. I then went into the configuration for the integration and selected a bunch of community custom cards to install. I restarts and the integration is failing to load. The errors in the logs are the following and there are no cards downloaded into the custom_cards folder. Any ideas?
This error originated from a custom integration.
Logger: homeassistant.config_entries
Source: custom_components/ui_lovelace_minimalist/utils/decode.py:7
Integration: UI Lovelace Minimalist (documentation, issues)
First occurred: 5:23:03 PM (1 occurrences)
Last logged: 5:23:03 PM
Error setting up entry UI Lovelace Minimalist for ui_lovelace_minimalist
Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/config_entries.py", line 382, in async_setup
result = await component.async_setup_entry(hass, self)
File "/config/custom_components/ui_lovelace_minimalist/__init__.py", line 124, in async_setup_entry
return await async_initialize_integration(hass=hass, config_entry=config_entry)
File "/config/custom_components/ui_lovelace_minimalist/__init__.py", line 104, in async_initialize_integration
startup_result = await async_startup()
File "/config/custom_components/ui_lovelace_minimalist/__init__.py", line 90, in async_startup
await ulm.configure_community_cards()
File "/config/custom_components/ui_lovelace_minimalist/base.py", line 280, in configure_community_cards
content=await self.async_github_get_file(
File "/config/custom_components/ui_lovelace_minimalist/base.py", line 178, in async_github_get_file
return decode_content(response.data.content)
File "/config/custom_components/ui_lovelace_minimalist/utils/decode.py", line 7, in decode_content
return b64decode(bytearray(content, "utf-8")).decode()
UnicodeDecodeError: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte
can you add these lines to make the adaptive layout working with your custom_card_esh_room?
double_tap_action:
action: "call-service"
service: "input_select.select_option"
service_data:
option: "[[[ return variables.ulm_input_select_option ]]]"
entity_id: "[[[ return variables.ulm_input_select ]]]"
Any updates on your fantastic work?