WLED en HTTPS

[Sylvain_G]

Mon problème

J’ai installé un bandeau LED configuré avec WLED qui fonctionne très bien.
J’aurai voulu l’intégrer à mon HA qui est accessible en HTTPS (important pour la suite).
J’ai suivi la documentation de cet add-on Homeassistant-WLED-Card mais à la fin de l’installation la carte est bien créée mais vide.
Dans une des issues de cet add-on Blank in Lovelace, le développeur mentionne qu’il n’est pas possible de joindre une URL en HTTP depuis un site HTTPS :

as mentioned in #5 the problem is that your hassio instance is running over HTTPS and WLED only supports HTTP.

Le développeur de WLED n’ayant pas encore implémenter cette solution (voir issue HTTPS support for HTTP request API :

This would likely require users to generate/install their own certificates for true security, but it’s definitely something I want to look into!

Je me demandais comment faire via l’add-on Nginx Proxy Manager pour que HA puisse pointer vers une URL en HTTPS qui soit redirigée par Nginx Proxy Manager vers l’adresse IP 192.168.0.xxx qui est en HTTP (IP où est accessible WLED qui pilote le bandeau).

Il faudrait que dans la carte Lovelace de WLED-Control-Card, je puisse avoir ça :

type: custom:wled-control-card
topic: "wled/xxx/yyy/zzz"             # topic MQTT du bandeau
ip: "<url_en_https>/"                 # URL pointant vers Nginx Proxy Manager et rerouter vers 192.168.0.xxx
title: WLED

Avez-vous des idées pour configurer Nginx Proxy Manager ?

Ma configuration

System Health

version	core-2021.5.4
installation_type	Home Assistant Supervised
dev	false
hassio	true
docker	true
virtualenv	false
python_version	3.8.9
os_name	Linux
os_version	5.10.1-v8+
arch	aarch64
timezone	Europe/Paris

Home Assistant Community Store

GitHub API	ok
Github API Calls Remaining	4692
Installed Version	1.12.3
Stage	running
Available Repositories	821
Installed Repositories	12

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Debian GNU/Linux 10 (buster)
update_channel	stable
supervisor_version	supervisor-2021.04.3
docker_version	20.10.1
disk_total	109.8 GB
disk_used	13.1 GB
healthy	true
supported	failed to load: Unsupported
supervisor_api	ok
version_api	ok
installed_addons	File editor (5.3.0), MariaDB (2.3.0), Nginx Proxy Manager (0.11.0), ESPHome (1.17.2), Zigbee2mqtt (1.18.1-1), Mosquitto broker (5.1.1), Samba share (9.3.1), Node-RED (9.0.1), InfluxDB (4.1.0), SSH & Web Terminal (8.2.1)

Lovelace

dashboards	3
resources	17
views	14
mode	storage

[Clemalex]

Je reproduirais les étapes qu’un utilisateur a mentionné dans un tutoriel en remplaçant l'@ip de la freebox par le bandeau, le port par le bon (si tu n’en mets pas pour accéder au WLED c’est le port 80), le nom de domaine du genre wled.<NDD> et ensuite l’onglet SSL pour obtention d’un nouveau certificat.

Le tutoriel :

https://forum.hacf.fr/t/acces-de-l-exterieur-en-https-avec-nginx-proxy-manager/1761?u=clemalex

je me rappelle plus qui est l’auteur…

[Sylvain_G]

Très bonne idée en effet , j’ai pu configurer l’accès via HTTPS à l’IHM de WLED mais la carte custom ne fonctionne toujours pas, pas d’erreur mais pas d’affichage non plus :

En regardant le code de la wled-control-card, dans le fichier wled_control.js, je pense que ça doit se situer dans ces lignes :

  set hass(hass) {
    const self = this

    this.instance = hass
    if (!this.content) {
      this.content = document.createElement('div');
      this.showLoadingState()
      fetch(`http://${this.config.ip}/win`, {
          headers: {},
          mode: 'cors',
        }).then(res => {
          return res.text()
        }).then(res => {

J’accède pourtant bien via l’URL : https://wled-cassie.xxxxxxxxxx

J’ai essayé en ajoutant un paramètre protocol dans le code et la configuration sans succès :

    if (!this.content) {
      this.content = document.createElement('div');
      this.showLoadingState()
      fetch(`${this.config.protocol}://${this.config.ip}/win`, {
          headers: {},
          mode: 'cors',
        }).then(res => {
          return res.text()
        }).then(res => {

type: 'custom:wled-control-card'
topic: wled/chambre/cassie/chevet
ip: wled-cassie.xxxxxxxxxx/
title: WLED
protocol: https

Une idée ?

Autre test :
J’ai ajouté manuellement https au lieu de http dans le fichier wled_control.js comme ceci :

    if (!this.content) {
      this.content = document.createElement('div');
      this.showLoadingState()
      fetch(`https://${this.config.ip}/win`, {
          headers: {},
          mode: 'cors',
        }).then(res => {
          return res.text()
        }).then(res => {

et j’ai obtenu une erreur sur tingle :

Et à la ligne 171 de wled_control.js, ça concerne la méthode initModal() :

  initModal() {
    var modal = new tingle.modal({
      closeMethods: ['overlay', 'button', 'escape'],
      closeLabel: "Close",
      cssClass: ['custom-class-1', 'custom-class-2']
    });

comme s’il ne trouvait pas la librairie tingle.min.js que j’ai copié dans www/lib/

Et je l’ai bien ajouté dans les ressources :

[Sylvain_G]

J’ai trouvé …
Le problème venait du slash après le nom de domaine dans la configuration, il fallait mettre :

type: 'custom:wled-control-card'
topic: wled/chambre/cassie/chevet
ip: wled-cassie.xxxxxxxxxx
title: WLED

et pas :

type: 'custom:wled-control-card'
topic: wled/chambre/cassie/chevet
ip: wled-cassie.xxxxxxxxxx/
title: WLED