Création d'une télécommande Freebox

Sylvain_G · Janvier 1, 2021, 2:16

Ayant un problème de télécommande Free, j’ai essayé d’utiliser les multiples applications Android disponibles sur le store mais aucun ne permet d’être utilisé en mode paysage.

J’ai donc utiliser ces tutoriels pour créer une télécommande sur mon dashboard HA :

https://www.reddit.com/r/homeassistant/comments/fo7bm7/tutorial_on_freebox_player_integration_tutoriel/
Freeplayer / Freebox_player - #3 by jugla - Share your Projects! - Home Assistant Community
GitHub - Pouzor/freebox_player: Custom Component for Home Assistant, enable to remote Freebox Player

J’arrive à ce résultat

avec ce code

type: picture-elements
elements:
  - type: icon
    icon: 'mdi:power'
    title: power
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: power
    style:
      top: 15%
      left: 58%
  - type: icon
    icon: 'mdi:volume-mute'
    title: volume mute
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: mute
    style:
      top: 64%
      left: 54%
  - type: icon
    icon: 'mdi:home'
    title: FreeHome
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: home
    style:
      top: 59%
      left: 54%
  - type: icon
    icon: 'mdi:numeric-1'
    title: One
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '1'
    style:
      top: 21%
      left: 47%
  - type: icon
    icon: 'mdi:numeric-2'
    title: Two
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '2'
    style:
      top: 21%
      left: 53%
  - type: icon
    icon: 'mdi:numeric-3'
    title: Three
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '3'
    style:
      top: 21%
      left: 59%
  - type: icon
    icon: 'mdi:numeric-4'
    title: Four
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '4'
    style:
      top: 27%
      left: 47%
  - type: icon
    icon: 'mdi:numeric-5'
    title: Five
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '5'
    style:
      top: 27%
      left: 53%
  - type: icon
    icon: 'mdi:numeric-6'
    title: Six
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '6'
    style:
      top: 27%
      left: 59%
  - type: icon
    icon: 'mdi:numeric-7'
    title: Seven
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '7'
    style:
      top: 32%
      left: 47%
  - type: icon
    icon: 'mdi:numeric-8'
    title: Eight
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '8'
    style:
      top: 32%
      left: 53%
  - type: icon
    icon: 'mdi:numeric-9'
    title: Nine
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '9'
    style:
      top: 32%
      left: 59%
  - type: icon
    icon: 'mdi:numeric-0'
    title: Zero
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: '0'
    style:
      top: 37%
      left: 53%
  - type: icon
    icon: 'mdi:volume-minus'
    title: Vol-
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: vol_dec
    style:
      top: 70%
      left: 47%
  - type: icon
    icon: 'mdi:volume-plus'
    title: Vol+
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: vol_inc
    style:
      top: 64%
      left: 47%
  - type: icon
    icon: 'mdi:backspace-outline'
    title: Red
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: red
    style:
      top: 43%
      left: 47%
  - type: icon
    icon: 'mdi:card-search-outline'
    title: Blue
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: blue
    style:
      top: 43%
      left: 59%
  - type: icon
    icon: 'mdi:menu-open'
    title: Green
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: green
    style:
      top: 53%
      left: 47%
  - type: icon
    icon: 'mdi:information-variant'
    title: Yellow
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: yellow
    style:
      top: 53%
      left: 59%
  - type: icon
    icon: 'mdi:pan-up'
    title: Prg +
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: prgm_inc
    style:
      top: 65%
      left: 59%
  - type: icon
    icon: 'mdi:pan-down'
    title: Prg -
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: prgm_dec
    style:
      top: 69%
      left: 59%
  - type: icon
    icon: 'mdi:checkbox-marked-circle-outline'
    title: OK
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: ok
    style:
      top: 48%
      left: 53%
  - type: icon
    icon: 'mdi:arrow-up-bold-outline'
    title: Up
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: up
    style:
      top: 43%
      left: 53%
  - type: icon
    icon: 'mdi:arrow-down-bold-outline'
    title: Down
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: down
    style:
      top: 54%
      left: 53%
  - type: icon
    icon: 'mdi:arrow-right-bold-outline'
    title: Right
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: right
    style:
      top: 48%
      left: 59%
  - type: icon
    icon: 'mdi:arrow-left-bold-outline'
    title: Left
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: left
    style:
      top: 48%
      left: 47%
  - type: icon
    icon: 'mdi:record-rec'
    title: record
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: rec
    style:
      top: 70%
      left: 53%
  - type: icon
    icon: 'mdi:play-pause'
    title: play/pause
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: play
    style:
      top: 75%
      left: 53%
  - type: icon
    icon: 'mdi:skip-backward-outline'
    title: backward
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: bwd
    style:
      top: 75%
      left: 47%
  - type: icon
    icon: 'mdi:skip-forward-outline'
    title: forward
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: fwd
    style:
      top: 75%
      left: 59%
  - type: icon
    icon: 'mdi:skip-next-outline'
    title: next
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: next
    style:
      top: 80%
      left: 59%
  - type: icon
    icon: 'mdi:skip-previous-outline'
    title: previous
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: prev
    style:
      top: 80%
      left: 47%
image: /local/lovelace/freebox-telecommande.png

Maintenant, j’aimerais pouvoir organiser les boutons sous une forme de grille de 9 x 4 pour y placer les boutons qui auront un fond identique à la vrai télécommande.

Comme ceci mais en mode paysage

Avez vous des idées pour

faciliter la position des boutons ?
dimensionner les boutons de façon responsive (dimension de l’écran différente entre mon PC et la tablette) ?
et le top, pour avoir un effet lorsqu’on clique sur le bouton ?

Merci d’avance pour votre aide et vos idées.
Bonne année à vous et à vos proches.

Sylvain_G · Janvier 1, 2021, 5:14

J’avance, j’arrive à ça :

Le début de mon code

type: picture-elements
elements:
# 1ère colonne
  - type: icon
    icon: 'mdi:volume-plus'
    title: Vol+
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: vol_inc
    style:
      paper-card-background-color: rgba(113, 102, 90, 0.3)
      top: 10%
      left: 3%
      transform: 'translate(50%, 50%) scale(3.5, 3.5)'
...

Reste à changer la couleur des icônes, avec ce code, ça ne fonctionne pas :

paper-card-background-color: rgba(113, 102, 90, 0.3)

Une idée, ou un lien vers de la doc ?

Clemalex · Janvier 1, 2021, 8:59

Oui, remplaces

paper-card-background-color: rgba(113, 102, 90, 0.3)

par

color: rgba(113, 102, 90, 0.3)

Sylvain_G · Janvier 2, 2021, 6:25

@Clemalex, cool merci ça marche !

Est-ce que tu aurais un moyen pour afficher ces icônes dans une grille de 9 x 4 et de pouvoir définir la place qu’aura l’icône dans cette grille.

Exemple pour le bouton Power qui aurait la place 9, 1.
Ou comment ajouter des calculs pour le positionnement dans mon yaml, actuellement j’ai mis les position en % en dur

type: picture-elements
elements:
# 1ère colonne
  - type: icon
    icon: 'mdi:volume-plus'
    title: Vol+
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: vol_inc
    style:
      top: 10%
      left: 3%
      transform: 'translate(50%, 50%) scale(3.5, 3.5)'
  - type: icon
    icon: 'mdi:volume-minus'
    title: Vol-
    tap_action:
      action: call-service
      service: freebox_player.remote
      service_data:
        code: vol_dec
    style:
      top: 32%
      left: 3%
      transform: 'translate(50%, 50%) scale(3.5, 3.5)'

C’est la galère quand je veux décaler l’ensemble des icônes vers la droite par exemple…

Clemalex · Janvier 2, 2021, 7:25

Je partirai la dessus :

https://community.home-assistant.io/t/how-do-i-actually-make-a-tv-remote-control-work-well-in-the-gui/212392/2?u=clemalex

Donc sans picture-éléments…

Sylvain_G · Janvier 2, 2021, 8:30

Merci @Clemalex, j’ai vu qu’il utilisait hui-element avec button-card, ça fait beaucoup au début

Je teste donc pour l’instant button-card avec les horizontal-stack et vertical-stack.

J’ai suivi l’installation via HACS et j’ai bien le répertoire button-card :

Mais j’ai une belle erreur No card type configured ...

Voici mon code

- type: vertical-stack
  cards:
    - type: 'custom:button-card'
      color_type: card
      color: rgb(255,255,255)
      icon: mdi:volume-plus
      tap_action:
        action: call-service
        service: freebox_player.remote
        service_data:
          code: vol_inc
    - type: 'custom:button-card'
      color_type: card
      color: rgb(255,255,255)
      icon: mdi:volume-minus
      tap_action:
        action: call-service
        service: freebox_player.remote
        service_data:
          code: vol_dec
    - type: 'custom:button-card'
      color_type: card
      color: rgb(255,255,255)
      icon: mdi:skip-backward-outline
      tap_action:
        action: call-service
        service: freebox_player.remote
        service_data:
          code: bwd
    - type: 'custom:button-card'
      color_type: card
      color: rgb(255,255,255)
      icon: mdi:skip-previous-outline
      tap_action:
        action: call-service
        service: freebox_player.remote
        service_data:
          code: prev
- type: vertical-stack
  cards:
    - type: 'custom:button-card'
      color_type: card
      color: rgb(255,255,255)
      icon: mdi:volume-mute
      tap_action:
        action: call-service
        service: freebox_player.remote
        service_data:
          code: mute
    - type: 'custom:button-card'
      color_type: card
      color: rgb(255,255,255)
      icon: mdi:record-rec
      tap_action:
        action: call-service
        service: freebox_player.remote
        service_data:
          code: rec

Je suis normalement en mode yaml et j’ai essayé en mode storage mais c’est pareil. Une idée ?

Clemalex · Janvier 2, 2021, 8:42

Ça ne devrait pas être plutôt :

¦--Carte 'Vertical-stack' 
    ¦-- Carte 'Horizontal-stack'
        ¦-- Carte 'Button-Card' 
        ¦-- Carte 'Button-Card' 
    ¦-- Carte 'Horizontal-stack
        ¦-- Carte 'Button-Card' 
        ¦-- Carte 'Button-Card'

?

Clemalex · Janvier 2, 2021, 9:19

Cette erreur signifie que tu as mal configuré la carte. Elle attend une liste de carte qu’elle ne trouve pas… (indentation, tiret, etc.)

Sylvain_G · Janvier 2, 2021, 9:27

@Clemalex, , c’est ça, j’avais

cards: 
  - !include ../cards/freebox_button.yaml

alors qu’il fallait :

cards: !include ../cards/freebox_button.yaml

cool
J’arrive à un truc comme ça, bien plus responsive que mon ancien code

J’ai encore un petit soucis sur la 7ème colonne où la blank_card que j’insére pour décaler vers le bas mes icône et avoir un « trou » ne marche pas bien. On voit un petit décalage mais qui n’est pas de la taille des autres boutons.

Sylvain_G · Janvier 2, 2021, 9:32

Je penses qu’il va falloir que j’inverse ma définition de ma grille.
J’étais parti sur une ligne de 9 colonnes (en empilant les boutons de haut en bas), je vais inverser en faisant une colonne de 4 lignes (en empilant les boutons de gauche à droite). button-card a l’air de mieux gérer dans ce sens la blank-card.

Clemalex · Janvier 2, 2021, 9:32

Oui, c’est l’avantage de passer par les cartes verticale et horizontale

Clemalex · Janvier 2, 2021, 9:34

Un peu comme ce qu’avait dit cette personne

Clemalex:

Ça ne devrait pas être plutôt :

¦--Carte 'Vertical-stack' 
    ¦-- Carte 'Horizontal-stack'
        ¦-- Carte 'Button-Card' 
        ¦-- Carte 'Button-Card' 
    ¦-- Carte 'Horizontal-stack
        ¦-- Carte 'Button-Card' 
        ¦-- Carte 'Button-Card'

?

Clemalex · Janvier 2, 2021, 9:37

Mais tu peux aussi contourner ton problème en jouant sur la transparence…du genre copier/coller le code de la précédente carte, mettre les éléments (l’icône) transparents et ne pas attribuer d’action…

C’est pas super, mais tu auras l’idée pour un cas où tu pourras pas faire autrement…

Sylvain_G · Janvier 2, 2021, 10:33

Cool, ça marche mieux comme ça

Maintenant, j’aimerai avoir des boutons ayant la même hauteur que largeur. C’est via aspect-ratio mais je voudrais pas recopier cette attribut à chaque bouton.
J’essaie de la mettre dans le templates mais ça marche pas :

#
# Liste les views pour le dashboard
#
button_card_templates:
  default:
    styles:
      card:
        - aspect_ratio: 1/1
        - background-color: '#72685C'
  red:
    styles:
      card:
        - aspect_ratio: 1/1
        - background-color: '#FF0000'
  blue:
    styles:
      card:
        - aspect_ratio: 1/1
        - background-color: '#0000FF'
  green:
    styles:
      card:
        - aspect_ratio: 1/1
        - background-color: '#00FF00'
  yellow:
    styles:
      card:
        - aspect_ratio: 1/1
        - background-color: '#FFFF00'
views:
  - !include views/freebox_button.yaml
  ...

mon fichier views/freebox_button.yaml

#
# Définition de la vue avec les accès autorisés
#
path: freebox_bt
icon: 'mdi:calculator'
visible:
  - user: 971dbf8b5ae94402bbe40951236f8573
  - user: 55dddfb527e849878cce6b4559d93f66
  - user: 20ca6d655c1b4823acbcdbc9b563a9d7
  - user: 70f707680ce04c099256a5d4e5c408d8
badges: []
panel: true
cards: !include ../cards/freebox_button.yaml

et mon fichier cards/freebox_button.yaml

- type: vertical-stack
  cards:
    # 1ère ligne
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          template: default
          icon: mdi:volume-plus
          tap_action:
            action: call-service
            service: freebox_player.remote
            service_data:
              code: vol_inc
...

Clemalex · Janvier 2, 2021, 11:40

Pour commencer, ça devrait t’intéresser (j’ai mis du temps à avoir la source exacte) :

Ensuite, pour les modèles, regarde la configuration de @kaoru qui l’utilise.

Sylvain_G · Janvier 2, 2021, 5:46

@Clemalex, merci ça m’a bien aider.
J’ai pu diminuer pas mal de lignes dans mon code.
Il me reste à ajouter des images dans certains boutons (le cahier des charges de la famille est de se rapprocher au max de la télécommande ) .
Peut-être aussi agrandir un peu les icônes…

Clemalex · Janvier 2, 2021, 5:47

N’oublie pas de poster le code ici même si ce n’est pas le rendu final.

Sylvain_G · Janvier 2, 2021, 8:09

Promis, je ferais ça quand j’arriverais à mettre l’image en fond d’un bouton

Clemalex · Janvier 2, 2021, 8:19

Je ne comprends pas la phrase… Mais si tu te comprends

Sylvain_G · Janvier 2, 2021, 8:34

, même moi je comprends pas ce que j’ai écris…

« Quand j’arriverais à mettre une image en background d’un bouton »