dominic/Tactiliest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed layout, somewhat.. on the device it shifts in half.

Browse Source
This commit is contained in:
Dominic Höglinger 2025-09-05 18:27:40 +02:00
parent 985aa056d0
commit dde5b09581
1 changed files with 64 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
Tactility/Source/app/chirpchatter/ChirpChatterApp.cpp
View File

@ -5,7 +5,6 @@
#include <Tactility/Assets.h>
//#include <Tactility/service/espnow/EspNow.h>
#include "Tactility/service/gui/Gui.h"
#include "Tactility/lvgl/LvglSync.h"
#include <cstdio>
@ -93,26 +92,31 @@ class ChirpChatterApp : public App {
void addDummyMessage(const char* const message) {
auto* msg_container = lv_obj_create(messageList);
lv_obj_set_width(msg_container, lv_pct(100));
lv_obj_set_height(msg_container, LV_SIZE_CONTENT);
lv_obj_set_flex_flow(msg_container, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_grow(msg_container, 0);
lv_obj_set_style_pad_all(msg_container, 1, 0);
lv_obj_t* msg_label = lv_label_create(msg_container);
lv_label_set_text(msg_label, message);
lv_obj_set_width(msg_label, lv_pct(100));
lv_label_set_long_mode(msg_label, LV_LABEL_LONG_WRAP);
lv_obj_set_style_text_align(msg_label, LV_TEXT_ALIGN_LEFT, 0);
//lv_obj_set_style_pad_all(msg_label, 2, 0);
lv_obj_set_style_pad_all(msg_label, 0, 0);
lv_obj_t* msg_info = lv_label_create(msg_container);
lv_label_set_text(msg_info, "RX/2024-07-06+15:04");
lv_obj_set_width(msg_info, lv_pct(100));
lv_label_set_long_mode(msg_info, LV_LABEL_LONG_WRAP);
lv_obj_set_style_text_align(msg_info, LV_TEXT_ALIGN_LEFT, 0);
//lv_obj_set_style_pad_all(msg_info, 2, 0);
lv_obj_set_style_pad_all(msg_info, 0, 0);
lv_obj_set_style_text_font(msg_info, &lv_font_montserrat_10, 0);
lv_obj_scroll_to_y(messageList, lv_obj_get_scroll_y(messageList) + 20, LV_ANIM_ON);
lv_obj_set_width(msg_container, lv_pct(100));
lv_obj_set_height(msg_container, LV_SIZE_CONTENT);
lv_obj_scroll_to_y(messageList, lv_obj_get_scroll_y(messageList) + 1000, LV_ANIM_ON);
}
public:
@ -129,30 +133,48 @@ public:
void onShow(AppContext& context, lv_obj_t* parent) override {
static lv_coord_t col_dsc[] = {36, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
static lv_coord_t row_dsc[] = {40, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
lv_obj_t * grid = lv_obj_create(parent);
lv_obj_set_grid_dsc_array(grid, col_dsc, row_dsc);
lv_obj_set_size(grid, lv_pct(100), lv_pct(100));
static lv_style_t style_grid;
lv_style_init(&style_grid);
lv_style_set_pad_row(&style_grid, 0);
lv_style_set_pad_column(&style_grid, 0);
lv_style_set_pad_all(&style_grid, 0);
lv_obj_add_style(grid, &style_grid, LV_PART_MAIN);
// Create toolbar
auto* toolbar = tt::lvgl::toolbar_create(parent, "Transmitting message...");
lv_obj_align(toolbar, LV_ALIGN_TOP_MID, 0, 0);
const int toolbar_height = lv_obj_get_height(toolbar);
auto* toolbar = tt::lvgl::toolbar_create(grid, "Transmitting message...");
lv_obj_set_size(toolbar, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_grid_cell(toolbar, LV_GRID_ALIGN_STRETCH, 0, 2,
LV_GRID_ALIGN_STRETCH, 0, 1);
auto* text = lv_obj_get_child_by_type(toolbar, 0, &lv_label_class);
lv_obj_set_style_text_font(text, &lv_font_montserrat_12, 0);
//lv_obj_set_style_text_font(toolbar, &lv_font_montserrat_12, LV_PART_MAIN);
// Create sidebar
sidebar = lv_obj_create(parent);
lv_obj_set_size(sidebar, 36, lv_pct(100) - toolbar_height);
sidebar = lv_obj_create(grid);
lv_obj_set_size(sidebar, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_grid_cell(sidebar, LV_GRID_ALIGN_START, 0, 1,
LV_GRID_ALIGN_START, 1, 1);
lv_obj_set_scrollbar_mode(sidebar, LV_SCROLLBAR_MODE_OFF);
lv_obj_align(sidebar, LV_ALIGN_TOP_LEFT, 0, toolbar_height);
lv_obj_set_style_pad_all(sidebar, 2, 0);
lv_obj_set_style_border_width(sidebar, 0, 0);
lv_obj_set_flex_flow(sidebar, LV_FLEX_FLOW_COLUMN);
// Create progress bar
progressBar = lv_bar_create(toolbar);
lv_obj_align(progressBar, LV_ALIGN_TOP_RIGHT, 0, 0);
lv_obj_set_size(progressBar, lv_disp_get_ver_res(NULL) - toolbar_height, lv_pct(100));
/*progressBar = lv_bar_create(toolbar);
lv_obj_align(progressBar, LV_ALIGN_BOTTOM_RIGHT, 0, 0);
lv_obj_set_size(progressBar, lv_pct(100), 20);
lv_obj_set_style_radius(progressBar, 0, LV_PART_MAIN);
lv_bar_set_start_value(progressBar, 50, LV_ANIM_ON);
*/
auto paths = context.getPaths();
auto icon_msgs_path = paths->getSystemPathLvgl("icon_msgs.png");
createSidebarButton<CCView_Msgs>(sidebar, icon_msgs_path.c_str());
@ -161,14 +183,15 @@ public:
auto icon_proto_path = paths->getSystemPathLvgl("icon_proto.png");
createSidebarButton<CCView_ProtoSettings>(sidebar, icon_proto_path.c_str());
// Main view
mainView = lv_obj_create(parent);
lv_obj_set_flex_flow(mainView, LV_FLEX_FLOW_ROW);
//lv_obj_set_size(mainView, lv_disp_get_hor_res(NULL) - 40, lv_disp_get_ver_res(NULL) - toolbar_height*2);
mainView = lv_obj_create(grid);
lv_obj_set_size(mainView, lv_pct(100), lv_pct(100));
lv_obj_align(mainView, LV_ALIGN_TOP_LEFT, 36, toolbar_height);
lv_obj_set_style_bg_color(mainView, lv_color_hex(0x262626), 0);
lv_obj_set_style_border_width(mainView, 1, 0);
lv_obj_set_grid_cell(mainView, LV_GRID_ALIGN_STRETCH, 1, 1,
LV_GRID_ALIGN_STRETCH, 1, 1);
//lv_obj_set_flex_flow(mainView, LV_FLEX_FLOW_COLUMN);
lv_obj_set_style_bg_color(mainView, lv_color_hex(0x00FF00), 0);
lv_obj_set_style_border_width(mainView, 0, 0);
lv_obj_set_style_pad_all(mainView, 0, 0);
// Message view
@ -176,19 +199,20 @@ public:
//lv_obj_set_size(msg_view, lv_disp_get_hor_res(NULL) - 40, lv_disp_get_ver_res(NULL) - toolbar_height*2);
lv_obj_set_size(msg_view, lv_pct(100), lv_pct(100));
lv_obj_set_flex_flow(msg_view, LV_FLEX_FLOW_COLUMN);
int textbox_height = 40;
//lv_obj_set_flex_grow(msg_view, 1);
lv_obj_set_style_pad_all(msg_view, 0, 0);
messageList = lv_obj_create(msg_view);
//lv_obj_set_size(messageList, lv_disp_get_hor_res(NULL) - toolbar_height, lv_disp_get_ver_res(NULL) - toolbar_height - textbox_height);
lv_obj_set_size(messageList, lv_pct(95), lv_pct(80));
lv_obj_set_size(messageList, lv_pct(100), lv_pct(80));
lv_obj_set_flex_flow(messageList, LV_FLEX_FLOW_COLUMN);
lv_obj_align(messageList, LV_ALIGN_TOP_MID, 0, 0);
lv_obj_set_style_bg_color(mainView, lv_color_hex(0xFF0000), 0);
lv_obj_set_style_border_width(messageList, 1, 0);
lv_obj_set_style_border_width(messageList, 0, 0);
lv_obj_set_style_pad_all(messageList, 0, 0);
// Input panel
auto* input_panel = lv_obj_create(msg_view);
lv_obj_set_flex_flow(input_panel, LV_FLEX_FLOW_COLUMN);
lv_obj_set_size(input_panel, lv_pct(95), lv_pct(20));
lv_obj_set_flex_flow(input_panel, LV_FLEX_FLOW_ROW);
lv_obj_set_size(input_panel, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_align(input_panel, LV_ALIGN_BOTTOM_MID, 0, 0);
lv_obj_set_flex_align(input_panel, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_all(input_panel, 5, 0);
@ -199,20 +223,26 @@ public:
lv_obj_set_height(inputField, LV_PCT(100));
lv_textarea_set_placeholder_text(inputField, "Type a message...");
lv_textarea_set_one_line(inputField, true);
service::gui::keyboardAddTextArea(inputField);
// Send button
auto* send_btn = lv_btn_create(input_panel);
lv_obj_set_size(send_btn, 80, LV_PCT(100));
lv_obj_set_size(send_btn, 50, LV_SIZE_CONTENT);
//lv_obj_add_event_cb(send_btn, onSendClicked, LV_EVENT_CLICKED, this);
auto* btn_label = lv_label_create(send_btn);
lv_label_set_text(btn_label, "Send");
lv_label_set_text(btn_label, "SEND");
lv_obj_center(btn_label);
lv_obj_set_flex_grow(messageList, 1);
lv_obj_set_flex_grow(input_panel, 0);
lv_obj_set_style_bg_color(messageList, lv_color_hex(0xFF0000), 0);
lv_obj_set_style_bg_color(input_panel, lv_color_hex(0x00FF00), 0);
addDummyMessage("HELLO CHIRPCHAT!");
addDummyMessage("How's biz?");
addDummyMessage("Test");
addDummyMessage("Test empfangen in Linz");
}
~ChirpChatterApp() override = default;