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

Votre télécommande Free ne fonctionne plus, vous voulez une télécommande qui s’adapte à l’écran de votre appareil même s’il est en mode paysage.

Lancez-vous dans la création d’une télécommande pour votre media player via Home Assistant.

Niveau requis

  • Débutant / Intermédiaire / Avancé

Matériels nécessaires / Matériels utilisés / Prérequis

  • une Freebox avec media player (ça me paraît évidemment !) en version Delta, Revolution ou Crystal (incompatible avec Mini 4K),
  • Home Assistant testé en v2020.12.2,
  • HACS testé en v1.9.0 (voir Installer HACS)
  • Samba share testé en v9.3.0 (voir Installer Samba Share)

Installation des dépendances

L’installation des dépendances se fait via HACS en suivant le tutoriel HACS : Ajoutez des modules et des cartes personnalisées.

Integration Freebox Player

Via HACS, retrouvez le module Freebox Player dans l’onglet Integrations et en tapant Free, puis cliquez sur INSTALL.

Une fois installé, éditez votre fichier de configuration configuration.yaml pour y ajouter le code suivant :

freebox_player:
  remote_code: <votre code télécommande>
  host: 192.168.<xxx>.<xxx>

Pour trouver votre remote_code, allez sur la console de votre Media Player Free puis sélectionnez Système

Puis sélectionnez Informations Freebox Player et Server

Puis vous trouverez le code de la télécommande

Module button-card

Via HACS, retrouvez le module button-card dans l’onglet Frontend et en tapant button-card, puis cliquez sur INSTALL.

Vous pouvez vérifier que les ressources ont bien été mises à jour via la barre latérale, cliquez sur Configuration puis Tableaux de bord enfin Onglets Ressources.

Si vous utilisez Lovelace en mode Yaml et non storage, il vous faudra, dans votre fichier de configuration yaml de lovelace, ajoutez :

lovelace:
  ...
  resources:
    ...
    - url: /hacsfiles/button-card/button-card.js
      type: module
    ...

L’accès au button-card est désormais configuré.

Création de la carte Lovelace

Les modèles de bouton

Nous allons commencer par ajouter la configuration des boutons qui sera utilisée plusieurs fois dans la carte via le mot clé template.

Dans le tableau de bord dans lequel vous souhaitez ajouter la télécommande Free, cliquez sur les 3 points en haut à droite puis sur Modifier le tableau de bord.

A nouveau cliquez sur les 3 points en haut à droite puis sur Editeur de configuration.

Puis tout en haut, insérez le code suivant :

button_card_templates:
  default:
    aspect_ratio: 1/1
    styles:
      icon:
        - height: 85%
        - width: 85%
      card:
        - size: 95%
        - background-color: '#72685C'
  red:
    template: default
    styles:
      icon:
        - color: '#6F6959'
      card:
        - background-color: '#A92123'
  blue:
    template: default
    styles:
      icon:
        - color: '#6F6959'
      card:
        - background-color: '#3F9FD1'
  green:
    template: default
    styles:
      icon:
        - color: '#6F6959'
      card:
        - background-color: '#2EC901'
  yellow:
    template: default
    styles:
      icon:
        - color: '#6F6959'
      card:
        - background-color: '#EDE600'

Cliquez sur ENREGISTRER en haut à droite.

Explications

Chaque modèle de bouton est défini par un nom unique, dans cet exemple, nous avons :

  • default: qui correspondra au bouton par défaut.
  • red: qui correspondra au bouton rouge sur la télécommande Free.
  • blue: qui correspondra au bouton bleu sur la télécommande Free.
  • green: qui correspondra au bouton vert sur la télécommande Free.
  • yellow: qui correspondra au bouton jaune sur la télécommande Free.

A chaque fois que le modèle sera appelé, le style de ce modèle sera appliqué au bouton.

La carte

:warning: Samba doit être activé sur votre Home Assistant
Téléchargez l’image suivante dans le répertoire \\<adresse_ip_HA>\config\www\lovelace\.
Nota : si le répertoire lovelace n’existe pas, créez le.

Image bouton Free

free

Dans le tableau de bord maintenant, cliquez sur AJOUTER UNE CARTE.

Cliquez sur la carte Manuel tout en bas.

Puis collez le code suivant :

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:volume-plus'
        tap_action:
          repeat: 500
          action: call-service
          service: freebox_player.remote
          service_data:
            code: vol_inc
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:volume-mute'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: mute
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:pan-up'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: prgm_inc
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-1'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '1'
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-2'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '2'
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-3'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '3'
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        template: default
        show_entity_picture: true
        entity_picture: /local/lovelace/free.png
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: home
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:power'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: power
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:volume-minus'
        tap_action:
          repeat: 500
          action: call-service
          service: freebox_player.remote
          service_data:
            code: vol_dec
      - type: 'custom:button-card'
        template: default
        color_type: icon
        color: '#A92123'
        icon: 'mdi:record-rec'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: rec
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:pan-down'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: prgm_dec
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-4'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '4'
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-5'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '5'
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-6'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '6'
      - type: 'custom:button-card'
        template: red
        icon: 'mdi:backspace-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: red
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:arrow-up-bold-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: up
      - type: 'custom:button-card'
        template: blue
        icon: 'mdi:card-search-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: blue
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:skip-backward-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: bwd
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:play-pause'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: play
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:skip-forward-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: fwd
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-7'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '7'
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-8'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '8'
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-9'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '9'
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:arrow-left-bold-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: left
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:checkbox-marked-circle-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: ok
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:arrow-right-bold-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: right
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:skip-previous-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: prev
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:skip-next-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: next
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:numeric-0'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: '0'
      - type: 'custom:button-card'
        color_type: blank-card
      - type: 'custom:button-card'
        template: green
        icon: 'mdi:menu-open'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: green
      - type: 'custom:button-card'
        template: default
        icon: 'mdi:arrow-down-bold-outline'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: down
      - type: 'custom:button-card'
        template: yellow
        icon: 'mdi:information-variant'
        tap_action:
          action: call-service
          service: freebox_player.remote
          service_data:
            code: yellow

Puis cliquez sur ENREGISTRER en bas à droite.

Explications

  • On voit régulièrement l’attribut template:, il permet d’appliquer le modèle définit par exemple default au bouton qui l’utilise. Cela permet d’éviter de recopier à chaque fois le style d’un bouton, multipliant ainsi les lignes identiques.

  • La disposition des boutons est définie via les attributs type: vertical-stack et type: horizontal-stack. Ces mots clés nous permettent « d’empiler » dans le sens choisi les blocs enfants. Dans cet exemple :

    1. On commence par créer un pile verticale type: vertical-stack.
    2. Dans cette pile verticale, on va y empiler des lignes type: horizontal-stack (au nombre de 4).
    3. Puis dans ces lignes, on empile des boutons de gauche à droite type: 'custom:button-card'.

    Il est possible d’avoir un bouton invisible via color_type: blank-card.

  • le mot clé tap_action permet de définir une action à chaque fois que l’on appuie sur le bouton.

    • action permet de définir le type d’action. Ici l’appel à un service.
    • service précise le service appelé. Ici ce sont des services du module freebox_player.
    • service_data permet de pouvoir transmettre au service des données. Ici le code qui correspond au bouton par exemple mute pour mettre en sourdine.

Conclusion

Vous avez maintenant une télécommande sur votre Home Assistant qui pilotera votre Freebox via le WiFi.

Des questions

Pour toutes questions sur ce tutoriel, postez vos messages dans le fil de discussion Création d’une télécommande Freebox , on vous répondra :wink:.

Les sources

MAJ

  • 10/01/2021 : V1 @Sylvain_G Création de l’article
1 J'aime