Share your Lovelace Home Theater Remote Setup

miguelpucela · May 23, 2022, 8:26am

Here it is my remote:

type: picture-elements
elements:
  - image: /local/mando/television.png
    style:
      left: 50%
      top: 30px
      width: 180px
    tap_action:
      action: none
    type: image
  - image: /local/mando/power.png
    entity: media_player.tv_salon
    state_image:
      'on': /local/mando/on_color.png
      'off': /local/mando/off_color.png
    style:
      left: 22%
      top: 130px
      width: 55px
    tap_action:
      action: call-service
      service: media_player.toggle
      target:
        entity_id: media_player.tv_salon
    type: image
  - image: /local/mando/channel+.png
    style:
      left: 10%
      top: 100px
      width: 70px
    tap_action:
      action: call-service
      service: webostv.button
      service_data:
        entity_id: media_player.tv_salon
        button: CHANNELUP
    type: image
  - image: /local/mando/channel-.png
    style:
      left: 10%
      top: 170px
      width: 70px
    tap_action:
      action: call-service
      service: webostv.button
      service_data:
        entity_id: media_player.tv_salon
        button: CHANNELDOWN
    type: image
  - image: /local/mando/volume-up.png
    style:
      left: 33%
      top: 90px
      width: 70px
    tap_action:
      action: call-service
      service: webostv.button
      service_data:
        entity_id: media_player.tv_salon
        button: VOLUMEUP
    type: image
  - image: /local/mando/volume-down.png
    style:
      left: 33%
      top: 180px
      width: 70px
    tap_action:
      action: call-service
      service: webostv.button
      service_data:
        entity_id: media_player.tv_salon
        button: VOLUMEDOWN
    type: image
  - image: /local/mando/mute.png
    style:
      left: 37%
      top: 135px
      width: 50px
    tap_action:
      action: call-service
      service: webostv.button
      service_data:
        entity_id: media_player.tv_salon
        button: MUTE
    type: image
  - type: custom:text-element
    text: 'Fuente:'
    style:
      left: 70%
      top: 80px
      width: 160px
  - type: state-label
    entity: media_player.tv_salon
    attribute: source
    style:
      left: 88%
      top: 80px
      width: 180px
  - type: custom:text-element
    text: 'Canal:'
    style:
      left: 70%
      top: 115px
      width: 160px
  - type: state-label
    entity: media_player.tv_salon
    attribute: media_title
    style:
      left: 88%
      top: 115px
      width: 180px
  - type: custom:text-element
    text: 'Volumen:'
    style:
      left: 70%
      top: 150px
      width: 160px
  - type: state-label
    entity: media_player.tv_salon
    attribute: volume_level
    style:
      left: 88%
      top: 150px
      width: 180px
  - type: custom:text-element
    text: 'Mute:'
    style:
      left: 70%
      top: 185px
      width: 160px
  - type: state-label
    entity: media_player.tv_salon
    attribute: is_volume_muted
    style:
      left: 88%
      top: 185px
      width: 180px
  - image: /local/mando/amplificador.png
    style:
      left: 50%
      top: 240px
      width: 180px
    tap_action:
      action: none
    type: image
  - image: /local/mando/power.png
    entity: media_player.salon
    state_image:
      playing: /local/mando/on_color.png
      'off': /local/mando/off_color.png
    style:
      left: 12%
      top: 305px
      width: 55px
    tap_action:
      action: call-service
      service: media_player.toggle
      target:
        entity_id: media_player.salon
    type: image
  - image: /local/mando/sonido-tv.png
    style:
      left: 12%
      top: 375px
      width: 70px
    tap_action:
      action: call-service
      service: media_player.select_source
      target:
        entity_id: media_player.salon
      service_data:
        source: audio1
    type: image
  - image: /local/mando/satellite.png
    style:
      left: 30%
      top: 305px
      width: 60px
    tap_action:
      action: call-service
      service: media_player.select_source
      target:
        entity_id: media_player.salon
      service_data:
        source: hdmi1
    type: image
  - image: /local/mando/usb.png?v=1
    style:
      left: 30%
      top: 375px
      width: 60px
    tap_action:
      action: call-service
      service: media_player.select_source
      target:
        entity_id: media_player.salon
      service_data:
        source: hdmi2
    type: image
  - image: /local/mando/volume-up.png
    style:
      left: 45%
      top: 305px
      width: 70px
    tap_action:
      action: call-service
      service: media_player.volume_up
      target:
        entity_id: media_player.salon
    type: image
  - image: /local/mando/volume-down.png
    style:
      left: 45%
      top: 395px
      width: 70px
    tap_action:
      action: call-service
      service: media_player.volume_down
      target:
        entity_id: media_player.salon
    type: image
  - image: /local/mando/mute.png
    style:
      left: 50%
      top: 350px
      width: 50px
    tap_action:
      action: call-service
      service: script.amplificador_mute_toggle
    type: image
  - image: /local/mando/satelite-on2.png
    style:
      left: 12%
      top: 435px
      width: 70px
    tap_action:
      action: call-service
      service: script.amplificador_encender_satelite
    type: image
  - image: /local/mando/satelite-off2.png
    style:
      left: 12%
      top: 485px
      width: 70px
    tap_action:
      action: call-service
      service: script.amplificador_apagar_satelite
    type: image
  - image: /local/mando/fire-tv-on2.png
    style:
      left: 32%
      top: 435px
      width: 70px
    tap_action:
      action: call-service
      service: script.amplificador_encender_fire_tv
    type: image
  - image: /local/mando/fire-tv-off2.png
    style:
      left: 32%
      top: 485px
      width: 70px
    tap_action:
      action: call-service
      service: script.amplificador_apagar_fire_tv
    type: image
  - type: custom:text-element
    text: 'Fuente:'
    style:
      left: 80%
      top: 300px
      width: 160px
  - type: state-label
    entity: media_player.salon
    attribute: source
    style:
      left: 98%
      top: 300px
      width: 180px
  - type: custom:text-element
    text: 'Volumen:'
    style:
      left: 80%
      top: 335px
      width: 160px
  - type: state-label
    entity: media_player.salon
    attribute: volume_level
    style:
      left: 98%
      top: 335px
      width: 180px
  - type: custom:text-element
    text: 'Mute:'
    style:
      left: 80%
      top: 370px
      width: 160px
  - type: state-label
    entity: media_player.salon
    attribute: is_volume_muted
    style:
      left: 98%
      top: 370px
      width: 180px
  - image: /local/mando/satelite.png
    style:
      left: 25%
      top: 540px
      width: 180px
    tap_action:
      action: none
    type: image
  - image: /local/mando/sat.png?v2
    style:
      left: 10%
      top: 600px
      width: 70px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: sat
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/power.png
    entity: binary_sensor.satelite
    state_image:
      'on': /local/mando/on_color.png
      'off': /local/mando/off_color.png
    style:
      left: 25%
      top: 600px
      width: 55px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: power
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/info.png
    style:
      left: 40%
      top: 600px
      width: 50px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: info
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/back.png
    style:
      left: 10%
      top: 660px
      width: 55px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: atras
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/exit2.png
    style:
      left: 40%
      top: 660px
      width: 55px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: exit
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/channel+.png
    style:
      left: 25%
      top: 660px
      width: 70px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: subir canal
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/volume-down.png
    style:
      left: 10%
      top: 720px
      width: 75px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: bajar volumen
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/success.png
    style:
      left: 25%
      top: 720px
      width: 55px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: enter
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/volume-up.png
    style:
      left: 40%
      top: 720px
      width: 75px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: subir volumen
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/channel-.png
    style:
      left: 25%
      top: 780px
      width: 75px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: bajar canal
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/love.png
    style:
      left: 40%
      top: 780px
      width: 60px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: favoritos
        dispositivo: satelite
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/proyector.png
    style:
      left: 25%
      top: 845px
      width: 180px
    tap_action:
      action: none
    type: image
  - image: /local/mando/switch-on.png
    style:
      left: 15%
      top: 910px
      width: 80px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: encender
        dispositivo: proyector
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/switch-off.png
    style:
      left: 15%
      top: 980px
      width: 80px
    tap_action:
      action: call-service
      service: script.broadlink_manda_comando
      service_data:
        boton: apagar
        dispositivo: proyector
        repeticiones: 1
        retardo: 0
    type: image
  - image: /local/mando/projection-screen_up.png
    style:
      left: 35%
      top: 915px
      width: 60px
    tap_action:
      action: call-service
      service: script.proyector_apagar
    type: image
  - image: /local/mando/projection-screen_down.png
    style:
      left: 35%
      top: 985px
      width: 60px
    tap_action:
      action: call-service
      service: script.proyector_encender
    type: image
  - image: /local/mando/fire-tv2.png?v=1
    style:
      left: 78%
      top: 420px
      width: 145px
    tap_action:
      action: none
    type: image
  - image: /local/mando/mando_fire-tv.jpg
    style:
      left: 78%
      top: 755px
      width: 160px
    tap_action:
      action: none
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 67%
      top: 487px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 458854 && sendevent /dev/input/event4
          1 116 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 458854 && sendevent /dev/input/event4 1 116 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 530px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 786977 && sendevent /dev/input/event4
          1 217 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 786977 && sendevent /dev/input/event4 1 217 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 570px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 458834 && sendevent /dev/input/event4
          1 103 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 458834 && sendevent /dev/input/event4 1 103 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 65%
      top: 620px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 458832 && sendevent /dev/input/event4
          1 105 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 458832 && sendevent /dev/input/event4 1 105 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 91%
      top: 620px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 458831 && sendevent /dev/input/event4
          1 106 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 458831 && sendevent /dev/input/event4 1 106 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 670px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 20 0 0 && sendevent /dev/input/event4 20 1
          0 && sendevent /dev/input/event4 4 4 458833 && sendevent
          /dev/input/event4 1 108 1 && sendevent /dev/input/event4 0 0 0 &&
          sendevent /dev/input/event4 4 4 458833 && sendevent /dev/input/event4
          1 108 0 && sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 620px
      width: 50px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 458840 && sendevent /dev/input/event4
          1 96 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 458840 && sendevent /dev/input/event4 1 96 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 67%
      top: 715px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 458993 && sendevent /dev/input/event4
          1 158 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 458993 && sendevent /dev/input/event4 1 158 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 715px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 786979 && sendevent /dev/input/event4
          1 172 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 786979 && sendevent /dev/input/event4 1 172 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 89%
      top: 715px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 786496 && sendevent /dev/input/event4
          1 139 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 786496 && sendevent /dev/input/event4 1 139 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 67%
      top: 760px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 786612 && sendevent /dev/input/event4
          1 168 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 786612 && sendevent /dev/input/event4 1 168 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 760px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 786637 && sendevent /dev/input/event4
          1 164 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 786637 && sendevent /dev/input/event4 1 164 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 89%
      top: 760px
      width: 35px
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        command: >-
          sendevent /dev/input/event4 4 4 786611 && sendevent /dev/input/event4
          1 208 1 && sendevent /dev/input/event4 0 0 0 && sendevent
          /dev/input/event4 4 4 786611 && sendevent /dev/input/event4 1 208 0 &&
          sendevent /dev/input/event4 0 0 0
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 810px
      width: 35px
    tap_action:
      action: call-service
      service: media_player.volume_up
      target:
        entity_id: media_player.salon
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 858px
      width: 35px
    tap_action:
      action: call-service
      service: media_player.volume_down
      target:
        entity_id: media_player.salon
    type: image
  - image: /local/mando/cuadro_transp.png
    style:
      left: 78%
      top: 906px
      width: 35px
    tap_action:
      action: call-service
      service: media_player.volume_mute
      target:
        entity_id: media_player.salon
      service_data:
        is_volume_muted: true
    hold_action:
      action: call-service
      service: media_player.volume_mute
      target:
        entity_id: media_player.salon
      service_data:
        is_volume_muted: false
    type: image
  - image: /local/mando/netflix.png
    style:
      left: 66%
      top: 955px
      width: 22px
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: com.netflix.ninja
        entity_id: media_player.fire_tv
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: '!com.netflix.ninja'
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/spotify.png
    style:
      left: 78%
      top: 955px
      width: 40px
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: com.spotify.tv.android
        entity_id: media_player.fire_tv
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: '!com.spotify.tv.android'
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/pluto.png
    style:
      left: 90%
      top: 955px
      width: 40px
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: tv.pluto.android
        entity_id: media_player.fire_tv
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: '!tv.pluto.android'
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/kodi2.png
    style:
      left: 66%
      top: 1015px
      width: 38px
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: org.xbmc.kodi
        entity_id: media_player.fire_tv
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: '!org.xbmc.kodi'
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/youtube2.png
    style:
      left: 78%
      top: 1015px
      width: 40px
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: com.amazon.firetv.youtube
        entity_id: media_player.fire_tv
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: '!com.amazon.firetv.youtube'
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/tivify.png
    style:
      left: 90%
      top: 1015px
      width: 40px
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: com.tvup.tivify.app.tv
        entity_id: media_player.fire_tv
    hold_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: '!com.tvup.tivify.app.tv'
        entity_id: media_player.fire_tv
    type: image
  - image: /local/mando/luz-salon.png?v=2
    style:
      left: 28%
      top: 1070px
    tap_action:
      action: none
    type: image
  - image: /local/mando/azul.png
    style:
      left: 8%
      top: 1145px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_color
      service_data:
        color: blue
    type: image
  - image: /local/mando/rojo.png
    style:
      left: 22%
      top: 1145px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_color
      service_data:
        color: red
    type: image
  - image: /local/mando/verde.png
    style:
      left: 36%
      top: 1145px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_color
      service_data:
        color: green
    type: image
  - image: /local/mando/violeta.png
    style:
      left: 50%
      top: 1145px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_color
      service_data:
        color: purple
    type: image
  - image: /local/mando/blanco.png
    style:
      left: 64%
      top: 1145px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_blanca
    type: image
  - image: /local/mando/negro.png
    style:
      left: 78%
      top: 1145px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_brillo
      service_data:
        step_pct: '-100'
    type: image
  - image: /local/mando/mas.png
    style:
      left: 92%
      top: 1115px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_brillo
      service_data:
        step_pct: '10'
    type: image
  - image: /local/mando/menos.png
    style:
      left: 92%
      top: 1175px
      width: 50px
    tap_action:
      action: call-service
      service: script.luz_salon_brillo
      service_data:
        step_pct: '-10'
    type: image
image: /local/mando/fondo_blanco2.png

extremeaudio · May 23, 2022, 3:43pm

Slick! Which masking system are you using? And if you share the code for the interface that would be awesome!

Oligarch · June 4, 2022, 3:57pm

Antasp3136 · June 7, 2022, 6:46pm

Still in the process of building my masking system… Hopefully will be done with it in a few weeks. You can follow it here. Masking System My Setup | Page 2 | AVS Forum

For the remote UI im just using the lovelace grid and button cards ( No custom code ) and calling the different services for roku and triggering some automations for various things.

Antasp3136 · June 7, 2022, 6:50pm

  - theme: Backend-selected
    title: Theater Room Remote
    path: theater-room-remote
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: navigate
              navigation_path: menu
            icon: mdi:menu-open
            icon_height: 55px
            name: Main Menu
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: home
                  target:
                    device_id: 07dd6d0543b546368346201ca1bcf188
                icon_height: 55px
                icon: mdi:home
                name: Home
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: up
                  target:
                    device_id: 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-up-drop-circle-outline
              - type: button
                tap_action:
                  action: toggle
                name: Power
                icon: mdi:power
                icon_height: 55px
                show_state: true
                entity: input_boolean.theater_switch
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: left
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-left-drop-circle-outline
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: select
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon_height: 55px
                name: OK/Select
                icon: mdi:alpha-k-circle-outline
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: right
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-right-drop-circle-outline
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.volume_up
                  service_data: {}
                  target:
                    entity_id: media_player.onkyo_receiver
                name: Vol +
                icon: mdi:volume-plus
                icon_height: 54px
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: down
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-down-drop-circle-outline
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: back
                  target:
                    device_id: 07dd6d0543b546368346201ca1bcf188
                name: Back
                icon: mdi:undo
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.volume_down
                  service_data: {}
                  target:
                    entity_id: media_player.onkyo_receiver
                name: Vol -
                icon: mdi:volume-minus
                icon_height: 55px
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.media_play_pause
                  service_data: {}
                  target:
                    entity_id: media_player.roku_ultra
                name: Play/Pause
                icon: mdi:play-pause
                show_state: true
                entity: media_player.roku_ultra
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.volume_mute
                  service_data: {}
                  target:
                    entity_id: media_player.onkyo_receiver
                name: Mute
                icon: mdi:volume-mute
          - square: false
            columns: 3
            type: grid
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: cover.open_cover
                  service_data: {}
                  target:
                    device_id:
                      - b2bce6ce6e71f1164565f7055d9fc710
                entity: cover.tasmota_cover_1_2
                icon: mdi:arrow-expand-vertical
                name: Open Masking System
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: cover.stop_cover
                  service_data: {}
                  target:
                    device_id:
                      - b2bce6ce6e71f1164565f7055d9fc710
                entity: cover.tasmota_cover_1_2
                icon: mdi:stop
                name: Stop Masking System
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: cover.close_cover
                  service_data: {}
                  target:
                    device_id:
                      - b2bce6ce6e71f1164565f7055d9fc710
                entity: cover.tasmota_cover_1_2
                icon_height: '-1px'
                icon: mdi:arrow-collapse-vertical
                name: Close Masking System
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                entity: scene.2_5_aspect_ratio
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  service_data: {}
                  target:
                    entity_id: scene.2_5_aspect_ratio
              - show_name: true
                show_icon: true
                type: button
                entity: scene.aspect_ratio_open
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  service_data: {}
                  target:
                    entity_id: scene.aspect_ratio_open
      - type: grid
        cards:
          - type: picture-glance
            image: /local/netflix.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Netflix
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            entities: []
            image: /local/plex.png
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Plex - Free Movies & TV
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/disney1.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Disney Plus
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/appletv.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Apple TV
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/amazon1.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Prime Video
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/discovery.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: discovery plus
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/hbo.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: HBO Max
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/bravo.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Bravo
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/frndly.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Frndly TV
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/foxnow.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: FOX NOW
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/espn.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: espn
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/roku.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: bluray
              target:
                entity_id: media_player.onkyo_receiver
        columns: 4
      - type: horizontal-stack
        cards:
          - type: light
            entity: light.media_room
            icon: mdi:light-recessed
          - type: vertical-stack
            cards:
              - type: entity
                entity: sensor.lamplife
                name: Lamp
                icon: mdi:projector
              - type: entity
                entity: sensor.projector_lamp_hours
                icon: mdi:projector
                name: LampHrs
              - type: entity
                entity: sensor.projector_systems_status
                name: Status
                icon: mdi:projector
      - type: vertical-stack
        cards:
          - type: media-control
            entity: media_player.epson_projector
          - type: media-control
            entity: media_player.onkyo_receiver
          - type: media-control
            entity: media_player.roku_ultra
          - type: entity
            entity: sensor.aspect_ratio
            icon: mdi:aspect-ratio
          - type: entity
            entity: sensor.plex_status
            icon: mdi:plex
          - type: conditional
            conditions:
              - entity: media_player.plex_plex_for_roku_roku_ultra
                state_not: idle
              - entity: media_player.plex_plex_for_roku_roku_ultra
                state_not: unavailable
            card:
              type: media-control
              entity: media_player.plex_plex_for_roku_roku_ultra
          - type: thermostat
            entity: climate.basement

mbbs1024 · June 7, 2022, 7:23pm

I you use a broadlink IR/RF transmitter to send codes for your remotes, please also share those codes in following forum thread

mdb17 · June 29, 2022, 4:47am

I know this is an old post but was hoping you could provide some in site. I am getting this error when trying to apply your template code:

I have been able to narrow it down to the fact that it has an issue with the icon color code but haven’t found a solution to it yet.

icon:
    - color: |
        [[[
          if (entity.state == variables.selection) {
            return 'var(--paper-item-icon-active-color)';
          } else  {
            return 'var(--paper-item-icon-color)';
          }
        ]]]

mdb17 · June 29, 2022, 5:01am

I figured this out as soon as I posted it. I had forgotten to change my entiny_id: to the select helper I had declared

extremeaudio · August 24, 2022, 1:01pm

copying and pasting this into the button editor says “no card type found”. Any idea how to fix that?

HasQT · August 24, 2022, 1:54pm

It’s a - theme: so you need to add to by raw config editor
It needs to line up with the other themes.
It had an code alignment issue around line 143 when I pasted it, the config editor gives good errors messaging, so it shouldn’t be to hard to find.

You can also use tab and shift tab to indent whole text selections to make it easier to line up.

The button on edit dashboard

raw config editor
raw

extremeaudio · August 25, 2022, 12:55pm

Finding it a bit hard to wrap my head around this. Its my first time with a custom card and I have no idea what I’m doing, I will admit.

Let me start from the beginning, I read the readme on the github page for the custom button card, created in manually without HACS, and then created their example button by copying their code into the manual part of the “Add Card” section. This created 2 buttons on the dash for me after saving. Awesome!

Then I went into Edit on those buttons and added a couple “call services” in place of the commands in the example and I got those buttons doing what I wanted! Awesome x2. So I know I’m on the right path.

Now what I assume is that by copying and pasting the above code I should be able to get a grid of buttons like @Antasp3136 and then after I save and have a neat grid of buttons, I will manually edit all the commands to operate my devices (of which so far I have added 1 kodi media player only. This is as good as a fresh HA install, not themes etc too, I dont even know where to get them in)

But when I paste the code in my “Add cards” - “Manual” section I get a zillion errors. Also, your screenshot suggests to put them in raw config editor. That doesnt work either. I have tried to copy and paste this code into both but too many errors to get it working. Paste.ee - View paste PVYLv
I am totally not able to get the indentation part. I have copied and pasted into visual code studio and tried tabbing and shift-tabbing till the warnings go away

This is the error I get when pasting the code in raw config editor -

Unable to parse YAML: YAMLException: bad indentation of a mapping entry (8:16) 5 | cards: 6 | - type: media-control 7 | 8 | title: Theater Room Remote --------------------^ 9 | cards: 10 | - type: vertical-stack

HasQT · August 25, 2022, 7:22pm

You need a dash on theme the same as the above path in the home section.

- theme

It does indeed go in the raw config, it won’t work directly in a button as it is.

Start by adding another page first, like my test. It will show you where the dash - needs to be.

Theme is a bit misleading here…
It’s just a theme tag as to whether it will have it own theme or follow a settings theme. There are a different kind of theme that will change your whole instance of HA available in settings(actually it’s in profile not settings) . This isn’t that.

extremeaudio · August 26, 2022, 1:18pm

I created a new tab. Pasted the contents. Yet no luck. Is there a pre formatted yaml file you can perhaps post here that I can copy to a location in the config folder or something. If this isnt too much to ask!

EDIT: Never Mind. I think I figured it out. And no doubt, thanks to your excellent help. Cheers man! Much appreciated @HasQT

HasQT · August 26, 2022, 1:27pm

There it is there anyway. You can create a new dashboard in settings and throw it in there to play around with it you don’t want to wreak your current home tab.

settings > add dashboard
then edit raw config on that dashboard.

title: Home
views:
  - path: default_view
    title: Home
    cards:
      - type: entities
        entities:
          - person.hassio
      - type: grid
        square: false
        columns: 1
        cards:
          - type: media-control
            entity: media_player.family_room
          - type: media-control
            entity: media_player.home_group
      - type: entities
        entities:
          - sensor.disk_use_percent_config
          - sensor.last_boot
          - sensor.memory_use_percent
          - sensor.processor_use
        title: Sensor
      - type: weather-forecast
        entity: weather.forecast_home
        show_forecast: false
  - theme: Backend-selected
    title: test
    path: test
    badges: []
    cards: []
  - theme: Backend-selected
    title: Theater Room Remote
    path: theater-room-remote
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: navigate
              navigation_path: menu
            icon: mdi:menu-open
            icon_height: 55px
            name: Main Menu
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: home
                  target:
                    device_id: 07dd6d0543b546368346201ca1bcf188
                icon_height: 55px
                icon: mdi:home
                name: Home
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: up
                  target:
                    device_id: 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-up-drop-circle-outline
              - type: button
                tap_action:
                  action: toggle
                name: Power
                icon: mdi:power
                icon_height: 55px
                show_state: true
                entity: input_boolean.theater_switch
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: left
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-left-drop-circle-outline
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: select
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon_height: 55px
                name: OK/Select
                icon: mdi:alpha-k-circle-outline
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: right
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-right-drop-circle-outline
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.volume_up
                  service_data: {}
                  target:
                    entity_id: media_player.onkyo_receiver
                name: Vol +
                icon: mdi:volume-plus
                icon_height: 54px
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: down
                  target:
                    device_id:
                      - 07dd6d0543b546368346201ca1bcf188
                icon: mdi:arrow-down-drop-circle-outline
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    command: back
                  target:
                    device_id: 07dd6d0543b546368346201ca1bcf188
                name: Back
                icon: mdi:undo
          - type: horizontal-stack
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.volume_down
                  service_data: {}
                  target:
                    entity_id: media_player.onkyo_receiver
                name: Vol -
                icon: mdi:volume-minus
                icon_height: 55px
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.media_play_pause
                  service_data: {}
                  target:
                    entity_id: media_player.roku_ultra
                name: Play/Pause
                icon: mdi:play-pause
                show_state: true
                entity: media_player.roku_ultra
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.volume_mute
                  service_data: {}
                  target:
                    entity_id: media_player.onkyo_receiver
                name: Mute
                icon: mdi:volume-mute
          - square: false
            columns: 3
            type: grid
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: cover.open_cover
                  service_data: {}
                  target:
                    device_id:
                      - b2bce6ce6e71f1164565f7055d9fc710
                entity: cover.tasmota_cover_1_2
                icon: mdi:arrow-expand-vertical
                name: Open Masking System
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: cover.stop_cover
                  service_data: {}
                  target:
                    device_id:
                      - b2bce6ce6e71f1164565f7055d9fc710
                entity: cover.tasmota_cover_1_2
                icon: mdi:stop
                name: Stop Masking System
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: cover.close_cover
                  service_data: {}
                  target:
                    device_id:
                      - b2bce6ce6e71f1164565f7055d9fc710
                entity: cover.tasmota_cover_1_2
                icon_height: '-1px'
                icon: mdi:arrow-collapse-vertical
                name: Close Masking System
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                entity: scene.2_5_aspect_ratio
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  service_data: {}
                  target:
                    entity_id: scene.2_5_aspect_ratio
              - show_name: true
                show_icon: true
                type: button
                entity: scene.aspect_ratio_open
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  service_data: {}
                  target:
                    entity_id: scene.aspect_ratio_open
      - type: grid
        cards:
          - type: picture-glance
            image: /local/netflix.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Netflix
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            entities: []
            image: /local/plex.png
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Plex - Free Movies & TV
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/disney1.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Disney Plus
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/appletv.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Apple TV
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/amazon1.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Prime Video
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/discovery.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: discovery plus
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/hbo.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: HBO Max
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/bravo.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Bravo
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/frndly.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: Frndly TV
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/foxnow.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: FOX NOW
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/espn.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: espn
              target:
                entity_id: media_player.roku_ultra
          - type: picture-glance
            image: /local/roku.png
            entities: []
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                source: bluray
              target:
                entity_id: media_player.onkyo_receiver
        columns: 4
      - type: horizontal-stack
        cards:
          - type: light
            entity: light.media_room
            icon: mdi:light-recessed
          - type: vertical-stack
            cards:
              - type: entity
                entity: sensor.lamplife
                name: Lamp
                icon: mdi:projector
              - type: entity
                entity: sensor.projector_lamp_hours
                icon: mdi:projector
                name: LampHrs
              - type: entity
                entity: sensor.projector_systems_status
                name: Status
                icon: mdi:projector
      - type: vertical-stack
        cards:
          - type: media-control
            entity: media_player.epson_projector
          - type: media-control
            entity: media_player.onkyo_receiver
          - type: media-control
            entity: media_player.roku_ultra
          - type: entity
            entity: sensor.aspect_ratio
            icon: mdi:aspect-ratio
          - type: entity
            entity: sensor.plex_status
            icon: mdi:plex
          - type: conditional
            conditions:
              - entity: media_player.plex_plex_for_roku_roku_ultra
                state_not: idle
              - entity: media_player.plex_plex_for_roku_roku_ultra
                state_not: unavailable
            card:
              type: media-control
              entity: media_player.plex_plex_for_roku_roku_ultra
          - type: thermostat
            entity: climate.basement

It will have lots missing, but you knew that.

spencersmb · October 22, 2022, 10:17pm

I started to make my own apple tv remote and noticed I can’t do the hold left and right to fast forward and x2/x4 - anyone able to get that feature working?

Glenn22dv · November 13, 2022, 7:58pm

Hi,

Here is my remote design.
made with:

mini mediaplayer
custom-button cards
custom:stack-in-card
custom samsungtv-smart integration

I hope someone gets some inspiration from this

parautenbach · November 14, 2022, 5:16am

Would you mind sharing the configs?

Glenn22dv · November 16, 2022, 7:02pm

Mini mediaplayer config:

type: custom:mini-media-player
name: TV
entity: media_player.tv_salon
group: false
volume_stateless: false
artwork: none
source: icon
replace_mute: play_pause
info: short
hide:
  volume: true
  play_pause: true
  prev: true
  next: true

Volume/play-pause/channels section:

square: false
columns: 5
type: grid
cards:
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:button-card
        size: 25%
        icon: mdi:plus
        styles:
          card:
            - height: 75px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_VOLUP
      - type: custom:button-card
        size: 25%
        icon: mdi:volume-off
        styles:
          card:
            - height: 75px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_MUTE
      - type: custom:button-card
        size: 25%
        icon: mdi:minus
        styles:
          card:
            - height: 75px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_VOLDOWN
  - type: vertical-stack
    cards:
      - type: custom:button-card
        styles:
          card:
            - background-color: transparent
            - height: 85px
      - type: custom:button-card
        size: 40%
        icon: mdi:rewind
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.media_previous_track
          service_data:
            entity_id: media_player.tv_salon
  - type: vertical-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card:
                - background-color: transparent
                - height: 60px
          - type: vertical-stack
            cards:
              - type: custom:button-card
                icon: mdi:play
                size: 40%
                tap_action:
                  action: call-service
                  haptic: medium
                  service: media_player.play_media
                  service_data:
                    entity_id: media_player.tv_salon
                    media_content_type: send_key
                    media_content_id: KEY_PLAY
              - type: custom:button-card
                icon: mdi:pause
                size: 40%
                tap_action:
                  action: call-service
                  haptic: medium
                  service: media_player.play_media
                  service_data:
                    entity_id: media_player.tv_salon
                    media_content_type: send_key
                    media_content_id: KEY_PAUSE
  - type: vertical-stack
    cards:
      - type: custom:button-card
        styles:
          card:
            - background-color: transparent
            - height: 85px
      - type: custom:button-card
        size: 40%
        icon: mdi:fast-forward
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.media_next_track
          service_data:
            entity_id: media_player.tv_salon
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:button-card
        size: 25%
        icon: mdi:plus
        styles:
          card:
            - height: 75px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_CHUP
      - type: custom:button-card
        size: 25%
        icon: mdi:television-classic
        styles:
          card:
            - height: 75px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_GUIDE
      - type: custom:button-card
        size: 25%
        icon: mdi:minus
        styles:
          card:
            - height: 75px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_CHDOWN

Navigation section:

type: custom:stack-in-card
mode: vertical
cards:
  - square: false
    columns: 5
    type: grid
    cards:
      - type: custom:button-card
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
      - type: custom:button-card
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
      - type: custom:button-card
        icon: mdi:chevron-up
        size: 80%
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_UP
      - type: custom:button-card
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
      - type: custom:button-card
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
      - type: custom:button-card
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 90px
            - background-color: transparent
      - type: custom:button-card
        icon: mdi:chevron-left
        size: 70%
        styles:
          card:
            - width: 90px
            - height: 90px
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_LEFT
      - type: custom:button-card
        icon: mdi:circle
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 90px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_ENTER
      - type: custom:button-card
        icon: mdi:chevron-right
        size: 70%
        styles:
          card:
            - width: 90px
            - height: 90px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_RIGHT
      - type: custom:button-card
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 90px
            - background-color: transparent
      - type: custom:button-card
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
        icon: mdi:arrow-u-left-bottom-bold
        size: 40%
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_RETURN
      - type: custom:button-card
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
      - type: custom:button-card
        icon: mdi:chevron-down
        size: 100%
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media
          service_data:
            entity_id: media_player.tv_salon
            media_content_type: send_key
            media_content_id: KEY_DOWN
      - type: custom:button-card
        size: 25%
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
      - type: custom:button-card
        styles:
          card:
            - width: 90px
            - height: 70px
            - background-color: transparent
        icon: mdi:home
        size: 40%
        tap_action:
          action: call-service
          haptic: medium
          service: media_player.play_media

App shortcuts:

type: custom:button-card
icon: mdi:television
show_entity_picture: true
size: 35px
styles:
  card:
    - height: 80px
entity_id: media_player.tv_salon
tap_action:
  action: call-service
  service: media_player.select_source
  service_data:
    entity_id: media_player.tv_salon
    source: Tv

All the cards need to be placed in a vertical stack card or u can set your dashboard page to vertical layout type.

Front end addons needed:

stack in card
custom button-card
mini-media-player

Antasp3136 · December 11, 2022, 1:41pm

It would be cool if we could link the volume buttons on the phone to a remote when your on the navigation page for your tv remote… this way you can use the hard buttons to turn the volume up and down more easily and quickly… it works with the Logitech harmony app like that which is nice.

StimpyGator · December 31, 2022, 5:08pm

Here is a home theater room remote I’ve been working on. Dark themed and finally at a stage where I don’t need any remotes for the room. It is designed to be used on my ipad but works fine also on my phone.

The page is divided into 3 columns. The left side is for quick access to the common media selections (netflix, hbo, etc.). This is also where I have the light controls for the room

The middle section is the main interface for controlling the media. The top small bar is my selector for the 5 devices I’m interfacing with:

Apple TV
Preamp (Marrantz AV7705)
Bluray Player (Panasonic UB820)
Projector (JVC NX7)
Comcast Cable Box

Also in the middle column is the main navigation panel with arrows, home button, etc. This grid is dynamic on which equipment command to send based on the selection at the top of the screen. Below the grid is volume, master power on/off, and sensor data.

The right column is designated for commands specific to the equipment selected. These buttons will change to whatever is relevant for that equipment. In the screenshot I have my projector selected and the projector buttons have appeared (power on/off for projector, widescreen mode, etc.)

I used a combination of native integration and IR blaster devices if I couldn’t get the integration to work properly.

Native Integration: Apple TV, Marrantz AV7705, Govee Lights, Lutron Lights, Samsung SmartThings
Broadlink IR: Comcast Cable Box, Panasonic Bluray, JVC Projector

Still a number of improvements to make but works well so far. Lots of inspiration came from this thread! Happy to answer any questions on this.