ZUIL

Caution

WIP

Important

not tested on windows
and the build.zig links some libraries as system libraries
which i assume doesnt work on windows

---

ZUIL (Zig UI Library)

basic ui framework made with zig
using zglfw, zopengl, plutosvg/plutovg and freetype (no text rendering yet)

the include directory has headers for plutosvg/plutovg instead of using the system installed headers mainly to stop zls from giving false errors

---

container, list(row/column) and icon widgets

features/done

• modular widget system
• asset and shader registries/managers
• icon rendering
• input system (keyboard and mouse only)

missing features/todo

• text rendering
• more optimized rendering
• and more

examples

widgets

widgets are created using builder functions (the functions will probably change in the future)

// .c for common builder functions
widgets.container()
.c.size(.{.dp = 1200}, .{.percentage = 1})
.color(colors.WHITE)
.child(
	widgets.list()
	.c.size(.fill(), .fill()) // fill is same as .{.percentage = 1}
	.direction(.vertical)
	.spacing(1)
	.children(.{
		widgets.icon()
		.c.size(.{.dp = 200}, .{.dp = 200})
		.c.keepSizeRatio(true)
		.icon("icon.svg")
		.build(),
		widgets.container()
		.c.size(.{.dp = 50}, .{.dp = 30})
		.c.eventCallback(containerClick) // fn (*ZWidget, ZEvent) anyerror!void
		.color(colors.rgb(0, 1.0, 0.5))
		.build(),
		widgets.container()
		.c.size(.{.pixel = 50}, .{.dp = 30})
		.build(),
		widgets.container()
		.c.size(.{.mm = 50}, .{.dp = 30})
		.build(),
		widgets.container()
		.c.size(.{.percentage = 0.5}, .{.dp = 30})
		.build(),
	})
	.build()
)
.build();

example/test project

the test/example project is in the test directory
build and run with ./test.sh or ./test.sh -Ddebug or build manually

keybinds:

• space: change the layout
• F1: spawn a new window

(the blue widget under the icon widget is clickable)

technical info

window processing order/logic

1. process input from queue
   1. send to global input handler
   2. if input was let through
      • send keyboard input to focused widget
      • send mouse input to hovered widget
2. if the windows layout is marked dirty check
   • if root widgets layout is dirty then recalculate the whole tree
   • if root widget is not dirty go down a step with no recalculation
     • if a child widget is dirty recalculate layout from that widget down
     • else continue doing down
3. if the windows render is marked dirty
   • render entire widget tree (the plan is to only render widgets inside a dirty area)