Web User Interface

WUI was developed over several years as it became increasingly clear that the mission it set out to solve would require some serious infrastructure.

WUI internally uses webkit within the Chromium Embedded Framework (CEF). CEF does not have a lot to do with chromium itself; CEF is a framework for browser-creation that exposes the blink engine with C++ bindings.

For parsing events and data, the nlohmann/json library is used.

The core facilitates the main communication between the subprocess (UI) and the main program. It's responsible for most system-wide settings, debugging (can be found here) tools and the main event loop. The structure of its subprocess allows it to easily handle multiple UIs at once and work in a multi-threaded environment.

As a comparison, Ultralight is not thread safe in comparison to WUI.

WUI completly decouples the UI from the main program, allowing for a more modular and flexible approach to UI design. The core also handles keyboard, mouse and screen events (e.g. resizing). For a hands-on examples see the example projects.

For up-to-date type definitions see the docs of the current release you are using or the source code.

Disclaimer: I take no credit for the work of these amazing libraries or components they themselves might depend on!

Project overview

These pages are meant to give a 'behind the scenes' of the internal workings of WUI.

WUI has grown into a few projects that are interlinked to reduce code-duplication. With the exception of the core, all projects are open-source and can be found on gitlab.

All the libraries/extensions that can be downloaded can also be found at static.zweieuro.at.

The core projects are written in C++ and compiled with cmake. To include packages that a project may depend on the vcpkg tool is used to manage dependencies. On linux it's compiled with gcc while on windows it uses msvc.

Dependency graph

This mermaid diagram shows the dependencies of different projects in their current state. In paranthesis next to the project is the language it is primarily written in.

Every project is set-up in such a way that:

1. You can use the project immediately and it will download any dependencies that it might have as pre-compiled libraries.
2. You can compile everything (the entire chain) yourself. In this case you will need to fetch all submodules (this is quite simple but it assumes you have access to the WUI core).

Not in this graph:

• The godot extension also uses godot-cpp and godot-engine
• The node project uses a lot of other modules inside of it, but they are not shown here, see the projects package.json for details.
• The dev project is not shown in this graph. It depends on virtually everything outside of the vivaci UI and is only used for testing and debugging the extension and WUI in one go.
• While files might differ, the same dependencies apply for the windows version of the projects.

Core Group

The Core group is the central functionality of the system.

Core

The core of WUI is the actual library that handles the bulk of the functionality. It is written in C++ and based on the brilliant CEF library. The json parsing functionality is provided by nlohmann/json.

Unless you are a programmer/maintainer of WUI you will not have access to its source code.

Docusaursu

This is the website you are currently viewing. It is based on the Docusaurus framework and aims to explain WUI and facilitate its broad adoption and systems.

Godot extension

This project is the source code for binding WUI to the Godot game engine. It's based on the godot-rougelike library template. Which itself is based on godot-cpp (the bindings) and the engine source code for compilation.

Special thanks to vorlac who has been a great help in getting this extension off the ground.

Node Module

This is a fully working node-module that can be used with npm in any existing node/typescript project (or any existing website). It binds into the global functions that are provded by the core and simplifies the communication with it. Parsing and all lower functions are done automatically.

Without this module you are going to run into a lot of issues when trying to bind to the core functions since its very low level, but the code is open for anyone who is interested. This project also boasts automatic code type generation, code coverage and testing.

html and UI Group

The UI group is used for the actual UI that any program/game may be using. They are provided as tempaltes.

bouncing objects

This is a simple example UI that shows a few different input/user interaction fields. It's used for testing and debugging. It has automated testing and a fully setup pipeline. The coverage is 100% and it shows how automated testing can be done using WUIs data system. If you make a new UI you should use this as a template.

note

As of 0.1.14 the 'bouncing objects' project is archived and read only. It is still available for download but will not be updated.

Vivaci UI

The UI is for the brilliant Allegro Vivace tutorial.

Projects group

These are different projects that are based on the core and the UI group.

Bouncing objects CPP

This is a simple project that uses the core and the bouncing objects UI. It's a good starting point for anyone who wants to use WUI in their project. It's written in C++ and uses the CMake build system, it links into wui as a library.

note

As of 0.1.14 the 'bouncing objects' project is archived and read only. It is still available for download but will not be updated.

Bouncing objects godot

This is the same as the C++ project but for the Godot engine. It uses the Godot extension and the bouncing objects UI.

note

As of 0.1.14 the 'bouncing objects' project is archived and read only. It is still available for download but will not be updated.

Vivaci Cpp

This project is the gameplay implementation of Allegro Vivace tutorial written in C++. It uses the Vivaci UI and the core.

Vivaci Godot

This is the same as the C++ project but for the Godot engine. It uses the Godot extension and the Vivaci UI.