# HMI组件常用组件

**Repository Path**: openwcs/HMI_Widget

## Basic Information

- **Project Name**: HMI组件常用组件
- **Description**: HMI 组件常用组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-30
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HMI控件库规格说明

![](./预览.gif)
## 控件总览

本控件库包含 **114个** 工业HMI常用控件，分为13个类别。

| 类别 | 数量 | 说明 |
|------|------|------|
| 按钮控件 | 15 | 启动、停止、复位、功能按钮等 |
| 开关控件 | 12 | 拨动开关、三档开关、钥匙开关等 |
| 指示灯 | 12 | 红/黄/绿/蓝/白，圆形/方形 |
| 仪表控件 | 10 | 圆形仪表、线性仪表、液位计等 |
| 数值显示 | 8 | 数码显示、七段管、LCD等 |
| 输入控件 | 12 | 输入框、滑块、旋钮、下拉框等 |
| 容器控件 | 6 | 面板、分组框、标签页等 |
| 图形符号 | 10 | 管道、阀门、泵、电机、输送带等 |
| 报警控件 | 6 | 报警横幅、警告图标等 |
| 状态控件 | 8 | 状态标签、进度条、加载动画等 |
| 导航控件 | 6 | 导航按钮、面包屑、分页器等 |
| 时间日期 | 4 | 数字时钟、模拟时钟、日期显示等 |
| 图表控件 | 5 | 迷你折线图、柱状图、饼图等 |

---

## 一、按钮控件 (15个)

### 1.1 矩形按钮系列

| ID | 名称 | 尺寸 | 颜色 | 用途 |
|----|------|------|------|------|
| btn-start | 启动按钮 | 70×30 | 绿色 #00AA44 | 设备启动 |
| btn-stop | 停止按钮 | 70×30 | 红色 #CC3333 | 设备停止 |
| btn-reset | 复位按钮 | 70×30 | 橙色 #CC8800 | 故障复位 |
| btn-func | 功能按钮 | 70×30 | 蓝色 #0066CC | 通用功能 |
| btn-gray | 禁用按钮 | 70×30 | 灰色 #555555 | 禁用状态 |
| btn-cyan | 确认按钮 | 70×30 | 青色 #0099AA | 确认操作 |
| btn-purple | 设置按钮 | 70×30 | 紫色 #8844AA | 设置功能 |
| btn-outline | 边框按钮 | 70×30 | 透明+青边框 | 次要操作 |

### 1.2 圆形按钮系列

| ID | 名称 | 尺寸 | 颜色 | 用途 |
|----|------|------|------|------|
| btn-round-start | 圆形启动 | 50×50 | 绿色 | ON按钮 |
| btn-round-stop | 圆形停止 | 50×50 | 红色 | OFF按钮 |
| btn-emergency | 急停按钮 | 60×60 | 红色径向渐变 | 紧急停止 |

### 1.3 特殊按钮

| ID | 名称 | 尺寸 | 特点 |
|----|------|------|------|
| btn-3d | 3D按钮 | 70×30 | 立体阴影效果 |
| btn-icon-up | 上移按钮 | 40×30 | 带▲图标 |
| btn-icon-down | 下移按钮 | 40×30 | 带▼图标 |
| btn-icon-play | 播放按钮 | 40×30 | 带▶图标 |

---

## 二、开关控件 (12个)

### 2.1 二段式开关

| ID | 名称 | 尺寸 | 状态 |
|----|------|------|------|
| switch-toggle-off | 拨动开关-关 | 60×28 | OFF状态 |
| switch-toggle-on | 拨动开关-开 | 60×28 | ON状态(绿色) |
| switch-rocker-up | 摇杆开关-上 | 50×70 | 上位 |
| switch-rocker-down | 摇杆开关-下 | 50×70 | 下位 |

### 2.2 三段式开关

| ID | 名称 | 尺寸 | 状态 |
|----|------|------|------|
| switch-3way-1 | 三档开关-1 | 80×30 | 位置1(红) |
| switch-3way-2 | 三档开关-2 | 80×30 | 位置2(黄) |
| switch-3way-3 | 三档开关-3 | 80×30 | 位置3(绿) |

### 2.3 钥匙开关

| ID | 名称 | 尺寸 | 状态 |
|----|------|------|------|
| switch-key | 钥匙开关-0° | 50×50 | 垂直位置 |
| switch-key-90 | 钥匙开关-90° | 50×50 | 水平位置 |

### 2.4 选择控件

| ID | 名称 | 尺寸 | 说明 |
|----|------|------|------|
| checkbox-off | 复选框-未选 | 20×20 | 空白状态 |
| checkbox-on | 复选框-选中 | 20×20 | 勾选状态 |
| radio-on | 单选框-选中 | 20×20 | 选中状态 |

---

## 三、指示灯 (12个)

### 3.1 圆形指示灯

| ID | 名称 | 尺寸 | 颜色 |
|----|------|------|------|
| ind-red-off | 红灯-灭 | 25×25 | #331111 |
| ind-red-on | 红灯-亮 | 25×25 | #FF0000 + 发光 |
| ind-green-off | 绿灯-灭 | 25×25 | #113311 |
| ind-green-on | 绿灯-亮 | 25×25 | #00FF00 + 发光 |
| ind-yellow-off | 黄灯-灭 | 25×25 | #332211 |
| ind-yellow-on | 黄灯-亮 | 25×25 | #FFAA00 + 发光 |
| ind-blue-off | 蓝灯-灭 | 25×25 | #111133 |
| ind-blue-on | 蓝灯-亮 | 25×25 | #0088FF + 发光 |
| ind-white-off | 白灯-灭 | 25×25 | #222222 |
| ind-white-on | 白灯-亮 | 25×25 | #FFFFFF + 发光 |

### 3.2 方形指示灯

| ID | 名称 | 尺寸 | 颜色 |
|----|------|------|------|
| ind-rect-green | 方形绿灯 | 40×20 | 绿色渐变 |
| ind-rect-red | 方形红灯 | 40×20 | 红色渐变 |

---

## 四、仪表控件 (10个)

| ID | 名称 | 尺寸 | 类型 |
|----|------|------|------|
| gauge-circle | 圆形仪表 | 70×70 | 环形进度 |
| gauge-linear-70 | 线性仪表70% | 100×15 | 水平进度条 |
| gauge-linear-30 | 线性仪表30% | 100×15 | 水平进度条 |
| gauge-vertical-80 | 垂直仪表80% | 25×80 | 垂直进度条 |
| gauge-vertical-40 | 垂直仪表40% | 25×80 | 垂直进度条 |
| speedometer | 速度表 | 80×45 | 半圆仪表盘 |
| tank-60 | 液位计60% | 50×70 | 储罐液位 |
| tank-30 | 液位计30% | 50×70 | 储罐液位 |
| tank-90 | 液位计90% | 50×70 | 储罐液位 |
| pie-chart | 饼图 | 60×60 | 圆形分布图 |

---

## 五、数值显示 (8个)

| ID | 名称 | 尺寸 | 颜色 |
|----|------|------|------|
| digital-green | 数码显示-绿 | 80×35 | 绿色 #00FF88 |
| digital-red | 数码显示-红 | 80×35 | 红色 #FF4444 |
| digital-blue | 数码显示-蓝 | 80×35 | 蓝色 #00D4FF |
| digital-yellow | 数码显示-黄 | 80×35 | 黄色 #FFAA00 |
| seven-segment | 七段数码管 | 90×35 | 红色LED风格 |
| lcd-display | LCD显示屏 | 100×35 | 灰绿LCD风格 |
| clock-digital | 数字时钟 | 100×35 | 青色 |
| date-display | 日期显示 | 100×30 | 灰蓝色 |

---

## 六、输入控件 (12个)

| ID | 名称 | 尺寸 | 类型 |
|----|------|------|------|
| input-text | 文本输入框 | 100×35 | 单行文本 |
| input-password | 密码输入 | 100×35 | 密码遮罩 |
| input-search | 搜索框 | 100×35 | 带搜索图标 |
| number-input | 数值输入 | 100×25 | 带加减按钮 |
| slider-h | 水平滑块 | 100×8 | 水平拖动 |
| slider-h-long | 长滑块 | 120×8 | 加长版 |
| slider-v | 垂直滑块 | 8×80 | 垂直拖动 |
| knob | 旋钮 | 50×50 | 旋转调节 |
| knob-large | 大旋钮 | 60×60 | 大号旋钮 |
| dropdown | 下拉选择 | 100×35 | 下拉菜单 |
| radio-group | 单选组 | 80×20 | 多个单选 |
| checkbox-group | 复选组 | 80×20 | 多个复选 |

---

## 七、容器控件 (6个)

| ID | 名称 | 尺寸 | 特点 |
|----|------|------|------|
| panel-frame | 标题面板 | 120×80 | 带标题栏 |
| group-box | 分组框 | 120×80 | 带边框标题 |
| tab-panel | 标签面板 | 120×70 | 多标签切换 |
| card | 卡片容器 | 100×70 | 圆角卡片 |
| modal-frame | 弹窗框架 | 100×70 | 模态对话框 |
| sidebar | 侧边栏 | 40×70 | 导航侧栏 |

---

## 八、图形符号 (10个)

| ID | 名称 | 尺寸 | 用途 |
|----|------|------|------|
| pipe-h | 水平管道 | 100×20 | 流程图管道 |
| pipe-v | 垂直管道 | 20×80 | 流程图管道 |
| pipe-elbow | 弯头管道 | 40×40 | 管道转角 |
| valve | 阀门 | 40×30 | 管道阀门 |
| pump | 泵 | 50×50 | 泵符号 |
| motor-symbol | 电机符号 | 50×40 | 电机M标识 |
| conveyor | 输送带 | 100×25 | 输送线符号 |
| tank-symbol | 储罐 | 50×70 | 储罐符号 |
| tower-light | 三色灯 | 30×75 | 红黄绿塔灯 |
| sensor | 传感器 | 30×20 | PE传感器 |

---

## 九、报警控件 (6个)

| ID | 名称 | 尺寸 | 特点 |
|----|------|------|------|
| alarm-banner | 报警横幅 | 120×35 | 闪烁红色 |
| alarm-icon | 报警图标 | 40×40 | 警告符号 |
| warning-triangle | 警告三角 | 50×45 | 黄色三角 |
| error-badge | 错误标签 | 60×25 | 红色标签 |
| warning-badge | 警告标签 | 60×25 | 橙色标签 |
| alarm-bell | 报警铃 | 40×40 | 闪烁铃铛 |

---

## 十、状态控件 (8个)

| ID | 名称 | 尺寸 | 颜色 |
|----|------|------|------|
| status-running | 运行状态 | 60×25 | 绿色 |
| status-stopped | 停止状态 | 60×25 | 灰色 |
| progress-bar-60 | 进度条60% | 100×20 | 蓝色渐变 |
| progress-bar-100 | 进度条100% | 100×20 | 蓝色渐变 |
| loading-spinner | 加载动画 | 40×40 | 旋转动画 |
| online-dot | 在线状态 | 60×15 | 绿点+文字 |
| offline-dot | 离线状态 | 60×15 | 灰点+文字 |
| connection-status | 信号强度 | 40×10 | 三格信号 |

---

## 十一、导航控件 (6个)

| ID | 名称 | 尺寸 | 类型 |
|----|------|------|------|
| nav-button | 导航按钮 | 80×35 | 普通状态 |
| nav-button-active | 导航按钮-选中 | 80×35 | 选中状态 |
| breadcrumb | 面包屑 | 120×20 | 路径导航 |
| pagination | 分页器 | 130×25 | 页码导航 |
| tab-nav | 标签导航 | 120×30 | 标签切换 |
| menu-item | 菜单项 | 100×30 | 侧边菜单 |

---

## 十二、时间日期 (4个)

| ID | 名称 | 尺寸 | 格式 |
|----|------|------|------|
| clock-digital-large | 大数字时钟 | 100×40 | HH:MM |
| clock-analog | 模拟时钟 | 60×60 | 圆形表盘 |
| datetime-full | 完整日期时间 | 130×30 | YYYY-MM-DD HH:MM |
| timer | 计时器 | 80×30 | HH:MM:SS |

---

## 十三、图表控件 (5个)

| ID | 名称 | 尺寸 | 类型 |
|----|------|------|------|
| mini-chart-line | 迷你折线图 | 100×50 | 趋势线 |
| mini-bar-chart | 迷你柱状图 | 100×50 | 柱状对比 |
| sparkline | 迷你趋势线 | 80×30 | 简化趋势 |
| donut-chart | 环形图 | 60×60 | 百分比环 |
| gauge-chart | 仪表盘图 | 70×40 | 半圆仪表 |

---

## 颜色规范

### 主题色

| 用途 | 颜色值 | RGB |
|------|--------|-----|
| 深色背景 | #0A1020 | (10,16,32) |
| 面板背景 | #0A1520 | (10,21,32) |
| 边框色 | #3A5A7A | (58,90,122) |
| 强调色 | #00D4FF | (0,212,255) |

### 状态色

| 状态 | 颜色值 | 用途 |
|------|--------|------|
| 成功/运行 | #00FF88 | 正常运行 |
| 危险/停止 | #FF4444 | 故障报警 |
| 警告 | #FFAA00 | 警告提示 |
| 信息 | #0088FF | 一般信息 |

---

## 即时设计导入指南

### 方法一：SVG导入（推荐）

1. 在控件库页面选择需要的控件
2. 点击"导出选中"按钮
3. 选择"SVG格式"
4. 下载 `hmi-widgets.svg` 文件
5. 在即时设计中：文件 → 导入 → 选择SVG文件
6. 导入后可解组编辑各个控件

### 方法二：复制粘贴

1. 在浏览器中打开控件库
2. 使用浏览器开发者工具(F12)
3. 选中需要的控件元素
4. 右键 → 复制 → 复制元素
5. 在即时设计中粘贴

### 方法三：截图导入

1. 使用截图工具截取控件
2. 保存为PNG（透明背景）
3. 在即时设计中导入图片
4. 适合快速原型设计

---

*文档版本: V1.0*
*控件总数: 114个*
*创建日期: 2026-01-29*