diff --git a/firmware/src/gui/pages/module_view.hh b/firmware/src/gui/pages/module_view.hh index e194cbb4d..2b8579e05 100644 --- a/firmware/src/gui/pages/module_view.hh +++ b/firmware/src/gui/pages/module_view.hh @@ -54,6 +54,7 @@ struct ModuleViewPage : PageBase { lv_hide(ui_ModuleViewCableCancelBut); lv_group_remove_all_objs(group); + lv_group_add_obj(group, ui_ModuleViewHideBut); lv_group_add_obj(group, ui_ModuleViewActionBut); lv_group_add_obj(group, ui_ModuleViewSettingsBut); lv_group_add_obj(group, ui_ModuleViewCableCancelBut); @@ -69,6 +70,7 @@ struct ModuleViewPage : PageBase { lv_obj_add_event_cb(ui_ElementRoller, roller_click_cb, LV_EVENT_CLICKED, this); lv_obj_add_event_cb(ui_ElementRoller, roller_focus_cb, LV_EVENT_FOCUSED, this); lv_obj_add_event_cb(ui_ModuleViewCableCancelBut, cancel_cable_cb, LV_EVENT_CLICKED, this); + lv_obj_add_event_cb(ui_ModuleViewHideBut, hide_but_cb, LV_EVENT_CLICKED, this); } void prepare_focus() override { @@ -128,20 +130,11 @@ struct ModuleViewPage : PageBase { } } - void redraw_module() { - reset_module_page(); - size_t num_elements = moduleinfo.elements.size(); - opts.reserve(num_elements * 32); // estimate avg. 32 chars per roller item - button.reserve(num_elements); - drawn_elements.reserve(num_elements); - - auto module_drawer = ModuleDrawer{ui_ModuleImage, 240}; - canvas = module_drawer.draw_faceplate(slug, buffer); - + unsigned resize_module_image(unsigned max) { lv_obj_refr_size(canvas); auto width_px = lv_obj_get_width(canvas); //module img + padding is no more than 190px wide - auto display_widthpx = std::min(width_px + 4, 190); + auto display_widthpx = std::min(width_px + 4, max); lv_obj_set_width(ui_ModuleImage, display_widthpx); lv_obj_refr_size(ui_ModuleImage); if (lv_obj_get_width(ui_ModuleImage) > width_px) { @@ -152,6 +145,27 @@ struct ModuleViewPage : PageBase { lv_obj_clear_flag(canvas, LV_OBJ_FLAG_SCROLLABLE); + auto roller_width = std::min(320 - display_widthpx, 220); //roller is no more than 220px wide + lv_obj_set_size(ui_ElementRollerPanel, roller_width, 240); + if (max == 320) { + lv_obj_set_x(ui_ElementRollerPanel, 320); + } else { + lv_obj_set_x(ui_ElementRollerPanel, 0); + } + + return display_widthpx; + } + + void redraw_module() { + reset_module_page(); + size_t num_elements = moduleinfo.elements.size(); + opts.reserve(num_elements * 32); // estimate avg. 32 chars per roller item + button.reserve(num_elements); + drawn_elements.reserve(num_elements); + + auto module_drawer = ModuleDrawer{.container = ui_ModuleImage, .height = 240}; + canvas = module_drawer.draw_faceplate(slug, buffer); + active_knobset = page_list.get_active_knobset(); module_drawer.draw_mapped_elements( @@ -174,7 +188,7 @@ struct ModuleViewPage : PageBase { auto base = base_element(drawn_element.element); if (base.short_name.size() == 0) { - pr_info("Skipping element with no name\n"); + pr_info("Element roller: Skipping element with no name\n"); continue; } @@ -233,11 +247,13 @@ struct ModuleViewPage : PageBase { if (opts.length() > 0) opts.pop_back(); - //Show Roller and select it + //Size Module Image and Roller lv_obj_set_pos(ui_ElementRollerPanel, 0, 0); - auto roller_width = std::min(320 - display_widthpx, 220); //roller is no more than 220px wide - lv_obj_set_size(ui_ElementRollerPanel, roller_width, 240); - lv_obj_clear_flag(ui_ElementRollerPanel, LV_OBJ_FLAG_HIDDEN); + + resize_module_image(190); + full_screen_mode = false; + + lv_show(ui_ElementRollerPanel); // Add text list to roller options lv_roller_set_options(ui_ElementRoller, opts.c_str(), LV_ROLLER_MODE_NORMAL); @@ -256,6 +272,8 @@ struct ModuleViewPage : PageBase { cable_drawer.set_height(240); update_cable_style(true); + lv_obj_refr_size(ui_ElementRollerPanel); + auto roller_width = lv_obj_get_width(ui_ElementRollerPanel); mapping_pane.prepare_focus(group, roller_width, is_patch_playing); // TODO: useful to make a PageArgument that selects an item from the roller but stays in List mode? @@ -302,15 +320,19 @@ struct ModuleViewPage : PageBase { } else if (settings_menu.is_visible()) { settings_menu.hide(); - } else if (mode == ViewMode::List) { - args.module_id = this_module_id; - load_prev_page(); - } else if (mode == ViewMode::Mapping) { mapping_pane.back_event(); } else if (mode == ViewMode::ExtraMenu) { module_menu.back_event(); + + } else if (full_screen_mode) { + full_screen_mode = false; + resize_module_image(190); + + } else if (mode == ViewMode::List) { + args.module_id = this_module_id; + load_prev_page(); } } @@ -655,12 +677,20 @@ private: pr_err("Error completing cable\n"); } else { + page->mode = ViewMode::Mapping; page->args.detail_mode = true; lv_hide(ui_ElementRollerPanel); page->roller_hover.hide(); page->mapping_pane.show(page->drawn_elements[*drawn_idx]); + + if (page->full_screen_mode) { + // TODO: if fullscreen, then open Adjust pop up directly + // But keep it hidden? + // If it's a button, the just immediately toggle state + // page->mapping_pane.control_popup.show(page->drawn_element); + } } //Not an element: Is it the Extra Menu? @@ -703,6 +733,15 @@ private: page->page_list.request_new_page(PageId::PatchView, page->args); } + static void hide_but_cb(lv_event_t *event) { + if (!event || !event->user_data) + return; + auto page = static_cast(event->user_data); + + page->resize_module_image(320); + page->full_screen_mode = true; + } + std::optional get_drawn_idx(unsigned roller_idx) { if (roller_idx < roller_drawn_el_idx.size()) { auto drawn_idx = roller_drawn_el_idx[roller_idx]; @@ -756,6 +795,8 @@ private: unsigned dyn_frame_throttle_ctr = 1; constexpr static unsigned DynFrameThrottle = 2; + bool full_screen_mode = false; + enum { ExtraMenuTag = -2 }; }; diff --git a/firmware/src/gui/slsexport/meta5/screens/ui_MappingMenu.c b/firmware/src/gui/slsexport/meta5/screens/ui_MappingMenu.c index ca9c72a6b..0e1bec32d 100644 --- a/firmware/src/gui/slsexport/meta5/screens/ui_MappingMenu.c +++ b/firmware/src/gui/slsexport/meta5/screens/ui_MappingMenu.c @@ -79,7 +79,7 @@ ui_ElementRollerPanel = lv_obj_create(ui_MappingFlexZone); lv_obj_set_width( ui_ElementRollerPanel, 157); lv_obj_set_height( ui_ElementRollerPanel, lv_pct(100)); lv_obj_set_align( ui_ElementRollerPanel, LV_ALIGN_RIGHT_MID ); -lv_obj_add_flag( ui_ElementRollerPanel, LV_OBJ_FLAG_HIDDEN | LV_OBJ_FLAG_OVERFLOW_VISIBLE ); /// Flags +lv_obj_add_flag( ui_ElementRollerPanel, LV_OBJ_FLAG_OVERFLOW_VISIBLE ); /// Flags lv_obj_clear_flag( ui_ElementRollerPanel, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_PRESS_LOCK | LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE | LV_OBJ_FLAG_SCROLLABLE ); /// Flags lv_obj_set_style_radius(ui_ElementRollerPanel, 4, LV_PART_MAIN| LV_STATE_DEFAULT); lv_obj_set_style_bg_color(ui_ElementRollerPanel, lv_color_hex(0x333333), LV_PART_MAIN | LV_STATE_DEFAULT ); @@ -160,6 +160,37 @@ lv_obj_set_style_pad_right(ui_ModuleViewCableCreateLabel, 0, LV_PART_MAIN| LV_ST lv_obj_set_style_pad_top(ui_ModuleViewCableCreateLabel, 12, LV_PART_MAIN| LV_STATE_DEFAULT); lv_obj_set_style_pad_bottom(ui_ModuleViewCableCreateLabel, 0, LV_PART_MAIN| LV_STATE_DEFAULT); +ui_ModuleViewHideBut = lv_btn_create(ui_ElementRollerButtonCont); +lv_obj_set_width( ui_ModuleViewHideBut, 30); +lv_obj_set_height( ui_ModuleViewHideBut, 30); +lv_obj_set_x( ui_ModuleViewHideBut, -30 ); +lv_obj_set_y( ui_ModuleViewHideBut, -1 ); +lv_obj_set_align( ui_ModuleViewHideBut, LV_ALIGN_TOP_RIGHT ); +lv_obj_set_style_radius(ui_ModuleViewHideBut, 20, LV_PART_MAIN| LV_STATE_DEFAULT); +lv_obj_set_style_bg_color(ui_ModuleViewHideBut, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT ); +lv_obj_set_style_bg_opa(ui_ModuleViewHideBut, 0, LV_PART_MAIN| LV_STATE_DEFAULT); +lv_obj_set_style_bg_color(ui_ModuleViewHideBut, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_CHECKED ); +lv_obj_set_style_bg_opa(ui_ModuleViewHideBut, 0, LV_PART_MAIN| LV_STATE_CHECKED); +lv_obj_set_style_text_color(ui_ModuleViewHideBut, lv_color_hex(0xFD8B18), LV_PART_MAIN | LV_STATE_CHECKED ); +lv_obj_set_style_text_opa(ui_ModuleViewHideBut, 255, LV_PART_MAIN| LV_STATE_CHECKED); +lv_obj_set_style_outline_color(ui_ModuleViewHideBut, lv_color_hex(0xFD8B18), LV_PART_MAIN | LV_STATE_FOCUSED ); +lv_obj_set_style_outline_opa(ui_ModuleViewHideBut, 255, LV_PART_MAIN| LV_STATE_FOCUSED); +lv_obj_set_style_outline_width(ui_ModuleViewHideBut, 2, LV_PART_MAIN| LV_STATE_FOCUSED); +lv_obj_set_style_outline_pad(ui_ModuleViewHideBut, -1, LV_PART_MAIN| LV_STATE_FOCUSED); +lv_obj_set_style_text_color(ui_ModuleViewHideBut, lv_color_hex(0xFD8B18), LV_PART_MAIN | LV_STATE_FOCUSED ); +lv_obj_set_style_text_opa(ui_ModuleViewHideBut, 255, LV_PART_MAIN| LV_STATE_FOCUSED); +lv_obj_set_style_outline_color(ui_ModuleViewHideBut, lv_color_hex(0xFD8B18), LV_PART_MAIN | LV_STATE_FOCUS_KEY ); +lv_obj_set_style_outline_opa(ui_ModuleViewHideBut, 255, LV_PART_MAIN| LV_STATE_FOCUS_KEY); +lv_obj_set_style_outline_width(ui_ModuleViewHideBut, 2, LV_PART_MAIN| LV_STATE_FOCUS_KEY); +lv_obj_set_style_outline_pad(ui_ModuleViewHideBut, 1, LV_PART_MAIN| LV_STATE_FOCUS_KEY); + +ui_ModuleViewActionHideButLabel = lv_label_create(ui_ModuleViewHideBut); +lv_obj_set_width( ui_ModuleViewActionHideButLabel, LV_SIZE_CONTENT); /// 1 +lv_obj_set_height( ui_ModuleViewActionHideButLabel, LV_SIZE_CONTENT); /// 1 +lv_obj_set_align( ui_ModuleViewActionHideButLabel, LV_ALIGN_CENTER ); +lv_label_set_text(ui_ModuleViewActionHideButLabel,""); +lv_obj_set_style_text_font(ui_ModuleViewActionHideButLabel, &ui_font_MuseoSansRounded70016, LV_PART_MAIN| LV_STATE_DEFAULT); + ui_ModuleViewActionBut = lv_btn_create(ui_ElementRollerButtonCont); lv_obj_set_width( ui_ModuleViewActionBut, 30); lv_obj_set_height( ui_ModuleViewActionBut, 30); @@ -259,6 +290,7 @@ lv_obj_set_height( ui_ElementRoller, 186); lv_obj_set_width( ui_ElementRoller, lv_pct(109)); lv_obj_set_align( ui_ElementRoller, LV_ALIGN_BOTTOM_MID ); lv_obj_add_state( ui_ElementRoller, LV_STATE_FOCUSED ); /// States +lv_obj_add_flag( ui_ElementRoller, LV_OBJ_FLAG_HIDDEN ); /// Flags lv_obj_clear_flag( ui_ElementRoller, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_PRESS_LOCK | LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE ); /// Flags lv_obj_set_style_text_color(ui_ElementRoller, lv_color_hex(0x999999), LV_PART_MAIN | LV_STATE_DEFAULT ); lv_obj_set_style_text_opa(ui_ElementRoller, 255, LV_PART_MAIN| LV_STATE_DEFAULT); @@ -315,7 +347,6 @@ lv_obj_set_height( ui_ModuleViewExtraMenuRoller, 186); lv_obj_set_width( ui_ModuleViewExtraMenuRoller, lv_pct(109)); lv_obj_set_align( ui_ModuleViewExtraMenuRoller, LV_ALIGN_BOTTOM_MID ); lv_obj_add_state( ui_ModuleViewExtraMenuRoller, LV_STATE_FOCUSED ); /// States -lv_obj_add_flag( ui_ModuleViewExtraMenuRoller, LV_OBJ_FLAG_HIDDEN ); /// Flags lv_obj_clear_flag( ui_ModuleViewExtraMenuRoller, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_PRESS_LOCK | LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE ); /// Flags lv_obj_set_style_text_color(ui_ModuleViewExtraMenuRoller, lv_color_hex(0x999999), LV_PART_MAIN | LV_STATE_DEFAULT ); lv_obj_set_style_text_opa(ui_ModuleViewExtraMenuRoller, 255, LV_PART_MAIN| LV_STATE_DEFAULT); @@ -368,7 +399,7 @@ lv_obj_set_style_bg_opa(ui_ModuleViewExtraMenuRoller, 255, LV_PART_SELECTED| LV_ ui_ModuleViewActionMenu = lv_obj_create(ui_ElementRollerPanel); lv_obj_set_width( ui_ModuleViewActionMenu, 158); lv_obj_set_height( ui_ModuleViewActionMenu, LV_SIZE_CONTENT); /// 168 -lv_obj_set_x( ui_ModuleViewActionMenu, 0 ); +lv_obj_set_x( ui_ModuleViewActionMenu, 180 ); lv_obj_set_y( ui_ModuleViewActionMenu, -3 ); lv_obj_set_align( ui_ModuleViewActionMenu, LV_ALIGN_TOP_RIGHT ); lv_obj_set_flex_flow(ui_ModuleViewActionMenu,LV_FLEX_FLOW_COLUMN); @@ -567,6 +598,7 @@ lv_obj_set_height( ui_MappingParameters, 240); lv_obj_set_align( ui_MappingParameters, LV_ALIGN_BOTTOM_RIGHT ); lv_obj_set_flex_flow(ui_MappingParameters,LV_FLEX_FLOW_ROW_WRAP); lv_obj_set_flex_align(ui_MappingParameters, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START); +lv_obj_add_flag( ui_MappingParameters, LV_OBJ_FLAG_HIDDEN ); /// Flags lv_obj_clear_flag( ui_MappingParameters, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_PRESS_LOCK | LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE | LV_OBJ_FLAG_SCROLL_ELASTIC | LV_OBJ_FLAG_SCROLL_MOMENTUM | LV_OBJ_FLAG_SCROLL_CHAIN ); /// Flags lv_obj_set_style_radius(ui_MappingParameters, 4, LV_PART_MAIN| LV_STATE_DEFAULT); lv_obj_set_style_bg_color(ui_MappingParameters, lv_color_hex(0x333333), LV_PART_MAIN | LV_STATE_DEFAULT ); diff --git a/firmware/src/gui/slsexport/meta5/ui.c b/firmware/src/gui/slsexport/meta5/ui.c index a0f2d31fc..df45a580f 100644 --- a/firmware/src/gui/slsexport/meta5/ui.c +++ b/firmware/src/gui/slsexport/meta5/ui.c @@ -175,6 +175,8 @@ lv_obj_t *ui_ElementRollerPanel; lv_obj_t *ui_ElementRollerButtonCont; lv_obj_t *ui_ElementRollerModuleName; lv_obj_t *ui_ModuleViewCableCreateLabel; +lv_obj_t *ui_ModuleViewHideBut; +lv_obj_t *ui_ModuleViewActionHideButLabel; lv_obj_t *ui_ModuleViewActionBut; lv_obj_t *ui_ModuleViewActionButLabel; lv_obj_t *ui_ModuleViewSettingsBut; diff --git a/firmware/src/gui/slsexport/meta5/ui.h b/firmware/src/gui/slsexport/meta5/ui.h index 2857433b5..3cc7ca162 100644 --- a/firmware/src/gui/slsexport/meta5/ui.h +++ b/firmware/src/gui/slsexport/meta5/ui.h @@ -177,6 +177,8 @@ extern lv_obj_t *ui_ElementRollerPanel; extern lv_obj_t *ui_ElementRollerButtonCont; extern lv_obj_t *ui_ElementRollerModuleName; extern lv_obj_t *ui_ModuleViewCableCreateLabel; +extern lv_obj_t *ui_ModuleViewHideBut; +extern lv_obj_t *ui_ModuleViewActionHideButLabel; extern lv_obj_t *ui_ModuleViewActionBut; extern lv_obj_t *ui_ModuleViewActionButLabel; extern lv_obj_t *ui_ModuleViewSettingsBut;