2023-06-19 15:44:38 +00:00
# zgui v1.89.6 - dear imgui bindings
2022-12-31 06:40:03 +00:00
2024-01-16 23:53:07 +00:00
Easy to use, hand-crafted API with default arguments, named parameters and Zig style text formatting. [Here ](https://github.com/michal-z/zig-gamedev/tree/main/samples/minimal_zgpu_zgui ) is a simple sample application, and [here ](https://github.com/michal-z/zig-gamedev/tree/main/samples/gui_test_wgpu ) is a full one.
2022-12-31 06:40:03 +00:00
## Features
* Most public dear imgui API exposed
* All memory allocations go through user provided Zig allocator
* [DrawList API ](#drawlist-api ) for vector graphics, text rendering and custom widgets
* [Plot API ](#plot-api ) for advanced data visualizations
## Getting started
2024-02-09 06:53:23 +00:00
Copy `zgui` folder to a `libs` subdirectory of the root of your project and add the following to your `build.zig.zon` .dependencies:
```zig
.zgui = .{ .path = "libs/zgui" },
2024-01-16 23:53:07 +00:00
```
2022-12-31 06:40:03 +00:00
2024-02-09 06:53:23 +00:00
To get glfw/wgpu rendering backend working also copy `zgpu` , `zglfw` , `zpool` and `system-sdk` folders and add the depenency paths (see [zgpu ](https://github.com/zig-gamedev/zig-gamedev/tree/main/libs/zgpu ) for the details). Alternatively, you can provide your own rendering backend by specifying `.no_backend` in the package options.
2022-12-31 06:40:03 +00:00
Then in your `build.zig` add:
```zig
2024-02-09 06:53:23 +00:00
const zgui = @import ("zgui");
2022-12-31 06:40:03 +00:00
// Needed for glfw/wgpu rendering backend
2024-02-09 06:53:23 +00:00
const zglfw = @import ("zglfw");
const zgpu = @import ("zgpu");
const zpool = @import ("zpool");
2022-12-31 06:40:03 +00:00
2023-02-07 23:23:40 +00:00
pub fn build(b: *std.Build) void {
2022-12-31 06:40:03 +00:00
...
2023-03-27 00:24:04 +00:00
const optimize = b.standardOptimizeOption(.{});
const target = b.standardTargetOptions(.{});
const zgui_pkg = zgui.package(b, target, optimize, .{
2023-02-07 23:23:40 +00:00
.options = .{ .backend = .glfw_wgpu },
});
2022-12-31 06:40:03 +00:00
2023-03-27 00:24:04 +00:00
zgui_pkg.link(exe);
2022-12-31 06:40:03 +00:00
// Needed for glfw/wgpu rendering backend
2023-03-27 00:24:04 +00:00
const zglfw_pkg = zglfw.package(b, target, optimize, .{});
const zpool_pkg = zpool.package(b, target, optimize, .{});
const zgpu_pkg = zgpu.package(b, target, optimize, .{
.deps = .{ .zpool = zpool_pkg.zpool, .zglfw = zglfw_pkg.zglfw },
2023-02-07 23:23:40 +00:00
});
2022-12-31 06:40:03 +00:00
2023-03-27 00:24:04 +00:00
zglfw_pkg.link(exe);
zgpu_pkg.link(exe);
2022-12-31 06:40:03 +00:00
}
```
2024-01-16 23:53:07 +00:00
You may also include zgui without bundled imgui or implot:
```zig
// In build.zig
const pkg = zgui.package(b, exe.target, .ReleaseSafe, .{
.options = .{
.backend = .no_backend,
.with_imgui = false,
.with_implot = false,
},
});
const lib = pkg.zgui_c_cpp;
lib.defineCMacro("IMGUI_USER_CONFIG",
\\"../imconfig_custom.h"
);
lib.addIncludePath("lib/imgui");
```
2022-12-31 06:40:03 +00:00
Now in your code you may import and use `zgui` :
2024-01-16 23:53:07 +00:00
2022-12-31 06:40:03 +00:00
```zig
const zgui = @import ("zgui");
zgui.init(allocator);
_ = zgui.io.addFontFromFile(content_dir ++ "Roboto-Medium.ttf", 16.0);
zgui.backend.init(
window,
demo.gctx.device,
@enumToInt (swapchain_format),
2024-02-09 06:53:23 +00:00
@enumToInt (depth_format),
2022-12-31 06:40:03 +00:00
);
```
```zig
// Main loop
while (...) {
zgui.backend.newFrame(framebuffer_width, framebuffer_height);
zgui.bulletText(
"Average : {d:.3} ms/frame ({d:.1} fps)",
.{ demo.gctx.stats.average_cpu_time, demo.gctx.stats.fps },
);
zgui.bulletText("W, A, S, D : move camera", .{});
zgui.spacing();
if (zgui.button("Setup Scene", .{})) {
// Button pressed.
}
if (zgui.dragFloat("Drag 1", .{ .v = & value0 })) {
// value0 has changed
}
if (zgui.dragFloat("Drag 2", .{ .v = & value0, .min = -1.0, .max = 1.0 })) {
// value1 has changed
}
// Setup wgpu render pass here
zgui.backend.draw(pass);
}
```
2023-03-27 00:24:04 +00:00
### Building a shared library
If your project spans multiple zig modules that both use ImGui, such as an exe paired with a dll, you may want to build the `zgui` dependencies (`zgui_pkg.zgui_c_cpp`) as a shared library. This can be enabled with the `shared` build option. Then, in `build.zig` , use `zgui_pkg.link` to link `zgui` to all the modules that use ImGui.
When built this way, the ImGui context will be located in the shared library. However, the `zgui` zig code (which is compiled separately into each module) requires its own memory buffer which has to be initialized separately with `initNoContext` .
In your executable:
```zig
const zgui = @import ("zgui");
zgui.init(allocator);
defer zgui.deinit();
```
In your shared library:
```zig
const zgui = @import ("zgui");
zgui.initNoContext(allocator);
defer zgui.deinitNoContxt();
```
2022-12-31 06:40:03 +00:00
### DrawList API
```zig
draw_list.addQuad(.{
.p1 = .{ 170, 420 },
.p2 = .{ 270, 420 },
.p3 = .{ 220, 520 },
.p4 = .{ 120, 520 },
.col = 0xff_00_00_ff,
.thickness = 3.0,
});
draw_list.addText(.{ 130, 130 }, 0xff_00_00_ff, "The number is: {}", .{7});
draw_list.addCircleFilled(.{ .p = .{ 200, 600 }, .r = 50, .col = 0xff_ff_ff_ff });
draw_list.addCircle(.{ .p = .{ 200, 600 }, .r = 30, .col = 0xff_00_00_ff, .thickness = 11 });
draw_list.addPolyline(
& .{ .{ 100, 700 }, .{ 200, 600 }, .{ 300, 700 }, .{ 400, 600 } },
.{ .col = 0xff_00_aa_11, .thickness = 7 },
);
```
### Plot API
```zig
if (zgui.plot.beginPlot("Line Plot", .{ .h = -1.0 })) {
zgui.plot.setupAxis(.x1, .{ .label = "xaxis" });
zgui.plot.setupAxisLimits(.x1, .{ .min = 0, .max = 5 });
zgui.plot.setupLegend(.{ .south = true, .west = true }, .{});
zgui.plot.setupFinish();
zgui.plot.plotLineValues("y data", i32, .{ .v = & .{ 0, 1, 0, 1, 0, 1 } });
zgui.plot.plotLine("xy data", f32, .{
.xv = & .{ 0.1, 0.2, 0.5, 2.5 },
.yv = & .{ 0.1, 0.3, 0.5, 0.9 },
});
zgui.plot.endPlot();
}
```