DEV Community

Cover image for Building an On/Off Switch Control in C++ | Daily UI Challenge Day 15
Johnny Santamaria
Johnny Santamaria

Posted on

Building an On/Off Switch Control in C++ | Daily UI Challenge Day 15

What is an On/Off Switch?

An On/Off switch is a fundamental UI control that toggles between two states. In digital interfaces, it's commonly used for settings, feature toggles, and mode switches. Unlike a simple checkbox, an On/Off switch often includes animation and visual feedback to make the state change more engaging and intuitive.

Project Overview

Today, we'll create a console-based On/Off switch control in C++ that demonstrates the core functionality. Our implementation will include:

  • Toggle state management

  • Visual feedback using ASCII art

  • Simple animation effects

  • Event handling

  • State change callbacks

Let's dive into the implementation!

#include <iostream> #include <string> #include <thread> #include <chrono> #include <functional> // ^ These are called preprocessor directives // instructions that are processed before the actual compilation of code begins // It is like a "find and replace action in C++ and C" using namespace std; // ^ avoids use of std:: when you want to use cin or cout class OnOffSwitch { private: bool state; // Current state of the switch string onLabel; // Label for ON state string offLabel; // Label for OFF state function<void(bool)> callback; // Callback function for state changes // ASCII art frames for animation // Global variables MUST be constant for ease of debugging and maintaining const string SWITCH_ON = "[+++++● ]"; const string SWITCH_OFF = "[ ●-----]"; // Animation frames for transition const string frames[3] = { "[++●-------]", "[+++●------]", "[++++++●---]" }; // Helper function to clear the current line void clearLine() { cout << "\r" << string(50, ' ') << "\r"; } // Animate the state change void animateTransition(bool newState) { for (const auto& frame : frames) { clearLine(); cout << frame << " " << (newState ? onLabel : offLabel) << flush; this_thread::sleep_for(chrono::milliseconds(100)); } clearLine(); displayState(); } public: // Constructor OnOffSwitch(const string& on = "ON", const string& off = "OFF") : state(false), onLabel(on), offLabel(off) {} // Set callback function for state changes void setCallback(function<void(bool)> cb) { callback = cb; } // Toggle the switch state void toggle() { state = !state; animateTransition(state); if (callback) { callback(state); } } // Display current state void displayState() const { cout << (state ? SWITCH_ON : SWITCH_OFF) << " " << (state ? onLabel : offLabel) << flush; } // Get current state bool getState() const { return state; } // Set state without animation void setState(bool newState) { if (state != newState) { state = newState; displayState(); if (callback) { callback(state); } } } }; int main() { // Create an On/Off switch with custom labels OnOffSwitch switch1("ENABLED", "DISABLED"); // Set up a callback function switch1.setCallback([](bool state) { cout << "\nSwitch state changed to: " << (state ? "on" : "off") << endl; }); cout << "On/Off Switch Demo\n"; cout << "Press 't' to toggle, 'q' to quit\n\n"; // Initial state display switch1.displayState(); // Main interaction loop char input; while (cin >> input && input != 'q') { if (input == 't') { switch1.toggle(); } } return 0; // Indicates successful execution } 
Enter fullscreen mode Exit fullscreen mode

Key Features Explained

The switch uses ASCII art to create a visual representation:

[=====● ] for ON state

[ ●=====] for OFF state

Animated transition frames show the knob moving

State Management

  • Boolean state tracking

  • Custom labels for ON/OFF states

  • Callback support for state changes

Animation Effects

  • Smooth transition animation using multiple frames

  • Carriage return (\r) for in-place updates

  • Configurable animation speed

Event Handline

  • Toggle functionality

  • State change notifications

  • Input processing loop

Usage Example

// Create a switch with custom labels OnOffSwitch wifiSwitch("WiFi ON", "WiFi OFF"); // Add state change handler wifiSwitch.setCallback([](bool state) { cout << "WiFi is now " << (state ? "enabled" : "disabled") << endl; }); // Toggle the switch wifiSwitch.toggle(); // Get current state bool isOn = wifiSwitch.getState(); // Set state directly wifiSwitch.setState(true); 
Enter fullscreen mode Exit fullscreen mode

Potential Enhancements

This implementation could be extended with:

  • Color support using ANSI escape codes

  • Multiple animation styles

  • Keyboard shortcuts

  • Sound effects

  • Integration with a GUI framework

  • Touch/click support

  • Accessibility features

Conclusion

This On/Off switch implementation provides a foundation for building interactive toggle controls in C++ applications. While console-based, the core concepts can be adapted for GUI frameworks or embedded systems. The animation and callback features make it more engaging than a basic boolean toggle.


Top comments (0)