Remove the #Default stuff in de style maybe it breaks the style the icons should be alot blogger than
Yup it works now, thx mate for your help and the added features !
In a later stadium, im gonna add the popup card, so i can change the brightness of the lamp with a sliderā¦
Iām guessing you wonāt need my code anymore now that this card supports theming 
I didnāt have time to experiment with the icon alignment unfortunately. Glad to see you have your solution regardless.
true thx anyway
@DBuit
More questions.
-
If i dont use columns, but only rows
canāt i use the tileOnRows then? cause when i add 4 entities, it splits up 3 to 1 -
if i set it like āTitle:ā and dont fill in, it still uses spaceā¦ can i get rid of the space (row title)?
-
is there a problem with style, cause when not using columns, it doesnt pick up the style (although copy)
my code
title: Test
icon: mdi:test-tube
path: test
theme: ios-dark-mode
cards:
- type: markdown
content: >
{% set time = states('sensor.time') %}
{% if '00:00' < time < '06:00' %} ## Goeie Nacht !
{% elif '06:00' < time < '12:00' %} ## Goeie Morgen !
{% elif '12:00' < time < '18:00' %} ## Goeie Middag !
{% else %} ## Goeie Avond !
{% endif %}
- type: vertical-stack
cards:
- type: 'custom:weather-card'
current: true
details: false
entity: weather.thuis
name: 'Home'
- type: horizontal-stack
cards: []
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: person.stijn
show_name: true
image: /local/stijn.jpg
tap_action:
action: navigate
navigation_path: /lovelace/persoon1
- type: picture-entity
entity: person.kim
show_name: true
image: /local/kim.jpg
tap_action:
action: navigate
navigation_path: /lovelace/persoon2
- type: "custom:homekit-card"
home: false
enableColumns: false
style: |
:host {
--tile-background: rgba(0, 0, 0, 0.3);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(255, 255, 255, 0.7);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(255, 255, 255, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 255, 255, 0,5);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(255, 255, 255, 1);
--tile-on-icon-color: rgb(255, 140, 0);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
.button-inner .icon {
width:55px;
height:55px;
}
.button-inner .icon ha-icon {
width: 40px;
height:40px;
}
entities:
- title:
entities:
- custom: lampen
name: Lampen
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/lichten
- custom: entertainment
name: Entertainment
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/entertainment
- custom: server
name: Server
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/server
- custom: network
name: Network
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/network It works now. Thank you!
The deep_press mod works fine for me in combination with the light-popup-card (not the homekit-panel-card).
How I set it up:
- ui-lovelace.yaml (somewhere in the top):
deep_press:
enable_unsupported: true
- Per-entity config:
type: custom:button-card
tap_action:
action: toggle
dbltap_action:
action: more-info
hold_action:
action: more-info
deep_press: true
(etc.)
- And in the
popup_cards:section a pretty much copy-exact of @DBuitās example code on GitHub.
On iOS when I hold the button card for like a second, it gives me a blurry transition and haptic tap, and automatically opens the popup card. I prefer this over the normal hold_action, as this one waits for you to release your finger (which is a bit counter-intuitive).
I hope this is helpful for you!
@neliss What goes in the entity config after deep_press: true ?
Do you then define an action? If so whatās the caller? (as opposed to the standard tap_action and hold_action
Rest of my config is as described in the button-card manual, see: button-card on GitHub.
In my case, most parameters are styling options to mimic homekit layout (there is also a code example on that GitHub page).
Actions I defined are not more than toggle on single press and more-info on long / double press.
What about with deep_press if I use decluttering?
If I turn deep_press: true in a decluttering template, it cannot get the entity.
this is my decluttering template:
# Default Config
default:
# Button Options
- lock: false
- aspect_ratio: 1/1
- opacity: 0.5
- opacity_on: 1.0
- border-radius: 2px
- ha-card-background: var(--card-color-off)
- box-shadow: var(--box-shadow)
# Name
- name: # Leave this empty if you want to be able to use names defined in customize.yaml (default is empty!)
# Label
- label: ' '
# Icon Options
- color: auto
- size: 55%
- margin-right: 50px
- margin-left: 0px
- variable: spin
- spin: false
- off_variable: spin
- off_spin: false
- icon: # Leave this empty if you want to be able to use icons defined in customize.yaml (default is empty!)
# Show Options
- show_name: true
- show_state: true
- show_label: true
- show_icon: true
- show_last_changed: true
# Tap and Hold Actions
- tap_action:
action: toggle
haptic: light
- hold_action:
haptic: heavy
action: call-service
service: browser_mod.command
service_data:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
color: "#FFF"
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"
card:
type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
icon:
brightnessWidth: 110px
brightnessHeight: 400px
switchWidth: 110px
switchHeight: 400px
scenesInARow: 2
settings: true
settingsPosition: bottom
fullscreen: false
# Button 'Off' Options
- off_icon_color: var(--icon-color-off)
- off_name_color: var(--name-color-off)
- off_state_color: var(--state-color-off)
- off_label_color: var(--label-color-off)
# Button 'On' Options
- on_name_color: var(--name-color-on)
- on_state_color: var(--state-color-on)
- on_label_color: var(--label-color-on)
- on_card_color: var(--card-color-on)
# Name and Label Options
- margin-top-name: 0px
- label_font_size: 11px
- label_font_weight: normal
- justify-self-name: start
- padding-left-name: 10px
# Grid
- grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
# Custom Fields # Changed/Added in 0.13.3
- notification: "[[[ return ' '; ]]]"
- custom_fields:
notification:
- background-color: "[[[ return 'var(--card-color-off)'; ]]]"
- color: var(--notification-badge-color)
- border-radius: 50%
- overflow: visible
- position: absolute
- right: 7%
- top: 7%
- height: 22px
- width: 22px
- font-size: 11px
- line-height: 20px
# Lock # Changed/Added in 0.13.3
- lock: false
#### #### #### #### #### #### #### #### #### #### #### #
# Card Config
# Do NOT change this unless you know what you are doing!
card:
type: custom:button-card
show_entity_picture: true
name: '[[name]]'
deep_press: true
icon: '[[icon]]'
size: '[[size]]'
color: '[[color]]'
# Lock config below # Changed/Added in 0.13.3
lock:
enabled: '[[lock]]'
unlock: hold
duration: 5
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
label: '[[label]]'
show_name: '[[show_name]]'
show_icon: '[[show_icon]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action: '[[tap_action]]'
hold_action: '[[hold_action]]'
styles:
card:
- border-radius: '[[border-radius]]'
- --ha-card-background: '[[ha-card-background]]'
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- color: var(--label-color-off)
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--state-color-off)
grid: '[[grid]]'
custom_fields: '[[custom_fields]]'
img_cell:
- align-self: start
- text-align: start
- margin-right: '[[margin-right]]'
- margin-left: '[[margin-left]]'
name:
- justify-self: '[[justify-self-name]]'
- padding-left: '[[padding-left-name]]'
- font-weight: bold
- font-family: Helvetica
- font-size: 16px
- margin-top: '[[margin-top-name]]'
custom_fields:
notification: '[[notification]]'
state:
- value: "on"
'[[variable]]': '[[spin]]'
styles:
card:
- --ha-card-background: '[[on_card_color]]'
- opacity: '[[opacity_on]]'
- box-shadow: '0px 0px 2px 2px var(--paper-item-icon-active-color)'
- border-radius: 2px
name:
- color: '[[on_name_color]]'
state:
- color: '[[on_state_color]]'
lock:
- color: var(--lock-color-on)
label:
- color: '[[on_label_color]]'
- value: "off"
'[[off_variable]]': '[[off_spin]]'
styles:
card:
- --ha-card-background: '[[on_card_color]]'
- opacity: '[[opacity]]'
- border-style: solid
- border-width: 0px
- border-radius: 0px
- border-color: '#ADB1B7'
icon:
- filter: grayscale(100%)
name:
- color: '[[off_name_color]]'
state:
- color: '[[off_state_color]]'
label:
- color: '[[off_label_color]]'
- font-size: '[[label_font_size]]'
- font-weight: '[[label_font_weight]]'
lock:
- color: var(--lock-color-off)
- value: "idle"
styles:
card:
- opacity: 0.8
name:
- color: var(--name-color-off)
label:
- color: var(--label-color-off)
icon:
- color: var(--icon-color-off)
lock:
- color: var(--lock-color-off)
- value: "unavailable"
styles:
card:
- opacity: 0.2
name:
- color: var(--name-color-off)
label:
- color: var(--label-color-off)
state:
- color: var(--state-color-off)
icon:
- color: var(--icon-color-off)
lock:
- color: var(--lock-color-off)
and this is what I get:
What Iām doing wrong?
Hi @skank,
If you dont use the columns you can use tileOnRows. It just fits the as much tiles on a row as fits on the screen but on mobile when screen < 768 px it is always 3 tiles.
If you dont want title i think you can just leave title from your config and it wont take up space
style should work always, still got this problem? maybe cache?
Is there a way to increase the space between the tiles and titles when viewing on a mobile/small screen?
Hi so for lights the icon takes the color of the light. is it possible light.lume has a white color for the light? than the icon will also be whiteā¦
Hi,
Ye you can use the style option to add some css for example use this:
@media (max-width: 768px) {
.card-title {
margin-top:20px!important;
}
}
This add extra space above the title for screens smaller than 768 px (mobile)
1 Like
Even if i put a blue color on light.lume i have the icon āwhiteā
Strange, i see it works for light.bagno2 but can you share the info of the light entity in the developer info in home assistant for entity light.lume?
What happens if you set these to false?
useBrightness: true
useTemperature: true
Is the same, nothing change.
[light.lume]
brightness: 255 hs_color: 0, 0 rgb_color: 255, 255, 255 xy_color: 0.323, 0.329 friendly_name: Lume supported_features: 17
If we dont use cardStyle, The measurement unit is not displayed correctly!