Hi all, got a nice remote working for me. I didn’t like to turn on scripts for switching my television, so I spent some work to get this, my own remote:
I created the remote using photoshop and placed transparent squares/rectangles on top of it.
To find the right spot on the image I used a red border around those transparent squares/rectangles which I deleted afterwards.
The red dot between mute-button and power-toggle turns on when tv is on.
Here’s the final code from my ui-lovelace.yaml:
# View Home Entertainment
- title: Home Entertainment
path: remote
icon: mdi:remote
cards:
- type: picture-elements
image: /local/remote/remote.png
elements:
- type: conditional
conditions:
- entity: input_boolean.tvstate
state: 'off'
elements:
- type: image
entity: script.tv_on
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_on
style:
top: 9%
left: 62.5%
width: 10%
- type: image
entity: input_boolean.tvstate
image: /local/remote/remote_off.png
title: null
style:
top: 8%
left: 50%
width: 10%
state_filter:
"off": opacity(70%)
- type: conditional
conditions:
- entity: input_boolean.tvstate
state: 'on'
elements:
- type: image
entity: script.tv_off
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_off
style:
top: 9%
left: 62.5%
width: 10%
- type: image
entity: script.volume_mute
image: /local/remote/blank_rectangle.png
title: null
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.volume_mute
style:
top: 8.5%
left: 38%
width: 10%
- type: image
entity: switch.tv
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: toggle
style:
top: 14.5%
left: 37%
width: 10%
- type: image
entity: switch.xoro
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: toggle
style:
top: 13.5%
left: 50%
width: 10%
- type: image
entity: switch.sony
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: toggle
style:
top: 14.5%
left: 63.5%
width: 10%
- type: image
entity: script.tv_channel_24
image: /local/remote/blank_rectangle.png
title: null
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_24
style:
top: 18%
left: 50%
width: 10%
# Programme
- type: image
entity: script.tv_channel_1
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_1
style:
top: 22.5%
left: 37%
width: 10%
- type: image
entity: script.tv_channel_2
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_2
style:
top: 22.5%
left: 50%
width: 10%
- type: image
entity: script.tv_channel_3
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_3
style:
top: 22.5%
left: 63.5%
width: 10%
- type: image
entity: script.tv_channel_4
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_4
style:
top: 28%
left: 37%
width: 10%
- type: image
entity: script.tv_channel_5
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_5
style:
top: 28%
left: 50%
width: 10%
- type: image
entity: script.tv_channel_6
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_6
style:
top: 28%
left: 63.5%
width: 10%
- type: image
entity: script.tv_channel_7
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_7
style:
top: 33.5%
left: 37%
width: 10%
- type: image
entity: script.tv_channel_8
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_8
style:
top: 33.5%
left: 50%
width: 10%
- type: image
entity: script.tv_channel_9
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_9
style:
top: 33.5%
left: 63.5%
width: 10%
- type: image
entity: script.tv_channel_10
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_10
style:
top: 38.8%
left: 37%
width: 10%
- type: image
entity: script.tv_channel_11
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_11
style:
top: 38.8%
left: 50%
width: 10%
- type: image
entity: script.tv_channel_12
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_12
style:
top: 38.8%
left: 63.5%
width: 10%
- type: image
entity: script.tv_channel_13
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_13
style:
top: 44%
left: 37%
width: 10%
- type: image
entity: script.tv_channel_15
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_15
style:
top: 44%
left: 50%
width: 10%
- type: image
entity: script.tv_channel_32
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_32
style:
top: 44%
left: 63.5%
width: 10%
# hoch, runter, lauter, leiser
- type: image
entity: script.channel_down
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.channel_down
style:
top: 54.8%
left: 38%
width: 10%
- type: image
entity: script.channel_up
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.channel_up
style:
top: 54.8%
left: 62%
width: 10%
- type: image
entity: script.volume_up
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.volume_up
style:
top: 52%
left: 50%
width: 10%
- type: image
entity: script.volume_down
image: /local/remote/blank_rectangle.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.volume_down
style:
top: 57.4%
left: 50%
width: 10%
#Zahlen 0-9
- type: image
entity: script.tv_channel_1
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_1
style:
top: 66.7%
left: 36.8%
width: 7%
- type: image
entity: script.tv_channel_2
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_2
style:
top: 66.7%
left: 50%
width: 7%
- type: image
entity: script.tv_channel_3
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_3
style:
top: 66.7%
left: 63%
width: 7%
- type: image
entity: script.tv_channel_4
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_4
style:
top: 72%
left: 36.5%
width: 7%
- type: image
entity: script.tv_channel_5
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_5
style:
top: 72%
left: 50%
width: 7%
- type: image
entity: script.tv_channel_6
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_6
style:
top: 72%
left: 63%
width: 7%
- type: image
entity: script.tv_channel_7
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_7
style:
top: 77.3%
left: 36%
width: 7%
- type: image
entity: script.tv_channel_8
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_8
style:
top: 77.3%
left: 50%
width: 7%
- type: image
entity: script.tv_channel_9
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_9
style:
top: 77.3%
left: 63.3%
width: 7%
- type: image
entity: script.tv_channel_10
image: /local/remote/blank_square.png
title: null
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tv_channel_10
style:
top: 82.2%
left: 50%
width: 7%
I can share the Photoshop .psd-file if someone is interested 