After updating to 3.0.0, the touchpad area disappeared, it still works, but it is not visible
nikrays opened this issue · comments
After updating to 3.0.0, the touchpad area disappeared, it still works, but it is not visible
Which theme are you using? The slider and touchpad now use theme colors, specifically --secondary-background-color.
What happens if you add the following to your config?
touchpad_style:
background: grayCould you open your browsers developer tools, select the touchpad, and see what the Styles pane says about it's background color? I may need to set a backup default color for themes that do not have --secondary-background-color.
Seeing the same or similar.
Also these two settings were set to null by the upgrade in the yaml, but still work :
double_click_keycode: null
long_click_keycode: null
Also the card mod code appears to have been broken. Is there a change required to make it work again:
card_mod:
style: |
:host {
--ha-card-background: #00000000;
}
toucharea {
background-image:url("/hacsfiles/themes/jtm-bg/Apple_TV_logo_75.png") !important;
background-size: xxx !important;
background-repeat: no-repeat !important;
background-position: center !important;
opacity: 0.4;
background-color: rgba(0, 0, 0, 0.2) !important; /* affects just the background color */
}
Are you trying to set them to false, or did they appear as null after the upgrade?
Because of significant rewrites in v3 that introduced shadow roots for all elements, card mod no longer works well with this card. You can instead apply styles using the touchpad_style option the same way you would've with card mod.
touchpad_style:
background-image: url("/hacsfiles/themes/jtm-bg/Apple_TV_logo_75.png")
background-size: xxx
background-repeat: no-repeat
background-position: center
opacity: 0.4
background-color: rgba(0, 0, 0, 0.2)Yes, that works. Many thanks. CardMod still needed for the first part in order to get rid of the theme BG.
The two yams lines also reappeared after these edits. All good. Thanks again!
One more things that appears broken: setting touch pad height in yaml appears non-functional?
The below code has no effect on my install. Has it moved to touchpad_style or something?
touchpad_height: 370px
And one final thing that appears to need a different treatment?
When using this card as a button in a grid, the cardmod code below worked ok.
Can touchpad_style be used here also to replace it? I only need to set the icon size.
If so, an example on how to just set the icon size or if needed use this card outside in grid with touchpad_style
without affecting the height of the row? Would be nice.
- type: custom:android-tv-card
keyboard_id: media_player.kodi
keyboard_mode: KODI
rows:
- search
custom_keys:
search:
icon: mdi:search-web
icon_height: 18px
key: SEARCH
card_mod:
style: |
ha-icon-button[title="search"],
ha-icon-button[title="search"] > ha-icon {
height: 18px;
width: 18px;
}
.row {
padding: 8px;
}
Which theme are you using? The slider and touchpad now use theme colors, specifically
--secondary-background-color.What happens if you add the following to your config?
touchpad_style: background: grayCould you open your browsers developer tools, select the touchpad, and see what the Styles pane says about it's background color? I may need to set a backup default color for themes that do not have
--secondary-background-color.
Thanks, this solves my problem!
touchpad_style:
background: gray
Reopening this as there as some actionable items for me to fix.
@nikrays but which theme are you using? I want to investigate whether this happened because --secondary-background-color is the same as --ha-card-background or because it's unset. The latter I can fix, the former has to be fixed by the user.
@houser42 touchpad_height has been soft deprecated, use the height field inside touchpad_style instead. Although it should be copied over to touchpad_style.height if it exists but my check for doing so is a bit too strict, so I can fix that.
To set button icon size, use button_style like so:
button_style:
'--size': 24pxSimilarly you can set button size for individual keys via custom keys and sources.
custom_keys:
menu:
key: menu
style:
'--size': 24pxReleased v3.0.1, which adds a fallback value for the touchpad background if --secondary-background-color isn't set and has better logic for copying touchpad_height to touchpad_style.height.
All working. Great! One final question: is it possible to edit padding in buttons outside the touchpad?
I tried this but not working:
button_style:
'--size': 20px
'--padding': 2px
@houser42 use padding instead.
button_style:
'--size': 20px
padding: 2pxIn CSS, anything that starts with -- is a custom property. For this card, --size is a custom property that I made to internally set the height and width of buttons, icons, and all child elements. In our previous conversations about custom styling for buttons we were having trouble getting it to properly work but I think I've fixed it in this release using the --size custom property. For everything else you would use the normal CSS properties.
See the README sections on button style, touchpad style, and slider style for more information about custom properties that exist for each of these elements along with recommended other properties to use.
Which theme are you using? The slider and touchpad now use theme colors, specifically
--secondary-background-color.What happens if you add the following to your config?
touchpad_style: background: grayCould you open your browsers developer tools, select the touchpad, and see what the Styles pane says about it's background color? I may need to set a backup default color for themes that do not have
--secondary-background-color.
theme:
# Fonts
primary-font-family: 'Raleway,sans-serif'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: '#0288d1'
# Text Fields an Dropdown
mdc-text-field-fill-color: rgba(20, 20, 20, 0.7)
mdc-text-field-ink-color: 'var(--text-color)'
mdc-select-fill-color: rgba(20, 20, 20, 0.7)
mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
input-fill-color: 'var(--background-color)'
input-ink-color: 'var(--text-color)'
input-label-ink-color: 'var(--text-color)'
input-disabled-fill-color: 'var(--background-color)'
input-disabled-ink-color: 'var(--disabled-text-color)'
input-disabled-label-ink-color: 'var(--disabled-text-color)'
input-idle-line-color: 'var(--background-color)'
input-dropdown-icon-color: 'var(--secondary-text-color)'
input-hover-line-color: 'var(--primary-color)'
code-editor-background-color: rgba(0, 0, 0, 0.1)
codemirror-property: 'var(--primary-color)'
# Main Colors
app-header-background-color: rgb(0, 0, 0)
header-height: 48px
accent-color: rgb(255, 0, 0)
accent-medium-color: 'var(--primary-color)'
# Background
background-color: rgb(0, 0, 0)
primary-background-color: 'var(--background-color)'
background-color-2: '#20293c'
secondary-background-color: none
markdown-code-background-color: 'var(--background-color)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: rgba(20, 20, 20, 0.7)
#ha-card-box-shadow: inset 0px 0px 0px 1px var(--border-color)
border-color: "#1F1B24"
ha-card-border-radius: "30px"
ha-config-card-border-radius: 'var(--ha-card-border-radius)'
border-top-left-radius: 'var(--mdc-shape-small, 30px)'
border-top-right-radius: 'var(--mdc-shape-small, 30px)'
border-bottom-right-radius: 'var(--ha-card-border-radius)'
border-bottom-left-radius: 'var(--ha-card-border-radius)'
# Icons
paper-item-icon-color: rgb(174, 174, 178)
#paper-item-icon-active-color: rgb(255, 214, 10)
# States
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--primary-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--primary-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--primary-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--primary-color)'
mdc-theme-primary: 'var(--primary-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--primary-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--primary-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--primary-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--primary-color)'
ch-notification-dot-color: 'var(--primary-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--primary-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--primary-color)'
# Alarm
alarm-color-armed: 'rgba(247,53,67,1)'
# Other
dialog-backdrop-filter: blur(20px)
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.1)
# Card-Mod #####################################################################
# Uncomment the Code below if you have card-mod installed and want blur effect #
################################################################################
card-mod-theme: theme
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: var(--ha-card-box-shadow);
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: var(--ha-card-box-shadow);
}
One small thing:
The timing forlong_click_keycode: menu on Kodi has a slightly different behaviour now on 3.0.4:
If the press is too short it also sends a select. So it needs a longer press to work properly.
This is my custom key:
menu:
service: kodi.call_method
service_data:
entity_id: media_player.kodi
method: Input.ContextMenu
No big deal, but would be nice if we can set that timing? Or ask you to take a look when you have time?
Many thanks
Yes, just confirming that the long_click_keycode: menu is working again here. Many thanks.