Text Performance, Fitting and Wrapping

Creating Clickable Text and Hyperlinks

How can I create clickable text or hyperlinks within my SDL application?

3D art representing computer programming

Creating clickable text or hyperlinks in SDL involves rendering the text, tracking its position, and handling mouse events. Here's how you can implement this functionality:

Rendering Clickable Text

First, let's create a ClickableText class that extends our Text class:

1#include <functional>
2#include <string>
3
4class ClickableText : public Text {
5public:
6  ClickableText(std::string Content,
7                int FontSize,
8                std::function<void()>
9                ClickHandler)
10    : Text{FontSize},
11      ClickHandler{ClickHandler} {
12    CreateSurface(Content);
13  }
14
15  bool IsClicked(int MouseX, int MouseY) const {
16    return MouseX >= DestinationRectangle.x &&
17      MouseX < DestinationRectangle.x +
18      DestinationRectangle.w &&
19      MouseY >= DestinationRectangle.y &&
20      MouseY < DestinationRectangle.y +
21      DestinationRectangle.h;
22  }
23
24  void OnClick() {
25    if (ClickHandler) { ClickHandler(); }
26  }
27
28private:
29  std::function<void()> ClickHandler;
30};

Handling Mouse Events

Now, let's implement mouse event handling in our main loop:

1#include <iostream>
2#include <vector>
3
4int main() {
5  SDL_Init(SDL_INIT_VIDEO);
6  TTF_Init();
7
8  Window GameWindow;
9
10  std::vector<ClickableText> Hyperlinks;
11  Hyperlinks.emplace_back(
12    "Click me!", 24, [](){
13      std::cout << "Hyperlink clicked!\n";
14     });
15
16  Hyperlinks.emplace_back(
17    "Another link", 24, [](){
18      std::cout << "Second link clicked!\n";
19    });
20
21  // Position the hyperlinks
22  Hyperlinks[0].DestinationRectangle = {
23    50, 50, 0, 0};
24  Hyperlinks[1].DestinationRectangle = {
25    50, 100, 0, 0};
26
27  SDL_Event Event;
28  bool ShouldQuit{false};
29
30  while (!ShouldQuit) {
31    while (SDL_PollEvent(&Event)) {
32      if (Event.type == SDL_QUIT) {
33        ShouldQuit = true;
34      } else if (Event.type ==
35        SDL_MOUSEBUTTONDOWN) {
36        int MouseX, MouseY;
37        SDL_GetMouseState(&MouseX, &MouseY);
38        for (auto& Link : Hyperlinks) {
39          if (Link.IsClicked(MouseX, MouseY)) {
40            Link.OnClick();
41          }
42        }
43      }
44    }
45
46    GameWindow.Render();
47    for (const auto& Link : Hyperlinks) {
48      Link.Render(GameWindow.GetSurface());
49    }
50    GameWindow.Update();
51  }
52
53  TTF_Quit();
54  SDL_Quit();
55  return 0;
56}

Styling Clickable Text

To make the clickable text look like hyperlinks, you can change the color or add an underline:

1class ClickableText : public Text {
2public:
3  ClickableText(std::string Content,
4                int FontSize,
5                std::function<void()>
6                ClickHandler)
7    : Text{FontSize},
8      ClickHandler{ClickHandler} {
9    TTF_SetFontStyle(Font, TTF_STYLE_UNDERLINE);
10    CreateSurface(Content);
11  }
12
13  void CreateSurface(
14    std::string Content) override {
15    SDL_FreeSurface(TextSurface);
16    TextSurface = TTF_RenderUTF8_Blended(
17      Font, Content.c_str(),
18      {0, 0, 255, 255}); // Blue color
19    if (!TextSurface) {
20      std::cout <<
21        "Error creating TextSurface: " <<
22        SDL_GetError();
23    }
24  }
25
26  // ... rest of the class implementation ...
27};

This implementation provides a basic framework for clickable text in SDL. You can extend it further by adding hover effects, changing the cursor when over a link, or implementing more complex interactions based on your specific needs.

Remember to handle edge cases, such as when the text changes or when the window is resized, to ensure the clickable areas remain accurate.

This Question is from the Lesson: