# IoT-Draw

**Repository Path**: lixin-git/ioT-draw

## Basic Information

- **Project Name**: IoT-Draw
- **Description**: 一个基于浏览器的 IoT 可视化设计与展示的轻量项目。包含两个页面：
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-16
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# IoT-Draw

一个基于浏览器的 IoT 可视化设计与展示的轻量项目。包含两个页面：
- `editor.html`：设备布局编辑器，支持拖拽、缩放、属性配置、导入/导出配置与预览
- `viewer.html`：实时监控展示页，从缓存或导出的配置渲染设备并模拟数据与日志

## 快速预览

**设计器功能截图**

<p>
  <img src="readmeImage/1.png" alt="设计器功能1" width="32%" />
  <img src="readmeImage/2.png" alt="设计器功能2" width="32%" />
  <img src="readmeImage/3.png" alt="设计器功能3" width="32%" />
</p>

**展示页预览**

<p>
  <img src="readmeImage/4.png" alt="展示页预览" width="98%" />
</p>

## 目录结构

```
IoT-Draw/
  editor.html            # 设备布局编辑器（Vue3 + Interact.js + Iconify）
  viewer.html            # 实时监控展示页（Vue3 + Iconify）
  image/
    test.png
    test2.png
  iot_config_*.json      # 示例导出的配置文件（JSON）
```

## 快速开始

- 直接用浏览器打开 `editor.html`（推荐 Chrome）
- 在编辑器中：
  - 上传底图（支持任意图片）
  - 从左侧组件库拖拽设备到画布
  - 在右侧属性面板配置设备名称、IP、数据键、单位、颜色与告警阈值（参考 `editor.html:541` 后的属性区域）
  - 导出配置为 JSON（`editor.html:918`）或点击“预览 (缓存)”打开展示页（`editor.html:966`）
- 展示页会从本地缓存读取配置（`viewer.html:406`），按屏幕自适应显示（`viewer.html:428`），并模拟设备数据与日志（`viewer.html:458`）

## 功能特性

- 组件拖拽/缩放与边界限制（Interact.js 封装，`editor.html:1011`）
- 画布平移与平滑缩放（Ctrl+滚轮，`editor.html:746`；空格+拖拽，`editor.html:786`）
- 画布居中复位（Ctrl+0，`editor.html:816`；按钮缩放，`editor.html:742`）
- 设备属性配置：名称、IP、数据键(`valueKey`)、单位(`dataUnit`)、阈值与颜色
- 导入/导出配置 JSON，支持旧版本兼容字段补全（`editor.html:938` 与 `editor.html:978`）
- 展示页模拟实时状态（正常/警告/严重）与日志终端（`viewer.html:313`、`viewer.html:448`）
- 设备详情弹窗，点击设备查看详细信息（`viewer.html:498`）

## 配置文件说明（JSON）

顶层结构：

```json
{
  "bg": "<dataURL或图片Base64>",
  "data": [
    {
      "id": "dev_XXXX",
      "templateId": "cam|sensor|light|fan",
      "name": "设备名称",
      "x": 100,
      "y": 100,
      "w": 60,
      "h": 60,
      "ip": "192.168.1.X",
      "valueKey": "temperature|state|...",
      "dataUnit": "°C|%|Lux|…",
      "thresholdWarn": 30,
      "thresholdCrit": 40,
      "color": "#3b82f6",
      "textColor": "#ffffff",
      "warnColor": "#f97316",
      "critColor": "#ef4444"
    }
  ]
}
```

- `bg`：底图，通常为 DataURL（编辑器支持上传任意图片）
- `data`：设备列表，每个设备的字段含义见上示例；展示页会根据 `thresholdWarn/thresholdCrit` 与模拟值计算状态（`viewer.html:467`）

## 技术栈与依赖

- Vue 3（CDN 引入，`editor.html:6`、`viewer.html:6`）
- Interact.js（拖拽与缩放，`editor.html:7`；使用位置 `editor.html:1011`）
- Iconify（设备图标，`editor.html:8`、`viewer.html:7`）
- 纯静态，无需构建和服务端，直接打开 HTML 即可使用

## 交互与快捷键

- 缩放：按住 Ctrl 滚轮平滑缩放（`editor.html:746`）
- 平移：按住空格键拖拽画布（`editor.html:786`）
- 居中/恢复：`Ctrl+0`（`editor.html:816`）
- 展示页屏幕自适应：`viewer.html:428`

## 部署与浏览器兼容

- 纯静态文件，可直接部署到任意静态托管（如 Nginx、GitHub Pages）
- 推荐使用现代浏览器（Chrome/Edge）以获得更佳的交互与性能

## 扩展建议

- 接入真实数据源：通过 WebSocket/HTTP 轮询替代模拟逻辑（参考 `viewer.html:458` 的模拟入口）
- 扩展设备类型与图标映射（`editor.html:677` 与 `viewer.html:393`）
- 权限与多人协作：增加服务器端用于配置存储与权限控制
- 报警联动：状态为 `warn/crit` 时触发外部通知/联动策略

## 代码参考索引

- 编辑器主要流程：
  - 拖拽落点与坐标换算：`editor.html:830`、`editor.html:843`
  - 设备创建与默认值：`editor.html:850`–`editor.html:876`
  - 删除/清空/导入/导出/预览：`editor.html:900`、`editor.html:906`、`editor.html:938`、`editor.html:918`、`editor.html:966`
  - Interact.js 交互封装：`editor.html:1011`
- 展示页主要流程：
  - 加载配置与字段补全：`viewer.html:406`–`viewer.html:424`
  - 屏幕自适应与缩放：`viewer.html:428`–`viewer.html:433`
  - 日志记录与长度控制：`viewer.html:448`–`viewer.html:455`
  - 随机数据模拟与状态判定：`viewer.html:458`–`viewer.html:495`
  - 设备详情弹窗：`viewer.html:498`–`viewer.html:504`