Hello.
Thanks for checking it out, but it still doesn’t look good to me:
Config is as follows:
input_text.dafang_home_ptz:
custom_ui_state_card: state-card-tiles
config:
columns: 3
row_height: 50px
entities:
...
Tried removing both row and column_height and it didn’t got better…
Any other ideas?
Thanks in advance.
pplucky,
Maybe try converting your images from png to jpg. I downloaded your example up arrow image and it was a jpg. Here is what I got:
input_text.dafang_home_ptz:
custom_ui_state_card: state-card-tiles
config:
columns: 3
row_height: 50px
entities:
- entity: script.press_button
image: /local/up.jpg
column: 2
row: 1
- entity: script.press_button
image: /local/up.jpg
column: 1
row: 2
- entity: script.press_button
image: /local/up.jpg
column: 3
row: 2
- entity: script.press_button
image: /local/up.jpg
column: 2
row: 3I did convert the image from png to jpeg and it still shows up weird.
Would you mind share your up.jpg with me, for me to test?
Thanks in advance.
Sure. jpg can not be transparent. So I think your image is still a png, which can be transparent.
Honestly no idea why, but it still appears the same after using your image…
It seems that <paper-button> lacks background-repeat: no-repeat and background-position: center css properties. Add them to both state-card-tiles.html and state-card-tiles_es5.html and you’re good.
Just updated, and problem persists. Could you link the forum where you saw this chat?
Thank you.
After changing the css attributes as suggested by @Cezex, it worked well:
with the following config:
input_text.dafang_home_ptz:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 50px
row_height: 50px
color: white
entities:
- entity: script.dafang_home_move_up
image: /local/images/arrows/up.jpg
column: 2
row: 1
- entity: script.dafang_home_move_left
image: /local/images/arrows/left.jpg
column: 1
row: 2
- entity: script.dafang_home_move_right
image: /local/images/arrows/right.jpg
column: 3
row: 2
- entity: script.dafang_home_move_down
image: /local/images/arrows/down.jpg
column: 2
row: 3
Thanks to everyone who helped (or at least tried), to solve my matter.
Is there a way to have the text of a tile be a variable? Specifically, the current set temp for a climate entity?
I’ve got my tile showing the current temp from the thermostat using label_state. I’m sure if you made a template sensor for your set temp, it wouldn’t be hard.
Yup, this ended up working. Thanks for confirming.
guys i just updated to home assistant 63.3 and the tiles do not show up on my mobile device… anyone else have this issue? please help
input_text.tiles:
custom_ui_state_card: state-card-tiles
config:
columns: 1
column_width: 75px
row_height: 75px
gap: 15px
color: '#36454F'
color_on: '#0F9D58'
color_off: '#36454F'
entities:
- entity: switch.ceiling
icon: mdi:ceiling-light
Log Details (ERROR)
Sat Feb 17 2018 22:38:59 GMT-0600 (Central Standard Time)
undefined:1:11 TypeError: Cannot call a class constructor without |new|
Thanks, this is excellent.
Hello everyone, this is my first post in this forum. I have very little knowledge and I really need your help.
I can not display the buttons.
What is wrong with the code below?
(I have not posted my homeassistant directory on github because I do not know how it does it).
Please help me.
homeassistant:
customize:
script.remote_control:
custom_ui_state_card: state-card-tiles
config:
columns: 7
row_height: 75px
column_width: 62px
gap: 15px
color: '#555B65'
color_on: '#D5D619'
#color_on: 'var(--primary-color)'
#color_on: '#262B38'
color_off: '#BBBEC2'
entities:
- entity: switch.fan_pc_leds_on_off
caption:
icon: mdi:power
column: 1
row: 1
###################
## Groups
##################################################
group:
controle_pc_fan_rgb:
name: Controle Remoto PC
entities:
- script.remote_control
##################################################
## Switches
##################################################
switch:
- platform: command_line
hide_entity: true
switches:
fan_pc_leds_on_off:
friendly_name: "Fans Led On/Off"
command_on: !secret fan_pc_leds_on
command_off: !secret fan_pc_leds_off
script:
remote_control:
sequence:The top of your config file looks wrong to me, it should look like this …
homeassistant:
name: 'Home'
latitude: your_latitude
longitude: your_longitude
elevation: your_elevation
time_zone: Europe/London
unit_system: metric
You also seem to be missing the script for the remote
Thanks for the answer.
This code is inside a package, so it does not need coordinates.
As for the script, I do not know what I write in it. For in all other users’ codes they wrote the same. That is, I continue without displaying the customization.
Below is a picture of how it is.
Anyone else having issues with release 0.63.3 where the tiles will not display on a mobile device… ive tried both the native and hybrid applications and it throws a system/log error each time… I have opened a ticket with the developer on github but maybe im doing something wrong… again this does work/display on my windows chrome and firefox browsers, just not the mobile
input_text.tiles:
custom_ui_state_card: state-card-tiles
config:
columns: 1
column_width: 75px
row_height: 75px
gap: 15px
color: '#36454F'
color_on: '#0F9D58'
color_off: '#36454F'
entities:
- entity: switch.ceiling
icon: mdi:ceiling-light
Log Details (ERROR)
Sat Feb 17 2018 22:38:59 GMT-0600 (Central Standard Time)
undefined:1:11 TypeError: Cannot call a class constructor without |new|
It’s working fine here on laptop and android, but I did have some errors in the log from this afternoon when my better half was at home, and she has an iPhone. Can’t say it was definitely this error, but it was something similar.
@vicentecandido I see you are missing these lines in your configuration file. You will also need to download the two files and add them to your .homeassistant/www/custom_ui directory.
frontend:
extra_html_url:
- /local/custom_ui/state-card-tiles.html
extra_html_url_es5:
- /local/custom_ui/state-card-tiles-es5.html