Please keep the posts in English. Use Google translate from your language to English before posting. Thanks.
Hi Marnix,
First off all your layout looks really awesome!!!
Can you please send me the dirty code? I’m also Dutch so the language won’t be any problem.
Just love the vacuum tile and the navigation bar at the bottom (and the total layout)
Hopefully you can help me out!
Solved it by adding:
app-toolbar {
height: 80px !important;
2 Likes
where your placed it?
In the theme file:
Only need to add the height: line
1 Like
Hello all,
I have been busy with my take on room card.
this is how far I have come!
I really need some help.
- how can I get number of lights on in the room (how to code this?)
- at present I have hard coded the background image for the room card. (need help to code this ?)
- I have tried apply background filter: brightness (50%). it works but the brightness applies to the whole card! I would like to do that only to the background image.
please help me on ANY or ALL 3 code improvements.
custom_room_card code:
---
custom_card_room:
template:
- "ulm_language_variables"
variables:
label_use_temperature: true
label_use_brightness: false
# room_card_area_use_entity_picture: true
# room_card_area_id: "your area id"
color: "var(--google-grey-500)"
show_icon: true
show_name: true
show_label: true
size: "100%"
aspect_ratio: "3/1"
label: |-
[[[
if (variables.label_use_temperature) {
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 (variables.label_use_brightness) {
if (entity.state){
if (entity.state == "off"){
return variables.ulm_off;
} else if (entity.state == "on"){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : "0") + "%";
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
} else if (entity.state == "on") {
return variables.ulm_on
} else if (entity.state == "off") {
return variables.ulm_off
} else {
return entity.state
}
]]]
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"
- background-color: >
[[[
return "rgba(var(--color-blue),1)";
]]]
value: "unavailable"
styles:
card:
- border-radius: "20px"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- background-image: url("http://.................duckdns.org:8123/api/image/serve/eaddabda093de01eda6f2862bb52c886/512x512")
- background-size: "cover"
- background-repeat: "no-repeat"
- background-position-y: "-100px"
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'"
- grid-template-columns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"
- grid-template-rows: "1fr 1fr 1fr"
- justify-items: "center"
icon:
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- display: "none"
name:
- justify-self: "start"
- align-self: "end"
- font-weight: "bold"
- color: "white"
- font-size: "22px"
- margin-left: "12px"
- margin-bottom: "4%"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- color: "white"
- font-size: "12px"
# - filter: "opacity(40%)"
- margin-left: "6px"
- margin-top: "-4%"
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "14px"
- filter: "opacity(40%)"
- margin-left: "6px"
custom_fields:
i1:
- border-radius: "50%"
- width: "2.6em"
- height: "2.6em"
- line-height: 0
- display: "grid"
i2:
- border-radius: "50%"
- width: "2.6em"
- height: "2.6em"
- line-height: 0
- display: "grid"
i3:
- border-radius: "50%"
- width: "2.6em"
- height: "2.6em"
- line-height: 0
- display: "grid"
i4:
- border-radius: "50%"
- width: "2.6em"
- height: "2.6em"
- line-height: 0
- display: "grid"
i5:
- border-radius: "50%"
- width: "2.6em"
- height: "2.6em"
- line-height: 0
- display: "grid"
i6:
- border-radius: "50%"
- width: "2.6em"
- height: "2.6em"
- line-height: 0
- 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>`
}
]]]
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"
i4:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_4?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_4.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_4; ]]]"
entity: >
[[[
if (variables?.entity_4?.entity_id) {
return variables.entity_4.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_4; ]]]"
styles:
card:
- display: "none"
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;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_5; ]]]"
styles:
card:
- display: "none"
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"
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)"
size: "15px"
color: "var(--google-grey)"
16 Likes
What is your ui card code? So we can have a look
sorry!
here it is!
UI card code:
title: testing room card
theme: minimalist-mobile-tapbar
type: custom:vertical-layout
cards:
###### room card bedroom 1
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template:
- custom_card_room
name: Bedroom 1
entity: climate.thermostat_bedroom_1
icon: mdi:bed-king-outline
tap_action:
action: navigate
navigation_path: '/lovelace-myhome/011_bedroom_1_full'
variables:
label_use_temperature: true
label_use_brightness: false
entity_1:
entity_id: switch.area_presence_hold_bedroom_1
templates:
- green_on
tap_action:
action: toggle
entity_4:
entity_id: climate.thermostat_bedroom_1
templates:
- red_off
- green_on
entity_5:
entity_id: light.hanging_lamp_bedroom_1
templates:
- yellow_on
tap_action:
action: toggle
tap_action:
action: toggle
entity_6:
entity_id: light.bedroom_1_lights
templates:
- yellow_on
tap_action:
action: toggle
###### room card living room
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template:
- custom_card_room
name: Living room
entity: climate.thermostat_living_room
icon: mdi:bed-king-outline
style: |
ha-card {
background-image: '/my_images/living_room.jpg'
}
tap_action:
action: navigate
navigation_path: '/lovelace-myhome/011_bedroom_1_full'
variables:
label_use_temperature: true
label_use_brightness: false
entity_1:
entity_id: switch.area_presence_hold_living_room
templates:
- green_on
tap_action:
action: toggle
entity_3:
entity_id: climate.thermostat_living_room
templates:
- red_off
- green_on
entity_4:
entity_id: light.hanging_lamp_living_room
templates:
- yellow_on
tap_action:
action: toggle
tap_action:
action: toggle
entity_5:
entity_id: light.standing_lamp_living_room
templates:
- yellow_on
tap_action:
action: toggle
entity_6:
entity_id: light.living_room_lights
templates:
- yellow_on
tap_action:
action: toggle
1 Like
wish I could use this template for my fan that I use Broadlink Ir to control! is it possible?
Like this right? That did not solve it for me though, hmm
app-toolbar {
padding-right: 0px;
padding-left: 0px;
height: 80px !important;
no like this in the second app-toolbar part:
app-toolbar {
height: 100px !important;
transform: none;
padding-top:10px !important;
padding-bottom: 10px !important;
@include supports-safe-area-insets {
padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
}
This is my fix:
app-toolbar {
transform: none;
padding-top:10px !important;
padding-bottom: calc(env(safe-area-inset-bottom) + 5px);
height: 100px !important;
}
3 Likes
For some reason that as well clips my chips in half at the top. I’m on a iPhone 12
screenshot?
and peace of your yaml file?
you can fix it with this code above your chips
- type: custom:button-card
template: spacer
variables:
height: 50px
1 Like