The Hello Wayland Tutorial

TLDR

I’ve written a hello world for wayland. It’s available at:

https://gitlab.com/hdante/hello_wayland

Introduction

hello_wayland_screenshotFrom the end user perspective it’s very easy to understand what wayland is: it’s a new window system with the display server and window manager merged [1]. From a technical point of view, the goal of wayland is to break from legacy and implement an efficient window system with modern design for modern graphics usage, solving long standing efficiency problems and specific corner cases present in the X Window System [2]. This tutorial shows how to implement a hello world client application for wayland, explaining essential wayland concepts and all the steps required to create any fully working wayland client. The hello world application does not use any GUI toolkit, it directly uses the low level wayland protocol, so that the fundamental parts of wayland are described. The tutorial is a result of my own study of the wayland protocol. The tutorial is divided into 2 posts. This is the first post, that will explain all the concepts and the high level part of the hello world application.

What is wayland again ?

The complete design for the wayland window system is split into several layers. If you download the wayland library source code [3], or take a look at the wayland API [4], you will notice two layers:

  1. The most basic layer is an implementation of inter process communication functionality, together with a few utilities, like a main loop dispatcher and some data types. This is nearly all code present in the wayland library (everything inside the src directory [5]) and has almost no code related to window systems.
  2. The second layer is the window system protocol. Its description is located in a single file, protocol/wayland.xml [6], which should be considered the protocol written in an interface definition language. The IDL file can be passed through the wayland-scanner tool to generate proxy methods in wayland-client-protocol.h and wayland-server-protocol.h. The protocol defines the essential functionality for client applications and the display server, like providing access to input devices and registering shared buffers for displaying on the screen. The wayland library does not implement this protocol. Instead, implementation is split into a third separate layer. In particular the reference server side implementation is part of the weston display server [7], which in turn defines additional layers, both server and client side, to complete the set of wayland protocols. We don’t need to know anything about weston for the hello world application, though, the IDL file has all we need to implement the client-side protocol.

From the description of the wayland library given above, we have successfully found a third definition of wayland, it’s a (special purpose) IPC library, not unlike the D-Bus library, instead of a display server, and this lack of definition for what wayland really is, and how well defined the wayland protocols are and where, is present everywhere. I believe it’s common for people not understand what wayland is even after reading official documentation. I think that the three definitions given clarify the “what is wayland” problem and each can be used for different contexts.

Hello, World!

The introduction ended up rather large, so lets see the main hello world code at once:

#include 
#include 
#include 
#include 
#include 
#include 

#include "helpers.h"

static const unsigned WIDTH = 320;
static const unsigned HEIGHT = 200;
static const unsigned CURSOR_WIDTH = 100;
static const unsigned CURSOR_HEIGHT = 59;
static const int32_t CURSOR_HOT_SPOT_X = 10;
static const int32_t CURSOR_HOT_SPOT_Y = 35;

static bool done = false;

void on_button(uint32_t button)
{
    done = true;
}

int main(void)
{
    struct wl_buffer *buffer;
    struct wl_shm_pool *pool;
    struct wl_shell_surface *surface;
    int image;

    hello_setup_wayland();

    image = open("images.bin", O_RDWR);

    if (image < 0) {
        perror("Error opening surface image");
        return EXIT_FAILURE;
    }

    pool = hello_create_memory_pool(image);
    surface = hello_create_surface();
    buffer = hello_create_buffer(pool, WIDTH, HEIGHT);
    hello_bind_buffer(buffer, surface);
    hello_set_cursor_from_pool(pool, CURSOR_WIDTH,
        CURSOR_HEIGHT, CURSOR_HOT_SPOT_X, CURSOR_HOT_SPOT_Y);
    hello_set_button_callback(surface, on_button);

    while (!done) {
        if (wl_display_dispatch(display) < 0) {
            perror("Main loop error");
            done = true;
        }
    }

    fprintf(stderr, "Exiting sample wayland client...\n");

    hello_free_cursor();
    hello_free_buffer(buffer);
    hello_free_surface(surface);
    hello_free_memory_pool(pool);
    close(image);
    hello_cleanup_wayland();

    return EXIT_SUCCESS;
}

The wayland protocol is verbose, so I separated the code into two parts, one containing the protocol details and another, the main module, shown above, containing the high level "hello world" implementation. The main() function is written at algorithmic granularity and represents the complete set of steps necessary to communicate with the display server to display the hello world window and accept input from the pointer device, closing the application when clicked. A description of the relevant parts of the code follows:

#include "helpers.h"

The helper module contains the hello_* functions and a set of global objects present in wayland. The root global object is the display object, which represents the connection to the display server and is used for sending requests and receiving events. It is used in the code for running the main loop. The helpers module will be described in details in the next part of this tutorial.

static const unsigned WIDTH = 320;
static const unsigned HEIGHT = 200;
static const unsigned CURSOR_WIDTH = 100;
static const unsigned CURSOR_HEIGHT = 59;
static const int32_t CURSOR_HOT_SPOT_X = 10;
static const int32_t CURSOR_HOT_SPOT_Y = 35;

In this tutorial we display an image as the main window and another for the cursor. Their geometry is hardcoded. In a more general application, though, the values would be dinamically calculated.

void on_button(uint32_t button)
{
    done = true;
}

This is the button callback. Whenever a button is clicked, we set the done flag to true, which will allow us to leave the event loop in the main() function.

    hello_setup_wayland();

We begin the application calling a setup function, which connects to the display server and requests a collection of global objects from the server, filling in proxy variables representing them.

    image = open("images.bin", O_RDWR);

Then we open the image file. This image file contains the hardcoded images for the hello world application, already in a raw format for display: it’s the pixel values for the main window, followed by the pixel values for the cursor.

    pool = hello_create_memory_pool(image);

A main design philosophy of wayland is efficiency when dealing with graphics. Wayland accomplishes that by sharing memory areas between the client applications and the display server, so that no copies are involved. The essential element that is shared between client and server is called a shared memory pool, which is simply a memory area mmapped in both client and servers. Inside a memory pool, a set of images can be appended as buffer objects and all will be shared both by client and server.

In the hello world application we mmap our hardcoded image file. In a typical application, however, an empty memory pool would be created, for example, by creating a shared memory object with shm_open(), then gradually filled with dynamically constructed image buffers representing the widgets. While writing the hello world application I had to decide if I would create an empty memory pool and allocate buffers inside it, which is more usual and simpler to understand, or if I would use a less intuitive example of creating a pre built memory pool. I decided to go with the less intuitive example for an important reason: if you read the whole hello world source code, you’ll notice that there’s no memory copy operation anywhere. The image file is open once, and mmapped once. No extra copy is required. This was done to make clear that a wayland application can have maximal efficiency if carefully implemented.

    surface = hello_create_surface();

Objects representing visible elements are called surfaces. Surfaces are rectangular areas, having position and size. Surface contents are filled by using buffer objects. During the lifetime of a surface, a couple of buffers will be attached as the surface contents and the server will be requested to redraw the surfaces. In the hello world example, the surface object is of type wl_shell_surface, which is used for creating top level windows.

    buffer = hello_create_buffer(pool, WIDTH, HEIGHT);

The buffer object has the contents of a surface. Buffers are created inside of a memory pool (they are memory pool slices), so that they are shared by the client and the server. In our example, we do not create an empty buffer, instead we rely on the fact that the memory pool was previously filled with data and just pass the image dimensions as a parameter.

    hello_bind_buffer(buffer, surface);

To make the buffer visible we need to bind buffer data to a surface, that is, we set the surface contents to the buffer data. The bind operation also commits the surface to the server. In wayland there’s an idea of surface ownership: either the client owns the surface, so that it can be drawn (and the server keeps an old copy of it), or the server owns the surface, when the client can’t change it because the server is drawing it on the screen. For transfering the ownership to the server, there’s the commit request and for sending the ownership back to the client, the server sends a release event. In a generic application, the surface will be moved back and forth, but in the hello application it’s enough to commit only once, as part of the bind operation.

    hello_set_cursor_from_pool(pool, CURSOR_WIDTH,
        CURSOR_HEIGHT, CURSOR_HOT_SPOT_X, CURSOR_HOT_SPOT_Y);

After setting up the main window, we configure the cursor. This configuration is required: the client must configure the cursor. Here we set the cursor to be the preset contents of the memory pool (implicitly right after the main window buffer). The helper module then creates a surface and a buffer for the cursor. I had to decide if I would hide the cursor configuration in the helper module or if I would explicitly add a high level step for it. I dedided to go with the second one to show the division of roles in wayland: the client is given a large control over what and how to draw.

    hello_set_button_callback(surface, on_button);

The last configuration step is to set up a callback: associate a surface click with the on_button callback.

    while (!done) {
        if (wl_display_dispatch(display) < 0) {
            perror("Main loop error");
            done = true;
        }
    }

This calls the main loop with the global display object as the parameter. The main loop exits when the done flag is true, either because of an error, or because the button was clicked.

    hello_free_cursor();
    hello_free_buffer(buffer);
    hello_free_surface(surface);
    hello_free_memory_pool(pool);
    close(image);
    hello_cleanup_wayland();

The application finishes by cleaning up everything.

Conclusion

This was the first part of the hello world tutorial. A discussion abot what is wayland was presented and operation was described with help of a high level example. In the next part I’ll describe the helper functions in detail.

References

[1] http://wayland.freedesktop.org/architecture.html
[2] http://mirror.linux.org.au/linux.conf.au/2013/ogv/The_real_story_behind_Wayland_and_X.ogv
[3] http://cgit.freedesktop.org/wayland/wayland/tree/
[4] http://wayland.freedesktop.org/docs/html/
[5] http://cgit.freedesktop.org/wayland/wayland/tree/src
[6] http://cgit.freedesktop.org/wayland/wayland/tree/protocol/wayland.xml
[7] http://cgit.freedesktop.org/wayland/weston/tree/

22 thoughts on “The Hello Wayland Tutorial

  1. Reno Zyx

    Nice idea, thanks.
    Two things:
    – I would switch the line 41 and 42 as it looks a little strange to have the pool object treated at line 40 and 42 and to have a surface object created at line 41 with nothing done to it at line 42 but then used at line 43.
    – I find curious in your example is that nothing bind the surface to a display.. Did I miss something?

    Reply
  2. jerriclynsjohn

    Waiting for the 2nd tutorial, I’m delving into how to make a wayland compositor but I’m not sure where to start. It’s all confusing everywhere, I really wish if people like you would do the documentation for Wayland. Your explanation is giving me a foundation in this, can you please guide me in this/ write a blog to support the same.

    Reply
  3. Hyungchan Kim

    Thank you for the great tutorial.
    I found a typo “the values would be dinamically calculated”.

    Reply
  4. beroal

    Hello. Thank you for your example program. I don’t understand how do you calculate sizes.
    {{{
    data->capacity = stat.st_size;
    mmap(0, data->capacity*sizeof(pixel),
    wl_shm_create_pool(shm, data->fd,
    data->capacity*sizeof(pixel));
    }}}
    “capacity” is the size of the file “images.bin” in bytes. As far as I understand, you don’t transform graphics. The size arguments of “mmap” and “wl_shm_create_pool” are in bytes too. Why do you multiply it by “sizeof(pixel)”? Which is 4 because “typedef uint32_t pixel;”. BTW, what is the difference between the “capacity” and “size” fields of “struct pool_data”? They both seem like a size value.

    Reply
    1. hdante Post author

      Hello beroal, I don’t remember the code very well but I know the size calculation was messed up because I have switched multiple times between using byte counts and using pixel counts. In the mentioned example, I believe the code is bugged. The memory being allocated is much larger than what’s needed.

      In the code, capacity is the allocated size, while size represents only the useful data. The size may grow while using more memory up to the capacity.

      Reply
  5. zakaria

    Hi Hdante,
    I just come up with your post, i find it really great, thank you.
    by the way, did you find the time to make the part 2 of the tutorial ?

    Thanks,
    Zakaria

    Reply
  6. Yong Bakos

    Thanks for the great tutorial. I’m having trouble compiling this and am wondering if you might help point me in the right direction. The output of make is:

    cc -std=c11 -Wall -Werror -O3 -fvisibility=hidden -c -o hello_wayland.o hello_wayland.c
    hello_wayland.c:6:28: fatal error: wayland-client.h: No such file or directory

    The output of pkg-config wayland-client –cflags –libs is:
    -I/home/me/install/include -L/home/me/install/lib -lwayland-client

    And I do have waland-client.h in /home/me/install/include/. Any idea why I’m seeing the compilation error? (bash shell on Fedora 23)

    Reply
    1. hdante Post author

      It looks like you have a misconfiguration in your system. The makefile opens up a new shell when it calls pkg-config, but it’s not seeing, for example, your PKG_CONFIG_PATH environment variable (which means that your .bashrc or /etc/{profile,environment,etc.} is not working). You can confirm the problem if the following command works, or at least improves the situation:

      $ cc -std=c11 -Wall -Werror -O3 -fvisibility=hidden -c -o hello_wayland.o hello_wayland.c \
      -I/home/me/install/include -L/home/me/install/lib -lwayland-client

      Reply
      1. Yong Bakos

        Thank you! Yes, entering the cc command and options manually works (I did try that before in effort to troubleshoot before posting my comment, but apparently messed up the options). Hm, PKG_CONFIG_PATH is correct in my .bashrc and echo $PKG_CONFIG_PATH seems correct (/home/me/install/lib/pkgconfig/:/home/me/install/share/pkgconfig/).

        I’ll dig into this via other online forums, but if anything seems obviously wrong to you, I appreciate any tips. Thanks again for the hello_wayland tutorial!

  7. Yong Joseph Bakos

    In hello_setup_wayland, why is wl_display_connect passed NULL? Doesn’t a fd need to be obtained first, which should then be passed to wl_display_connect?

    Reply
    1. hdante Post author

      The minimum that the application should do is to connect to a wayland server with wl_display_connect(). When you receive a display object, you’re using wayland.

      To see on the shell if a wayland server is running, you can open a terminal and look for the WAYLAND_DISPLAY environment variable. If it’s not empty, then a wayland server should be running.

      Reply
  8. Pingback: Wayland, and Weston, and FreeBSD – oh my! | Bobulate

  9. Pingback: Hello Wayland — Wayland教程 – Robert's Blog

  10. Pingback: Wayland/Weston on Ubuntu14.04 を動かす | 全世界のIT記事

Leave a comment