Custom UI: Tiles

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

Thanks for the detailed responce and for sharing with us… now it makes sense, simple but effective!
Just moved to hassOS so will play around see what i can come up with.

Hey cool setup can you post your config for this remote?

thanks

Sure thing, but you might need to do some editing since I made it customized to my setup.

I plan to change or add some things to it in the future, especially the ‘list’ card and possibly move the volume/ch joystick.

Add the following to the configuration.yaml (under groups:)

group:
# TV REMOTE - VIEW
  TV:
    name: TV
    view: yes
    icon: mdi:television
    entities:
      - group.tv_remote
      - group.tv_remote_cable
      - group.tv_remote_keypad
      - group.tv_remote_settings
      - group.tv_remote_source
      - group.tv_remote_list
      - group.tv_remote_guide

# TV REMOTE - GROUPS 
  tv_remote:
    name: " "
    entities:
      - script.tv_remote
  tv_remote_cable:
    name: " "
    entities:
      - script.tv_remote_cable
  tv_remote_source:
    name: " "
    entities:
      - script.tv_remote_source   
  tv_remote_keypad:
    name: " "
    entities:
      - script.tv_remote_keypad
  tv_remote_settings:
    name: " "
    entities:
      - script.tv_remote_settings
  tv_remote_list:
    name: " "
    entities:
      - script.tv_remote_list
  tv_remote_guide:
    name: " "
    entities:
      - script.tv_remote_guide

Add the contents of the following files to the appropriate files in your HA:

automations.yaml (819 Bytes)
customize.yaml (10.7 KB)
scripts.yaml (21.7 KB)

Enjoy !

3 Likes

Thanks for your interest, i also posted my config for it if case you need more info

@that config is yours? can u share?

Inspiring and very nicely done :+1: though I can’t think of anything much worse than a touchscreen TV remote :smile:

Thank you for sharing!

I can help with that: a touchscreen TV remote on a smart mirror :smile:

This was not really made for a touch screen, I just wanted to take advantage of custom ui tiles to keep a clean UI on my HA dashboard

1 Like