FloorPlan creator for ESPresense-companion

This project has been created to make it easier to create floorplan for ESPresenseIPS (https://github.com/ESPresense/ad-espresense-ips) or ESPresense-companion (https://github.com/ESPresense/ESPresense-companion) by having a gui. It offers snap to rooms for easy alignement, gives you mesures on each side of your cursor when on a wall. This application is developed in HTML/JS/CSS, no libraries (but fontawesome on a cdn), Canvas power !

Demo & online floorplan creator

You can now try the app on : https://espresense.com/Floorplan-Creator/
You will be able to draw you plans, test the app and generate exports. Mqtt integration should work but with a public instance of mqtt in https. (the ssl mqtt is now implemented)

How to use

Download the project
open "index.html" with a browser
start drawing each rooms
add esp32 devices inside each room
click the "export to yaml" button
copy generated code over to ESPresenseIPS app.js file
Optional :
- after config is copied and AppDaemon restarted
- open MQTT configuration panel (⚙) and enter your config
- devices will show up on the floorplan in real time
- devices will also appear in the list in mqtt config panel
- enjoy tweaking everything to make it perfect

Changes

12-03-2023

Modified yaml output to be compatible with https://github.com/ESPresense/ESPresense-companion

05-04-2022

Fixed calculation of most top and left rooms (in some cases where most top and left rooms are not the same room) - Thanks @Shuttleu

21-03-2022

Added unit selector, when selecting feet, values will be converted to meters before Yaml export.
You can toggle unit on an already drawn plan
App used to save unit in the localstorage, it is now a variable.
If you update you will see unit on plan and right elements as mm and mft (because old "m" unit is in the label and I append the new variable unit)
Just a UI bug, will work as expected
You can manually remove the "m" from room labels in the localstorage if it bothers you.

05-03-2022

Make MQTT allow anonymous connections - Thanks @DTTerastar
Catch MQTT disconnection exeptions to prevent javascript execution from breaking - Thanks @DTTerastar
SSL implemented in the MQTT client - Thanks @DTTerastar
SSL configurable from settings panel
Hide/Show devices on the floorplan via MQTT Settings panel
Change devices color on the floorplan via MQTT Settings panel

28-02-2022

New tools menu on the left
New label toggle to hide/show plan labels (room title and meusres)
New file structure (the project was not supposed to grow this much)
Fix indentation on yaml export
Add name to esp32 devices. The name is exported in the yaml

27-02-2022

Show arrow indicators on top, left, bottom and right of canvas if floorplan is out of screen to indicate on which side/s it is

26-02-2022

MQTT controle panel now displays connected devices (and known devices even if not connected anymore)
MQTT Client to track devices
MQTT settings page to input config
show devices on the floorplan realtime

26-02-2022

Show ESP32 device coverage button
ESP32 coverage shown as a circle around the device
Coverage distance is ajustable
Circle color is adjustable
Coverage circle can be visible when placing device to help positioning it right
Now you can even make art with the app.

25-02-2022

Dark Theme
Fix yaml floorplan coordinates (was in cm needs m)
Icons and small UI tweaks
Add ESP32 to Rooms
Edit ESP32 Z value and see its yaml code
yaml export now exports esp32 position as well

24-02-2022

Scroll/Mouse Wheel to move floorplan in canvas

What is planned.

[ ] Better UI/UX.
[✓] Scroll/Wheel on the canvas to move floorplan.
[ ] Zoom on the canvas.
[ ] Pan on the canvas.
[✓] Ability to add esp32 in rooms and position them with precision.
[✓] Export esp32 position from rooms to ESPresenseIPS yaml format.
[✓] Have each esp32 bluetooth signal radius visible on plan to make sure you have at least 3 signals in each rooms. (will help determine where is the best place to put them ;)).
[✓] MQTT client to show devices on the floorplan directly.
[ ] Allow changing the precision while dragging/creating a room.
[✓] SSL for MQTT (to be able to host the app on home assistant www folder on https instances)
[✓] Left toolbar
[ ] Left toolbar with values modifiers to allow a user to customize snap thresholds and precision and more
[✓] Fix indentation in Yaml
[ ] Code refactoring, add comments.

Technical

U / L Shaped rooms :

Create multiple rooms to acheve the desired shape
Name them all with the same name
ESPresenseIPS should send the same name to home assistant if the user is in any of those rooms.

Positions are calculated as followed :

find the room with the smallest x value (left side of screen)
find the room with the smallest y value (top of screen)
generate an offset with those 2 values (which means "smallestX, smallestY" is now the "0,0" position
every position saved from drawn rooms are then recalculated with this offset

Scroll :

The scroll moves the floorplan on the canvas
the scroll position are updated directly in the storage (rather than offsetting everywhere in the code)
the initial coordinates of each room WILL change if you scroll
This is of no effect on the final exported values thanks to the way they are calculated before exporting.

ESP32 Devices :

Devices export only x, y, z values
Device has its room's name when exported to yaml
z value is set to 0 by default and can be changed when opening the device modal (green square under room name in right menu)
coverage and color value are only for display purposes (they are not exported)

Recovery / YAML to JSON / Deleted Local storage.... Oups ! (if you have exported the yaml code before) :

in the app, click the recovery button.
read the Alert, click ok
read the text on top of the modal
paste your yaml code into the yaml (left) area.
on the right you should see the corresponding json object.
click "save" and reload, you should see your floorplan again.
This feature is experimental, the conversion process is poorly coded and might be working only for a specific syntax (see floorplan code below for example of what the conversion process has been coded for)
The conversion does NOT recalculate label position for rooms so you will have labels top left and some undefined in the right menu. but it can save you some time and you can still work on it and export updated yaml without issues
This is a bonus safety net, if it works, be happy, if it dosent, then start drawing. I probably won't updating this "feature"

Try to have rooms: ... then roomplans: ... , for roomplans, have y1, x1, y2, x2 in that order. rooms: names should match the roomplans: names (because the app need to put a device in a room and the mathcing is done with the name)

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