Custom UI: Tiles

Share your Projects! Dashboards & Frontend
156

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:
157

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

158

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.Capturar

160

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|

161

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.

1 Like
162

@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
163

Jer78, thanks for attention. But I did this. Sorry for not posted whlo code.
I did not change anything in the documents mentioned in frontend.yaml. I just downloaded it from the mviezzer directory. Do I need to change anything in them?

## https://home-assistant.io/components/frontend/
## https://home-assistant.io/developers/frontend_creating_custom_ui/

  javascript_version: es5

  extra_html_url:
    - /local/custom_ui/state-card-value_only.html
    - /local/custom_ui/state-card-custom-ui.html
    - /local/custom_ui/state-card-tiles.html
    - /local/custom_ui/state-card-table.html
 
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html
    - /local/custom_ui/state-card-tiles.html
    - /local/custom_ui/state-card-value_only.html

  themes: !include frontend_themes.yaml
164

@vicentecandido So I think the issue is you are referencing the same file for both the html_url and the html_uel_es5 versions. Try downloading the es5 version from here and make this change to your config:

  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html
    - /local/custom_ui/state-card-tiles-ui_es5.html
    - /local/custom_ui/state-card-value_only.html

https://github.com/c727/home-assistant-tiles/tree/master/www/custom_ui

165

Ok.
Iā€™ll do it tomorrow.
Iā€™ll let you know the result.

166

I tried everything, with all the tips of this and other posts and I could not.

Iā€™m definitely unable to change / create a custom ui.

I use homeassistant 0.63 in raspbian and not hassio. Do you have a problem with that?

It would be of a great kindness if someone could make a video on youtube by doing the step-by-step from the beginning of how to work with custom ui. Iā€™m very amateur and I can not. That would help a lot of people.

167

I noticed @Andrew_Lozoya raised an issue on github and since you both are using HASS.io I believe perhaps itā€™s a specific bug to that platform? I run Home Assistant on a Mac Mini and donā€™t have a problem. The only thing I can suggest is try downgrading HASS.io and see if it works on an earlier version.

https://github.com/c727/home-assistant-tiles/issues/7

168

Iā€™m using hasbain 0.63.3 not hass.io and this issue is only logging with an iOS device

171

Finally, I found my mistake.
Also not was the version.
The mistake was in the declaration. I could not declared in external file.
Then I declared in the configuration.yaml

Before (configuration.yaml)
frontend: !include misc/frontends.yaml

After (configuration.yaml)

frontend:
  javascript_version: es5

  extra_html_url:
    - /local/custom_ui/state-card-value_only.html
    - /local/custom_ui/state-card-custom-ui.html
    - /local/custom_ui/state-card-tiles.html
    - /local/custom_ui/state-card-table.html
 
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html
    - /local/custom_ui/state-card-tiles.html
    - /local/custom_ui/state-card-value_only.html
172

Would anyone be so kind as to help me with thisā€¦
I think itā€™s want Iā€™m looking for as a ā€˜remoteā€™ for some RF led toggle switches
In my configuration.yaml I have

input_text: !include dir_merge_named input_text

Within this I have a dummy.yaml file:

command:
  name: Button
dummy_tiles:
  name: dummy

But I get an error:

2018-02-27 11:53:02 ERROR (MainThread) [homeassistant.bootstrap] Error loading /homeassistant/.homeassistant/dir_merge_named input_text

What have I done wrong?
TIA

173

Replace:
input_text: !include dir_merge_named input_text

With
input_text: !include_dir_merge_named input_text

174

Just wishful thinking that this would work?

  - entity: input_boolean.bens_home
    image: /local/ben.png
    image: >
      {% if is_state("input_boolean.bens_home", "not_home") %}
      /local/ben_grey.png 
      {% elif is_state("input_boolean.bens_home", "home") %}
      /local/ben.png
      {% endif %}

Just gives a default colour button, this is fine though so i know the images work OKā€¦

  - entity: input_boolean.bens_home
    image: /local/ben.png
175

Same issue id you ever find a fix? My browsers work fine just iOS app giving the Service system_log/write called

176

@Bobby_Nobble

Yeah I was hoping that would too. I think a PR is necessary to add an image_template.

177

Ah thanks, I knew Iā€™d be missing something daft!

178

I am stuck here too. Here is my customize. I use google chrome.

input_text.tiles_harmony_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 75px
row_height: 75px
entities:
- entity: script.tvmenu
icon: mdi:menu
column: 1
row: 1
ā€¦