Creating multiscreen GUI

[SergeTauger]

Hi,
My current task is to make a program that behaves in a such a way:
we have three information screens (forms) with no selectable fields that are visible to everyone, navigation is done by next/prev buttons. If select button is pressed, new form "pin request" appears, if pin is OK, user is let to configuration menu, otherwise previous information window is shown.

I am not satisfied with solution I came to. Now to switch between navigation windows I did the following
Each form has invisible field MUI_AUX("N1") with callback

static uint8_t Navigate_screens_pin(mui_t *ui, uint8_t msg)
{
	switch(msg){
	case MUIF_MSG_EVENT_NEXT:
		if (main_screen_cnt < MAX_MENU_SCREENS){
			main_screen_cnt++;
			return mui_GotoFormAutoCursorPosition(ui, main_screen_cnt);
		}
		break;
	case MUIF_MSG_EVENT_PREV:
		if (main_screen_cnt > 1){
			main_screen_cnt--;
			return mui_GotoFormAutoCursorPosition(ui, main_screen_cnt);
		}
		break;
	default:
		return 0;
	}
	return 0;
}

and in periodic buttons handling I just broadcast button events to all fields of current form, even if they are not selectable

switch(u8x8_GetMenuEvent(u8g2_GetU8x8(&u8g2))) {
    case U8X8_MSG_GPIO_MENU_SELECT:
        mui_SendSelect(&mui);
        is_redraw = 1;
        break;
    case U8X8_MSG_GPIO_MENU_NEXT:
        mui_loop_over_form(&mui, Task_find_first_cursor_uif);
        if (mui.target_fds != NULL){
            mui_NextField(&mui);
        } else {
            mui_loop_over_form(&mui,BroadcastNext);
        }
        is_redraw = 1;
        break;
    /* ... */
}
uint8_t BroadcastNext(mui_t *ui)
{
	muif_cb cb = muif_get_cb(ui->uif);
	if (cb != NULL){
		cb(ui, MUIF_MSG_EVENT_NEXT);
	}
	return 0;
}

to do so, I made mui_loop_over_form and mui_uif_is_cursor_selectable public. It seems really dirty. Could you please recommend some better approach?

Best,
Serge

[olikraus]

I have created a C-Code example here (transfer to Arduino C++ should be easy): https://github.com/olikraus/u8g2/blob/master/sys/sdl/mui_static_pages/main.c

The basic idea is to have two different event loops:

• One normal event loop for password input (and any other selectable fields)
• One special event loop for the static displays

The normal event loop should look like this:

u8g2/sys/sdl/mui_static_pages/main.c

Lines 156 to 161 in dc42d10

	if ( k == 'n' )
	mui_NextField(&ui);
	if ( k == 'p' )
	mui_PrevField(&ui);
	if ( k == 's' )
	mui_SendSelect(&ui);

The special event loop will be called if any of the static pages is visible (in this case: if the form id is between 10 and 12):

u8g2/sys/sdl/mui_static_pages/main.c

Lines 132 to 152 in 1e92781

	if ( mui_GetCurrentFormId(&ui) >= 10 ) // static pages
	{
	if ( k == 'n' ) /* next static form */
	{
	if ( mui_GetCurrentFormId(&ui) >= 12 )
	mui_GotoForm(&ui, 10, 0);
	else
	mui_GotoForm(&ui, mui_GetCurrentFormId(&ui)+1, 0);
	}
	if ( k == 'p' ) /* previous static form */
	{
	if ( mui_GetCurrentFormId(&ui) <= 10 )
	mui_GotoForm(&ui, 12, 0);
	else
	mui_GotoForm(&ui, mui_GetCurrentFormId(&ui)-1, 0);
	}
	if ( k == 's' ) /* goto password form */
	{
	mui_GotoForm(&ui, 1, 0);
	}
	}

For the special event loop the prev and next buttons will just cycle through the pages by directly setting the form id.

[SergeTauger]

Thank you. That is exactly what I was looking for.