Toggle

Overview

The Toggle widget is a two-state switch implemented entirely with vector primitives (no image assets). A rounded rail changes color and a circular handle slides horizontally to indicate the ON or OFF state.

Components

Name

Type

Description

rail

Line (round cap)

Background track, 60×30 px

handle

Circle

Sliding knob, 30×30 px

Container size: 60×30 px.

Default Colors

Element

OFF

ON

Rail

#000000 (black)

#C08000 (amber)

Handle

#C0C0C0 (gray)

#C0C0C0 (gray)

Colors can be overridden before the first setState() call.

API

void setState(bool state);          // Set ON/OFF and update visuals
bool getState() const;              // Return current state

void setRailOnColor(colortype);     // Rail color when ON
void setRailOffColor(colortype);    // Rail color when OFF
void setHandleOnColor(colortype);   // Handle color when ON
void setHandleOffColor(colortype);  // Handle color when OFF

Handle position: X = 0 (OFF), X = 30 (ON).

Usage in TouchGFX Designer

  1. Import the package:

    • Open TouchGFX Designer

    • Go to Edit → Import → Custom Containers

    • Select Toggle.tpkg

  2. Add to screen: drag the Toggle container onto your screen and position it.

  3. No designer properties — all behavior is controlled in C++.

Usage in C++ Code

#include <gui/containers/Toggle.hpp>

Toggle toggle;
add(toggle);
toggle.setPosition(x, y, 60, 30);

// Basic usage
toggle.setState(true);
bool on = toggle.getState();

// Custom colors (must be set before setState)
toggle.setRailOnColor(touchgfx::Color::getColorFromRGB(0, 200, 100));
toggle.setState(true);

// React to state change
void MyView::onToggleTapped() {
    toggle.setState(!toggle.getState());
}

Files Included

  • manifest.xml — package manifest (requires TouchGFX ≥ 4.26.1)

  • content/CustomContainerExport.touchgfx — Designer container definition

  • content/CustomContainerManifest.xml — container manifest

  • files/gui/include/gui/containers/Toggle.hpp — header

  • files/gui/src/containers/Toggle.cpp — implementation

Dependencies

  • TouchGFX Framework (minimum version 4.26.1)

  • No image assets — fully vector-based