njin
Engine 2D gọn nhẹ để tự tay làm game theo ý mình. Vibe coding cũng ổn luôn
Loading...
Searching...
No Matches
njin_ui_layout.h
1#pragma once
2#include "_math.h"
3#include "_types.h"
4#include "njin_json.h"
5#include "njin_ui.h"
6#include <functional>
7#include <string>
8#include <string_view>
9#include <vector>
10
11namespace njin {
12struct context;
13
16
31
35 std::string id;
36 std::string label;
37 std::string text;
38 bool enabled = true;
39
40 // Giá trị tương tác
41 bool bool_val = false;
42 f32 float_val = 0.0f;
43 f32 min_val = 0.0f;
44 f32 max_val = 1.0f;
45 f32 step = 0.0f;
46 bool percent = false;
47
49 std::vector<std::string> options;
50
51 // Kích thước & bố cục
52 f32 height = 10.0f;
54
55 // Ảnh (kind == image)
56 std::string texture_path;
58 vec2 size{64.0f, 64.0f};
60
61 // Vòng tiến độ (kind == circle): dùng thêm float_val, text và percent
62 f32 diameter = 96.0f;
63 f32 thickness = 10.0f;
65 bool clockwise = true;
66 bool round_caps = false;
67 bool show_track = true;
68 rgba track_color{0.0f, 0.0f, 0.0f, 0.0f};
69 rgba fill_color{0.0f, 0.0f, 0.0f, 0.0f};
70
71 // Keybind (kind == keybind)
72 std::string action_name;
73 bool pad = false;
74
75 // Trạng thái frame vừa qua
76 bool clicked = false;
77 bool changed = false;
78};
79
82 std::string id = "panel";
83 std::string title;
84 vec2 anchor{0.5f, 0.5f};
85 vec2 pivot{0.5f, 0.5f};
86 vec2 offset{0.0f, 0.0f};
87 f32 width = 0.0f;
88 bool background = true;
89 bool visible = true;
90 std::vector<ui_widget_data> widgets;
91
95 ui_widget_data *find_widget(std::string_view widget_id);
97 const ui_widget_data *find_widget(std::string_view widget_id) const;
98};
99
102 std::string id = "popup";
103 std::string title;
104 std::string message;
105 std::vector<std::string> buttons{"OK"};
108 f32 width = 0.0f;
109 bool open = false;
110};
111
113struct ui_layout {
115 vec2 design_resolution{1280.0f, 720.0f};
117 bool custom_style = false;
118 std::vector<ui_panel_data> panels;
119 std::vector<ui_popup_data> popups;
120
124 ui_panel_data *find_panel(std::string_view panel_id);
126 const ui_panel_data *find_panel(std::string_view panel_id) const;
127
131 ui_widget_data *find_widget(std::string_view widget_id);
133 const ui_widget_data *find_widget(std::string_view widget_id) const;
134
138 ui_popup_data *find_popup(std::string_view popup_id);
140 const ui_popup_data *find_popup(std::string_view popup_id) const;
141};
142
152
153 const char *panel_id = "";
156 const char *widget_id = "";
157 bool bool_val = false;
158 f32 float_val = 0.0f;
160};
161
163using ui_event_callback = std::function<void(const ui_layout_event &)>;
164
168
174bool ui_layout_load(context &ctx, const char *path, ui_layout &out);
175
180bool ui_layout_parse(const json_value &json, ui_layout &out);
181
186
192bool ui_layout_save(const char *path, const ui_layout &layout, bool pretty = true);
193
202bool ui_draw_panel(context &ctx, ui_layout &layout, const char *panel_id,
203 const ui_event_callback &on_event = nullptr);
204
210void ui_draw_layout(context &ctx, ui_layout &layout,
211 const ui_event_callback &on_event = nullptr);
212
213// --- Các hàm tiện ích đọc / ghi trạng thái widget ---
214
219bool ui_layout_is_clicked(const ui_layout &layout, const char *widget_id);
220
226bool ui_layout_get_bool(const ui_layout &layout, const char *widget_id, bool fallback = false);
227
232void ui_layout_set_bool(ui_layout &layout, const char *widget_id, bool value);
233
239f32 ui_layout_get_float(const ui_layout &layout, const char *widget_id, f32 fallback = 0.0f);
240
245void ui_layout_set_float(ui_layout &layout, const char *widget_id, f32 value);
246
252i32 ui_layout_get_int(const ui_layout &layout, const char *widget_id, i32 fallback = 0);
253
258void ui_layout_set_int(ui_layout &layout, const char *widget_id, i32 value);
259
265const char *ui_layout_get_text(const ui_layout &layout, const char *widget_id, const char *fallback = "");
266
271void ui_layout_set_text(ui_layout &layout, const char *widget_id, const char *text);
272
277std::string ui_layout_generate_cpp(const ui_layout &layout, const char *func_name = "draw_ui");
278
283std::string ui_panel_generate_cpp(const ui_panel_data &panel, const char *func_name = "draw_panel");
284
286} // namespace njin
std::int32_t i32
Số nguyên có dấu 32 bit.
Definition _types.h:14
float f32
Số thực 32 bit.
Definition _types.h:28
bool ui_draw_panel(context &ctx, ui_layout &layout, const char *panel_id, const ui_event_callback &on_event=nullptr)
Vẽ một panel cụ thể trong layout.
void ui_layout_set_int(ui_layout &layout, const char *widget_id, i32 value)
Gán index cho choice.
bool ui_layout_save(const char *path, const ui_layout &layout, bool pretty=true)
Ghi bố cục UI ra file JSON.
void ui_draw_layout(context &ctx, ui_layout &layout, const ui_event_callback &on_event=nullptr)
Vẽ tất cả các panel có cờ visible == true và các popup đang open.
f32 ui_layout_get_float(const ui_layout &layout, const char *widget_id, f32 fallback=0.0f)
Đọc giá trị float của slider hoặc progress.
ui_style ui_pixel_style()
Style pixel-art tiêu chuẩn của njin (góc vuông phẳng, kích thước nhỏ gọn 16px).
bool ui_layout_is_clicked(const ui_layout &layout, const char *widget_id)
Kiểm tra nút có vừa được bấm trong lần vẽ gần nhất hay không.
std::function< void(const ui_layout_event &)> ui_event_callback
Kiểu hàm callback khi có sự kiện UI.
Definition njin_ui_layout.h:163
void ui_layout_set_text(ui_layout &layout, const char *widget_id, const char *text)
Gán nhãn/văn bản cho widget.
bool ui_layout_parse(const json_value &json, ui_layout &out)
Phân tích dữ liệu JSON thành ui_layout.
std::string ui_panel_generate_cpp(const ui_panel_data &panel, const char *func_name="draw_panel")
Sinh mã nguồn C++ cho một panel.
bool ui_layout_load(context &ctx, const char *path, ui_layout &out)
Nạp bố cục UI từ file JSON.
bool ui_layout_get_bool(const ui_layout &layout, const char *widget_id, bool fallback=false)
Đọc giá trị bool của toggle.
ui_style ui_default_style()
Giao diện mặc định: panel tối trong suốt, nút bo góc, màu nhấn xanh.
ui_widget_kind
Loại widget trong layout UI khai báo.
Definition njin_ui_layout.h:18
i32 ui_layout_get_int(const ui_layout &layout, const char *widget_id, i32 fallback=0)
Đọc index của choice.
json_value ui_layout_to_json(const ui_layout &layout)
Chuyển đổi ui_layout thành json_value để lưu file.
void ui_layout_set_bool(ui_layout &layout, const char *widget_id, bool value)
Gán giá trị bool cho toggle.
void ui_layout_set_float(ui_layout &layout, const char *widget_id, f32 value)
Gán giá trị float cho slider hoặc progress.
const char * ui_layout_get_text(const ui_layout &layout, const char *widget_id, const char *fallback="")
Đọc nhãn/văn bản của widget.
std::string ui_layout_generate_cpp(const ui_layout &layout, const char *func_name="draw_ui")
Sinh mã nguồn C++ gọi njin::ui_* từ ui_layout hoặc ui_panel_data.
@ choice
Danh sách lựa chọn.
Definition njin_ui_layout.h:24
@ slider
Thanh trượt giá trị.
Definition njin_ui_layout.h:23
@ progress
Thanh tiến độ.
Definition njin_ui_layout.h:25
@ toggle
Công tắc bật/tắt.
Definition njin_ui_layout.h:22
@ image
Ảnh tĩnh.
Definition njin_ui_layout.h:26
@ keybind
Dòng gán phím điều khiển.
Definition njin_ui_layout.h:28
@ button
Nút bấm.
Definition njin_ui_layout.h:21
@ label
Dòng chữ.
Definition njin_ui_layout.h:19
@ row
Xếp hàng ngang cho các widget tiếp theo.
Definition njin_ui_layout.h:27
@ space
Khoảng trống dọc.
Definition njin_ui_layout.h:20
Hình tròn.
Definition _math.h:19
Một giá trị JSON: null, bool, số, chuỗi, mảng hoặc object.
Definition njin_json.h:33
Hình chữ nhật thẳng trục: pos là góc trên trái, size là rộng và cao.
Definition _math.h:13
Màu gồm đỏ, xanh lá, xanh dương và alpha.
Definition _types.h:64
Định danh của một texture, tạo bởi texture_load().
Definition _types.h:146
Sự kiện UI phát ra khi người dùng tương tác với widget.
Definition njin_ui_layout.h:144
i32 int_val
Lựa chọn mới của choice, hoặc nút đã bấm của popup.
Definition njin_ui_layout.h:159
f32 float_val
Giá trị mới của slider.
Definition njin_ui_layout.h:158
const char * widget_id
ID của widget, hoặc của popup với popup_dismissed.
Definition njin_ui_layout.h:156
bool bool_val
Giá trị mới của toggle.
Definition njin_ui_layout.h:157
enum njin::ui_layout_event::kind_t kind
Loại sự kiện.
const char * panel_id
ID của panel chứa widget.
Definition njin_ui_layout.h:153
kind_t
Loại sự kiện.
Definition njin_ui_layout.h:146
@ button_clicked
Nút được bấm.
Definition njin_ui_layout.h:148
@ value_changed
Giá trị đổi (toggle, slider, choice).
Definition njin_ui_layout.h:149
@ popup_dismissed
Popup đóng (chọn một nút hoặc bấm Back).
Definition njin_ui_layout.h:150
Toàn bộ bố cục UI nạp từ file JSON hoặc xuất từ editor.
Definition njin_ui_layout.h:113
ui_widget_data * find_widget(std::string_view widget_id)
Tìm widget theo ID trên toàn bộ các panel.
vec2 design_resolution
Độ phân giải thiết kế chuẩn.
Definition njin_ui_layout.h:115
i32 version
Phiên bản cấu trúc data UI.
Definition njin_ui_layout.h:114
ui_popup_data * find_popup(std::string_view popup_id)
Tìm popup theo ID.
ui_style style
Style giao diện mặc định.
Definition njin_ui_layout.h:116
const ui_widget_data * find_widget(std::string_view widget_id) const
Tìm widget theo ID trên toàn bộ các panel.
bool custom_style
Có áp dụng custom style trong layout không.
Definition njin_ui_layout.h:117
ui_panel_data * find_panel(std::string_view panel_id)
Tìm panel theo ID.
std::vector< ui_panel_data > panels
Danh sách các panel.
Definition njin_ui_layout.h:118
std::vector< ui_popup_data > popups
Danh sách các popup.
Definition njin_ui_layout.h:119
const ui_panel_data * find_panel(std::string_view panel_id) const
Tìm panel theo ID.
const ui_popup_data * find_popup(std::string_view popup_id) const
Tìm popup theo ID.
Dữ liệu của một panel chứa danh sách widget.
Definition njin_ui_layout.h:81
std::string title
Tiêu đề ở đầu panel.
Definition njin_ui_layout.h:83
const ui_widget_data * find_widget(std::string_view widget_id) const
Tìm widget theo ID trong panel này.
std::vector< ui_widget_data > widgets
Danh sách các widget trong panel.
Definition njin_ui_layout.h:90
vec2 pivot
Điểm đặt của panel vào anchor ({0.5, 0.5} là tâm).
Definition njin_ui_layout.h:85
vec2 offset
Độ dời pixel từ anchor.
Definition njin_ui_layout.h:86
bool background
Có vẽ nền panel hay không.
Definition njin_ui_layout.h:88
bool visible
Hiển thị panel khi vẽ layout.
Definition njin_ui_layout.h:89
f32 width
Chiều rộng panel (0 là dùng ui_style::width).
Definition njin_ui_layout.h:87
ui_widget_data * find_widget(std::string_view widget_id)
Tìm widget theo ID trong panel này.
vec2 anchor
Tỉ lệ neo trên màn hình ({0.5, 0.5} là giữa).
Definition njin_ui_layout.h:84
Dữ liệu của một popup thông báo hoặc xác nhận.
Definition njin_ui_layout.h:101
bool open
Trạng thái đang mở hay đóng.
Definition njin_ui_layout.h:109
std::string title
Tiêu đề.
Definition njin_ui_layout.h:103
std::vector< std::string > buttons
Nhãn các nút, tối đa 4.
Definition njin_ui_layout.h:105
std::string message
Nội dung, tự xuống dòng.
Definition njin_ui_layout.h:104
i32 default_button
Nút được chọn sẵn khi mở.
Definition njin_ui_layout.h:106
i32 cancel_button
Nút trả về khi bấm quay lại, -1 là không có.
Definition njin_ui_layout.h:107
f32 width
Chiều rộng (0 là dùng ui_style::width).
Definition njin_ui_layout.h:108
Toàn bộ giao diện của UI: phông chữ, kích thước, diện mạo từng loại widget, âm thanh.
Definition njin_ui.h:54
Dữ liệu cấu hình và trạng thái của một widget.
Definition njin_ui_layout.h:33
std::string texture_path
Đường dẫn file ảnh.
Definition njin_ui_layout.h:56
bool bool_val
Trạng thái toggle.
Definition njin_ui_layout.h:41
f32 start_angle
Điểm bắt đầu, độ từ đỉnh theo chiều kim đồng hồ.
Definition njin_ui_layout.h:64
f32 height
Chiều cao (dùng cho kind == space).
Definition njin_ui_layout.h:52
bool show_track
Vẽ vòng nền.
Definition njin_ui_layout.h:67
i32 int_val
Lựa chọn hiện tại của choice (index).
Definition njin_ui_layout.h:48
i32 columns
Số cột (dùng cho kind == row).
Definition njin_ui_layout.h:53
rect source
Vùng cắt trong ảnh.
Definition njin_ui_layout.h:59
f32 thickness
Độ dày vòng.
Definition njin_ui_layout.h:63
rgba fill_color
Màu phần đầy. Alpha 0: dùng style.
Definition njin_ui_layout.h:69
bool clicked
Vừa được bấm trong frame này (đối với button).
Definition njin_ui_layout.h:76
std::string id
Mã định danh duy nhất (dùng để truy vấn sự kiện/giá trị).
Definition njin_ui_layout.h:35
std::string action_name
Tên action cần rebind.
Definition njin_ui_layout.h:72
bool clockwise
false: đầy dần ngược chiều kim đồng hồ.
Definition njin_ui_layout.h:65
bool pad
Rebind nút tay cầm thay vì phím.
Definition njin_ui_layout.h:73
f32 min_val
Giá trị nhỏ nhất của slider.
Definition njin_ui_layout.h:43
std::vector< std::string > options
Các lựa chọn cho choice.
Definition njin_ui_layout.h:49
bool round_caps
Hai đầu phần đầy bo tròn.
Definition njin_ui_layout.h:66
f32 diameter
Đường kính vòng.
Definition njin_ui_layout.h:62
std::string text
Chuỗi phụ hoặc chữ vẽ trên progress bar.
Definition njin_ui_layout.h:37
std::string label
Nhãn hiển thị trên widget (hỗ trợ ## để ẩn id).
Definition njin_ui_layout.h:36
texture_handle texture
Handle ảnh khi đã nạp.
Definition njin_ui_layout.h:57
f32 max_val
Giá trị lớn nhất của slider.
Definition njin_ui_layout.h:44
f32 float_val
Giá trị slider hoặc progress (0..1).
Definition njin_ui_layout.h:42
f32 step
Bước nhảy của slider.
Definition njin_ui_layout.h:45
bool changed
Giá trị vừa thay đổi trong frame này (slider, toggle, choice).
Definition njin_ui_layout.h:77
vec2 size
Kích thước vẽ ảnh.
Definition njin_ui_layout.h:58
ui_widget_kind kind
Loại widget.
Definition njin_ui_layout.h:34
rgba track_color
Màu vòng nền. Alpha 0: dùng style.
Definition njin_ui_layout.h:68
bool enabled
Trạng thái kích hoạt.
Definition njin_ui_layout.h:38
bool percent
Hiển thị dạng % thay vì con số (slider, circle).
Definition njin_ui_layout.h:46
Vector 2 chiều. Dùng cho vị trí, kích thước, độ dời.
Definition _types.h:39