控件 – 页面中的使用 vs. 全局控件库（汉堡菜单）
总览
PLCVisu 提供两种访问和使用控件（如按钮、滑块、指示器等 UI 元素）的方式：
1. 页面中的控件
当你直接在页面中添加一个控件时：
- 可以通过
Connection String绑定变量 - 可以编辑标签、配置设置并连接逻辑
- 非常适合在特定页面中直接使用
- 每个控件实例是独立的，仅属于该页面
2. 汉堡菜单 → 控件
这是 PLCVisu 的全局控件库，用于统一管理所有控件。
- 提供 所有可用控件（包括标准和自定义 SVG 控件）的总览
- 可以添加 新的自定义图形 或修改已有控件（例如替换图标）
- 适用于公司级视觉管理，确保所有项目的一致性
- 此处控件为模板 – 不能直接用于页面中，需另外添加
关键区别
| 功能 | 页面中的控件 | 汉堡菜单中的控件 |
|---|---|---|
| 是否可直接使用 | ✅ 是 | ❌ 否 – 仅为模板 |
| 变量绑定（Connection String） | ✅ 支持 | ❌ 不支持 |
| 编辑视觉模板 | ❌ 不支持 | ✅ 支持 |
| 控件库管理 | ❌ 无 | ✅ 中央统一管理 |
| 典型用途 | 实时可视化界面 | 控件图形与风格管理 |
推荐流程
- 通过 汉堡菜单 → 控件 设计或导入 SVG 控件模板
- 然后在 页面中 插入这些控件，绑定逻辑变量，实现实时数据交互
提示： 始终通过“控件”菜单统一管理图标与模板，再在页面中完成逻辑连接。
Connection String
# Controls – Pages vs. Global Library (Burger Menu)
## Overview
PLCVisu offers two different ways to access and use Controls (UI elements like buttons, sliders, and indicators):
---
## 1. Controls in **Pages**
When you add a Control directly in a Page:
- You can **bind it to a variable** using the `Connection String`
- You can **edit the label**, configure settings, and connect logic
- Ideal for **immediate use** in a specific visualization or HMI screen
- Each control instance is **independent** and specific to that Page
---
## 2. Controls via **Burger Menu → Controls**
This is the **global Control Library** and serves as a central management panel.
- You see an **overview of all available Controls**, including standard ones and your custom SVGs
- You can **add new custom graphics** or modify existing ones (e.g. update icons)
- Useful for managing **corporate design**, ensuring consistency across all projects
- These are **templates** – not yet active in a Page until explicitly inserted
---
## Key Difference
| Feature | Controls in Pages | Controls via Burger Menu |
|----------------------------------|----------------------------|-------------------------------|
| Can be used directly | ✅ Yes | ❌ No – only templates |
| Logic binding (Connection String)| ✅ Yes | ❌ No |
| Edit visual template | ❌ Not here | ✅ Yes |
| Library management | ❌ | ✅ Centralized overview |
| Use case | Live visualization | Icon/Control management |
---
## Typical Workflow
1. Use **Burger Menu → Controls** to design or import new SVG-based controls
2. Insert those controls in **Pages** to connect them to logic and display real-time values
---
> **Tip:** Always manage your **icon library and visual templates** globally via the Controls menu – then bring them into Pages for logic integration.