Is it possible to create a client window on Wayland without having to develop a compositor?

[colonelzkiller]

I'm curious if it's possible to use Louvre to create a Wayland client window directly, similar to how SFML, SDL, or GLFW allow, without needing to develop an entire compositor?

[ehopperdietzel]

Hello, funny, I'm just developing a Wayland backend right now (2.0.0 branch).

So yes, it's possible. You can override the LCompositor::createGlobalsRequest virtual method and not add any protocol so that Wayland clients cannot interact with the compositor. You can also override the virtual methods of LOutput, LPointer, LKeyboard, and LTouch for rendering and handling input events respectively. And even use LScene and LViews to make it easier. So far, I've only implemented pointer events, I still need to do keyboard and touch.

The only limitation is that you can only create a toplevel window and nothing more, and it requires the compositor to support SSD for resizing, dragging, etc. For example, this is how the louvre-views example (with Wayland backend) looks when running within louvre-views (with DRM backend).

Currently, you have to run the compositor with LOUVRE_INPUT_BACKEND=wayland LOUVRE_GRAPHIC_BACKEND=wayland ./your-compositor.

But I'm going to make it default to trying to use those backends if WAYLAND_DISPLAY is set and fallback to DRM/Libinput if not.

[ehopperdietzel]

I am actually considering creating a Wayland client toolkit. I consider the LScene and LViews system to be very powerful, and it can be used as a base for creating sophisticated types of views, such as buttons, labels, etc. But that would take quite some time...

[colonelzkiller]

I've been developing a C++ software development toolkit from scratch and licensed under MIT, the APIs are inspired by Qt6. I'm using Skia from Google (https://github.com/google/skia) and Yoga from Facebook (https://github.com/facebook/yoga) and documenting my process. I recently discovered SRM and Louvre, which are critical pieces I was missing—thank you for developing them. However, I'm wanting to transitioning away from SFML to focus exclusively on using Louvre.

Testing Skia on GPU Surface and Yoga

This example uses SFML for Window, Input and GL Context, Skia for Canvas and 2D Graphics on a GPU Surface and Yoga Layout Engine for Flexbox layout.

https://github.com/SFML/SFML
https://github.com/SFML/SFML/archive/refs/tags/2.6.1.zip

https://github.com/google/skia
https://github.com/google/skia/archive/refs/tags/canvaskit/0.34.0.zip

https://github.com/facebook/yoga
https://github.com/facebook/yoga/archive/refs/tags/v3.0.4.zip

 g++ -o test test.cpp -I/usr/include/skia -lskia -lsfml-graphics -lsfml-window -lsfml-system -lthorvg -lyogacore -lEGL -lGLESv2 

Example Code

#define SK_GL

// Compile command:
// This project uses the Skia graphics library along with SFML, EGL, and other libraries. 
// Compilation requires linking against these libraries as specified below.
// g++ -o test test.cpp -I/usr/include/skia -lskia -lsfml-graphics -lsfml-window -lsfml-system  -lyogacore -lEGL -lGLESv2 

#include <EGL/egl.h>
#include <EGL/eglext.h>
#include <GLES2/gl2.h>

#include <SFML/Graphics.hpp>
#include <memory>
#include <yoga/Yoga.h>
#include <cmath>  // Include for mathematical functions like sin and cos
#include <iostream>

#include <skia/include/gpu/GrDirectContext.h>
#include <skia/include/gpu/gl/GrGLInterface.h>
#include <skia/include/core/SkSurface.h>
#include <skia/include/core/SkCanvas.h>
#include <skia/include/core/SkPath.h>
#include <skia/include/core/SkPaint.h>
#include <skia/include/core/SkRect.h>
#include <skia/include/core/SkRRect.h>

// Function to create and return an SkRRect representing a rounded rectangle
SkRRect createRoundedRectangle(float x, float y, float width, float height,
                               float radiusTopLeft, float radiusTopRight,
                               float radiusBottomRight, float radiusBottomLeft) {
    // Define the rectangle from specified position and size
    SkRect rect = SkRect::MakeXYWH(x, y, width, height);

    // Define radii for each corner of the rectangle
    SkVector radii[4];
    radii[SkRRect::kUpperLeft_Corner] = SkVector::Make(radiusTopLeft, radiusTopLeft);
    radii[SkRRect::kUpperRight_Corner] = SkVector::Make(radiusTopRight, radiusTopRight);
    radii[SkRRect::kLowerRight_Corner] = SkVector::Make(radiusBottomRight, radiusBottomRight);
    radii[SkRRect::kLowerLeft_Corner] = SkVector::Make(radiusBottomLeft, radiusBottomLeft);

    // Create and return the rounded rectangle with individual corner radii
    SkRRect roundedRect;
    roundedRect.setRectRadii(rect, radii);

    return roundedRect;
}

int main() {
    // Initialize an SFML window
    sf::RenderWindow window(sf::VideoMode(800, 600), "Hydra v0.0.1");

    // Setup Skia OpenGL context
    sk_sp<const GrGLInterface> interface = GrGLMakeNativeInterface();
    sk_sp<GrDirectContext> context = GrDirectContext::MakeGL(interface);

    // Define the image properties and create a Skia GPU surface
    SkImageInfo imageinfo = SkImageInfo::MakeN32Premul(800, 600);
    sk_sp<SkSurface> surface = SkSurface::MakeRenderTarget(context.get(), SkBudgeted::kNo, imageinfo);

    // Ensure the GPU surface was created successfully
    if (!surface) {
        std::cerr << "Failed to create Skia GPU surface\n";
        return -1;
    }

    // Prepare the Skia drawing context
    context->flush();

    // Retrieve the canvas from the Skia surface
    SkCanvas* canvas = surface->getCanvas();

    // Activate SFML window context
    window.setActive(true);

    // Set up Yoga layout for UI elements
    YGNodeRef container = YGNodeNew();
    YGNodeStyleSetWidth(container, 800);
    YGNodeStyleSetHeight(container, 100);
    YGNodeStyleSetFlexDirection(container, YGFlexDirectionRow);
    YGNodeStyleSetPadding(container, YGEdgeAll, 20);

    // Create and configure child nodes for layout
    YGNodeRef child = YGNodeNew();
    YGNodeStyleSetFlexGrow(child, 1);  // Allow the child to grow and fill the container
    YGNodeStyleSetMargin(child, YGEdgeAll, 5);
    YGNodeInsertChild(container, child, 0);

    YGNodeRef child1 = YGNodeNew();
    YGNodeStyleSetFlexGrow(child1, 1);
    YGNodeStyleSetMargin(child1, YGEdgeAll, 5);
    YGNodeInsertChild(container, child1, 1);

    // Compute the layout for all children
    YGNodeCalculateLayout(container, YGUndefined, YGUndefined, YGDirectionLTR);

    // Main application loop
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            if (event.type == sf::Event::Closed) {
                window.close();
            }

            // Handle window resizing
            if (event.type == sf::Event::Resized) {
                sf::FloatRect visibleArea(0, 0, event.size.width, event.size.height);
                window.setView(sf::View(visibleArea));
            }
        }

        // Clear window with a specific color
        window.clear(sf::Color(23, 23, 23));

        // Start drawing operations
        canvas->clear(SkColorSetARGB(255, 255, 255, 0));  // Clear with yellow color, full opacity

        // Draw rounded and regular rectangles based on Yoga layout
        SkRRect rect = createRoundedRectangle(YGNodeLayoutGetLeft(child), YGNodeLayoutGetTop(child), YGNodeLayoutGetWidth(child), YGNodeLayoutGetHeight(child), 0, 20, 0, 20);
        SkPaint paint;
        paint.setAntiAlias(true);  // Enable anti-aliasing for smoother edges
        paint.setColor(SK_ColorBLUE);
        canvas->drawRRect(rect, paint);

        SkRect rect1 = SkRect::MakeXYWH(YGNodeLayoutGetLeft(child1), YGNodeLayoutGetTop(child1), YGNodeLayoutGetWidth(child1), YGNodeLayoutGetHeight(child1));
        SkPaint paint1;
        paint1.setAntiAlias(true);
        paint1.setColor(SK_ColorRED);
        canvas->drawRect(rect1, paint1);
        
        // Finish drawing and update the canvas
        canvas->flush();

        // Display the updated window
        window.display();
    }

    // Cleanup
    delete canvas;

    return 0;
}

Screenshot

Shell Script to build skia

#!/bin/bash

# Set the PKG directory where everything will be installed
export PKG=$(pwd)/install

# Ensure the PKG directory exists
mkdir -pv $PKG

git clone 'https://chromium.googlesource.com/chromium/tools/depot_tools.git'
export PATH="${PWD}/depot_tools:${PATH}"

# Download the packages
wget https://github.com/google/skia/archive/refs/tags/canvaskit/0.34.0.tar.gz

tar -xvf 0.34.0.tar.gz

# Change directory to the glibc directory
cd skia-canvaskit-0.34.0

python3 tools/git-sync-deps

# Run configure with the adjusted paths
./bin/gn gen 'out/Shared' --args='
	is_official_build=true 
	is_component_build=true
	target_os="linux" 
	target_cpu="x64"
	skia_compile_modules=true
	skia_enable_tools=true
	skia_enable_pdf=true
	skia_enable_sksl=true
	skia_enable_skshaper=true
	skia_enable_svg=true
	skia_enable_gpu=true
	skia_use_gl=true
	skia_use_angle=false
	skia_use_vulkan=false
	skia_use_dawn=false
	skia_use_metal=false
	skia_use_direct3d=false
	skia_use_expat=true
	skia_use_harfbuzz=true
	skia_use_icu=true
	skia_use_zlib=true
	skia_use_freetype=true
	skia_use_ffmpeg=false
	skia_use_sfml=false
	skia_use_sfntly=true
	skia_use_system_expat=false
	skia_use_system_harfbuzz=false
	skia_use_system_icu=false
	skia_use_system_libjpeg_turbo=false
	skia_use_system_libpng=false
	skia_use_system_libwebp=false
	skia_use_system_zlib=false
	skia_use_system_freetype2=false
	skia_enable_fontmgr_custom_directory=false
	text_tests_enabled=false
	skia_enable_skshaper_tests=false
	skia_compile_sksl_tests=false'

ninja -C out/Shared

cd $PKG
mkdir -p usr/lib64
mkdir -p usr/include/skia

cd $PKG/usr/lib64
cp ../../../skia-canvaskit-0.34.0/out/Shared/*.a .
cp ../../../skia-canvaskit-0.34.0/out/Shared/*.so .

cd $PKG/usr/include/skia
cp -r ../../../../skia-canvaskit-0.34.0/include/* .

cd $PKG
#zip -r9 ../skia-0.38.2-1.pkg usr/lib64/
#zip -r9 ../skia-devel-0.38.2-1.pkg usr/include/

# Cleanup
#cd ..
#rm -rf 0.38.2.tar.gz install skia-canvaskit-0.38.2 depot_tools

[colonelzkiller]

Here’s a preview of the APIs for the SDK I'm currently developing

#include <HWindow.h>
#include <iostream>

int main() {
    // Create an HWindow object with default size
    Ht::HWindow myWindow;

    // Retrieve and display the base size of the window
    Ht::HSize size = myWindow.baseSize();
    std::cout << "Window base size is " << size.width() << "x" << size.height() << std::endl;

    Ht::ScreenOrientation orientation = myWindow.contentOrientation();


    if (orientation == Ht::ScreenOrientation::PortraitOrientation) {
        std::cout << "The orientation is Portrait." << std::endl;
    }
    
    // Retrieve the cursor from the window
    Ht::HCursor cursor = myWindow.cursor();


    if (cursor.shape() == Ht::CursorShape::Arrow) {
        std::cout << "The cursor shape is Arrow." << std::endl;
    }
    
    Ht::HString path = myWindow.filePath();
    std::cout << "Window file path: " << path << std::endl;

    Ht::WindowFlags flags = myWindow.flags();
    if (flags == Ht::WindowFlags::Window) {
        std::cout << "The flag is Window." << std::endl;
    }
    
    // Get the frame geometry of the window
    Ht::HRect frame = myWindow.frameGeometry();

    // Print the frame geometry
    std::cout << "Frame Geometry: x=" << frame.x() << ", y=" << frame.y() 
              << ", width=" << frame.width() << ", height=" << frame.height() << std::endl;

    // Get the frame geometry of the window
    Ht::HMargins margins = myWindow.frameMargins();

    // Print the frame geometry
    std::cout << "Frame Margins: top=" << margins.top() << ", right=" << margins.right() 
              << ", bottom=" << margins.bottom() << ", left=" << margins.left() << std::endl;
       
    if (myWindow.isTopLevel() == true) {
      std::cout << "Window is toplevel = true " << std::endl;
    }
          
    Ht::HSize maxsize = myWindow.maximumSize();
    std::cout << "Window maximumSize width is " << maxsize.width() << " height " << maxsize.height() << std::endl;
    
    Ht::HSize minsize = myWindow.minimumSize();
    std::cout << "Window minimumSize width is " << minsize.width() << " height " << minsize.height() << std::endl;
    
    int mh = myWindow.maximumHeight();
    std::cout << "Window maximumHeight is " << mh << std::endl;
    
    std::cout << "Window opacity is " << myWindow.opacity() << std::endl;
    
    myWindow.setOpacity(0.5);
    std::cout << "Window opacity is " << myWindow.opacity() << std::endl;
    
    std::cout << "Window title is " << myWindow.title() << std::endl;
    
    Ht::HString title = "My Window";
    myWindow.setTitle(title);
    
    std::cout << "Window title is " << myWindow.title() << std::endl;
        
    return 0;
}

[ehopperdietzel]

Hey, that's great! Maybe we could work together. I love Qt's API, so we're on the same page. But why do you want to move away from SFML? I don't think using Louvre is a good idea, it's way too specialized in compositor development. However, I could help you implement input and graphic backends.

So I guess you want apps to be able to run on a Wayland compositor but also directly on top of DRM/KMS?

Building a Wayland backend with OpenGL is quite easy and would solve graphics and input at once. I could help you with that.

For a DRM backend, using SRM could be a good idea, and for the input backend Libinput, which is also straightforward. I could help you with that as well.

Using Skia for painting seems like a good option. I am not familiar with Yoga though. There is also a cool library I saw recently called Blend2D, which looks nice and seems to have good performance.

We could also use some of the logic of the Louvre's scene system for damage calculation and repainting, masking, clipping, and even for input events propagation among "widgets."

Do you have your library available in some repo?

[colonelzkiller]

Collaborating would be a fantastic opportunity!

1. SFML, SDL and GLFW under wayland they don't support, shaped windows or setting the windows position from code which effects things like menus, centering a splash-screen, ... and skia has all the same features and a lot of extra stuff SFML doesn't so your left with alot of dead code in SFML.

2. Applications in Wayland and even DRM/KMS would be ideal. There are situations where DRM/KMS would be ideal over wayland like for appliance or machine interfaces like a control surface for a 3d printer.

3. I have experience with Skia, ThorVG and Blend2D. Skia is the most capable of the three, ThorVG is primarily for vector graphics and lottie animation and has no dependencies, Blend2d is the second most capable after Skia. Yoga is a flexbox layout engine for c++ its developed by facebook and is feature complete to css3 flexbox.

4. I don't have alot of code written most of my project has been about research and documentation, and i spent a good amount of time evaluating memory safe languages before deciding to stick with c++. I will get what i have setup in a github repo tomorrow and show you.

Here is some example code for two classes i wrote yesterday to show the type of ease of use i am trying to emplament. As you will notice i still haven't settled on a name for the apis i have been working on.

ProcessManager

This is one of many components for writing a lightweight alternative to systemd.

// ProcessManager.cpp

#include <ProcessManager.h>
#include <iostream>
#include <stdexcept>
#include <signal.h>
#include <unistd.h>
#include <sys/wait.h>

ProcessManager::ProcessManager(ProcessType type) : type(type) {}

pid_t ProcessManager::start(const std::string& command) {
    pid_t pid = fork();
    if (pid == -1) {
        throw std::runtime_error("Failed to fork.");
    } else if (pid == 0) {
        if (type == ProcessType::Daemon) {
            setsid(); // Detach from the controlling terminal
            close(STDIN_FILENO); // Close standard input
            close(STDOUT_FILENO); // Close standard output
            close(STDERR_FILENO); // Close standard error
        }
        execl("/bin/sh", "sh", "-c", command.c_str(), nullptr);
        exit(EXIT_FAILURE); // If exec fails
    }
    processes[pid] = command;
    return pid;
}

void ProcessManager::stop(pid_t pid) {
    if (processes.find(pid) != processes.end()) {
        kill(pid, SIGTERM);
        waitpid(pid, nullptr, 0);
        processes.erase(pid);
    }
}

void ProcessManager::pause(pid_t pid) {
    if (processes.find(pid) != processes.end()) {
        kill(pid, SIGSTOP);
    }
}

void ProcessManager::resume(pid_t pid) {
    if (processes.find(pid) != processes.end()) {
        kill(pid, SIGCONT);
    }
}

pid_t ProcessManager::restart(pid_t pid) {
    if (processes.find(pid) != processes.end()) {
        std::string command = processes[pid];
        stop(pid);
        return start(command);
    } else {
        std::cerr << "Failed to restart: No such process found." << std::endl;
        return -1;
    }
}

Example Usage

#include <ProcessManager.h>
#include <iostream>
#include <ostream>
#include <sys/wait.h>

int main() {
    ProcessManager pm(ProcessType::Daemon);
    try {
        pid_t pid = pm.start("gnome-text-editor");
        std::cout << "Process started with PID: " << pid << std::endl;
        sleep(5); // Wait for a bit
        pm.pause(pid);
        std::cout << "Process paused." << std::endl;
        
        sleep(5);
        pm.resume(pid);
        std::cout << "Process resumed." << std::endl;
        
        sleep(5);
        pid = pm.restart(pid);
        std::cout << "Process restarted." << std::endl;
        
        sleep(5);
        pm.stop(pid);
        std::cout << "Process stopped." << std::endl;
    } catch (const std::exception& e) {
        std::cerr << "Error: " << e.what() << std::endl;
    }
    return 0;
}

SharedMemory

This is one component of many for creating a IPC like dbus, for the rest we use zeromq and flatbuffers.

#include "SharedMemory.h"
#include <iostream>
#include <fcntl.h>
#include <sys/mman.h>
#include <sys/stat.h>
#include <unistd.h>
#include <cstring>
#include <stdexcept>

namespace Qtk {

SharedMemory::SharedMemory(const std::string& name) : name(name) {
    fd = shm_open(name.c_str(), O_CREAT | O_RDWR, S_IRUSR | S_IWUSR);
    if (fd == -1) {
        throw std::runtime_error("Error creating shared memory");
    }
}

SharedMemory::~SharedMemory() {
    close();
}

void SharedMemory::write(const std::string& data) {
    size_t size = data.size();
    ftruncate(fd, size);
    void* ptr = mmap(nullptr, size, PROT_READ | PROT_WRITE, MAP_SHARED, fd, 0);
    if (ptr == MAP_FAILED) {
        throw std::runtime_error("Error mapping memory");
    }
    memcpy(ptr, data.data(), size);
    munmap(ptr, size);
}

std::string SharedMemory::read() {
    struct stat stat;
    fstat(fd, &stat);
    size_t size = stat.st_size;
    void* ptr = mmap(nullptr, size, PROT_READ, MAP_SHARED, fd, 0);
    if (ptr == MAP_FAILED) {
        throw std::runtime_error("Error mapping memory");
    }
    std::string data(static_cast<char*>(ptr), size);
    munmap(ptr, size);
    return data;
}

void SharedMemory::close() {
    ::close(fd);
}

} // namespace Qtk

Example Usage

#include "SharedMemory.h"
#include <iostream>

int main() {
    Qtk::SharedMemory shm("/my_shared_memory");
    std::string data = shm.read();
    std::cout << "Data read from shared memory: " << data << std::endl;
    return 0;
}

#include "SharedMemory.h"
#include <iostream>

int main() {
    Qtk::SharedMemory shm("/my_shared_memory");
    shm.write("Hello from writer program");
    std::cout << "Data written to shared memory" << std::endl;
    return 0;
}

[colonelzkiller]

SFML and ThorVG Examples

This code snippet illustrates how to use ThorVG in conjunction with SFML 2.6 for rendering Lottie animations.

https://github.com/SFML/SFML

Lottie File:
lottie.json

// g++ -o sfml-app main3.cpp -lsfml-graphics -lsfml-window -lsfml-system -lthorvg


#include <SFML/Graphics.hpp>
#include <thorvg.h>
#include <memory>
#include <iostream>
#include <cmath>
#include <cstring>

int main()
{
    // Create a window with the size 800x600 pixels and title "SFML Example with ThorVG"
    sf::RenderWindow window(sf::VideoMode(800, 600), "Hydra v0.0.1");
    tvg::Initializer::init(1);

    window.setVerticalSyncEnabled(true);

    // A canvas target buffer
    static uint32_t buffer[800 * 600];

    // Generate a canvas
    auto canvas = tvg::SwCanvas::gen();
    canvas->target(buffer, 800, 800, 600, tvg::SwCanvas::ARGB8888S);

    // Generate an animation
    auto animation = tvg::Animation::gen();
    // Acquire a picture associated with the animation
    auto picture = animation->picture();
    // Load an animation file
    if (picture->load("lottie.json") != tvg::Result::Success) {
        std::cerr << "Could not load the Lottie animation file." << std::endl;
        return -1;
    }

   float zoomScale = 0.5;  // 50% size
    picture->scale(zoomScale);

    // Push the picture into the canvas
    canvas->push(std::unique_ptr<tvg::Paint>(picture));

    // Determine animation duration
    auto duration = animation->duration();
    std::cout << "Animation duration: " << duration << " seconds" << std::endl;

    // Create an SFML image to hold the buffer
    sf::Image image;
    image.create(800, 600);

    // Create a texture
    sf::Texture texture;
    texture.create(800, 600);

    // Create a sprite
    sf::Sprite sprite;

    // Main loop
    sf::Clock clock;  // Start a clock to track elapsed time
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

    // catch the resize events
    if (event.type == sf::Event::Resized)
    {
        // update the view to the new size of the window
        sf::FloatRect visibleArea(0, 0, event.size.width, event.size.height);
        window.setView(sf::View(visibleArea));
    }
        // Set a current animation frame to display
        auto progress = clock.getElapsedTime().asSeconds() / duration;
        if (progress >= 1.0f) {
            progress = fmod(progress, 1.0f);
            clock.restart();
        }
        animation->frame(animation->totalFrame() * progress);
        // Update the picture to be redrawn
        canvas->update(picture);

        canvas->draw();
        canvas->sync();

        // Set the pixels directly in the image
        for (int y = 0; y < 600; ++y) {
            for (int x = 0; x < 800; ++x) {
                int index = y * 800 + x;
                uint32_t argb = buffer[index];
                uint8_t a = (argb >> 24) & 0xFF;
                uint8_t r = (argb >> 16) & 0xFF;
                uint8_t g = (argb >> 8) & 0xFF;
                uint8_t b = argb & 0xFF;
                image.setPixel(x, y, sf::Color(r, g, b, a));
            }
        }

        // Update the texture with the image
        texture.update(image);

        // Update the sprite with the texture
        sprite.setTexture(texture);

        window.clear(sf::Color(23, 23, 23));  // Clear the window with white color
        window.draw(sprite);             // Draw the sprite
        window.display();                // Update the window
        memset(buffer, 0, sizeof(buffer));
    }

    tvg::Initializer::term(tvg::CanvasEngine::Sw);
    return 0;
}

}

This code snippet demonstrates how to integrate ThorVG, SFML 2.6, and the Yoga Layout Engine. These three libraries provide all the necessary tools to create a comprehensive GUI toolkit.

https://github.com/SFML/SFML
https://github.com/facebook/yoga

// g++ -o sfml-app main4.cpp -lsfml-graphics -lsfml-window -lsfml-system -lthorvg -lyogacore

#include <SFML/Graphics.hpp>
#include <thorvg.h>
#include <memory>
#include <yoga/Yoga.h>

// Function to create a rounded rectangle using ThorVG
std::unique_ptr<tvg::Shape> createRoundedRect(float x, float y, float width, float height, 
                                              float topLeftRadius, float topRightRadius, 
                                              float bottomRightRadius, float bottomLeftRadius) {
    auto shape = tvg::Shape::gen();

    // Define the rounded rectangle path
    shape->moveTo(x + topLeftRadius, y);
    shape->lineTo(x + width - topRightRadius, y);
    if (topRightRadius > 0) {
        shape->cubicTo(x + width - topRightRadius, y, x + width, y, x + width, y + topRightRadius);
    }
    shape->lineTo(x + width, y + height - bottomRightRadius);
    if (bottomRightRadius > 0) {
        shape->cubicTo(x + width, y + height - bottomRightRadius, x + width, y + height, x + width - bottomRightRadius, y + height);
    }
    shape->lineTo(x + bottomLeftRadius, y + height);
    if (bottomLeftRadius > 0) {
        shape->cubicTo(x + bottomLeftRadius, y + height, x, y + height, x, y + height - bottomLeftRadius);
    }
    shape->lineTo(x, y + topLeftRadius);
    if (topLeftRadius > 0) {
        shape->cubicTo(x, y + topLeftRadius, x, y, x + topLeftRadius, y);
    }
    shape->close();
    return shape;
}

int main() {
    // Initialize SFML window
    sf::RenderWindow window(sf::VideoMode(800, 600), "Hydra v0.0.1");
    tvg::Initializer::init(1);

    // Set up Yoga layout
    YGNodeRef container = YGNodeNew();
    YGNodeStyleSetWidth(container, 800);
    YGNodeStyleSetHeight(container, 100);
    YGNodeStyleSetFlexDirection(container, YGFlexDirectionRow);
    YGNodeStyleSetPadding(container, YGEdgeAll, 20);

    // Create child nodes with flexible growth
    YGNodeRef children[3];
    for (int i = 0; i < 3; ++i) {
        children[i] = YGNodeNew();
        YGNodeStyleSetFlexGrow(children[i], 1);
        YGNodeInsertChild(container, children[i], 0);
        YGNodeStyleSetMargin(children[i], YGEdgeAll, 5);
    }
    
    // We want to change the width of the first child. Note its first in last out so the first child is in the last possition.
    // We turn flex grow of so we can set the width of the child manualy.
    YGNodeStyleSetFlexGrow(children[2], 0);
    YGNodeStyleSetWidth(children[2], 100);
    
    // Calculate all the childrens layout and sizes
    YGNodeCalculateLayout(container, YGUndefined, YGUndefined, YGDirectionLTR);

    // Prepare canvas
    static uint32_t buffer[800 * 600];
    auto canvas = tvg::SwCanvas::gen();
    canvas->target(buffer, 800, 800, 600, tvg::SwCanvas::ARGB8888);

    // Draw rounded rectangles for each child
    for (auto& child : children) {
        auto roundedRect = createRoundedRect(YGNodeLayoutGetLeft(child), YGNodeLayoutGetTop(child),
                                             YGNodeLayoutGetWidth(child), YGNodeLayoutGetHeight(child), 10, 10, 0, 0);
        roundedRect->fill(143 * (child == children[0]), 143 * (child == children[1]), 143 * (child == children[2]));
        canvas->push(std::move(roundedRect));
    }

    // Render and sync canvas
    canvas->draw();
    canvas->sync();

    // Convert color format from ARGB to RGBA
    for (int i = 0; i < 800 * 600; ++i) {
        uint32_t argb = buffer[i];
        uint32_t a = (argb & 0xFF000000);
        uint32_t r = (argb & 0x00FF0000) >> 16;
        uint32_t g = (argb & 0x0000FF00) >> 8;
        uint32_t b = (argb & 0x000000FF);
        buffer[i] = a | (b << 16) | (g << 8) | r;
    }

    // Create SFML texture from the buffer
    sf::Image image;
    image.create(800, 600, reinterpret_cast<const uint8_t*>(buffer));
    sf::Texture texture;
    texture.loadFromImage(image);
    sf::Sprite sprite(texture);

    // Main loop
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            if (event.type == sf::Event::Closed) {
                window.close();
            }
            // catch the resize events
            if (event.type == sf::Event::Resized)
            {
                // update the view to the new size of the window
                sf::FloatRect visibleArea(0, 0, event.size.width, event.size.height);
                window.setView(sf::View(visibleArea));
            }
        }

        window.clear(sf::Color(23,23,23));
        window.draw(sprite);
        window.display();
    }

    // Clean up
    YGNodeFreeRecursive(container);
    tvg::Initializer::term();
    return 0;
}

}

[ehopperdietzel]

I'm in!

[ehopperdietzel]

I like your idea of building a core library. Usually, there is a lot of code duplication between projects, especially for types like points, rects, regions, etc. So, creating a generic one that could be used by anyone would be great.

[colonelzkiller]

I sent you a message to your gmail account.

[ehopperdietzel]

I haven't received it, my email is [email protected]

[colonelzkiller]

I sen't you an email let me know if you received it.

[Fox2Code]

I read this, and honestly, this has the implications that Louvre could also be used in some sort of UI framework, UI automation and more.

I think only headless mode is needed for Louvre to fully unlock that potential.

Of course if such headless mode is added to Louvre/SRM, it should be disabled by default, and is probably not a priority for now.

@ehopperdietzel and @stevenlstarr what are your thoughts on this?

Even though it look a bit out of scope for Louvre, I think it is still interesting as a thought experiment.

[ehopperdietzel]

Oops, I hadn't seen this. We're discussing how to design a toolkit with @stevenlstarr. In my opinion, Louvre is too specialized for compositors. However, I believe that the ideas behind the scene and view system could be reused in the toolkit. We're analyzing it.

[Fox2Code]

I think Louvre could be used as a Wayland backend for a test toolkit as soon as SRM/Louvre has an headless backend, your current way of making Louvre is modular enough to make a test toolkit after that.

But I'm not convinced it should be the main priority for now, but by all means, if you are having fun doing it, go for it.

[ehopperdietzel]

Actually, I think it's simpler to use wayland-client. It's quite easy to integrate Skia on top of wayland-egl. I also tested Skia + SRM and it works perfectly, so I think Louvre can rest in peace where it is for now.