Example Raylib C++ Control Panel with Two Interaction Widgets

main.cpp

#include "raylib.h"
#include <cmath>
#include <string>

void DrawToggle(const Font& font, const Vector2& lampACentre, const std::string& labelA, const Vector2& lampBCentre, const std::string& labelB, float lampRadius, bool status) {
    DrawTextEx(font, labelA.c_str(), {lampACentre.x - 5, lampACentre.y - 45}, 20, 1.0f, DARKGRAY);
    DrawTextEx(font, labelB.c_str(), {lampBCentre.x - 5, lampBCentre.y - 45}, 20, 1.0f, DARKGRAY);

    DrawCircleV(lampACentre, lampRadius + 4.0f, DARKGRAY);
    DrawCircleV(lampACentre, lampRadius, !status ? ORANGE : GRAY);

    DrawCircleV(lampBCentre, lampRadius + 4.0f, DARKGRAY);
    DrawCircleV(lampBCentre, lampRadius, status ? LIME : GRAY);
}

void DrawGauge(const Font& font, const Vector2& gaugeCentre, const std::string& label, float dialRadius, float dialAngleDegrees) {
    DrawTextEx(font, label.c_str(), {gaugeCentre.x - 70, gaugeCentre.y + dialRadius + 18}, 25, 1.0f, DARKGRAY);

    DrawCircleV(gaugeCentre, dialRadius + 6.0f, DARKGRAY); 
    DrawCircleV(gaugeCentre, dialRadius, LIGHTGRAY);

    // Guage Tick Marks
    for (int i{ 0 }; i < 12; ++i) {
        float radians{ (i * 30.0f - 90.0f) * DEG2RAD };
        Vector2 p1{ gaugeCentre.x + cosf(radians) * (dialRadius - 6),  gaugeCentre.y + sinf(radians) * (dialRadius - 6) };
        Vector2 p2{ gaugeCentre.x + cosf(radians) * (dialRadius - 16), gaugeCentre.y + sinf(radians) * (dialRadius - 16) };
        DrawLineV(p1, p2, DARKGRAY);
    }

    float dialAngleRadians{ (dialAngleDegrees - 90.0f) * DEG2RAD };
    Vector2 dialTip{ gaugeCentre.x + cosf(dialAngleRadians) * (dialRadius - 12), gaugeCentre.y + sinf(dialAngleRadians) * (dialRadius - 12) };
    DrawLineEx(gaugeCentre, dialTip, 5, ORANGE);
    DrawCircleV(gaugeCentre, 4.0f, DARKGRAY);
}

int main() {
    constexpr int W{ 680 }, H{ 350 };
    constexpr float KNOB_SPEED_DEG_PER_SEC{ 90.0f };

    InitWindow(W, H, "Grin Time Flux Panel");
    SetTargetFPS(60);

    Font font = GetFontDefault();
    float knobAngleDegrees{ 0.0f };
    bool grinningStatus{ true };

    while (!WindowShouldClose()) {
        float dt = GetFrameTime(); // Delta time for frame-rate independent motion: 90 degrees per second
        if (IsKeyDown(KEY_RIGHT)) { knobAngleDegrees += KNOB_SPEED_DEG_PER_SEC * dt; }
        if (IsKeyDown(KEY_LEFT)) { knobAngleDegrees -= KNOB_SPEED_DEG_PER_SEC * dt; }
        if (IsKeyPressed(KEY_SPACE)) { grinningStatus = !grinningStatus; }

        Rectangle panel{ 40, 60, W - 80, H - 100 };

        Vector2 gaugeCentre{ panel.x + panel.width * 0.30f, panel.y + panel.height * 0.42f };
        float   gaugeRadius{ 70.0f };

        Vector2 lampSomberCentre{ panel.x + panel.width * 0.70f, panel.y + panel.height * 0.42f };
        Vector2 lampGrinCentre{ panel.x + panel.width * 0.80f, panel.y + panel.height * 0.42f };
        float   lampRadius{ 16.0f };

        BeginDrawing();

        ClearBackground(LIGHTGRAY);
        DrawTextEx(font, "Left/Right: Time Flux   Space: Grin Toggle  Esc: quit", { 40, 20 }, 25, 1.0f, DARKGRAY);
        DrawRectangleRounded(panel, 0.06f, 8, SKYBLUE);
        DrawGauge(font, gaugeCentre, "TIME FLUX", gaugeRadius, knobAngleDegrees);
        DrawToggle(font, lampSomberCentre, ":|", lampGrinCentre, ":)", lampRadius, grinningStatus);

        EndDrawing();
    }

    CloseWindow();
    return 0;
}