Custom UI: Tiles

Mariusthvdb · April 25, 2018, 11:02am

whats wrong with this template please, i need the multiple condition, but have formatted it incorrectly i am afraid.

 - entity: group.all_lights_only
        icon_template: "if (state === 'on') and (entities['sensor.driveway_reachable'].state === 'True') return 'mdi:power-plug';
                        else return 'mdi:power-plug-off';"

is the ‘and’ the wrong syntax, or should I change the brackets somehow?
have also tried:

if (condition1) && (condition2 )
if (condition1 and condition2)
if (condition1 && condition2)

as it stands, it shows the incorrect icon. the group state = on, the entities state in False, so it should return the else power-plug-off. it doesn’t…
no error, and a valid configuration through the checker.

the entities condition itself works fine, i use it elsewhere in the tiles, with desired result. It must be the combination of the conditions

@eddi89 how should we format multiple conditions? hope you can have a look please.

cheers,
Marius

g0g0 · April 29, 2018, 7:32pm

Thanks all, with help of this thread remade my front end to tiles,
from this:

to this:

possible make .png to icon, or just mdi:?

hotmatter · May 1, 2018, 10:40pm

you can use something like this

style_template: “return ‘background-image: url("/local/icons/’ + state + ‘_left_1.png");’”

for .png files

g0g0 · May 1, 2018, 11:10pm

Tried this method, it saves place for icon but not showing it just moves the text little right

I don’t know if it’s mistake in my code or it is not possible

EDIT: Trying to change icon not background picture

pronsta · May 7, 2018, 11:26am

Hi,
is it possible to show next row when the first row state is on Or the first row switch is on then show the second row switch?

Thanks

Steini1984 · May 8, 2018, 9:02am

Hey guys - love this addon, but having some problems with adding images.

I want to have some custom images and this works if my images are 72x72 pixels

input_text.airplay:
custom_ui_state_card: state-card-tiles
config:
columns: 5
column_width: 72px
row_height: 72px
color: grey
entities:
- entity: script.airplay_select_x977
image: /local/Images/X977.png

However it looks really bad on high resolution screens:

If I use a 512x512 image I can only see the top left part of the image and was wondering how I could show the full size image, but scale it down to fit the 72x72 button?

Thanks

***** EDIT ****
I Fixed this with CSS

input_text.radio:
custom_ui_state_card: state-card-tiles
config:
columns: 6
row_height: 50px
color: white
entities:
- entity: script.airplay_select_x977
style_template: “return ‘background-image: url(/local/Images/X977.png); background-size: contain;’”

tom_l · May 10, 2018, 12:44am

Forgive me if this has been covered but I couldn’t see it anywhere in the repository or thread above, what domains are supported?

script and input_boolean are from the examples above but what about remote (if a boolean ON and OFF is defined, or if it is just a single command?)

Mister-Espria · May 17, 2018, 1:37pm

I’m using the tiles and like it very much. I did run into a small issue. When closing an persistent notification the tiles change (see below). refreshing the page fixes it.
Anybody ran into this issue?

Mariusthvdb · May 17, 2018, 9:18pm

yes,

its driving me mad not being able to solve that…
made an issue report on the GitHub https://github.com/c727/home-assistant-tiles/issues/28 but unfortunately it is still unresolved.

Since i get 2 persistent notifications at each boot since updating to 69.1 (not loading HAssio and the silly discovery notification) it is not such a small issue any longer…

on the App this is even more pronounced:

at startup with persistent notifications:

after dismissing

after reload

Mariusthvdb · May 18, 2018, 5:33am

trying to solve the above issue, which has tiles with heights that adjust to the info being displayed dynamically, i want to have the tiles only show 2 lines (instead of possible 3 when the value is too long to fit and needs the 3d row):

example:

  - entity: switch.sw_tester_template
    label_sec_template: >
      if (state === 'on') return 'Tester' + 
            entities['sensor.tester_actueel'].state;
      return 'Tester off';
    icon_template: >
      if (state === 'on') return 'mdi:test-tube';
      return 'mdi:test-tube-off';

this shows the Tester tile with name Tester and its value.

Trying to take the word Tester out only to show the value, I tested this:

      - entity: switch.sw_tester_template
        label_sec_template: >
          if (state === 'on') return   entities['sensor.tester_actueel'].state;
          return 'Tester off';
        icon_template: >
          if (state === 'on') return 'mdi:test-tube';
          return 'mdi:test-tube-off';

But that wouldn’t show any text nor value. This however does work:

      - entity: switch.sw_tester_template
        label_sec_template: >
          if (state === 'on') return '' + 
                entities['sensor.tester_actueel'].state;
          return 'Tester off';
        icon_template: >
          if (state === 'on') return 'mdi:test-tube';
          return 'mdi:test-tube-off';

Why do i need to show the empty text '' and doesnt the entities['sensor.tester_actueel'].state (also tried states.sensor.tester_actueel.state ) show when on its own?

Thanks for you help,
Marius

copying this to a separate thread.

Mariusthvdb · May 18, 2018, 7:41am

HI, as a side topic on your example, how do you get the Buienradar screen to show up and be dynamic?

Mister-Espria · May 18, 2018, 9:43am

Ok nice to know im not the only one. I will keep an eye on the github thanks!
As for the buienrader screen i added a camera with these settings:

platform: generic
still_image_url: http://api.buienradar.nl/image/1.0/RadarMapNL?w=500&h=512
name: Buienradar

jaburges · May 18, 2018, 3:23pm

Anyone know if it’s possible to alter the formation of the tiles based on a value.

Let’s say I want to control my Nest.
If on heat
If on cool
Show 1 number (with up and down arrows)

If on heat And cool
show 2 numbers (with up and down arrows)

If not a longer work around could be to change the color of the tiles to the background color if not used?
Any thoughts?

Faecon · May 20, 2018, 6:28am

I just have a question. Just for trying I copied the whole github from mviezzer (https://github.com/maattdiy/home-assistant-config/tree/master/config).

Why can’t I see any tile ?
I used this https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/installing.md to install, and then just copied everything.

jaburges · May 21, 2018, 2:35am

so been plugging away at this and have the following layout (where the cool buttons are hidden when in heat only mode).
The bit I cant figure out is how to increase the temp by 1 for example:

  - entity: climate.nest
    label_template: '{{ states.climate.nest.attributes.target_temp_low }}'
    service: climate.set_temperature
    data:
      entity_id: climate_nest
      target_temp_high : temperature +1

the data component in the docs mentions it can be YAML or JSON. so assuming i could also use:

{
“entity_id”: “climate.nest” , “target_temp_high” : temperature +1
}

but i dont understand how to add the math part to this.

if someone could point me in the right direction that would be super helpful
thanks

tom_l · May 28, 2018, 2:53am

I’m liking this a great deal. Thanks for making it.

pronsta · May 28, 2018, 8:58am

Hi,

After udating to 0.70 my tiles went gone. I already updated the custom-ui but still they will not show up?
any fixes?

thanks

Sunonline · May 28, 2018, 9:06am

After upgrade custom ui tile to the latest version to support ha 0.70.0
On frontend: have to change to javascript_version: auto , in order to let ios load correctly.

Thank you very much.

Sunonline · May 30, 2018, 11:18am

Hello, Can you share your lounge room tv remote control?

tom_l · May 30, 2018, 11:48am

Here you go:

input_text.lounge_tv_panel:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 4
    column_width: 75px
    row_height: 75px
    entities:
    - entity: script.lounge_tv_on
      label: "On"
      column: 1
      row: 1
      column_span: 1
      icon: mdi:power-cycle
    - entity: script.lounge_tv_off
      label: "Off"
      column: 2
      row: 1
      column_span: 1
      icon: mdi:power-off
    - entity: script.lounge_tv_input_tv
      label: "TV"
      column: 1
      row: 2
      column_span: 1
      icon: mdi:television-classic
    - entity: script.lounge_tv_input_pc
      label: "PC"
      column: 2
      row: 2
      column_span: 1
      icon: mdi:desktop-classic
    - entity: script.lounge_tv_input_kodi
      label: "Kodi"
      column: 3
      row: 2
      column_span: 1
      icon: mdi:kodi
    - entity: script.lounge_tv_play
      column: 1
      row: 3
      column_span: 1
      icon: mdi:play
    - entity: script.lounge_tv_pause
      column: 2
      row: 3
      column_span: 1
      icon: mdi:pause
    - entity: script.lounge_tv_stop
      column: 3
      row: 3
      column_span: 1
      icon: mdi:stop
    - entity: script.lounge_tv_rec
      column: 4
      row: 3
      column_span: 1
      icon: mdi:record
      text_color: '#ff0000'
    - entity: script.lounge_tv_menu
      label: "Menu"
      column: 1
      row: 4
      column_span: 1
      icon: mdi:menu
    - entity: script.lounge_tv_rew
      column: 2
      row: 4
      column_span: 1
      icon: mdi:rewind
    - entity: script.lounge_tv_ffwd
      column: 3
      row: 4
      column_span: 1
      icon: mdi:fast-forward
    - entity: script.lounge_tv_ch_up
      #label_sec: "CH+"
      column: 4
      row: 4
      column_span: 1
      icon: mdi:arrow-up-bold-box-outline
    - entity: script.lounge_tv_option
      label: "Options"
      column: 1
      row: 5
      column_span: 1
      icon: mdi:playlist-edit
    - entity: script.lounge_tv_skip_back
      column: 2
      row: 5
      column_span: 1
      icon: mdi:skip-previous
    - entity: script.lounge_tv_skip_fwd
      column: 3
      row: 5
      column_span: 1
      icon: mdi:skip-next
    - entity: script.lounge_tv_last_ch
      label_sec: "Last CH"
      column: 4
      row: 5
      column_span: 1
      icon: mdi:arrow-left-bold-box-outline
    - entity: script.lounge_tv_guide
      label: "Guide"
      column: 1
      row: 6
      column_span: 1
      icon: mdi:television-guide
    - entity: script.lounge_tv_info
      label_sec: "Info"
      column: 2
      row: 6
      column_span: 1
      icon: mdi:information-outline
    - entity: script.lounge_tv_up
      column: 3
      row: 6
      column_span: 1
      icon: mdi:arrow-up-bold-circle
      color: '#2576da'
    - entity: script.lounge_tv_ch_dn
      #label_sec: "CH-"
      column: 4
      row: 6
      column_span: 1
      icon: mdi:arrow-down-bold-box-outline
    - entity: script.lounge_tv_media
      label: "Media"
      column: 1
      row: 7
      column_span: 1
      icon: mdi:folder-multiple-image
    - entity: script.lounge_tv_left
      column: 2
      row: 7
      column_span: 1
      icon: mdi:arrow-left-bold-circle
      color: '#2576da'
    - entity: script.lounge_tv_ok
      column: 3
      row: 7
      column_span: 1
      icon: mdi:check-circle-outline
    - entity: script.lounge_tv_right
      column: 4
      row: 7
      column_span: 1
      icon: mdi:arrow-right-bold-circle
      color: '#2576da'
    - entity: script.lounge_tv_www
      label: "Internet"
      column: 1
      row: 8
      column_span: 1
      icon: mdi:play-network
    - entity: script.lounge_tv_return
      label: "Return"
      column: 2
      row: 8
      column_span: 1
      icon: mdi:backburger
    - entity: script.lounge_tv_down
      column: 3
      row: 8
      column_span: 1
      icon: mdi:arrow-down-bold-circle
      color: '#2576da'
    - entity: script.lounge_tv_exit
      label_sec: "Exit"
      column: 4
      row: 8
      column_span: 1
      icon: mdi:backspace
    - entity: script.lounge_tv_red
      column: 1
      row: 9
      column_span: 1
      icon: mdi:square
      text_color: '#ff0000'
    - entity: script.lounge_tv_green
      column: 2
      row: 9
      column_span: 1
      icon: mdi:square
      text_color: '#00ff00'
    - entity: script.lounge_tv_yellow
      column: 3
      row: 9
      column_span: 1
      icon: mdi:square
      text_color: '#ffff00'
    - entity: script.lounge_tv_blue
      column: 4
      row: 9
      column_span: 1
      icon: mdi:square
      text_color: '#0000ff'