Skip to content

Commit

Permalink
Add fullscreen button to ModuleView
Browse files Browse the repository at this point in the history 
ModuleView Back button more intuitive in fullscreen mode

GUI for full screen button in ModuleView
  • Loading branch information
@danngreen
danngreen committed Dec 24, 2024
1 parent 8bdabe9 commit 531eded
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 23 deletions.
81 changes: 61 additions & 20 deletions firmware/src/gui/pages/module_view.hh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 {
Expand Down Expand Up @@ -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<lv_coord_t>(width_px + 4, 190);
auto display_widthpx = std::min<lv_coord_t>(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) {
Expand All @@ -152,6 +145,27 @@ struct ModuleViewPage : PageBase {

lv_obj_clear_flag(canvas, LV_OBJ_FLAG_SCROLLABLE);

auto roller_width = std::min<lv_coord_t>(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(
Expand All @@ -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;
}

Expand Down Expand Up @@ -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<lv_coord_t>(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);
Expand All @@ -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?
Expand Down Expand Up @@ -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();
}
}

Expand Down Expand Up @@ -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?
Expand Down Expand Up @@ -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<ModuleViewPage *>(event->user_data);

page->resize_module_image(320);
page->full_screen_mode = true;
}

std::optional<unsigned> get_drawn_idx(unsigned roller_idx) {
if (roller_idx < roller_drawn_el_idx.size()) {
auto drawn_idx = roller_drawn_el_idx[roller_idx];
Expand Down Expand Up @@ -756,6 +795,8 @@ private:
unsigned dyn_frame_throttle_ctr = 1;
constexpr static unsigned DynFrameThrottle = 2;

bool full_screen_mode = false;

enum { ExtraMenuTag = -2 };
};

Expand Down
38 changes: 35 additions & 3 deletions firmware/src/gui/slsexport/meta5/screens/ui_MappingMenu.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 );
Expand Down
2 changes: 2 additions & 0 deletions firmware/src/gui/slsexport/meta5/ui.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions firmware/src/gui/slsexport/meta5/ui.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 531eded

Please sign in to comment.