Floorplan Creator下载 - Floorplan Creator源代码下载

Floorplan Creator

其他源码

1.0.0

下载

ESPresense-companion 的 FloorPlan 创建者

创建此项目的目的是为了更轻松地为 ESPresenseIPS (https://github.com/ESPresense/ad-espresense-ips) 或 ESPresense-companion (https://github.com/ESPresense/ESPresense-companion) 创建平面图通过有一个图形用户界面。它提供了房间对齐功能，方便对齐，让您在墙上时可以测量光标两侧的尺寸。这个应用程序是用 HTML/JS/CSS 开发的，没有库（但在 CDN 上有 fontawesome），Canvas 强大！

演示和在线平面图创建器

您现在可以在以下位置试用该应用程序：https://espresense.com/Floorplan-Creator/
您将能够绘制计划、测试应用程序并生成导出。 Mqtt 集成应该可以工作，但需要使用 https 中的 mqtt 公共实例。（ssl mqtt现已实现）

如何使用

下载项目
用浏览器打开“index.html”
开始绘制每个房间
在每个房间内添加 esp32 设备
单击“导出到 yaml”按钮
将生成的代码复制到 ESPresenseIPS app.js 文件
选修的：
- 复制配置并重新启动 AppDaemon 后
- 打开 MQTT 配置面板 (⚙) 并输入您的配置
- 设备将实时显示在平面图上
- 设备也会出现在 mqtt 配置面板的列表中
- 享受调整一切以使其完美的乐趣

变化

12-03-2023

修改 yaml 输出以与 https://github.com/ESPresense/ESPresense-companion 兼容

2022年5月4日

修复了大多数顶部和左侧房间的计算（在某些情况下，大多数顶部和左侧房间不是同一个房间） - 感谢@Shuttleu

2022年3月21日

添加单位选择器，选择英尺时，在 Yaml 导出之前，值将转换为米。
您可以在已绘制的平面图上切换单位
App过去将单位保存在本地存储中，现在它是一个变量。
如果您更新，您将看到平面图上的单位和右侧元素为 mm 和 mft（因为旧的“m”单位位于标签中，我附加了新的变量单位）
只是一个 UI 错误，将按预期工作
如果您觉得麻烦，您可以手动从本地存储的房间标签中删除“m”。

2022年5月3日

让 MQTT 允许匿名连接 - 感谢@DTTerastar
捕获 MQTT 断开连接异常以防止 javascript 执行中断 - 感谢 @DTTerastar
在 MQTT 客户端中实现 SSL - 感谢@DTTerastar
SSL 可从设置面板进行配置
通过 MQTT 设置面板在平面图上隐藏/显示设备
通过 MQTT 设置面板更改平面图上的设备颜色

2022年2月28日

左侧的新工具菜单
新标签切换可隐藏/显示计划标签（房间标题和菜单）
新的文件结构（项目不应该增长这么多）
修复 yaml 导出上的缩进
为 esp32 设备添加名称。该名称在 yaml 中导出

2022年2月27日

如果平面图超出屏幕，则在画布的顶部、左侧、底部和右侧显示箭头指示器，以指示它位于哪一侧

2022年2月26日

MQTT 控制面板现在显示已连接的设备（以及已知设备，即使不再连接）
MQTT 客户端跟踪设备
用于输入配置的 MQTT 设置页面
实时显示平面图上的设备

2022年2月26日

显示 ESP32 设备覆盖按钮
ESP32 覆盖范围显示为设备周围的圆圈
覆盖距离可调
圆圈颜色可调
放置设备时可以看到覆盖圆圈，以帮助将其正确定位
现在您甚至可以使用该应用程序进行艺术创作。

2022年2月25日

黑暗主题
修复 yaml 平面图坐标（单位为 cm，需要 m）
图标和 UI 的小调整
将 ESP32 添加到房间
编辑 ESP32 Z 值并查看其 yaml 代码
yaml 导出现在也导出 esp32 位置

2022年2月24日

滚动/鼠标滚轮可在画布中移动平面图

计划什么。

[ ] 更好的 UI/UX。
[✓] 在画布上滚动/滚轮以移动平面图。
[ ] 放大画布。
[ ] 在画布上平移。
[✓] 能够在房间中添加 esp32 并精确定位它们。
[✓] 将 esp32 位置从 rooms 导出为 ESPresenseIPS yaml 格式。
[✓] 让每个 esp32 蓝牙信号半径在平面图上可见，以确保每个房间至少有 3 个信号。（将有助于确定放置它们的最佳位置；））。
[✓] MQTT 客户端直接在平面图上显示设备。
[ ] 允许在拖动/创建房间时更改精度。
[✓] 用于 MQTT 的 SSL（能够将应用程序托管在 https 实例上的家庭助理 www 文件夹中）
[✓] 左侧工具栏
[ ] 左侧工具栏带有值修饰符，允许用户自定义捕捉阈值和精度等
[✓] 修复 Yaml 中的缩进
[ ] 代码重构，添加注释。

技术的

U / L 形房间：

创建多个房间以达到所需的形状
将它们全部命名为相同的名字
如果用户位于这些房间中的任何一个，ESPresenseIPS 应将相同的名称发送给家庭助理。

位置计算如下：

找到 x 值最小的房间（屏幕左侧）
找到 y 值最小的房间（屏幕顶部）
使用这两个值生成偏移量（这意味着“smallestX，smallestY”现在是“0,0”位置
然后使用此偏移量重新计算从绘制的房间保存的每个位置

滚动：

滚动在画布上移动平面图
滚动位置直接在存储中更新（而不是在代码中的任何地方进行偏移）
如果滚动，每个房间的初始坐标都会改变
由于导出前的计算方式，这对最终导出值没有影响。

ESP32 设备：

设备仅导出 x、y、z 值
导出到 yaml 时设备有其房间名称
z值默认设置为0，可以在打开设备模态时更改（右侧菜单房间名称下的绿色方块）
覆盖率和颜色值仅用于显示目的（它们不会导出）

恢复/YAML 到 JSON/删除的本地存储....哎呀！（如果您之前导出过 yaml 代码）：

在应用程序中，单击恢复按钮。
阅读警报，单击“确定”
阅读模式顶部的文本
将 yaml 代码粘贴到 yaml（左侧）区域。
在右侧您应该会看到相应的 json 对象。
单击“保存”并重新加载，您应该再次看到您的平面图。
此功能是实验性的，转换过程的编码很差，可能仅适用于特定语法（请参阅下面的平面图代码，了解转换过程的编码内容示例）
转换不会重新计算房间的标签位置，因此您将在左上角看到标签，并在右侧菜单中看到一些未定义的标签。但它可以节省您一些时间，您仍然可以继续处理并导出更新的 yaml，不会出现任何问题
这是一个额外的安全网，如果有效，就高兴，如果无效，就开始画画。我可能不会更新这个“功能”

尝试有 rooms: ... 然后 roomplans: ... ，对于 roomplans，按顺序有 y1, x1, y2, x2 。 rooms: 名称应与 roomplans: 名称相匹配（因为应用程序需要将设备放入房间中，并且使用名称完成数学计算）

 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