简介：基于JavaScript与HTML5构建的组态软件项目源码，适合Web前端开发者、组态软件学习者及工业/楼宇自动化领域的技术人员参考，用于理解如何通过现代浏览器技术实现图形化配置界面与动态交互逻辑。压缩包共316个文件，整体约4.29MB；核心代码以33个js脚本、10个html页面和12个css样式为主，配合121个png、75个gif等图像资源，还包含scss/less预编译样式、字体文件、配置文件等，目录结构清晰，便于按模块阅读与二次开发。目前已有119人学习下载。项目中可看到Canvas绘图、SVG矢量图形、离线存储、WebSocket、多媒体播放等HTML5特性的落地应用，同时结合JavaScript的事件监听与异步通信处理，展示了从界面布局到逻辑控制的完整实现路径；对希望掌握前端可视化开发、人机交互界面搭建或轻量级游戏化场景的读者，具有直观的参考价值。
1. 基于 JavaScript 和 HTML5 的组态软件，把工控画面搬进浏览器
交接班看板上那个污水池液位，到今天还有人用 iFix 组态软件截图后往微信群里贴。基于 JavaScript+HTML5 创建的组态软件，改掉的正是这条链路：生产监控画面不再锁在 C/S 客户端里，而是打包成一个 zip，里面有页面、图元库、配置脚本和启动入口，浏览器打开 index.html 就能进设计器拖拽图元、绑定变量、跑实时曲线。它解决的问题很具体——免安装客户端、看板多端复用、工程文件用 JSON 描述后可入库可回滚；适合有 JavaScript 基础的前端或全栈工程师，也适合想用开源方案替代商业组态授权的自动化团队。后面按渲染选型、拖拽与绑定、数据驱动、工程交付、运行时排错逐层展开，全部是能落到代码的实现细节。
2. HTML5 组态软件的渲染层选型：Canvas 和 SVG 怎么分工更合理
2.1 图元渲染为什么不能照搬 GDI 思路
传统组态软件的画面引擎基于 GDI/GDI+——一个图元就是一个绘图对象，重画窗口时按 z 序重绘，点位数据变化后调用局部刷新接口。把这套模型搬到浏览器时最容易踩的坑是用 DOM 模拟“控件树”：每个图元是一个 div，点位一变就改一百个 div 的样式，帧率立刻难看起来。HTML5 真正有用的不是“能在网页里画画”，而是同时提供两类能力：SVG 保留对象模型，Canvas 提供像素级绘制。组态软件因此可以采用双轨制：编辑态用 SVG，运行态用 Canvas，这也是 fuxa 组态软件等开源项目的主流走向。
需要说明的是，这不是“哪个技术更强”的问题，而是取舍问题。SVG 天然具备对象模型和事件委托，图元选中、属性修改、组合缩放都非常顺手；Canvas 牺牲了对象模型，换来上万图元时可控的绘制开销。WebGL 在纯 3D 厂房可视化里有用，但 2D 组态画面里引入它会带来渲染管线和交互层双份复杂度，一般只在需要特效时兜底。做决定前先看一张对照表：
| 维度 | SVG | Canvas 2D | WebGL |
|---|---|---|---|
| 对象模型 | 有，元素即对象 | 无，需自建图元 JSON | 无 |
| 命中检测 | 原生事件委托 | 手动遍历图元数组 | 手动射线检测 |
| 数千图元性能 | DOM 压力逐渐明显 | 绘制耗时稳定 | 高，但开发成本高 |
| 调试友好度 | 可直接查 DOM | 黑盒 | 黑盒 |
| 在组态软件中的定位 | 编辑态首选 | 运行态首选 | 3D/特效兜底 |
表格里没有列“渲染质量”，因为对 2D 组态来说，两者在视觉上几乎没有差别，真正的差别在对象更新方式上。
2.2 一个 SVG 阀门图元的最小写法
组态图元不是一张静态图片，而是自带绑定锚点和交互属性的活对象。下面这个阀门图元是设计器里最常见的样子：
<svg id="valve_1" x="120" y="80" width="48" height="48">function clientToCanvas(e, canvasRect, scale) { return { x: (e.clientX - canvasRect.left) / scale, y: (e.clientY - canvasRect.top) / scale }; }参数说明：canvasRect 来自 getBoundingClientRect()，包含画布相对视口的位置和尺寸；scale 是当前缩放倍率，比如放大到 125% 时传 1.25；返回的是逻辑坐标。如果画布内部可滚动，还要再减去 scrollLeft/scrollTop，否则放大后拖动图元会“跟不上鼠标”。画布模块所有对外接口都以逻辑坐标入参，渲染层再统一乘以 scale，这样网格吸附、对齐辅助线、框选范围都不需要重复换算。
3. 用原生 JavaScript 实现组态画布的拖拽摆放、属性面板与绑定解析
3.1 拖拽拆成四步：命中、换算、吸附、统一重绘
初学者常把拖拽写成每次都修改被点元素的 left/top，这在带缩放和网格的组态画布上会立刻出错。我一般把拖拽拆成四步：pointerdown 时做命中检测并记录起点；pointermove 时把屏幕坐标换算成逻辑坐标并计算位移；位移按网格吸附取整；最后统一重渲染一次画布，而不是单独改写某个 DOM 元素的样式。改用 Pointer 事件而不是 mouse 事件，是为了让同一个逻辑覆盖鼠标和触屏——工业现场大量使用带触摸的工控一体机。
let dragging = null; canvas.addEventListener('pointerdown', (e) => { const p = clientToCanvas(e, canvas.getBoundingClientRect(), scale); const el = pickElement(p); // 按图元数组从后往前做矩形命中检测 if (el) dragging = { id: el.id, start: p, origin: { x: el.x, y: el.y } }; }); canvas.addEventListener('pointermove', (e) => { if (!dragging) return; const p = clientToCanvas(e, canvas.getBoundingClientRect(), scale); const dx = Math.round((p.x - dragging.start.x) / 5) * 5; const dy = Math.round((p.y - dragging.start.y) / 5) * 5; updateElement(dragging.id, { x: dragging.origin.x + dx, y: dragging.origin.y + dy }); renderOnce(); // 合并到同一帧渲染 }); canvas.addEventListener('pointerup', () => (dragging = null));代码说明：pickElement 遍历图元数组，从最上层（数组尾部）向前找第一个坐标落进的矩形；吸附粒度 5 是常用值，改小到 1 就是无吸附。renderOnce 内部用 requestAnimationFrame 做节流，连续的 pointermove 事件只触发一次真实绘制。这样 300 个图元的画布拖拽也能保持流畅。组态软件里多选框选也走同一套坐标换算，区别只在命中检测从“点是否在矩形内”变成“矩形是否与矩形相交”。
3.2 属性面板与画布之间用 Proxy 做统一同步
右侧属性面板修改颜色、旋转角度或变量名后，画布必须立刻刷新；反过来选中另一个图元时，面板也要回显当前值。为了避免散落的 setter 调用，可以用 Proxy 拦截组态数据模型：
const store = new Proxy(project, { set(target, key, value) { target[key] = value; syncPropsPanel(value); // 面板刷新当前属性 invalidateCanvas(); // 标记画布需要重绘 return true; } });逻辑说明：project 是当前打开工程的 JavaScript 对象，set 拦截器把“改数据 → 刷界面”统一收口，视图层不再各自监听点击事件去改模型。invalidateCanvas 只做标记，等下一帧再渲染，这个模式在组态软件里比直接同步重绘更稳——一次属性面板的连点操作可能触发几十次 set，不需要每个中间值都上屏。深层次的图元数组变化（比如拖动坐标）用浅层 Proxy 拦不到，我的做法是操作完数组后手动调用一次 notify，或者给数组包一层自定义方法，和 Proxy 的 set 并存。
3.2.1 配置合并注意深拷贝陷阱
图元默认配置与用户配置合并时，最常见的坑是浅合并导致嵌套属性被覆盖。比如默认样式是{ style: { fill: '#fff', stroke: '#000' } }，用户只改 fill 时如果直接展开对象，stroke 会丢。用 Object.assign 或展开运算符只适合一层合并，嵌套的 style、animation 配置需要手写递归合并或直接让默认对象提供缺省字段。JavaScript 合并两个对象这类问题在组态工程配置里遇到得非常多，封装一个 deepMerge 工具函数比到处打补丁划算，同时配合 JSON Schema 校验图元类型，保证未知字段不会混入配置。
3.3 绑定表达式走白名单解析，不执行任意代码
绑定不复杂，但要设计得克制。设计师选中图元后在属性面板输入var:TANK_LEVEL，表示“这个图元的填充色跟随 TANK_LEVEL 的值变化”。运行时引擎把var:前缀之后的部分当作变量名，到变量表里取值：
function evalBinding(value, getVar) { if (typeof value === 'string' && value.startsWith('var:')) { return getVar(value.slice(4)); } return value; }说明：getVar 是变量表的取值函数，传入变量名返回{ v, ts, q }对象。这里刻意不引入 eval 和 new Function，因为组态工程文件是外部导入的，一旦允许任意表达式就等同于把页面变成了脚本执行入口。需要自定义逻辑时，把脚本能力收敛到一组受控函数表单里，而不是开放表达式解析。绑定解析先取出变量名，颜色映射、闪烁条件、数值缩放都放在图元渲染器里做，渲染器只认最终值，不关心值从哪个表达式来。
4. JavaScript 组态画面实时数据驱动：变量表与 WebSocket 订阅引擎
4.1 变量表是数据流的中枢
浏览器端组态软件至少要维护一张内存变量表。变量表负责回答“这个变量现在是什么值、新不新鲜、能不能正常显示”。完整记录包含值、时间戳和质量戳三个字段，用 JavaScript 对象加 Map 实现如下：
const vt = new Map(); function setVar(name, v) { const prev = vt.get(name); const stale = prev && Date.now() - prev.ts > 5000; vt.set(name, { v, ts: Date.now(), q: stale ? 7 : 0 }); } function getVar(name) { return vt.get(name) || { v: null, ts: 0, q: 9 }; }逻辑说明：setVar 写入新值时检查上一条记录的时间戳，如果已有值超过 5 秒没更新，本次到达的值会被标记 q=7，表示链路中断过，画面显示值但附黄色质量标记；q=9 表示从来没有任何数据，图元整体置灰。质量戳这套字段在传统组态点表里叫 QSTA，Web 端实现时很多人会省略它，但现场一旦出现通讯闪烁，有没有质量戳决定了排查时间是一小时还是一整天。值、时间戳、质量戳各自的用途如下：
| 字段 | 含义 | 使用场景 |
|---|---|---|
| v | 当前值 | 文本显示、曲线绘制、颜色映射 |
| ts | 最新更新时间戳 | 判断数据是否过期 |
| q | 质量戳，0 正常 | 过期点显示灰色、断线闪烁等 |
4.2 订阅总线把高频点位压进同一帧渲染
WebSocket 收到一条采集消息就立刻更新一个 DOM 节点，点位数一多必然卡顿。常见做法是在数据接收层和渲染层之间加一个订阅总线，同一帧内的多次数据更新合并为一次批量派发：
class VarBus { constructor() { this.listeners = new Map(); this.pending = new Set(); this.tick = null; } subscribe(name, fn) { if (!this.listeners.has(name)) this.listeners.set(name, new Set()); this.listeners.get(name).add(fn); } publish(name) { this.pending.add(name); if (this.tick) return; this.tick = requestAnimationFrame(() => { const names = Array.from(this.pending); this.pending.clear(); this.tick = null; for (const n of names) { const set = this.listeners.get(n); if (set) for (const fn of set) fn(getVar(n)); } }); } } const bus = new VarBus();代码说明：publish 被调用时不立即回调，而是把变量名加入 pending 集合，统一在下一帧回调里批量派发。如果一个变量在一帧内被更新了 20 次，订阅者只会收到一次回调，且拿到的是最新值。这样一屏 200 个点位同时刷新时，DOM 写入次数从 200 次降为一帧一次批量更新。高频波形类点位（100ms 级刷新）可以绕过这个总线，直接让 Canvas 绘制循环读变量表，避免每个点都生成一次函数调用。
4.3 内存历史数据用环形缓冲，回放与过滤都方便
历史曲线不需要完整数据库，浏览器端环形缓冲就能支撑近一小时的实时曲线。写入时覆盖头部位置，读取时做一次拼接得到时间正序数组：
const RING = new Float64Array(3600); let head = 0; function append(v) { RING[head] = v; head = (head + 1) % RING.length; } function timeSeries() { return Array.from(RING.slice(head)).concat(Array.from(RING.slice(0, head))); }参数说明：3600 个点按 1 秒一个采集点存储，可覆盖 1 小时的数据，约 28KB 内存，对现代浏览器可以忽略。取出时间序列后，如果想画最近 10 分钟，可以直接用 JavaScript 的 filter 函数按时间戳过滤，或者用 slice 截取末尾 600 个元素。环形缓冲的写入和拼接都是 O(1) 或 O(n)，对组态画面完全够用。如果现场要保留跨班次的历史曲线，再把数据按批次抄送到后端时序库，前端环形缓冲只负责当前画面实时预览。
5. JavaScript 组态工程交付：zip 结构、白名单安全与浏览器兼容检查
5.1 纯静态交付：一个 index.html 加一个静态服务
组态项目打包成 zip 后应保持最小自包含结构：入口页、图元模块、资源配置和运行引擎。下面的目录是一个常见布局：
hmi/ index.html assets/ viewer.js designer.js config/ variables.json project.json modules/ valve.js pump.js启动时只需一个静态文件服务：
# Node 环境 npx serve . # Python 环境 python -m http.server 8000参数说明：npx serve 默认端口 3000，python -m http.server 默认端口 8000；浏览器访问时须与启动端口一致。直接用 file:// 协议打开 index.html 时，fetch 加载 config 目录下的 JSON 会被同源策略拦截，所以 README 里必须写清楚两种服务方式。生产部署在工控机上时，我更愿意配一个 Nginx 静态站点，把 dist 目录指到 root，既不需要后端也不需要构建服务，设备断电重启后页面恢复得非常干净。
5.2 绑定表达式白名单校验，杜绝图元脚本注入
安全扫描报告里出现“检测到目标站点存在 javascript 框架库漏洞”这类问题时，组态软件要从两条路径堵：一是依赖库升级到无已知漏洞版本；二是禁止工程文件中的绑定表达式携带可执行代码。绑定点只允许形如var:XXX的写法，并对变量名做正则校验：
const VAR_RE = /^[A-Z_][A-Z0-9_]{0,63}$/i; function sanitizeBinding(expr) { if (!expr.startsWith('var:')) return null; const name = expr.slice(4); return VAR_RE.test(name) ? name : null; }说明：合法变量名限定为字母开头、最长 64 字符的字母数字下划线组合，这套规则兼容常见 PLC 点名。不满足规则的绑定直接丢弃并在设计器控制台报警，而不是在运行时 try-catch——组态画面加载阶段就应把不合法配置拦在门外。渲染层写入变量值统一用 textContent，不使用 innerHTML，避免变量值本身携带标记符号时造成二次注入。
提示：组态工程文件来自不同厂商和现场人员，任何时候都不要对导入的 JSON 或表达式执行 eval 或 new Function。白名单解析虽然少了一些灵活度，但换来的是交付后不用半夜起来处理画面变白的问题。
5.3 禁用 JavaScript 与老浏览器的兼容处理
HTML5 组态应用完全依赖 JavaScript 运行，没有降级成静态图的可行方案。入口页面需要放一个 noscript 提示，浏览器禁用 JavaScript 时直接说明原因：
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>HMI 运行屏</title></head> <body> <div id="app"></div> <noscript>本组态页面需要启用 JavaScript 才能运行</noscript> </body> </html>同时做能力检测：无 WebSocket、无 canvas 的环境给一个明确的不兼容页面，不要等到运行时报错再排查。动画性能方面同样要盯紧三个点：优先用 transform 和 opacity 动画而不是 top/left；只给高频更新且确实需要独立绘制的图元加 will-change: transform，避免滥用合成层导致内存膨胀；不要在 rAF 循环里读取布局属性再写样式，那会触发强制布局抖动，表现是 CPU 占用不高但画面一卡一顿。用 Performance 面板录制运行时，紫色 Rendering 时间占比超过 20% 就应回查这些点。
6. JavaScript 组态运行时排错：绑定不生效先看数据流，画面卡死先看绘制循环
现场报障最集中的两类问题是“数据不动了”和“画面卡死”，两类问题排查路径完全不同，不应一起改代码。数据不动的排查顺序应该是：变量值根本没进来、变量值进来了但质量戳非 0、绑定拼写不一致、渲染层把新值吞了。给订阅总线上加一个调试开关能快速定位：在 bus.publish 里打印变量名、值和时间戳。日志里有值但画面不动，问题在绑定名或渲染函数；日志里没有值，问题在采集链路，重点检查 WebSocket 重连策略和协议字段大小写。另一个省事技巧：控制台直接输入Object.entries(vt)输出当前所有变量的值和质量戳，比在渲染层打断点快得多。
画面卡死先看 Performance 面板的绿色 Script 和紫色 Rendering 占比。绿色 Script 高说明渲染循环逻辑过重，最常见的元凶是每帧都在做深拷贝、创建新函数或拼接复杂样式字符串；解决思路是把解析结果缓存下来，只在变量名或配置变化时重新生成渲染指令。紫色 Rendering 高说明 DOM 写入太频繁，除了合并订阅总线外，还要检查是否把不变化的图元也全部重绘了，一个按图元 ID 和值做 diff 的缓存可以省掉大量无效绘制。
最后一个可以直接拿去用的技巧：给运行态加一个调试模式，按住 Shift 点击画面时，把命中的图元在 SVG 上描红边框，并在控制台输出该图元的 ID、data-bind 和最近一次渲染耗时。组态软件交付后，现场人员有时候说不出是哪个阀门灯不亮，只会说“下面那块屏幕有个图标不对”，这个功能能让他们在三分钟内把对象 ID 发给你。所有调试代码都封装在window.HMI_DEBUG下，生产构建默认关闭，性能开销为零。改完参数后再用 Performance 面板录一段 30 秒，对照修复前后的 Script/Rendering 占比，确认没有引入新的重绘路径后再发新包。
本文还有配套的精品资源，点击获取
