Téléchargement Floorplan Creator - Téléchargement du code source Floorplan Creator

Floorplan Creator

Autre code source

1.0.0

Télécharger

Créateur de FloorPlan pour ESPresense-companion

Ce projet a été créé pour faciliter la création d'un plan d'étage pour ESPresenseIPS (https://github.com/ESPresense/ad-espresense-ips) ou ESPresense-companion (https://github.com/ESPresense/ESPresense-companion) en ayant une interface graphique. Il offre un accrochage aux pièces pour un alignement facile, vous donne des mesures de chaque côté de votre curseur lorsque vous êtes sur un mur. Cette application est développée en HTML/JS/CSS, pas de librairies (mais fontawesome sur un cdn), Canvas power !

Créateur de démo et de plan d'étage en ligne

Vous pouvez maintenant essayer l'application sur : https://espresense.com/Floorplan-Creator/
Vous pourrez dessiner vos plans, tester l'application et générer des exports. L'intégration de Mqtt devrait fonctionner mais avec une instance publique de mqtt en https. (le ssl mqtt est maintenant implémenté)

Comment utiliser

Téléchargez le projet
ouvrez "index.html" avec un navigateur
commencez à dessiner chaque pièce
ajouter des appareils esp32 dans chaque pièce
cliquez sur le bouton "exporter vers yaml"
copier le code généré dans le fichier ESPresenseIPS app.js
Facultatif :
- une fois la configuration copiée et AppDaemon redémarré
- ouvrez le panneau de configuration MQTT (⚙) et entrez votre configuration
- les appareils apparaîtront sur le plan d'étage en temps réel
- les appareils apparaîtront également dans la liste dans le panneau de configuration mqtt
- prends plaisir à tout peaufiner pour que ce soit parfait

Changements

12-03-2023

Sortie yaml modifiée pour être compatible avec https://github.com/ESPresense/ESPresense-companion

05-04-2022

Correction du calcul de la plupart des pièces du haut et de gauche (dans certains cas où la plupart des pièces du haut et de gauche ne sont pas la même pièce) - Merci @Shuttleu

21-03-2022

Ajout d'un sélecteur d'unité, lors de la sélection des pieds, les valeurs seront converties en mètres avant l'exportation Yaml.
Vous pouvez basculer l'unité sur un plan déjà dessiné
Application utilisée pour enregistrer l'unité dans le stockage local, c'est maintenant une variable.
Si vous mettez à jour, vous verrez l'unité sur le plan et les éléments de droite en mm et mft (car l'ancienne unité "m" est dans l'étiquette et j'ajoute la nouvelle unité variable)
Juste un bug de l'interface utilisateur, cela fonctionnera comme prévu
Vous pouvez supprimer manuellement le « m » des étiquettes des pièces dans le stockage local si cela vous dérange.

05-03-2022

Faire en sorte que MQTT autorise les connexions anonymes - Merci @DTTerastar
Détectez les exceptions de déconnexion MQTT pour empêcher l'exécution de javascript de s'interrompre - Merci @DTTerastar
SSL implémenté dans le client MQTT - Merci @DTTerastar
SSL configurable à partir du panneau de paramètres
Masquer/Afficher les appareils sur le plan d'étage via le panneau Paramètres MQTT
Changer la couleur des appareils sur le plan d'étage via le panneau Paramètres MQTT

28-02-2022

Nouveau menu d'outils à gauche
Nouvelle étiquette permettant de masquer/afficher les étiquettes du plan (titre de la pièce et meusres)
Nouvelle structure de fichiers (le projet n'était pas censé croître autant)
Correction de l'indentation lors de l'exportation yaml
Ajoutez un nom aux appareils esp32. Le nom est exporté dans le yaml

27-02-2022

Afficher des indicateurs fléchés en haut, à gauche, en bas et à droite de la toile si le plan d'étage est hors de l'écran pour indiquer de quel(s) côté(s) il se trouve

26-02-2022

Le panneau de contrôle MQTT affiche désormais les appareils connectés (et les appareils connus même s'ils ne sont plus connectés)
Client MQTT pour suivre les appareils
Page des paramètres MQTT pour saisir la configuration
afficher les appareils sur le plan d'étage en temps réel

26-02-2022

Afficher le bouton de couverture de l'appareil ESP32
Couverture ESP32 affichée sous forme de cercle autour de l'appareil
La distance de couverture est ajustable
La couleur du cercle est réglable
Le cercle de couverture peut être visible lors du placement de l'appareil pour aider à le positionner correctement
Désormais, vous pouvez même créer de l'art avec l'application.

25-02-2022

Thème sombre
Correction des coordonnées du plan d'étage yaml (était en cm, il fallait m)
Icônes et petits ajustements de l'interface utilisateur
Ajouter ESP32 aux pièces
Modifiez la valeur ESP32 Z et voyez son code yaml
L'exportation yaml exporte désormais également la position esp32

24-02-2022

Défilement/molette de la souris pour déplacer le plan dans la toile

Ce qui est prévu.

[ ] Meilleure UI/UX.
[ ✓] Faites défiler/molette sur la toile pour déplacer le plan d'étage.
[ ] Zoom sur la toile.
[ ] Panoramique sur la toile.
[ ✓] Possibilité d'ajouter des esp32 dans les pièces et de les positionner avec précision.
[ ✓] Exportez la position esp32 des pièces au format ESPresenseIPS yaml.
[ ✓] Ayez chaque rayon de signal Bluetooth esp32 visible sur le plan pour vous assurer d'avoir au moins 3 signaux dans chaque pièce. (cela aidera à déterminer quel est le meilleur endroit pour les mettre ;)).
[ ✓] Client MQTT pour afficher directement les appareils sur le plan d'étage.
[ ] Autoriser la modification de la précision lors du déplacement/création d'une pièce.
[ ✓] SSL pour MQTT (pour pouvoir héberger l'application sur le dossier www de home assistant sur les instances https)
[ ✓] Barre d'outils de gauche
[ ] Barre d'outils de gauche avec des modificateurs de valeurs pour permettre à un utilisateur de personnaliser les seuils d'accrochage, la précision et plus encore
[ ✓] Correction de l'indentation dans Yaml
[ ] Refactorisation du code, ajout de commentaires.

Technique

Pièces en U / L :

Créez plusieurs pièces pour obtenir la forme souhaitée
Nommez-les tous avec le même nom
ESPresenseIPS doit envoyer le même nom à Home Assistant si l'utilisateur se trouve dans l'une de ces pièces.

Les positions sont calculées comme suit :

trouver la pièce avec la plus petite valeur x (côté gauche de l'écran)
trouver la pièce avec la plus petite valeur y (en haut de l'écran)
générer un décalage avec ces 2 valeurs (ce qui signifie "smallestX, smallestY" est maintenant la position "0,0"
chaque position enregistrée dans les pièces dessinées est ensuite recalculée avec ce décalage

Faites défiler :

Le défilement déplace le plan d'étage sur la toile
les positions de défilement sont mises à jour directement dans le stockage (plutôt que de se décaler partout dans le code)
les coordonnées initiales de chaque pièce CHANGERONT si vous faites défiler
Ceci n'a aucun impact sur les valeurs finales exportées grâce à la façon dont elles sont calculées avant l'exportation.

Appareils ESP32 :

Les appareils exportent uniquement les valeurs x, y, z
L'appareil porte le nom de sa pièce lorsqu'il est exporté vers yaml
La valeur z est définie sur 0 par défaut et peut être modifiée lors de l'ouverture du modal de l'appareil (carré vert sous le nom de la pièce dans le menu de droite)
la couverture et la valeur de couleur sont uniquement à des fins d'affichage (elles ne sont pas exportées)

Récupération / YAML vers JSON / Stockage local supprimé.... Oups ! (si vous avez déjà exporté le code yaml) :

dans l'application, cliquez sur le bouton de récupération.
lisez l'alerte, cliquez sur ok
lire le texte en haut du modal
collez votre code yaml dans la zone yaml (à gauche).
sur la droite, vous devriez voir l'objet json correspondant.
cliquez sur "enregistrer" et rechargez, vous devriez revoir votre plan d'étage.
Cette fonctionnalité est expérimentale, le processus de conversion est mal codé et peut ne fonctionner que pour une syntaxe spécifique (voir le code du plan d'étage ci-dessous pour un exemple de la raison pour laquelle le processus de conversion a été codé)
La conversion ne recalcule PAS la position des étiquettes pour les pièces, vous aurez donc des étiquettes en haut à gauche et certaines non définies dans le menu de droite. mais cela peut vous faire gagner du temps et vous pouvez toujours travailler dessus et exporter le yaml mis à jour sans problème
C'est un filet de sécurité bonus, si cela fonctionne, soyez heureux, si cela ne fonctionne pas, alors commencez à dessiner. Je ne mettrai probablement pas à jour cette "fonctionnalité"

Essayez d'avoir des pièces : ... puis des plans de pièces : ... , pour les plans de pièces, ayez y1, x1, y2, x2 dans cet ordre. chambres : les noms doivent correspondre aux plans des pièces : noms (car l'application doit mettre un appareil dans une pièce et le calcul est fait avec le nom)

 rooms:
    kitchen: [0.035, 2.285, 0]
    bedroom: [3.68, 11.045, 1.2]
    livingroom: [3.59, 5.805, 1.2]
    second_bedroom: [7.275, 5.559928991794586, 0]
    office: [10.48, 2.715, 0]
roomplans:
    - name: kitchen
        y1: 0
        x1: 0
        y2: 4.29
        x2: 3.59
    - name: bathroom
        y1: 4.29
        x1: 0
        y2: 6.72
        x2: 2.36
    - name: toilet
        y1: 6.72
        x1: 0
        y2: 7.98
        x2: 2.36
    - name: second_bedroom
        y1: 7.98
        x1: 0
        y2: 12.06
        x2: 3.68
    - name: bedroom
        y1: 7.98
        x1: 3.68
        y2: 12.06
        x2: 7.6
    - name: entrance
        y1: 4.29
        x1: 2.36
        y2: 7.98
        x2: 3.59
    - name: entrance
        y1: 6.2
        x1: 3.59
        y2: 7.98
        x2: 7.6
    - name: livingroom
        y1: 1.37
        x1: 3.59
        y2: 6.2
        x2: 7.6
    - name: office
        y1: 0
        x1: 7.6
        y2: 4.92
        x2: 10.53