From d53b94d14c0ed8296c4d9c7efdf2bba64f3c0ee9 Mon Sep 17 00:00:00 2001 From: philmoz Date: Fri, 27 Jan 2023 22:26:18 +1100 Subject: [PATCH] feat(color): LVGLify and improve layout of theme details edit dialog (#3078) --- radio/src/gui/colorlcd/radio_theme.cpp | 113 ++++++++++++++++++++----- radio/src/gui/colorlcd/radio_theme.h | 54 +----------- 2 files changed, 95 insertions(+), 72 deletions(-) diff --git a/radio/src/gui/colorlcd/radio_theme.cpp b/radio/src/gui/colorlcd/radio_theme.cpp index acfae23cf..1b5cf65cf 100644 --- a/radio/src/gui/colorlcd/radio_theme.cpp +++ b/radio/src/gui/colorlcd/radio_theme.cpp @@ -59,7 +59,7 @@ #if (LCD_W > LCD_H) constexpr int BUTTON_HEIGHT = 30; constexpr int BUTTON_WIDTH = 75; -constexpr rect_t detailsDialogRect = {50, 50, 400, 170}; +constexpr rect_t detailsDialogRect = {30, 30, LCD_W - 60, LCD_H - 60}; constexpr int labelWidth = 150; constexpr int COLOR_BOX_LEFT = 5; @@ -68,7 +68,7 @@ constexpr int COLOR_BOX_HEIGHT = 27; #else constexpr int BUTTON_HEIGHT = 30; constexpr int BUTTON_WIDTH = 65; -constexpr rect_t detailsDialogRect = {5, 50, LCD_W - 10, 340}; +constexpr rect_t detailsDialogRect = {10, 50, LCD_W - 20, 220}; constexpr int labelWidth = 120; constexpr int COLOR_BOX_LEFT = 3; @@ -79,8 +79,66 @@ constexpr int COLOR_BUTTON_WIDTH = COLOR_BOX_WIDTH; constexpr int COLOR_BUTTON_HEIGHT = 20; #endif +constexpr int BOX_MARGIN = 2; +constexpr int MAX_BOX_WIDTH = 15; +class ThemeColorPreview : public FormField +{ + public: + ThemeColorPreview(Window *parent, const rect_t &rect, std::vector colorList) : + FormField(parent, rect, NO_FOCUS), + colorList(colorList) + { + setBoxWidth(); + } + ~ThemeColorPreview() + { + } + + void setColorList(std::vector colorList) + { + this->colorList.assign(colorList.begin(), colorList.end()); + setBoxWidth(); + invalidate(); + } + + void paint(BitmapBuffer *dc) override + { + int totalNessessarySpace = colorList.size() * (boxWidth + 2); + int axis = rect.w > rect.h ? rect.w : rect.h; + axis = (axis - totalNessessarySpace) / 2; + for (auto color: colorList) { + if (rect.w > rect.h) { + dc->drawSolidFilledRect(axis, 0, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue)); + dc->drawSolidRect(axis, 0, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK)); + } else { + dc->drawSolidFilledRect(0, axis, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue)); + dc->drawSolidRect(0, axis, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK)); + } + axis += boxWidth + BOX_MARGIN; + } + } + + protected: + std::vector colorList; + int boxWidth = MAX_BOX_WIDTH; + void setBoxWidth() + { + auto winSize = rect.w > rect.h ? rect.w : rect.h; + boxWidth = winSize / (colorList.size() + BOX_MARGIN); + boxWidth = min(boxWidth, MAX_BOX_WIDTH); + } +}; + + +static const lv_coord_t d_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(3), + LV_GRID_TEMPLATE_LAST}; +static const lv_coord_t b_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), + LV_GRID_TEMPLATE_LAST}; +static const lv_coord_t row_dsc[] = {LV_GRID_CONTENT, + LV_GRID_TEMPLATE_LAST}; + class ThemeDetailsDialog: public Dialog { public: @@ -89,33 +147,50 @@ class ThemeDetailsDialog: public Dialog theme(theme), saveHandler(saveHandler) { - FormGridLayout grid(detailsDialogRect.w); - grid.setLabelWidth(labelWidth); - grid.spacer(8); + lv_obj_set_style_bg_color(content->getLvObj(), makeLvColor(COLOR_THEME_SECONDARY3), 0); + lv_obj_set_style_bg_opa(content->getLvObj(), LV_OPA_100, LV_PART_MAIN); + auto form = new FormWindow(&content->form, rect_t{}); + form->setFlexLayout(); - new StaticText(&content->form, grid.getLabelSlot(), STR_NAME, 0, COLOR_THEME_PRIMARY1); - new TextEdit(&content->form, grid.getFieldSlot(), this->theme.getName(), NAME_LENGTH); - grid.nextLine(); - new StaticText(&content->form, grid.getLabelSlot(), STR_AUTHOR, 0, COLOR_THEME_PRIMARY1); - new TextEdit(&content->form, grid.getFieldSlot(), this->theme.getAuthor(), AUTHOR_LENGTH); - grid.nextLine(); - new StaticText(&content->form, grid.getLineSlot(), STR_DESCRIPTION, 0, COLOR_THEME_PRIMARY1); - grid.nextLine(); - new TextEdit(&content->form, grid.getLineSlot(), this->theme.getInfo(), INFO_LENGTH); - grid.nextLine(); + FlexGridLayout grid(d_col_dsc, row_dsc, 2); - rect_t r = {detailsDialogRect.w - (BUTTON_WIDTH + 5), grid.getWindowHeight() + 5, BUTTON_WIDTH, BUTTON_HEIGHT }; - new TextButton(&content->form, r, STR_SAVE, [=] () { + auto line = form->newLine(&grid); + + new StaticText(line, rect_t{}, STR_NAME, 0, COLOR_THEME_PRIMARY1); + auto te = new TextEdit(line, rect_t{}, this->theme.getName(), NAME_LENGTH); + lv_obj_set_grid_cell(te->getLvObj(), LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); + + line = form->newLine(&grid); + + new StaticText(line, rect_t{}, STR_AUTHOR, 0, COLOR_THEME_PRIMARY1); + te = new TextEdit(line, rect_t{}, this->theme.getAuthor(), AUTHOR_LENGTH); + lv_obj_set_grid_cell(te->getLvObj(), LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); + + FlexGridLayout grid2(b_col_dsc, row_dsc, 2); + + line = form->newLine(&grid2); + + new StaticText(line, rect_t{}, STR_DESCRIPTION, 0, COLOR_THEME_PRIMARY1); + line = form->newLine(&grid2); + te = new TextEdit(line, rect_t{}, this->theme.getInfo(), INFO_LENGTH); + lv_obj_set_grid_cell(te->getLvObj(), LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1); + + line = form->newLine(&grid2); + line->padTop(20); + + auto button = new TextButton(line, rect_t{0, 0, lv_pct(30), 32}, STR_SAVE, [=] () { if (saveHandler != nullptr) saveHandler(this->theme); deleteLater(); return 0; }); - r.x -= (BUTTON_WIDTH + 5); - new TextButton(&content->form, r, STR_CANCEL, [=] () { + lv_obj_set_grid_cell(button->getLvObj(), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); + + button = new TextButton(line, rect_t{0, 0, lv_pct(30), 32}, STR_CANCEL, [=] () { deleteLater(); return 0; }); + lv_obj_set_grid_cell(button->getLvObj(), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); } protected: diff --git a/radio/src/gui/colorlcd/radio_theme.h b/radio/src/gui/colorlcd/radio_theme.h index b0a69c1e8..86273af5a 100644 --- a/radio/src/gui/colorlcd/radio_theme.h +++ b/radio/src/gui/colorlcd/radio_theme.h @@ -19,61 +19,9 @@ * GNU General Public License for more details. */ #include "tabsgroup.h" -#include "color_editor.h" -#include "file_preview.h" #include "file_carosell.h" -constexpr int BOX_MARGIN = 2; -constexpr int MAX_BOX_WIDTH = 15; - -class ThemeColorPreview : public FormField -{ - public: - ThemeColorPreview(Window *parent, const rect_t &rect, std::vector colorList) : - FormField(parent, rect, NO_FOCUS), - colorList(colorList) - { - setBoxWidth(); - } - ~ThemeColorPreview() - { - } - - void setColorList(std::vector colorList) - { - this->colorList.assign(colorList.begin(), colorList.end()); - setBoxWidth(); - invalidate(); - } - - void paint(BitmapBuffer *dc) override - { - int totalNessessarySpace = colorList.size() * (boxWidth + 2); - int axis = rect.w > rect.h ? rect.w : rect.h; - axis = (axis - totalNessessarySpace) / 2; - for (auto color: colorList) { - if (rect.w > rect.h) { - dc->drawSolidFilledRect(axis, 0, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue)); - dc->drawSolidRect(axis, 0, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK)); - } else { - dc->drawSolidFilledRect(0, axis, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue)); - dc->drawSolidRect(0, axis, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK)); - } - axis += boxWidth + BOX_MARGIN; - } - } - - protected: - std::vector colorList; - int boxWidth = MAX_BOX_WIDTH; - void setBoxWidth() - { - auto winSize = rect.w > rect.h ? rect.w : rect.h; - boxWidth = winSize / (colorList.size() + BOX_MARGIN); - boxWidth = min(boxWidth, MAX_BOX_WIDTH); - } -}; - +class ThemeColorPreview; class ThemeSetupPage: public PageTab { public: