指示控件¶

概述¶

指示控件用于以图形化方式展示数值、方向和状态信息，适用于仪表盘、传感器监控、工业控制等嵌入式场景。包括仪表盘、刻度尺、指南针、心率和 LED 指示灯五个控件。

Gauge¶

弧形仪表盘控件，通过弧形进度条和指针显示 0-100 的数值。

效果展示¶

API¶

函数	说明
`egui_view_gauge_init(self, core)`	初始化仪表盘
`egui_view_gauge_init_with_params(self, core, params)`	使用参数初始化
`egui_view_gauge_set_value(self, value)`	设置数值(0-100)

参数宏¶

EGUI_VIEW_GAUGE_PARAMS_INIT(name, x, y, w, h, value);

结构体字段¶

字段	类型	说明
`value`	`uint8_t`	当前值(0-100)
`stroke_width`	`egui_dim_t`	弧线宽度
`start_angle`	`int16_t`	起始角度(默认 150, 约 7 点钟方向)
`sweep_angle`	`int16_t`	扫过角度(默认 240)
`bk_color`	`egui_color_t`	背景弧线颜色
`progress_color`	`egui_color_t`	进度弧线颜色
`needle_color`	`egui_color_t`	指针颜色

代码示例¶

static egui_view_gauge_t gauge;

EGUI_VIEW_GAUGE_PARAMS_INIT(gauge_params, 10, 10, 100, 100, 75);

void init_ui(egui_core_t *core)
{
    egui_view_gauge_init_with_params(EGUI_VIEW_OF(&gauge), core, &gauge_params);
    egui_core_add_user_root_view(core, EGUI_VIEW_OF(&gauge));
}

void update_gauge(uint8_t val)
{
    egui_view_gauge_set_value(EGUI_VIEW_OF(&gauge), val);
}

Scale¶

刻度尺控件，显示带有主/次刻度线的线性标尺，支持水平和垂直方向，可选数值标签和指示器。

效果展示¶

在线演示

API¶

函数	说明
`egui_view_scale_init(self, core)`	初始化刻度尺
`egui_view_scale_init_with_params(self, core, params)`	使用参数初始化
`egui_view_scale_set_range(self, min, max)`	设置量程范围
`egui_view_scale_set_value(self, value)`	设置当前值
`egui_view_scale_set_ticks(self, major_count, minor_count)`	设置主/次刻度数量
`egui_view_scale_set_orientation(self, is_horizontal)`	设置方向(0=垂直, 1=水平)
`egui_view_scale_set_tick_color(self, color)`	设置刻度颜色
`egui_view_scale_set_label_color(self, color)`	设置标签颜色
`egui_view_scale_set_indicator_color(self, color)`	设置指示器颜色
`egui_view_scale_show_labels(self, show)`	显示/隐藏数值标签
`egui_view_scale_show_indicator(self, show)`	显示/隐藏指示器
`egui_view_scale_set_font(self, font)`	设置标签字体

参数宏¶

EGUI_VIEW_SCALE_PARAMS_INIT(name, x, y, w, h, min, max, major_tick_count);

代码示例¶

static egui_view_scale_t scale;

EGUI_VIEW_SCALE_PARAMS_INIT(scale_params, 10, 10, 200, 40, 0, 100, 5);

void init_ui(egui_core_t *core)
{
    egui_view_scale_init_with_params(EGUI_VIEW_OF(&scale), core, &scale_params);
    egui_view_scale_set_ticks(EGUI_VIEW_OF(&scale), 5, 4);
    egui_view_scale_set_orientation(EGUI_VIEW_OF(&scale), 1);
    egui_view_scale_show_labels(EGUI_VIEW_OF(&scale), 1);
    egui_view_scale_show_indicator(EGUI_VIEW_OF(&scale), 1);
    egui_view_scale_set_value(EGUI_VIEW_OF(&scale), 60);
    egui_core_add_user_root_view(core, EGUI_VIEW_OF(&scale));
}

Compass¶

指南针控件，显示圆形表盘和方向指针，支持角度文字显示。

效果展示¶

在线演示

API¶

函数	说明
`egui_view_compass_init(self, core)`	初始化指南针
`egui_view_compass_init_with_params(self, core, params)`	使用参数初始化
`egui_view_compass_set_heading(self, heading)`	设置方位角(0-359)
`egui_view_compass_set_show_degree(self, show)`	设置是否显示角度文字

参数宏¶

EGUI_VIEW_COMPASS_PARAMS_INIT(name, x, y, w, h, heading);

结构体字段¶

字段	类型	说明
`heading`	`int16_t`	方位角(0-359)
`stroke_width`	`egui_dim_t`	表盘线宽
`dial_color`	`egui_color_t`	表盘颜色
`north_color`	`egui_color_t`	北方标记颜色
`needle_color`	`egui_color_t`	指针颜色
`text_color`	`egui_color_t`	文字颜色
`show_degree`	`uint8_t`	是否显示角度

代码示例¶

static egui_view_compass_t compass;

EGUI_VIEW_COMPASS_PARAMS_INIT(compass_params, 10, 10, 100, 100, 0);

void init_ui(egui_core_t *core)
{
    egui_view_compass_init_with_params(EGUI_VIEW_OF(&compass), core, &compass_params);
    egui_view_compass_set_show_degree(EGUI_VIEW_OF(&compass), 1);
    egui_core_add_user_root_view(core, EGUI_VIEW_OF(&compass));
}

void update_heading(int16_t deg)
{
    egui_view_compass_set_heading(EGUI_VIEW_OF(&compass), deg);
}

HeartRate¶

心率显示控件，绘制心形图标和 BPM 数值，支持脉搏动画效果。

效果展示¶

在线演示

API¶

函数	说明
`egui_view_heart_rate_init(self, core)`	初始化心率控件
`egui_view_heart_rate_init_with_params(self, core, params)`	使用参数初始化
`egui_view_heart_rate_set_bpm(self, bpm)`	设置心率值
`egui_view_heart_rate_set_animate(self, enable)`	启用/禁用脉搏动画
`egui_view_heart_rate_set_heart_color(self, color)`	设置心形颜色
`egui_view_heart_rate_set_pulse_phase(self, phase)`	设置脉搏动画相位

参数宏¶

EGUI_VIEW_HEART_RATE_PARAMS_INIT(name, x, y, w, h, bpm);

代码示例¶

static egui_view_heart_rate_t hr;

EGUI_VIEW_HEART_RATE_PARAMS_INIT(hr_params, 10, 10, 80, 80, 72);

void init_ui(egui_core_t *core)
{
    egui_view_heart_rate_init_with_params(EGUI_VIEW_OF(&hr), core, &hr_params);
    egui_view_heart_rate_set_animate(EGUI_VIEW_OF(&hr), 1);
    egui_core_add_user_root_view(core, EGUI_VIEW_OF(&hr));
}

void update_bpm(uint8_t bpm)
{
    egui_view_heart_rate_set_bpm(EGUI_VIEW_OF(&hr), bpm);
}

Led¶

LED 指示灯控件，显示圆形灯珠，支持开/关状态切换和闪烁效果。

效果展示¶

在线演示

API¶

函数	说明
`egui_view_led_init(self, core)`	初始化 LED
`egui_view_led_init_with_params(self, core, params)`	使用参数初始化
`egui_view_led_set_on(self)`	点亮 LED
`egui_view_led_set_off(self)`	熄灭 LED
`egui_view_led_toggle(self)`	切换开关状态
`egui_view_led_set_blink(self, period_ms)`	启用闪烁(指定周期毫秒)
`egui_view_led_stop_blink(self)`	停止闪烁
`egui_view_led_set_colors(self, on_color, off_color)`	设置亮/灭颜色

参数宏¶

EGUI_VIEW_LED_PARAMS_INIT(name, x, y, w, h, is_on);

结构体字段¶

字段	类型	说明
`is_on`	`uint8_t`	当前开关状态
`is_blinking`	`uint8_t`	是否正在闪烁
`blink_period`	`uint16_t`	闪烁周期(毫秒)
`on_color`	`egui_color_t`	点亮颜色
`off_color`	`egui_color_t`	熄灭颜色
`border_color`	`egui_color_t`	边框颜色
`border_width`	`egui_dim_t`	边框宽度

代码示例¶

static egui_view_led_t led_green;
static egui_view_led_t led_red;

EGUI_VIEW_LED_PARAMS_INIT(led_g_params, 10, 10, 20, 20, 1);
EGUI_VIEW_LED_PARAMS_INIT(led_r_params, 40, 10, 20, 20, 0);

void init_ui(egui_core_t *core)
{
    egui_view_led_init_with_params(EGUI_VIEW_OF(&led_green), core, &led_g_params);
    egui_view_led_set_colors(EGUI_VIEW_OF(&led_green), EGUI_COLOR_GREEN, EGUI_COLOR_DARK_GREEN);

    egui_view_led_init_with_params(EGUI_VIEW_OF(&led_red), core, &led_r_params);
    egui_view_led_set_colors(EGUI_VIEW_OF(&led_red), EGUI_COLOR_RED, EGUI_COLOR_DARK_RED);
    egui_view_led_set_blink(EGUI_VIEW_OF(&led_red), 500);

    egui_core_add_user_root_view(core, EGUI_VIEW_OF(&led_green));
    egui_core_add_user_root_view(core, EGUI_VIEW_OF(&led_red));
}