Custom Toggle

The Custom Toggle control is a simple and intuitive widget designed to switch between two states (on/off). It is ideal for controlling system components, such as enabling or disabling parts of a system, or toggling devices like ventilators.

Overview

The Custom Toggle provides a clear and responsive way to toggle between two states. It can be used to control systems, devices, or processes, with the current state being visually indicated to the user.

Key Features

Two-State Toggle

Switch between on and off states.
Each state is represented visually with distinct colors or icons.

Real-Time State Reflection

The toggle instantly reflects the current state (on/off), providing immediate feedback.

Custom Labels

Add customizable labels to represent each state (e.g., "Ventilator On", "Ventilator Off").
Adjust text or icons to suit the application’s needs.

Configurable Appearance

Modify the toggle’s color scheme, size, and style to match the system’s theme or interface.

State Change Feedback

Provide visual or auditory cues when the state changes, improving user interaction.

Use Cases

System Control

Example: Toggle the operation of a machine or device, such as turning on/off a ventilator.

Safety Protocols

Example: Enable or disable a safety mechanism, like an emergency stop or system shutdown.

Device Management

Example: Switch a device or system on/off remotely.

SVG ID Reference Table

#	Element	SVG ID
1	Off State	`groupOff`
2	On State	`groupOn`
3	thumb	`thumb`
4	Label On (optional)	`labelOn`
5	Label Off (optional)	`labelOff`
6	Control root	`custom_control_root`

Example Code Snippet

<g id="gOFF">
<rect class="fallback-toggle-off-background custom-control custom-toggle-off custom-toggle-background-off" id="Rectangle 1" x="1.5" y="1.5" width="70" height="35" rx="17.5" stroke-width="3"/>
<g id="thumb">
<g class="fallback-toggle-off-thumb custom-control custom-toggle-off custom-toggle-thumb-off" id="circle" filter="url(#filter0_d_286_438)">
<circle cx="19" cy="19" r="13"/>
<circle cx="19" cy="19" r="12.5" stroke="url(#paint0_linear_286_438)"/>
</g>
</g>
<text  fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="12" letter-spacing="0em"><tspan id="labelOff" x="82" y="24.8636">Label Off</tspan></text>

</g>
<g id="gON">
<rect class="fallback-toggle-on-background custom-control custom-toggle-on custom-toggle-background-on" id="Rectangle 2" x="1.5" y="1.5" width="70" height="35" rx="17.5" stroke-width="3"/>
<g class="fallback-toggle-on-thumb custom-control custom-toggle-on custom-toggle-thumb-on" id="thumb">
<g id="circle_2" filter="url(#filter1_d_286_438)">
<circle cx="54" cy="19" r="13"/>
<circle cx="54" cy="19" r="12.5" stroke="url(#paint1_linear_286_438)"/>
</g>
</g>

Pages