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
}

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);

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.

---