Prototype ChripChatter GUI
This commit is contained in:
parent
a4d15b2a1e
commit
dea9823e9e
230
Tactility/Source/app/chirpchatter/ChirpChatterApp.cpp
Normal file
230
Tactility/Source/app/chirpchatter/ChirpChatterApp.cpp
Normal file
@ -0,0 +1,230 @@
|
||||
//#ifdef ESP_PLATFORM
|
||||
|
||||
#include <Tactility/app/AppManifest.h>
|
||||
#include <Tactility/lvgl/Toolbar.h>
|
||||
#include <Tactility/Assets.h>
|
||||
//#include <Tactility/service/espnow/EspNow.h>
|
||||
|
||||
#include "Tactility/service/gui/Gui.h"
|
||||
#include "Tactility/lvgl/LvglSync.h"
|
||||
|
||||
#include <cstdio>
|
||||
#include <cstring>
|
||||
//#include <esp_wifi.h>
|
||||
#include <lvgl.h>
|
||||
|
||||
extern const lv_obj_class_t lv_label_class;
|
||||
|
||||
namespace tt::app::chirp {
|
||||
|
||||
constexpr const char* TAG = "ChirpChatterApp";
|
||||
|
||||
enum CCViews
|
||||
{
|
||||
CCView_Msgs,
|
||||
CCView_LoraSettings,
|
||||
CCView_ProtoSettings
|
||||
};
|
||||
|
||||
class ChirpChatterApp;
|
||||
|
||||
template<CCViews view>
|
||||
static void changeView(lv_event_t* e) {
|
||||
auto* self = static_cast<ChirpChatterApp*>(lv_event_get_user_data(e));
|
||||
TT_LOG_I(TAG, "Clicked %d", view);
|
||||
}
|
||||
|
||||
static void buttonRecolorFocus(lv_event_t *event) {
|
||||
lv_obj_t *image = (lv_obj_t *)lv_event_get_user_data(event);
|
||||
if (image != NULL) {
|
||||
lv_obj_set_style_image_recolor(image, lv_palette_main(LV_PALETTE_YELLOW), LV_STATE_DEFAULT);
|
||||
}
|
||||
}
|
||||
|
||||
static void buttonRecolorDefocus(lv_event_t *event) {
|
||||
lv_obj_t *image = (lv_obj_t *)lv_event_get_user_data(event);
|
||||
if (image != NULL) {
|
||||
lv_obj_set_style_image_recolor(image, lv_theme_get_color_primary(image), LV_STATE_DEFAULT);
|
||||
}
|
||||
}
|
||||
|
||||
class ChirpChatterApp : public App {
|
||||
|
||||
lv_obj_t* sidebar = nullptr;
|
||||
lv_obj_t* mainView = nullptr;
|
||||
lv_obj_t* progressBar = nullptr;
|
||||
|
||||
lv_obj_t* messageList = nullptr;
|
||||
lv_obj_t* inputField = nullptr;
|
||||
|
||||
template<CCViews T>
|
||||
lv_obj_t* createSidebarButton(lv_obj_t* parent, const char* image_file) {
|
||||
auto* sidebar_button = lv_button_create(parent);
|
||||
|
||||
lv_obj_set_size(sidebar_button, 32, 32);
|
||||
lv_obj_align(sidebar_button, LV_ALIGN_TOP_MID, 0, 0);
|
||||
lv_obj_set_style_pad_all(sidebar_button, 0, 0);
|
||||
//lv_obj_set_style_pad_top(sidebar_button, 36, 0);
|
||||
lv_obj_set_style_shadow_width(sidebar_button, 0, 0);
|
||||
lv_obj_set_style_border_width(sidebar_button, 0, 0);
|
||||
lv_obj_set_style_bg_opa(sidebar_button, 0, LV_PART_MAIN);
|
||||
|
||||
auto* button_image = lv_image_create(sidebar_button);
|
||||
lv_image_set_src(button_image, image_file);
|
||||
lv_obj_set_style_image_recolor(button_image, lv_theme_get_color_primary(parent), LV_STATE_DEFAULT);
|
||||
lv_obj_set_style_image_recolor_opa(button_image, LV_OPA_COVER, LV_STATE_DEFAULT);
|
||||
// Ensure buttons are still tappable when asset fails to load
|
||||
lv_obj_set_size(button_image, 32, 32);
|
||||
|
||||
static lv_style_t style_focus;
|
||||
lv_style_init(&style_focus);
|
||||
lv_style_set_outline_width(&style_focus, 0);
|
||||
lv_obj_add_style(sidebar_button, &style_focus, LV_PART_MAIN | LV_STATE_FOCUSED | LV_STATE_FOCUS_KEY);
|
||||
lv_obj_add_style(button_image, &style_focus, LV_PART_MAIN | LV_STATE_FOCUSED | LV_STATE_FOCUS_KEY);
|
||||
|
||||
lv_obj_add_event_cb(button_image, changeView<T>, LV_EVENT_SHORT_CLICKED, (void*)this);
|
||||
lv_obj_add_event_cb(sidebar_button, changeView<T>, LV_EVENT_SHORT_CLICKED, (void*)this);
|
||||
|
||||
lv_obj_add_event_cb(sidebar_button, buttonRecolorFocus, LV_EVENT_FOCUSED, button_image);
|
||||
lv_obj_add_event_cb(sidebar_button, buttonRecolorDefocus, LV_EVENT_DEFOCUSED, button_image);
|
||||
|
||||
return sidebar_button;
|
||||
}
|
||||
|
||||
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_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_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_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);
|
||||
}
|
||||
|
||||
public:
|
||||
|
||||
void onCreate(AppContext& appContext) override {
|
||||
#ifdef ESP_PLATFORM
|
||||
esp_log_level_set("*", ESP_LOG_DEBUG);
|
||||
#endif
|
||||
}
|
||||
|
||||
void onDestroy(AppContext& appContext) override {
|
||||
|
||||
}
|
||||
|
||||
void onShow(AppContext& context, lv_obj_t* parent) override {
|
||||
|
||||
// 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* 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);
|
||||
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_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));
|
||||
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());
|
||||
auto icon_lora_path = paths->getSystemPathLvgl("icon_lora.png");
|
||||
createSidebarButton<CCView_LoraSettings>(sidebar, icon_lora_path.c_str());
|
||||
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);
|
||||
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_style_pad_all(mainView, 0, 0);
|
||||
|
||||
// Message view
|
||||
auto* msg_view = lv_obj_create(mainView);
|
||||
//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;
|
||||
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_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_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_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);
|
||||
|
||||
// Input field
|
||||
inputField = lv_textarea_create(input_panel);
|
||||
lv_obj_set_flex_grow(inputField, 1);
|
||||
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_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_obj_center(btn_label);
|
||||
|
||||
addDummyMessage("HELLO CHIRPCHAT!");
|
||||
addDummyMessage("How's biz?");
|
||||
|
||||
}
|
||||
|
||||
~ChirpChatterApp() override = default;
|
||||
};
|
||||
|
||||
extern const AppManifest manifest = {
|
||||
.id = "ChirpChatter",
|
||||
.name = "ChirpChatter",
|
||||
.icon = TT_ASSETS_APP_ICON_CHAT,
|
||||
.createApp = create<ChirpChatterApp>
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
//#endif
|
||||
Loading…
x
Reference in New Issue
Block a user