Saible
March 1, 2022, 1:56pm
1615
Thanks a lot but unfortunately that was 0 for 3
Change to ulm_card_light_name: Table Left has the same result, the name is not displayed correctly
the âMy Cards Bundleâ is installed and previously I used card_light_slider and that worked, what doesnât work is this new style âlight cardâ outlined here: Light Card - UI Lovelace Minimalist maybe I should go back to this Template list (use) - UI-Lovelace-Minimalist ?
browser_mod: is installed and activated via config.yaml - maybe that doesnât work on the iPhone app?
Thanks a lot for your help.
/edit: I just noticed - I may be mixing two instances of the minimalist UI here. The Light Card seems to be from the version installed via the integration whereby the card_light_slider comes from the manual way of installing the interface (the one I chose a few months ago). Important question at this stage is then should I continue down the road of the manual install or start over with the integration way of installing? Sorry for the confusion.
Hi all,
I have a question regarding the cool pop up card (media player).
At the control section I have source set to false so that this will show the arrow down.
Changes:
Result:
Once I select the error the card flickers and is not showing anything. Is there a way that I can make this work correctly? I have tried now many ways but not able to fix this.
Hopefully somebody has a awesome solution and I can make my girlfriend happy again that she can select music
CM000n
March 1, 2022, 2:46pm
1617
This is the old and deprecated documentation that is no longer maintained.
If you have problems with the current cards and the associated current documentation, the best thing to do is to make an issue on Github.
CM000n
March 1, 2022, 4:31pm
1618
Another Week another Release
#447 custom_card_afvalophaling AndyVRD
#446 Custom card eraycetinay elapsed time eraycetinay
#439 custom_card_eraycetinay_lock eraycetinay
#464 Custom card device tracker aehru
#473 Person chip Tommatheussen
#410 Add armed_night alarm status to chip_alarm Toudix
#419 card_room to use unit_of_measurement if present cmintey
#418 update card_thermostat to use climate entity temperature step if present simonbirt
#431 fix false ON state for the media_player card bbo76
#422 change border-radius to ha-card-border-radius tivoo
#426 Updated card_media_player.yaml xPhantomNL
#430 Update card_welcome_scenes basbruss
#434 Card Media Player: leon38
#450 Add logic to determine if climate entity is using Fahrenheit or Celsius miniminne
#409 Added tap_action to chip_icon_double_state.yaml LRvdLinden
#289 Improve media player render with diverse entity_picture mazerte
#465 Add usb charging option for card_battery aehru
#484 fix(card/thermostat): use hass configured system temperature unit ulic75
#437 Replaced hard coded entity freps
#423 Fix and improve card_battery checkerschaf
#449 thermostat label off mode added eraycetinay
#460 Use variables instead of sensor values to set colors for Afvalophaling Tommatheussen
#457 Hotfix border-radius basbruss
#458 Fix wrong template name in yellow_off template bavo
#443 [bugfix] Changed some Toolbar sizing and padding in Tapbar theme Ned-Tom
#483 Fix pop-up mediaplayer basbruss
#412 Italian translations for settings page marcodallago
#428 New CS translations kubiksamek
#435 Turkish Language and Translations Added eraycetinay
#433 Update Czech & Slovak translations. mstefany
#461 Add tiny translation fix AritroSaha10
#463 Updated ES translations eliseo-juan
#420 Invert images in documentation leon38
#424 Updating the docs for card_room r0binj
#425 Moving image to correct folder for the docs. r0binj
#429 Invert binary_sensor_alert and binary_sensor code in documentation leon38
#432 Updating docs/setup r0binj
#448 fix typing error cs42
#421 added auto entities and simple-weather-card bruvv
#455 custom_card_eraycetinay_elapsed_time - readme.md fixes eraycetinay
#440 Format Card Titles for Wiki basbruss
#468 Update custom_cards.md basbruss
#486 Fix doc page building CM000n
AndyVRD, AritroSaha10, CM000n, LRvdLinden, Ned-Tom, Tommatheussen, Toudix, aehru, basbruss, bavo, bbo76, bruvv, checkerschaf, cmintey, cs42, dcoro, eliseo-juan, eraycetinay, freps, github-actions, kubiksamek, leon38, marcodallago, mazerte, miniminne, mstefany, r0binj, sildehoop, simonbirt, tivoo, ulic75, xPhantomNL and Eray Ăetinay
3 Likes
azafrak
March 1, 2022, 5:06pm
1619
Wonderful. Can you share the code PM?
1 Like
Crow
March 1, 2022, 5:08pm
1620
Hi, can you send me your code? I donât mind if itâs dirty I just want to see the parameters you used for some cards.
madir
March 1, 2022, 6:55pm
1621
hi all,
I am working on custom top navigation bar.
it is working good, except I would like to add functionality to hide forward or backward buttons with a variable.
I need help to code;
when variable is left empty in UI then hide the button. I have tried the code (card code, commuted part). it kind of works when I put ânoneâ in the ui. but I donât know how to code for NULL or empty
UI code:
###### top bar
- type: "custom:button-card"
template: custom_top_bar
variables:
custom_top_bar_label: BEDROOM 1
custom_top_bar_icon: mdi:bed-double
custom_top_bar_color: 'rgba(var(--color-blue), 0.2)'
custom_top_bar_navigate_path_back: '/lovelace-myhome/home'
custom_top_bar_navigate_path_title: '/lovelace-myhome/011_bedroom_1_full'
custom_top_bar_navigate_path_next: '/lovelace-myhome/011_bedroom_1_full'
card code: (part)
---
### custom_top_bar ###
custom_top_bar:
variables:
- custom_top_bar_label: "your topbar name"
- custom_top_bar_icon: "your topbar icon"
- custom_top_bar_color: "your topbar color"
- custom_top_bar_navigate_path_back: "your topbar navigation path back"
- custom_top_bar_navigate_path_title: "your topbar navigation path title"
- custom_top_bar_navigate_path_next: "your topbar navigation path next"
styles:
grid:
- display: "flex"
- justify-content: "space-between"
card:
- background-color: "#ffffff7d"
- box-shadow: "none"
- padding: "6px"
- color: "rgba(0,0,0,0.8)"
- backdrop-filter: "blur(33px)"
- background-blend-mode: "overlay"
icon:
- color: "[[[ return variables.ulm_chip_navigate_icon_color; ]]]"
label:
- color: "[[[ return variables.ulm_chip_navigate_label_color; ]]]"
custom_fields:
##back button
back:
card:
type: 'custom:button-card'
template: chip_navigate
show_icon: true
icon: "mdi:arrow-left"
variables:
custom_top_bar_navigate_path_back: "your top bar back navigation path"
styles:
grid:
- justify-self: "start"
- grid-area: "back"
# card:
# - display: >
# [[[
# if (variables.custom_top_bar_navigate_path_back != 'none' ) {
# return "none";
# }else {
# return 'block';
# ]]]
tap_action:
action: "navigate"
navigation_path: "[[[ return variables.custom_top_bar_navigate_path_back; ]]]"
4 Likes
Saible
March 1, 2022, 8:07pm
1622
Thank you. I moved my install to the HACS version and it seems to have resolved my problem.
Quick additional question - can I change the color scheme on a specific card? I have various scene cards (these are blue) and Iâd like to add on that is red instead of blue.
Thanks
Saible
March 2, 2022, 5:46pm
1623
Appreciate that I am self talking but as I cannot change the color scheme of the scenes, I am now stuck on the behaviour of the Vertical Button Card (Vertical Button Card - UI Lovelace Minimalist ). When used with an input boolean it does not show the state of this boolean by turning into the asked for color:
- type: 'custom:button-card'
template: card_vertical_button
entity: input_boolean.away
name: Away
icon: mdi:exit-run
variables:
ulm_card_vertical_button_state: on
ulm_card_vertical_button_color: red
The button does work but it does not indicate an on or off state. What am I missing? I am actually trying to recreate this from the wiki Vertical Buttons - how is that done, also with the time below? Thank you!
Could you share you room cards code? Theyâre lovely
madir
March 3, 2022, 9:57am
1625
hi, I donât mind sharing but there are some minor problems in the code. for instance the thermostat button is connected to a script which allows me to cycle through three states off auto heat. I want to built the script directly in to the card!
I am not a coder, very low expertise. (mostly using google to learn).
I need help on;
code the number of lights on in the area
integrate the climate script in the card itself.
Thatâs no problem! We are all here to share even when itâs not perfect
Did you make them from scratch or did you re-use an existing resource? (sorry Iâm not aware of all the existing cards for Minimalist, but I havenât really seen those ones and I went through all the custom cards last week).
Regarding the number of lights, itâs probably easy to do with a template. The other question is where to display the counter - replacing the bulbs icon or as a badge counter?
Looking forward to that code! Thank you in advance
madir
March 3, 2022, 12:12pm
1627
here you go, please do let me know if you find improvements!
---
custom_card_room:
template:
- "ulm_language_variables"
variables:
room_card_area_name: "your area name"
room_card_image_path: "your area image url"
room_card_climate_entity: "your area climate entity"
room_card_label: true
color: "var(--google-grey-500)"
show_icon: false
show_name: true
show_label: true
triggers_update: "all"
label: |-
[[[
if (variables.room_card_label) {
return '<ha-icon icon="mdi:thermometer" style="width: 16px; height: 16px;"></ha-icon>' + (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + 'Ă°C' + ' | '
+ '<ha-icon icon="mdi:water-percent" style="width: 18px; height: 18px;"></ha-icon>' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%' + ' | '
+ '<ha-icon icon="mdi:lightbulb-on" style="width: 16px; height: 16px;"></ha-icon>' + ' count ' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%';
} else if (entity.state == "on") {
return variables.ulm_on
} else if (entity.state == "off") {
return variables.ulm_off
} else {
return entity.state
}
]]]
## {{ expand(area_entities('Bedroom 1')) | selectattr('domain','eq','light') | selectattr('state','eq','on') | list | count }}
## {{ area_id('my_device_id') }}
# state:
# - operator: "template"
# value: >
# [[[
# return (variables.entity_8.state != "on")
# ]]]
# styles:
# card:
# - background-image: >
# [[[
# return 'linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.4) 100%), url('+ variables.room_card_image_path +')'
# ]]]
state:
- styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
value: "unavailable"
styles:
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- background-size: "cover"
- background-repeat: "no-repeat"
- background-position: "center"
- background-image: >
[[[
return 'linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url('+ variables.room_card_image_path +')'
]]]
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "14px"
- filter: "opacity(40%)"
- margin-left: "6px"
grid:
- grid-template-areas: "'n n n n n n n n' 'l l l l l l l l' 'i1 i2 i3 i4 i5 i6 i7 i8'"
- grid-template-columns: " 1fr minmax(0px, 0.5fr) minmax(0px, 0.5fr) . 1fr 1fr 1fr 1fr 1fr"
- grid-template-rows: "min-content 2.5fr 1fr"
- justify-items: "center"
- gap: "0em 0.5em"
name:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- color: "white"
- font-size: "1.4em"
- margin-left: "6px"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- color: "white"
- font-size: "0.7em"
- margin-left: "6px"
custom_fields:
i1:
- justify-self: "start"
- align-self: "start"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i2:
- justify-self: "start"
- align-self: "start"
- border-radius: "50%"
- width: "0px"
- height: "42px"
- display: "grid"
i3:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "0px"
- height: "42px"
- display: "grid"
i4:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i5:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i6:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i7:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i8:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
custom_fields:
# notification: >
# [[[
# if (entity.state =='unavailable'){
# return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
# }
# ]]]
#presence entity
i1:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_1?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_1.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_1; ]]]"
entity: >
[[[
if (variables.entity_1.entity_id) {
return variables.entity_1.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_1; ]]]"
styles:
card:
- display: "none"
i2:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_2?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_2.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_2; ]]]"
entity: >
[[[
if (variables?.entity_2?.entity_id) {
return variables.entity_2.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
styles:
card:
- display: "none"
i3:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_3?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_3; ]]]"
entity: >
[[[
if (variables?.entity_3?.entity_id) {
return variables.entity_3.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
i3:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_3?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_3; ]]]"
entity: >
[[[
if (variables?.entity_3?.entity_id) {
return variables.entity_3.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
value: >
[[[
if (states[entity.entity_id].attributes.hvac_modes.includes("auto")) {
return (entity.attributes.hvac_modes == 'auto')
}
]]]
#climate entity
i5:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_5?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_5.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_5; ]]]"
entity: >
[[[
if (variables?.entity_5?.entity_id) {
return variables.entity_5.entity_id;
}
]]]
icon: mdi:power
# if icon is stated in UI then uncomment
# icon: >
# [[[
# if (variables?.entity_5?.icon) {
# return variables.entity_5.icon;
# }
# ]]]
state:
- operator: "template"
value: >
[[[
return (entity.attributes.hvac_modes == 'heat' || entity.attributes.hvac_action == 'heating')
]]]
icon: "mdi:fire"
styles:
icon:
- color: "rgba(var(--color-red),1)"
img_cell:
- background-color: "rgba(var(--color-red),0.2)"
- operator: "template"
value: >
[[[
return (entity.attributes.hvac_modes == 'heat' || entity.attributes.hvac_action == 'idle')
]]]
icon: "mdi:sync-circle"
styles:
icon:
- color: "rgba(var(--color-green),1)"
img_cell:
- background-color: "rgba(var(--color-green),0.2)"
value: >
[[[
return (entity.attributes.hvac_modes == 'auto' || entity.attributes.hvac_action == 'idle')
]]]
icon: "mdi:sync-circle"
styles:
icon:
- color: "rgba(var(--color-green),1)"
img_cell:
- background-color: "rgba(var(--color-green),0.2)"
i6:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_6?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_6.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_6; ]]]"
entity: >
[[[
if (variables?.entity_6?.entity_id) {
return variables.entity_6.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_6; ]]]"
styles:
card:
- display: "none"
i7:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_7?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_7.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_7; ]]]"
entity: >
[[[
if (variables?.entity_7?.entity_id) {
return variables.entity_7.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_7; ]]]"
styles:
card:
- display: "none"
i8:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_8?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_8.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_8; ]]]"
entity: >
[[[
if (variables?.entity_8?.entity_id) {
return variables.entity_8.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_8; ]]]"
styles:
card:
- display: "none"
widget_icon_room:
variables:
tap_action:
action: "toggle"
hold_action:
action: "none"
tap_action:
action: >
[[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return 'none'; ]]]
entity: "[[[ return variables.tap_action.entity; ]]]"
navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.tap_action.url_path; ]]]"
service: "[[[ return variables.tap_action.service; ]]]"
service_data: "[[[ return variables.tap_action.service_data; ]]]"
hold_action:
action: >
[[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return 'none'; ]]]
entity: "[[[ return variables.hold_action.entity; ]]]"
navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
url_path: "[[[ return variables.hold_action.url_path; ]]]"
service: "[[[ return variables.hold_action.service; ]]]"
service_data: "[[[ return variables.hold_action.service_data; ]]]"
show_icon: true
show_name: false
styles:
grid:
- grid-template-areas: "'i'"
card:
- height: "100%"
- box-shadow: "none"
- padding: "0px"
- border-radius: "50%"
icon:
- width: "50%"
- height: "50%"
- line-height: "0"
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- border-radius: "50%"
- background-color: "rgba(var(--color-theme),0.05)"
color: "var(--google-grey)"
1 Like
Saible
March 3, 2022, 6:10pm
1628
in case someone struggles with the same issue - the state on needs to be put into ââ. It cannot just stand as the word on. I knew that but looking at it for too long makes you blind.
1 Like
tj335
March 4, 2022, 3:59am
1629
Hi,
- type: custom:button-card
template:
- chip_mdi_icon_state
- ulm_language_variables
variables:
ulm_chip_mdi_icon_state_icon: mdi:window
ulm_chip_mdi_icon_state_entity: binary_sensor.laundry_room_window_contact
label: >
[[[ return states[variables.ulm_chip_mdi_icon_state_entity].state == 'on' ?
variables.ulm_open : variables.ulm_closed ]]]
icon: >
[[[ return states[variables.ulm_chip_mdi_icon_state_entity].state == 'on' ?
'mdi:window-open' : 'mdi:window-closed' ]]]
styles:
icon:
- color: >
[[[ return states[variables.ulm_chip_mdi_icon_state_entity].state == 'on' ?
'red' : 'green' ]]]
2 Likes
benm7
March 4, 2022, 10:42pm
1630
For anyone interested, have modified the awesome speedtest card to suit broadband, in my case Aussie Broadband.
Template:
---
custom_card_broadband:
triggers_update: "all"
show_name: false
show_label: false
variables:
ulm_custom_card_aussiebb_color: "green"
ulm_custom_card_aussiebb_name: "Aussie BB"
ulm_custom_card_aussiebb_label: "Usage"
ulm_custom_card_aussiebb_remaining: "30"
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'item3'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:button-card"
tap_action:
action: "none"
show_last_changed: false
show_label: true
show_name: true
show_icon: true
label: >-
[[[ return variables.ulm_custom_card_aussiebb_label
]]]
name: >-
[[[ return variables.ulm_custom_card_aussiebb_name
]]]
icon: "mdi:swap-horizontal"
styles:
icon:
- color: >-
[[[ return
`rgba(var(--color-${variables.ulm_custom_card_aussiebb_color}),
1)`; ]]]
- width: "32px"
label:
- justify-self: "center"
- align-self: "start"
- font-weight: "bolder"
- font-size: "12px"
- filter: "opacity(40%)"
name:
- margin-top: "10px"
- justify-self: "center"
- font-weight: "bold"
- font-size: "14px"
img_cell:
- background-color: >-
[[[ return
`rgba(var(--color-${variables.ulm_custom_card_aussiebb_color}),
0.2)`; ]]]
- border-radius: "50%"
- place-self: "center"
- width: "62px"
- height: "62px"
grid:
- grid-template-areas: "'i' 'n' 'l'"
card:
- box-shadow: "none"
size: "20px"
item2:
card:
type: "custom:button-card"
tap_action:
action: "call-service"
service: "speedtestdotnet.speedtest"
show_icon: true
layout: icon_name
show_label: false
show_name: true
styles:
icon:
- color: "rgba(var(--color-${variables.ulm_custom_card_aussiebb_color}),0.9)"
# - width: "20px"
img_cell:
- background-color: "none"
- place-self: "center"
- justify-self: "start"
# - width: "40px"
# - height: "20px"
name:
# - align-self: "start"
# - justify-self: "start"
- font-weight: "bold"
- font-size: "16px"
card:
- box-shadow: "none"
- border-radius: "10px"
- border: "2px solid var(--google-grey)"
- padding_bottom: "-8px"
- height: "40px"
- padding-top: "5px"
- padding-left: "5px"
name: >-
[[[ return states[variables.ulm_custom_card_aussiebb_remaining].state + ' days'
]]]
icon: "mdi:calendar-end"
item3:
card:
type: "custom:button-card"
template: "list_2_items"
custom_fields:
item1:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
color: "var(--google-blue)"
show_label: true
show_icon: false
name: "Downloaded"
entity: >-
[[[ return
variables.ulm_custom_card_aussiebb_download_entity;
]]]
label: |
[[[
var state1 = "";
if (states[variables.ulm_custom_card_aussiebb_download_entity].state){
var state1 = states[variables.ulm_custom_card_aussiebb_download_entity].state;
if (states[variables.ulm_custom_card_aussiebb_download_entity].attributes.unit_of_measurement){
state1 += states[variables.ulm_custom_card_aussiebb_download_entity].attributes.unit_of_measurement;
}
}
return state1;
]]]
styles:
icon:
- width: "30px"
- height: "30px"
label:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "16px"
name:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
grid:
- grid-template-areas: "'l' 'n'"
- grid-template-columns: "auto"
- grid-template-rows: "min-content"
card:
- box-shadow: "none"
- padding-top: "15px"
- padding-botton: "10px"
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "14px"
- place-self: "center"
- height: "80px"
item2:
card:
type: "custom:button-card"
color: "var(--google-blue)"
show_label: true
show_icon: false
name: "Uploaded"
entity: >-
[[[ return
variables.ulm_custom_card_aussiebb_upload_entity;
]]]
label: |
[[[
var state1 = "";
if (states[variables.ulm_custom_card_aussiebb_upload_entity].state){
var state1 = states[variables.ulm_custom_card_aussiebb_upload_entity].state;
if (states[variables.ulm_custom_card_aussiebb_upload_entity].attributes.unit_of_measurement){
state1 += states[variables.ulm_custom_card_aussiebb_upload_entity].attributes.unit_of_measurement;
}
}
return state1;
]]]
styles:
icon:
- width: "30px"
- height: "30px"
label:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "16px"
name:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
grid:
- grid-template-areas: "'l' 'n'"
- grid-template-columns: "auto"
- grid-template-rows: "min-content"
card:
- box-shadow: "none"
- padding-top: "15px"
- padding-botton: "10px"
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "14px"
- place-self: "center"
- height: "80px"
Button code:
- type: custom:button-card
template: custom_card_broadband
variables:
ulm_custom_card_aussiebb_download_entity: sensor.nbn_downloaded_gb
ulm_custom_card_aussiebb_upload_entity: sensor.nbn_uploaded_gb
ulm_custom_card_aussiebb_color: green
ulm_custom_card_aussiebb_name: Aussie Broadband
ulm_custom_card_aussiebb_label: Usage
ulm_custom_card_aussiebb_remaining: sensor.nbn_billing_cycle_remaining
8 Likes
Hi. I have 1 question/issue that maybe I ask here before thinking about raising it in github:
1- Grey, squared background when tapping a (white, rounded) Room card /icon (on mobile. iPhone 13, iOS 15.4 Beta 4, same on latest HA iOS app & Chrome. Minimalist theme - all 3 no difference )
Can I disable this somehow? Iâd rather not have any effect than one that âoverflowsâ like this.
This works at a card level (but not the entities, which seem to be their own cards inside.
- type: 'custom:button-card'
card_mod:
style: |
mwc-ripple {display:none;}
` Questions I solved. Sharing learnings: 2. Haptics only supported for the main card?
Yes, creating a custom card (based off card_room) and editing the section at the bottom. See here editing the template in /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/card_templates/cards/card_room.yaml
3. Add double_tap_actions for the icons in Room card here editing the template in /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/card_templates/cards/card_room.yaml
Thank you
Thank you.
Itâs taking me a lot of work to get your card working. It didnât show up at first - I saw in the Console that it requires a climate entity. I removed that part to make it work with the room light.
Background image is not loading for me (/local/images/bedroom.jpg - itâs working in another card, and it works if done via console css). background-image is just not being generated
Iâll keep playing with it. Itâs a really nice layout!
Btw, I think you wanted to add more actions to the card and/or widgets/icons (double_tap, hold). Iâve done that in my custom_card_room too. See my post here about doing that. I also added haptics
Cheers
LRvdLinden
March 6, 2022, 10:18pm
1633
Can you share your popup template en ui code?
Proche72
March 8, 2022, 7:26am
1634
Popups problem - for me none pop ups work. I tried the light popup and also the custom person card with pop up and nothing. I have the requirements installed via HACS, set it up in yaml same way as it should be and still nothing. for light poo up hold action does nothing - for light without pop up it opens the classic pop up windows from HA not the nice minimalist one.
· UI-Lovelace-Minimalist/UI (github.com)
Features
Code enhancements
Bug Fixes
Translations
Documentation
Thank you so much for helping out to keep this UI awesome
