Pages

自定义输入步进器（Custom Input Stepper）

Custom Input Stepper（自定义输入步进器） 是一个直观的控件，允许用户通过专用的加号和减号按钮来增加或减少数值。
它支持单位显示、步长配置以及数值边界，非常适合在运行过程中精确调整操作参数。

概述

该控件专为精确的数值调节而设计，使用户能够安全地修改温度、亮度或压力等参数。
通过连接字符串，它可与外部系统（如 CODESYS、MQTT）连接，实现实时反馈与过程同步。

主要功能

增减控制

• 用户通过 + 和 – 按钮调整数值
• 避免手动输入错误，提升操作便捷性

实时变量绑定

• 可连接至外部数据源（如 CODESYS、MQTT）
• 每次变动都会发送当前值，保持数据同步

步长设置

• 自定义步长间隔（如 0.5、1、5）
• 支持粗调和精调模式

最小/最大数值限制

• 设置允许的最小和最大数值，确保操作安全
• 避免设置非法或危险的值

单位显示

• 可附加单位标签（如 °C、bar、%）以提供上下文信息
• 提高信息清晰度，避免误解

紧凑的视觉设计

• 简洁直观的交互形式传达数值变化
• 可灵活嵌入各类设置菜单或控制面板中

应用场景

温度控制

• 示例：在安全范围内调整加热元件的设定值

亮度调节

• 示例：以设定步长调整屏幕或房间亮度

压力或速度微调

• 示例：精准调节泵的压力或传送带速度

SVG ID 参考表

以下 SVG ID 可用于控制自定义步进器的视觉元素与数据绑定：

代码示例（Code Snippet Example）

<g id="gValue">
<g id="Rectangle 4708" filter="url(#filter0_ii_337_934)">
<rect class="fallback-stepper-value-background custom-control custom-input-stepper stepper-value-background" x="87" y="25" width="319" height="72" rx="4"/>
</g>
<g id="gUnit">
<text class="fallback-stepper-value custom-control custom-input-stepper stepper-value" xml:space="preserve" style="white-space: pre" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="0em"><tspan id="dUnit_value" x="350.301" y="70.9336">UNIT</tspan></text>
</g>
<g id="gValue">
<text class="fallback-stepper-unit custom-control custom-input-stepper stepper-unit" id="value_tspan" text-anchor="end"  xml:space="preserve" style="white-space: pre" font-family="Arial" font-size="36" font-weight="bold" letter-spacing="0em"><tspan id="dValue_value" x="330" y="76.4805">9</tspan></text>
</g>
</g>
<g id="gButtonPlus">
<rect class="fallback-stepper-btn-background custom-control custom-input-stepper stepper-btn-background" id="Rectangle 4710" x="413" y="25" width="72" height="72"/>
<text class="fallback-stepper-btn-color custom-control custom-input-stepper stepper-btn-color" id="+" xml:space="preserve" style="white-space: pre" font-family="Arial" font-size="50" font-weight="bold" letter-spacing="0em"><tspan x="434.4" y="79.334">+</tspan></text>
</g>
<g id="gButtonMinus">
<rect class="fallback-stepper-btn-background custom-control custom-input-stepper stepper-btn-background" id="Rectangle 4709" x="8" y="25" width="72" height="72"/>
<text  class="fallback-stepper-btn-color custom-control custom-input-stepper stepper-btn-color" id="minus" xml:space="preserve" style="white-space: pre" font-family="Arial" font-size="50" font-weight="bold" letter-spacing="0em"><tspan x="30.084" y="76.334">-</tspan></text>
</g>
</g>