Made with the HMIx AI Generator
This resource was created with AI on ai.hmix.tech. Describe what you need and generate your own HMI controls in minutes — free.
Dynamic SVG
About Toggle Checkbox
Toggle Checkbox is a Dynamic SVG that gives operators a tactile, panel-style checkbox for WinCC Unified and WinCC V8 faceplates. A brushed steel bezel frames a recessed color face, so the control reads like a real pushbutton in a front panel. The state is shown twice: by the face color and by a light checkmark that appears only when the value is 1. The graphic contains no text, so you add the label next to it in your faceplate.
Key Features
- Two-state display: A Value of 0 shows the BackgroundColor face without a checkmark. A Value of 1 (threshold 0.5) shows the OnColor face with a checkmark.
- Double coding: Color and checkmark shape make the state clear at panel distance and do not rely on color alone.
- Realistic depth: A five-step steel gradient, recessed well, inner shadow and gloss overlay give a tactile, premium look in any color.
- Lossless scaling: The 100 x 100 viewBox scales cleanly to any size without loss of detail.
Customization
Three bindable properties control the appearance. Value (Real, default 0) drives the face color and checkmark visibility. OnColor (HmiColor, default #2F7FC1) sets the color at 1. BackgroundColor (HmiColor, default #3B4754) sets the color at 0. Toggling is configured as a click event on the object in the faceplate, for example by writing the inverted value back to the tag. No runtime settings panel is included.
Use Cases
Ideal for enable and disable switches, pump or valve enable commands, mode selection, and option toggles in operator faceplates and control room displays.
Compatibility
Works with WinCC Unified and WinCC V8. Import the .svghmi file into your project, bind Value to a Real tag, and set the colors in the faceplate.
AI-Generated: This Dynamic SVG was automatically generated using AI. Please test and validate it before deploying in production environments.
⚠️ AI-Generated: This dynamic svg was automatically generated using AI technology. It may contain errors or unexpected behavior. Users are responsible for testing and validating before using in production environments.