4、HMI基础控件：按钮、指示灯、数值显示、文本标签、位图与矢量图

好，咱们今天聊聊HMI上最基础、也最常用的几个控件。说实话，不管你的界面做得多么花哨，最后跟操作员打交道的，就是这些基础元件。按钮、指示灯、数值显示、文本标签，还有位图和矢量图。我做了这么多年项目，发现很多新手容易在这上面栽跟头——不是功能实现不了，而是交互细节没处理好。

嗯，咱们一个一个来看。

4.1 按钮：不只是“点一下”那么简单

按钮是HMI上最频繁使用的控件。你想想看，操作员一天可能要点击几百次启动、停止、确认。如果按钮的反馈不够清晰，很容易误操作。

我个人习惯把按钮分为三类：

• 瞬时按钮：按下时触发动作，松开后复位。比如“启动”按钮。
• 切换按钮：按一下保持状态，再按一下切换。比如“手动/自动”模式切换。
• 急停按钮：这个比较特殊，通常需要硬件配合，但软件上也要做互锁逻辑。

我在项目中遇到过一个问题：操作员反映按钮“不灵敏”。后来排查发现，是按钮的防抖时间设置得太短了。PLC扫描周期和HMI刷新周期没对齐，导致信号丢失。所以，我建议按钮的触发逻辑最好加上50-100ms的延时滤波。

代码示例（基于Python + PyQt5模拟按钮状态机）：

class HMIButton:
    def __init__(self, name):
        self.name = name
        self.state = "released"  # released / pressed
        self.timer = 0

    def on_press(self):
        self.state = "pressed"
        self.timer = time.time()
        # 触发按下动作
        print(f"{self.name} 按下")

    def on_release(self):
        elapsed = time.time() - self.timer
        if elapsed > 0.05:  # 50ms防抖
            self.state = "released"
            print(f"{self.name} 弹起，有效点击")
        else:
            print(f"{self.name} 弹起，忽略抖动")

4.2 指示灯：颜色和闪烁有讲究

指示灯说白了就是给操作员看的“信号牌”。但很多人把它做成了“装饰品”。

我见过最典型的错误：一个界面上有20多个指示灯，全是绿色常亮。操作员根本分不清哪个是运行中，哪个是待机状态。

我的建议：

• 绿色：正常运行、已启动、无故障。
• 红色：故障、报警、急停。
• 黄色/橙色：警告、待机、手动模式。
• 蓝色：一般用于状态指示，比如“远程控制中”。
• 白色/灰色：未激活、断电、无信号。

闪烁频率也有讲究。我曾经在一个项目中，把报警灯的闪烁频率设成了5Hz，结果操作员说看得头晕。后来改成了1Hz（每秒闪一次），配合声音提示，效果就好多了。

4.3 数值显示：精度和单位是命根子

数值显示控件，看起来简单，不就是显示个数字吗？但这里坑最多。

你想想看，一个温度值，PLC传过来的是整数100，但实际温度是100.5℃。如果你直接显示“100”，操作员可能以为温度没变化。但如果你显示“100.5”，操作员就知道还在微调。

我个人习惯：

• 整数型数据：显示整数，不保留小数。
• 浮点型数据：根据精度要求保留1-2位小数。
• 百分比：保留1位小数，并显示“%”符号。
• 时间：格式化为“时:分:秒”，别直接显示秒数。

我曾经犯过一个低级错误：数值显示控件没有设置上下限。结果PLC通讯异常时，显示了一个巨大的负数，操作员以为设备爆炸了。从那以后，我每个数值显示控件都会加上范围限制，超出范围就显示“---”或者“ERR”。

4.4 文本标签：别让操作员猜谜语

文本标签，就是界面上的文字说明。很多人觉得这有什么好讲的？但恰恰是这些文字，决定了操作员能不能快速理解界面。

我见过一个界面，按钮上写着“F1”，没有任何说明。操作员根本不知道F1是干嘛的。后来改成了“启动传送带”，一目了然。

我的建议：

• 动词开头：比如“启动”、“停止”、“确认”、“复位”。
• 避免缩写：除非是行业通用缩写（比如PID、PLC），否则别用。
• 字体大小：主标题用18-24px，按钮文字用14-16px，辅助说明用12px。
• 多语言支持：如果设备出口，文本标签最好做成可切换的字符串表。

嗯，这里要注意：文本标签的对齐方式也很重要。左对齐适合阅读，居中对齐适合标题。别所有文字都居中对齐，看起来会很乱。

4.5 位图与矢量图：性能与美观的平衡

终于说到图形了。位图和矢量图，是HMI界面的“颜值担当”。但很多人只追求好看，忽略了性能。

位图（BMP/PNG/JPG）：

• 适合显示照片、复杂渐变、真实纹理。
• 缺点是放大后会模糊，而且文件体积大。
• 我建议：位图只用于背景图或设备照片，不要用于按钮图标。

矢量图（SVG/WMF）：

• 适合显示图标、流程图、管道、阀门。
• 放大缩小不失真，文件体积小。
• 我建议：所有按钮图标、状态指示、管道线条，都用矢量图。

我在一个项目中，用位图做了整个工厂的布局图，结果HMI加载要5秒钟。后来全部换成SVG矢量图，加载时间降到了0.5秒。操作员再也不用对着白屏发呆了。

代码示例（SVG矢量图在HMI中的使用）：

<!-- 一个简单的阀门图标，矢量格式 -->
<svg width="50" height="50" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="#4CAF50" stroke="#333" stroke-width="2"/>
  <rect x="22" y="10" width="6" height="30" fill="#fff"/>
  <rect x="10" y="22" width="30" height="6" fill="#fff"/>
</svg>

这个SVG代码，画了一个绿色的圆形阀门，中间有白色的十字标识。你可以直接用在HMI上，放大到200px也不会模糊。

4.6 综合实战：一个简单的控制面板

说了这么多，咱们来组合一下。假设你要做一个“水泵控制面板”，需要包含：

• 一个“启动”按钮（瞬时按钮，绿色）
• 一个“停止”按钮（瞬时按钮，红色）
• 一个“运行指示灯”（绿色常亮/熄灭）
• 一个“故障指示灯”（红色闪烁）
• 一个“当前压力”数值显示（单位：MPa，保留2位小数）
• 一个“设备名称”文本标签（显示“1号水泵”）
• 一个水泵的矢量图标

布局上，我习惯把按钮放在右侧，指示灯放在左侧，数值显示放在中间下方。这样操作员右手操作按钮，左手余光看指示灯，眼睛看数值，符合人体工程学。

好了，这一章的内容就到这里。下一章咱们聊聊“动画与状态切换”，到时候我会分享一些让界面“活起来”的技巧。你想想看，一个会动的HMI界面，操作员用起来得多舒服？