|
|
@ -1,78 +0,0 @@ |
|
|
|
#include "raylib.h" |
|
|
|
#include <string> |
|
|
|
|
|
|
|
struct Panel { |
|
|
|
Rectangle bounds; |
|
|
|
const char* title; |
|
|
|
Color color; |
|
|
|
bool active; |
|
|
|
}; |
|
|
|
|
|
|
|
int main(void) |
|
|
|
{ |
|
|
|
const int screenWidth = 1024; |
|
|
|
const int screenHeight = 768; |
|
|
|
InitWindow(screenWidth, screenHeight, "Dashboard Design - Voorbeeld"); |
|
|
|
|
|
|
|
// Maak 3 panelen |
|
|
|
Panel panels[3] = { |
|
|
|
{ { 50, 50, 300, 200 }, "Statistieken", SKYBLUE, false }, |
|
|
|
{ { 370, 50, 300, 200 }, "Status", ORANGE, false }, |
|
|
|
{ { 690, 50, 300, 200 }, "Informatie", GREEN, false } |
|
|
|
}; |
|
|
|
|
|
|
|
int teller = 0; |
|
|
|
float cirkelX = 100.0f; |
|
|
|
|
|
|
|
SetTargetFPS(60); |
|
|
|
|
|
|
|
while (!WindowShouldClose()) |
|
|
|
{ |
|
|
|
// --- UPDATE --- |
|
|
|
teller++; |
|
|
|
if (teller > 100) teller = 0; |
|
|
|
|
|
|
|
cirkelX += 0.5f; |
|
|
|
if (cirkelX > screenWidth) cirkelX = 0; |
|
|
|
|
|
|
|
// Check of je op panelen klikt |
|
|
|
Vector2 muis = GetMousePosition(); |
|
|
|
for (int i = 0; i < 3; i++) { |
|
|
|
if (CheckCollisionPointRec(muis, panels[i].bounds) && IsMouseButtonPressed(MOUSE_LEFT_BUTTON)) { |
|
|
|
panels[i].active = !panels[i].active; // toggle aan/uit |
|
|
|
panels[i].color = panels[i].active ? DARKBLUE : (i == 0 ? SKYBLUE : i == 1 ? ORANGE : GREEN); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// --- TEKENEN --- |
|
|
|
BeginDrawing(); |
|
|
|
ClearBackground(RAYWHITE); |
|
|
|
|
|
|
|
// Teken de panelen |
|
|
|
for (int i = 0; i < 3; i++) { |
|
|
|
DrawRectangleRec(panels[i].bounds, panels[i].color); |
|
|
|
DrawRectangleLinesEx(panels[i].bounds, 2, BLACK); |
|
|
|
DrawText(panels[i].title, panels[i].bounds.x + 10, panels[i].bounds.y + 10, 22, BLACK); |
|
|
|
} |
|
|
|
|
|
|
|
// Panel 1: Statistieken |
|
|
|
DrawText(TextFormat("Teller: %d", teller), 60, 100, 20, BLACK); |
|
|
|
DrawRectangle(60, 130, 280, 20, GRAY); |
|
|
|
DrawRectangle(60, 130, teller * 2.8f, 20, BLUE); |
|
|
|
|
|
|
|
// Panel 2: Status |
|
|
|
const char* status = (teller > 50) ? "ACTIEF" : "WACHTEND"; |
|
|
|
DrawText(status, 400, 120, 30, BLACK); |
|
|
|
|
|
|
|
// Panel 3: Cirkel (bewegend) |
|
|
|
DrawCircle((int)cirkelX, 200, 25, RED); |
|
|
|
DrawText("Bewegende cirkel →", 700, 120, 20, BLACK); |
|
|
|
|
|
|
|
// Footer |
|
|
|
DrawText("Klik op een paneel om de kleur te wisselen", 10, screenHeight - 30, 20, DARKGRAY); |
|
|
|
EndDrawing(); |
|
|
|
} |
|
|
|
|
|
|
|
CloseWindow(); |
|
|
|
return 0; |
|
|
|
} |