hm
34d7d1c3a2
设计稿: vue/vue3/src/views/Frame21.vue 精确还原设计: - 背景: #0D1117 - 标题栏: #153962, 高度 60px - 左侧面板: 560×400, #161B22, 圆角10px, 边框 #30363D - 右侧面板: 200×400, 位置 (590, 70), 同上样式 - 设置重量: 青色 #01EB9B, 字号 40px - 启动按钮: #3FB950, 159×190, 圆角 20px - 减/加按钮: #2A2828, 80×80, 圆角 20px - 状态文字: #F76F4A (红色)
244 lines
9.0 KiB
C++
244 lines
9.0 KiB
C++
#include "packer_ui.h"
|
|
#include "lvgl/lvgl.h"
|
|
#include <stdio.h>
|
|
|
|
LV_FONT_DECLARE(custom_cjk_16);
|
|
|
|
static lv_obj_t *packer_scr = NULL;
|
|
static lv_obj_t *header = NULL;
|
|
static lv_obj_t *weight_panel = NULL;
|
|
static lv_obj_t *control_panel = NULL;
|
|
static lv_obj_t *start_btn = NULL;
|
|
static lv_obj_t *weight_label = NULL;
|
|
static lv_obj_t *count_label = NULL;
|
|
static lv_obj_t *status_label = NULL;
|
|
static lv_obj_t *set_weight_label = NULL;
|
|
static lv_obj_t *minus_btn = NULL;
|
|
static lv_obj_t *plus_btn = NULL;
|
|
|
|
static lv_color_t COLOR_HEADER_BG = lv_color_hex(0x153962);
|
|
static lv_color_t COLOR_BG = lv_color_hex(0x0D1117);
|
|
static lv_color_t COLOR_CARD = lv_color_hex(0x161B22);
|
|
static lv_color_t COLOR_TEXT = lv_color_hex(0xFFFFFF);
|
|
static lv_color_t COLOR_TEXT_DIM = lv_color_hex(0xFFFFFF);
|
|
static lv_color_t COLOR_GREEN = lv_color_hex(0x3FB950);
|
|
static lv_color_t COLOR_GREEN_BRIGHT = lv_color_hex(0x01EB9B);
|
|
static lv_color_t COLOR_RED = lv_color_hex(0xF76F4A);
|
|
static lv_color_t COLOR_BORDER = lv_color_hex(0x30363D);
|
|
static lv_color_t COLOR_BUTTON_DARK = lv_color_hex(0x2A2828);
|
|
|
|
static bool is_running = false;
|
|
static uint32_t target_weight = 200;
|
|
static uint32_t pack_count = 200;
|
|
|
|
static void start_stop_cb(lv_event_t *e);
|
|
static void weight_dec_cb(lv_event_t *e);
|
|
static void weight_inc_cb(lv_event_t *e);
|
|
static void update_status_display();
|
|
|
|
RetCode packer_ui_create(void)
|
|
{
|
|
packer_scr = lv_obj_create(NULL);
|
|
lv_obj_set_style_bg_color(packer_scr, COLOR_BG, 0);
|
|
lv_obj_set_size(packer_scr, 800, 480);
|
|
|
|
header = lv_obj_create(packer_scr);
|
|
lv_obj_set_size(header, 800, 60);
|
|
lv_obj_set_pos(header, 0, 0);
|
|
lv_obj_set_style_bg_color(header, COLOR_HEADER_BG, 0);
|
|
lv_obj_set_style_radius(header, 0, 0);
|
|
|
|
weight_panel = lv_obj_create(packer_scr);
|
|
lv_obj_set_size(weight_panel, 560, 400);
|
|
lv_obj_set_pos(weight_panel, 10, 70);
|
|
lv_obj_set_style_bg_color(weight_panel, COLOR_CARD, 0);
|
|
lv_obj_set_style_radius(weight_panel, 10, 0);
|
|
lv_obj_set_style_border_width(weight_panel, 2, 0);
|
|
lv_obj_set_style_border_color(weight_panel, COLOR_BORDER, 0);
|
|
|
|
lv_obj_t *set_weight_title = lv_label_create(weight_panel);
|
|
lv_label_set_text(set_weight_title, "设置重量");
|
|
lv_obj_set_style_text_font(set_weight_title, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(set_weight_title, COLOR_TEXT, 0);
|
|
lv_obj_set_pos(set_weight_title, 39, 101);
|
|
|
|
set_weight_label = lv_label_create(weight_panel);
|
|
char weight_str[20];
|
|
snprintf(weight_str, sizeof(weight_str), "%lug", target_weight / 10);
|
|
lv_label_set_text(set_weight_label, weight_str);
|
|
lv_obj_set_style_text_font(set_weight_label, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(set_weight_label, COLOR_GREEN_BRIGHT, 0);
|
|
lv_obj_set_pos(set_weight_label, 239, 101);
|
|
|
|
minus_btn = lv_obj_create(weight_panel);
|
|
lv_obj_set_size(minus_btn, 80, 80);
|
|
lv_obj_set_pos(minus_btn, 350, 89);
|
|
lv_obj_set_style_bg_color(minus_btn, COLOR_BUTTON_DARK, 0);
|
|
lv_obj_set_style_radius(minus_btn, 20, 0);
|
|
lv_obj_add_event_cb(minus_btn, weight_dec_cb, LV_EVENT_CLICKED, NULL);
|
|
|
|
lv_obj_t *minus_line = lv_obj_create(minus_btn);
|
|
lv_obj_set_size(minus_line, 40, 5);
|
|
lv_obj_set_style_bg_color(minus_line, COLOR_TEXT, 0);
|
|
lv_obj_align(minus_line, LV_ALIGN_CENTER, 0, 0);
|
|
|
|
plus_btn = lv_obj_create(weight_panel);
|
|
lv_obj_set_size(plus_btn, 80, 80);
|
|
lv_obj_set_pos(plus_btn, 470, 90);
|
|
lv_obj_set_style_bg_color(plus_btn, COLOR_BUTTON_DARK, 0);
|
|
lv_obj_set_style_radius(plus_btn, 20, 0);
|
|
lv_obj_add_event_cb(plus_btn, weight_inc_cb, LV_EVENT_CLICKED, NULL);
|
|
|
|
lv_obj_t *plus_h_line = lv_obj_create(plus_btn);
|
|
lv_obj_set_size(plus_h_line, 40, 5);
|
|
lv_obj_set_style_bg_color(plus_h_line, COLOR_TEXT, 0);
|
|
lv_obj_align(plus_h_line, LV_ALIGN_CENTER, 0, 0);
|
|
|
|
lv_obj_t *plus_v_line = lv_obj_create(plus_btn);
|
|
lv_obj_set_size(plus_v_line, 5, 40);
|
|
lv_obj_set_style_bg_color(plus_v_line, COLOR_TEXT, 0);
|
|
lv_obj_align(plus_v_line, LV_ALIGN_CENTER, 0, 0);
|
|
|
|
control_panel = lv_obj_create(packer_scr);
|
|
lv_obj_set_size(control_panel, 200, 400);
|
|
lv_obj_set_pos(control_panel, 590, 70);
|
|
lv_obj_set_style_bg_color(control_panel, COLOR_CARD, 0);
|
|
lv_obj_set_style_radius(control_panel, 10, 0);
|
|
lv_obj_set_style_border_width(control_panel, 2, 0);
|
|
lv_obj_set_style_border_color(control_panel, COLOR_BORDER, 0);
|
|
|
|
start_btn = lv_obj_create(control_panel);
|
|
lv_obj_set_size(start_btn, 159, 190);
|
|
lv_obj_set_pos(start_btn, 610 - 590, 90 - 70);
|
|
lv_obj_set_style_bg_color(start_btn, COLOR_GREEN, 0);
|
|
lv_obj_set_style_radius(start_btn, 20, 0);
|
|
lv_obj_add_event_cb(start_btn, start_stop_cb, LV_EVENT_CLICKED, NULL);
|
|
|
|
lv_obj_t *btn_label = lv_label_create(start_btn);
|
|
lv_label_set_text(btn_label, "启动");
|
|
lv_obj_set_style_text_font(btn_label, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(btn_label, COLOR_TEXT, 0);
|
|
lv_obj_align(btn_label, LV_ALIGN_TOP_MID, 0, 73);
|
|
|
|
lv_obj_t *btn_hint = lv_label_create(start_btn);
|
|
lv_label_set_text(btn_hint, "点击启动");
|
|
lv_obj_set_style_text_font(btn_hint, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(btn_hint, COLOR_TEXT, 0);
|
|
lv_obj_align(btn_hint, LV_ALIGN_TOP_MID, 0, 160);
|
|
|
|
lv_obj_t *weight_title = lv_label_create(control_panel);
|
|
lv_label_set_text(weight_title, "当前重量");
|
|
lv_obj_set_style_text_font(weight_title, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(weight_title, COLOR_TEXT, 0);
|
|
lv_obj_set_pos(weight_title, 620 - 590, 288 - 70);
|
|
|
|
weight_label = lv_label_create(control_panel);
|
|
lv_label_set_text(weight_label, "0.0g");
|
|
lv_obj_set_style_text_font(weight_label, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(weight_label, COLOR_GREEN, 0);
|
|
lv_obj_set_pos(weight_label, 620 - 590, 314 - 70);
|
|
|
|
lv_obj_t *count_title = lv_label_create(control_panel);
|
|
lv_label_set_text(count_title, "包装计数");
|
|
lv_obj_set_style_text_font(count_title, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(count_title, COLOR_TEXT, 0);
|
|
lv_obj_set_pos(count_title, 620 - 590, 350 - 70);
|
|
|
|
count_label = lv_label_create(control_panel);
|
|
char count_str[20];
|
|
snprintf(count_str, sizeof(count_str), "%lu", pack_count);
|
|
lv_label_set_text(count_label, count_str);
|
|
lv_obj_set_style_text_font(count_label, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(count_label, COLOR_GREEN, 0);
|
|
lv_obj_set_pos(count_label, 620 - 590, 370 - 70);
|
|
|
|
lv_obj_t *status_title = lv_label_create(control_panel);
|
|
lv_label_set_text(status_title, "运行状态");
|
|
lv_obj_set_style_text_font(status_title, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(status_title, COLOR_TEXT, 0);
|
|
lv_obj_set_pos(status_title, 620 - 590, 405 - 70);
|
|
|
|
status_label = lv_label_create(control_panel);
|
|
lv_label_set_text(status_label, "已停止");
|
|
lv_obj_set_style_text_font(status_label, &custom_cjk_16, 0);
|
|
lv_obj_set_style_text_color(status_label, COLOR_RED, 0);
|
|
lv_obj_set_pos(status_label, 618 - 590, 431 - 70);
|
|
|
|
lv_scr_load(packer_scr);
|
|
return RET_OK;
|
|
}
|
|
|
|
static void start_stop_cb(lv_event_t *e)
|
|
{
|
|
(void)e;
|
|
is_running = !is_running;
|
|
update_status_display();
|
|
}
|
|
|
|
static void weight_dec_cb(lv_event_t *e)
|
|
{
|
|
(void)e;
|
|
if (is_running) return;
|
|
if (target_weight > 10) {
|
|
target_weight -= 10;
|
|
char weight_str[20];
|
|
snprintf(weight_str, sizeof(weight_str), "%lug", target_weight / 10);
|
|
lv_label_set_text(set_weight_label, weight_str);
|
|
}
|
|
}
|
|
|
|
static void weight_inc_cb(lv_event_t *e)
|
|
{
|
|
(void)e;
|
|
if (is_running) return;
|
|
if (target_weight < 1000) {
|
|
target_weight += 10;
|
|
char weight_str[20];
|
|
snprintf(weight_str, sizeof(weight_str), "%lug", target_weight / 10);
|
|
lv_label_set_text(set_weight_label, weight_str);
|
|
}
|
|
}
|
|
|
|
static void update_status_display()
|
|
{
|
|
if (is_running) {
|
|
lv_label_set_text(status_label, "运行中");
|
|
lv_obj_set_style_text_color(status_label, COLOR_GREEN, 0);
|
|
lv_label_set_text(lv_obj_get_child(start_btn, 0), "停止");
|
|
lv_obj_set_style_bg_color(start_btn, COLOR_RED, 0);
|
|
} else {
|
|
lv_label_set_text(status_label, "已停止");
|
|
lv_obj_set_style_text_color(status_label, COLOR_RED, 0);
|
|
lv_label_set_text(lv_obj_get_child(start_btn, 0), "启动");
|
|
lv_obj_set_style_bg_color(start_btn, COLOR_GREEN, 0);
|
|
}
|
|
}
|
|
|
|
void packer_ui_update(void)
|
|
{
|
|
if (is_running) {
|
|
static uint32_t current_weight = 0;
|
|
if (current_weight < target_weight) {
|
|
current_weight += 5;
|
|
} else {
|
|
current_weight = 0;
|
|
pack_count++;
|
|
char count_str[20];
|
|
snprintf(count_str, sizeof(count_str), "%lu", pack_count);
|
|
lv_label_set_text(count_label, count_str);
|
|
}
|
|
|
|
char weight_str[20];
|
|
snprintf(weight_str, sizeof(weight_str), "%lu.%lug", current_weight / 10, current_weight % 10);
|
|
lv_label_set_text(weight_label, weight_str);
|
|
}
|
|
}
|
|
|
|
void packer_ui_destroy(void)
|
|
{
|
|
if (packer_scr) {
|
|
lv_obj_del(packer_scr);
|
|
packer_scr = NULL;
|
|
}
|
|
}
|