TEMPO UI

Premise

TempoUI was created as a middle ground between the user interface giants Qt and Dear ImGui. It is created as a retained-mode UI library similar to Qt, but adopts some aspects from ImGui alongside custom features designed for rapid iteration and development. In essence this library tries to bridge the runtime speed of a compiled Qt application and the development speed of an ImGui application.

Important Notes

To get started using this library there are some smaller features that have to be explained. Some features are disabled by default.

Tip

To enable optional features, add the relevant Preprocessor Definitions to your project

• GLFW_UI: Enables glfw for the inputs of the UI.
• OPENGL: Enables OpenGL as rendering backend.
• LAYOUT_LOADER: Enables JSON layout loading.
• NETWORK: Enables TCP networking features. Networking Documentation

This can also be achieved by defining a macro with the same names before the inclusion of "TempoUI.h". It is still recommended to use preprocessor definitions for consistency.

Planned:

• Improving Drag and Drop
• Adding support for Vulkan backend
• Adding support for SDL2

Getting Started

TempoUI itself doesn't include the capabilities of window management, therefore this has to be handled by you. TempoUI works out of its UIRenderer class and only really requires 4 function calls to work itself.

---

Minimal Working Example:

#include "TempoUI.h"

// Window context already created

UIRenderer ui_renderer(/*JSON theme data, if wanted (raw data)*/);
ui_renderer.init(window_width, window_height);
// Multiple input bindings will be added later, change GLFW with wanted handler
UI::GLFW::init_input(window_context);

// In run loop
if(ui_renderer.draw(delta_time))
{
	// swap buffers and other wanted logic
}

General Element Management

Element Creation:

ui_renderer.create_element<Type>(Arguments);

Element Removal:

ui_renderer.remove_element_from_canvas<Type>(identifier);

Element Access:

ui_renderer.get_element<Type>(identifier); // Gets a pointer to the element

---

Element-Element interaction

When rendering the UI, children will always render on top of its parents.

Element Creation:

element_ptr->create_child<Type>(Arguments);

or

element_ptr->add_child(/*Unique Pointer to a element*/);

Element Removal:

element_ptr->remove_element(identifier);

Element Access:

element_ptr->get_element<Type>(identifier); // Gets a pointer to the element

---

Element Types

• Containers: Canvas, Bordered Box, Horizontal Box, Vertical Box, Scroll Box, Wrap box, Combo box.
• Interactive: Button, Checkbox, Slider, Toggle Slider, Text Area, Input Box, Color Picker.
• Monitoring: Progress Bar, Graph View.
• Other: Image, Text.

---

JSON

Layout

The main way of handling UI within TempoUI is by utilizing its JSON layout functionality.

// This will load the layout if it exists or create it
ui_renderer.load_layout(/*json file name*/);

---

Hot-reloading Layout: If you want to hot-reload the layout of your UI, this is the way that it is intended.

// Bind a callback to layout change
ui_renderer.bind_layout_callback([](){
	/* 
		Elements with special properties
		Always use this for getting and binding properties if hot-reloading!
	*/
});

// Bind a key press to a function
ui_renderer.remove_element_from_canvas<Canvas>("Layout_Canvas");
ui_renderer.load_layout(/*json file name*/);

Layout Documentation

Theme

It is highly recommended to utilize a theme for your UI. Without a theme, every color needs to be coded in manually which is a hassle.

Loading theme initially

// During initialization
UIRenderer ui_renderer(/*JSON theme data, if wanted (raw data)*/);

Hot-reloading theme

// Before element creation
ThemeManager::get().load_theme(/*JSON theme data*/);
ui_renderer.get_element<Canvas>("Screen")->theme_updated();

Theme Documentation