sdngo
February 17, 2022, 8:05pm
1512
I already had this done. My other custom cards work just not the paddy welcome. Here is my yaml code. Nothing appears for the custom paddy welcome.
views:
- title: "Home"
path: home
cards:
- type: 'vertical-stack'
cards:
# Chips
- type: horizontal-stack
cards:
# Alarm
- type: 'custom:button-card'
template: chip_alarm
entity: alarm_control_panel.ring_alarm
# Water Leaks
- type: "custom:button-card"
template: chip_mdi_icon_state
variables:
ulm_chip_mdi_icon_state_entity: group.water
ulm_chip_mdi_icon_state_icon: mdi:water
# Welcome
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: custom_card_paddy_welcome
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
I can back you up by saying I can’t seem to get it to work either. I even went back to a blank slate and tried replacing the "card_welcome_scenes" directly with "custom_card_paddy_welcome" with no dice
marvandorth
February 18, 2022, 6:51am
1514
Heard more people regarding this issue…
Klex1404
February 18, 2022, 9:22am
1515
Thanks!
1 Like
Noah
February 18, 2022, 10:24am
1516
I had the same problem and found that it was related to the browser cache. I had to reinstall the Companion app on my Android. On the desktop pc, clearing the browser cache was enough.
petro
February 18, 2022, 3:08pm
1518
Please keep the posts in English. Use Google translate from your language to English before posting. Thanks.
Floep1984
February 18, 2022, 3:12pm
1519
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!
Klex1404
February 18, 2022, 3:21pm
1520
Solved it by adding:
app-toolbar {
height: 80px !important;
2 Likes
Klex1404
February 18, 2022, 5:20pm
1522
In the theme file:
1 Like
madir
February 18, 2022, 6:37pm
1523
Hello all,
I have been busy with my take on room card.
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
LRvdLinden
February 18, 2022, 7:20pm
1524
What is your ui card code? So we can have a look
madir
February 18, 2022, 7:38pm
1525
sorry!
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
SNoof85:
'
wish I could use this template for my fan that I use Broadlink Ir to control! is it possible?
filikun
February 20, 2022, 5:35am
1527
Like this right? That did not solve it for me though, hmm
app-toolbar {
padding-right: 0px;
padding-left: 0px;
height: 80px !important;
Klex1404
February 20, 2022, 8:08am
1528
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;
}
filikun
February 20, 2022, 8:55am
1529
When I first open the app I get this, but if I switch tabs it works
1 Like
LRvdLinden
February 20, 2022, 8:56am
1530
it will delete the graphic design
1 Like
LRvdLinden
February 20, 2022, 9:02am
1531
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
filikun
February 20, 2022, 9:03am
1532
For some reason that as well clips my chips in half at the top. I’m on a iPhone 12
