UI Elements and DPI

1// UISystem.h
2#include <SDL.h>
3#include <string>
4#include <functional>
5
DPI Scale Helper|Show
6float GetDPIScale(SDL_Window* Window) {/*...*/}
15
16class Button {
17  SDL_Rect Bounds;
18  std::string Text;
19  
20  // Width in screen coordinates
21  float PhysicalWidth;
22  
23  // Height in screen coordinates
24  float PhysicalHeight;
25
26public:
27  Button(
28      float X, float Y,
29      float Width, float Height,
30      const std::string& ButtonText)
31    : PhysicalWidth{Width}
32    , PhysicalHeight{Height}
33    , Text{ButtonText} {
34
35    Bounds.x = int(X);
36    Bounds.y = int(Y);
37    
38    // Initial size without scaling
39    UpdateSize(1.0f);
40  }
41
42  void UpdateSize(float Scale) {
43    Bounds.w = int(PhysicalWidth * Scale);
44    Bounds.h = int(PhysicalHeight * Scale);
45  }
46
47  void Draw(SDL_Renderer* Renderer) {
48    // Draw button background
49    SDL_SetRenderDrawColor(
50      Renderer, 200, 200, 200, 255);
51    SDL_RenderFillRect(Renderer, &Bounds);
52
53    // Draw border
54    SDL_SetRenderDrawColor(
55      Renderer, 100, 100, 100, 255);
56    SDL_RenderDrawRect(Renderer, &Bounds);
57  }
58
59  bool Contains(int X, int Y) {
60    return X >= Bounds.x
61      && X < Bounds.x + Bounds.w
62      && Y >= Bounds.y
63      && Y < Bounds.y + Bounds.h;
64  }
65};
66
67class UISystem {
68  std::vector<Button> Buttons;
69  float CurrentScale{1.0f};
70
71public:
72  void AddButton(
73      float X, float Y,
74      float Width, float Height,
75      const std::string& Text) {
76
77    Buttons.emplace_back(
78      X, Y, Width, Height, Text);
79    Buttons.back().UpdateSize(CurrentScale);
80  }
81
82  void UpdateDPIScale(float NewScale) {
83    if (CurrentScale != NewScale) {
84      CurrentScale = NewScale;
85      for (auto& Button : Buttons) {
86        Button.UpdateSize(NewScale);
87      }
88    }
89  }
90
91  void Draw(SDL_Renderer* Renderer) {
92    for (auto& Button : Buttons) {
93      Button.Draw(Renderer);
94    }
95  }
96};

1// main.cpp
2#include <SDL.h>
3#include "UISystem.h"
4
5int main() {
6  SDL_SetHint(
7    SDL_HINT_WINDOWS_DPI_SCALING, "1");
8  SDL_Init(SDL_INIT_VIDEO);
9
10  SDL_Window* Window{
11    SDL_CreateWindow(
12      "UI Scaling Demo",
13      SDL_WINDOWPOS_UNDEFINED,
14      SDL_WINDOWPOS_UNDEFINED,
15      800, 600,
16      SDL_WINDOW_ALLOW_HIGHDPI
17    )};
18
19  SDL_Renderer* Renderer{
20    SDL_CreateRenderer(
21      Window, -1, SDL_RENDERER_ACCELERATED)};
22
23  UISystem UI;
24  UI.AddButton(50, 50, 200, 60, "Click Me");
25  UI.AddButton(50, 150, 200, 60, "Options");
26
27  float Scale{GetDPIScale(Window)};
28  UI.UpdateDPIScale(Scale);
29
30  SDL_Event E;
31  bool Running{true};
32  while (Running) {
33    while (SDL_PollEvent(&E)) {
34      if (E.type == SDL_QUIT) Running = false;
35      if (E.type == SDL_WINDOWEVENT) {
36        if (
37           E.window.event == SDL_WINDOWEVENT_RESIZED
38        || E.window.event == SDL_WINDOWEVENT_MOVED
39        ) {
40          Scale = GetDPIScale(Window);
41          UI.UpdateDPIScale(Scale);
42        }
43      }
44    }
45
46    SDL_SetRenderDrawColor(
47      Renderer, 240, 240, 240, 255);
48    SDL_RenderClear(Renderer);
49
50    UI.Draw(Renderer);
51
52    SDL_RenderPresent(Renderer);
53  }
54
55  SDL_DestroyRenderer(Renderer);
56  SDL_DestroyWindow(Window);
57  SDL_Quit();
58  return 0;
59}