Custom UI: Tiles

I have but it’s a bit odd. If you put your input_text: inside a group and then add the group as an entity to a card on Lovelace, it’ll give you a group icon with unknown as it’s state. If you then click that, a more info window will pop up with the fully functioning tiles inside it.

I’m sure adding proper custom_ui features to Lovelace is on the list to add given how popular they are but the devs do say she’s only here to play with at the moment…oo err missus :stuck_out_tongue_winking_eye:

1 Like

yes, i got exactly the same behavior with “unknown” state.
tiles is very useful thing and i hope it will be implemented soon in lovelace as well

they guys i have this error my tiles are showinf up ok on my iphone but not on chrome

http://my.ip:8123/local/custom_ui/state-card-tiles.html:90:50 Uncaught TypeError: Cannot read property 'EventsMixin' of undefined

this is my config.

frontend:
  extra_html_url:
    - /local/custom_ui/custom-weather-card.html
    - /local/custom_ui/state-card-tiles.html
  extra_html_url_es5:
    - /local/custom_ui/custom-weather-card.html
    - /local/custom_ui/state-card-tiles_es5.html

Update to the latest version of tiles. The latest release has a fix for that with HA 0.70.0+

This will be a perfect addition to Lovelace…hoping that we get it there soon.

1 Like

I’ve got a very odd problem with tiles, not sure when it started but somewhere around 0.70/0.71 I think. Everything is currently up to date.

If I have this as my default view…

  default_view:
    name: Buttons
    icon: mdi:apps
    view: yes
    entities:
      - group.inside_buttons

group.inside_buttons has just input_text.inside in it.

When I first load HA no icons load either in my tiles or in the menu across the top. If I click on one of the invisible icons to load a different tab everything works fine from thereon…until another refresh.

If I load any other ‘normal’ tab first everything is fine straight away and, here’s the really weird one, if I add a normal group to the one above it also works properly.

It’s only when the tiles group is on it’s own that I get this strange behaviour. Anyone else seen this?

Images to go with above.

Initial load…

After visiting another tab…

No errors anywhere that I can find. A force refresh loses all the icons again.

can we try this Lovelace next to, or maybe should i say ‘in’ our regular setup, or do we need to replace that with the Lovelace interface for the full Hassio configuration? Im a bit weary to test this experimental setup if the latter.

using a tile to display a few values, how can i add a ‘next-line’ command to this so it shows nicely listed, no matter the tile size? :

        label_sec_template: >
          return entities['sensor.master_bedroom_motion_sensor_temperature'].state + ' °C, ' + 
          entities['sensor.master_bedroom_motion_sensor_lux'].state + ' Lx';

27

1 Like

Working on it.

1 Like

Not sure what im doing wrong, but for some reason I dont get the image tiles to work.
They are not displayed at all.
This is the group card withe the example tiles, unfortunately not displayed:

groupCard

But I can click something under the card title, so there is something :slight_smile:
And it is opening an popup and shows some script:

Can somebody help?

wondering if I can port that tiles and use it with Lovelace or maybe anyone can help me with creation custom card from it?

5 Likes

Yes, you should be able to use Lovelace for the most part.

1 Like

I have the feeling (from chat) that this will be available very soon for Lovelace.

2 Likes

Hi Everyone!

I realy need your help with this question as i belive it is a basic issue but i cant find the soultion.
I have configured a switch mqtt on my HA which is sending a code to my ESP8266 which is running an server which recives the code and turn on my AC, all is working just fine so i wanted to move to the next step which is creating a tile interface on HA to simulate my AC remote.
Using the exmples in this thread i have manged to create a basic tile with 4 objects on the row howver whatever i configured i am faling to trigger the object to send the code the same as i am pressing the mqtt switch, basicaly whan pressing each one of the 4 tiles i see system_log\write called.
What am i missing or shuld change ?
Any help will be greatly appricated!
Thanks!

Here is my last test:

groups.yaml
#######
controle_pc_fan_rgb:
name: Controle Remoto PC
entities:
- script.remote_control

customize.yaml
###########
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.ITAY AC
caption:
icon: mdi:power
column: 1
row: 1
- entity: input_boolean.switch1
caption:
icon: mdi:power
column: 2
row: 1
- entity: input_number.Slider1
initial: 20
min: 20
max: 25
step: 1
caption:
icon: mdi:power
column: 3
row: 1
- entity: switch.test_ac
platform: mqtt
name: “ITAY AC”
icon: mdi:air-conditioner
command_topic: “ITAY_ROOM_ir_server/send”
payload_on: “15,B23F20,24,1”
payload_off: “15,B27BE0,24,1”
optimistic: false
qos: 0
retain: false

scripts.yaml
##########
remote_control:
sequence:

Thanks for this project! It is great!
This is my TV remote (with complete functionality). The UI might not seem very intuitive because i made it especially for a TV used as a smart mirror, so most of the main panel buttons are scripts that send multiple commands to activate PIP, change channels, etc (on the mirror)

I’m using a BroadLink RM PRO+ to send the IR packet

customize.yaml (10.7 KB)
automations.yaml (819 Bytes)
scripts.yaml (21.7 KB)
GROUPS-configuration.yaml (1009 Bytes)

…I should mention…this was made for a Samsung TV, so it should work on most models (as is) but you can change the packets to make it work with anything you want

9 Likes

That is great. How do you hide and show cards?

Every button is a script with multiple services; one service to send a command to a broadlink (IR) to do whatever is supposed to do on the tv, and to hide and show the cards i have a service call for every other card to hide what is supposed to be hidden when that specific button/script is activated and change visibility to what i need to show up.

For example, to show the keypad card (and also the favorites menu) this is the script for it:

tv_remote_keypad:
  sequence:
  - data:
      entity_id: group.tv_remote_cable
      visible: 'true'
    service: group.set_visibility
  - data:
      entity_id: group.tv_remote_keypad
      visible: 'true'
      #visible: 'false'
    service: group.set_visibility
  - data:
      entity_id: group.tv_remote_settings
      visible: 'false'
    service: group.set_visibility
  - data:
      entity_id: group.tv_remote_source
      visible: 'false'
    service: group.set_visibility
  - data:
      entity_id: group.tv_remote_list
      visible: 'false'
    service: group.set_visibility
  - data:
      entity_id: group.tv_remote_guide
      visible: 'false'
    service: group.set_visibility
1 Like

Sometimes simple is just as good :wink: did you by any chance use MagicMirror for the smart mirror? if so it would be really great to find out a bit more about how you achevied “panel buttons are scripts that send multiple commands to activate PIP, change channels, etc (on the mirror)”

thanks in advance for your time.

I’m using MagicMirror, but it doesn’t really matter since PIP, channels, etc. are parts of interfacing with the TV.

I’m using a BroadLink RM PRO+ to send a IR signal to the TV (emulating the original tv remote).

Changing the source (HDMI, DTV, etc.) is seamless but unfortunately some functions like PIP require at least a confirmation on the TV UI (on my tv model) and in that case a just have a script that will send a sequence of commands through the broadlink.

For example, switching to hdmi 1 from a different source is as simple as;

tv_hdmi1:
  alias: HDMI 1
  sequence:
  - data: {}
    service: switch.broadlink_send_packet_192_168_0_100
    data_template:
      packet: 'JgBGAJKVETkRORE5ERQQFRAVERQQFRE5ETkROREUERQRFBEUERQRORAVERUPOxAVDzsQOhA6EBUQOhA6EBUQOhAVEBUPFhAADQUAAA'

but activating PIP (in my case i need dtv over hdmi 2 with sound from sub source):

tv_remote_pip:
  sequence:
  - data: {}
    service: script.tv_pip
  - service: script.tv_enter
  - service: script.tv_down
  - service: script.tv_enter
  - service: script.tv_return
  - service: script.tv_return
  - service: script.tv_return
  - data:
      entity_id: group.tv_remote_cable
      visible: 'true'
    service: group.set_visibility

(i’m sending the “return” command 3 times because it has no visual impact on the tv UI and sometimes it is not read correctly)
The scripts you see in this example (script.tv_something) are basic functions of the normal remote independently defined (because it will be easier for me to use them individually later, or if i want to modify the remote…or add some voice control )
For example script.tv_pip is:

tv_pip:
  sequence:
  - data: {}
    service: switch.broadlink_send_packet_192_168_0_100
    data_template:
      packet: 'JgCMAJaTEjgSOBI4EhMUERQRFBEUERQ2FDYSOBQRFBITEhMSExITEhMSExITEhMSEzcTEhMSEzcTNxM3EzcTNxQRFDYTNxMABgmXkxU1FDYUNhUQFBEVEBQRFBEUNhQ2FDYUERQRFBEUERQRFBETEhQRFBETEhM3FBEUERM3FDYUNhQ2FDYUERQ2FDYUAA0FAAAAAAAAAAAAAAAA'

The packets can be found online for some models or sniffed with the broadlink device