Design an application

This technical note focuses on how to design an application based on a home page with other pages. Buttons allow to go from one page to another.

The application relies on a simplified finite-state machine. The states correspond to the pages and the transitions to the buttons. The graph below shows the states in upper case and the transitions in lower case.

Set the shared parameters

The shared parameters list the different pages as an enumeration and select the screen.

// Structures and enumerations
enum fsmPage_e
{
    fsmHome = 0xff00,
    fsmPage1,
    fsmPage2,
    fsmExit = 0xffff
};

// Variables
Screen_EPD_EXT3_Fast myScreen(eScreen_EPD_370_PS_0C_Touch, boardRaspberryPiPico_RP2040);
GUI myGUI(&myScreen);
uint8_t fontText, fontButton, fontTitle;
fsmPage_e fsmPage = fsmHome;
uint16_t x, y, dx, dy;

Set the shared functions

There are two shared functions.

// Home button
void drawButtonHome(char * text);
bool checkButtonHome();

drawButtonHome() displays the title of the page with a Home button to ensure consistency across the application.

checkButtonHome() checks the Home button.

Set the transition manager

The transition manager includes the core of the finite-state machine.

ConfigureUse

The configuration starts the screen, loads the fonts, launches the GUI and initialises the finite-state machine.

void setup()
{
    hV_HAL_begin();
    myScreen.begin();

    // Fonts
    fontButton = myScreen.addFont(Font_DejaVuSans16b);
    fontButton -= (fontButton > 0 ? 1 : 0);
    fontText = myScreen.addFont(Font_DejaVuSans18);
    fontText -= (fontText > 0 ? 1 : 0);
    fontTitle = myScreen.addFont(Font_DejaVuSans20b);
    fontTitle -= (fontTitle > 0 ? 1 : 0);

    myGUI.begin();
    fsmPage = fsmHome;
}

The main loop runs the finite-state machine, processes the states and calls the relevant pages.

void loop()
{
    switch (fsmPage)
    {
        case fsmHome:
            pageHome();
            break;

        case fsmPage1:
            page1();
            break;

        case fsmPage2:
            page2();
            break;

        case fsmExit:
            myScreen.regenerate();
            hV_HAL_exit();
            break;

        default:
            break;
    }

    hV_HAL_delayMilliseconds(10);
}

Define the home page

The home page displays buttons to access the other pages.

ConfigureUse

The configuration sets each button with the state number of the selected page as index.

myGUI.delegate(false);

item myItem1 = setItem(fsmPage1, "Page 1");
button myButton1;
myButton1.dDefine(dx * 1, dy * 2, dx * 2, dy, myItem1, fontButton);
myButton1.draw();

myScreen.flushFast();

The technical note Design a page provides more details.

The main loop checks the interrupt from the touch controller, queries each buttons, loads the index from the button pressed as the state number of the selected page, and exits if it has changed.

myGUI.delegate(true);
while (fsmPage == fsmHome)
{
    if (myScreen.getTouchInterrupt())
    {
        if (myButton1.check())
        {
            fsmPage = (fsmPage_e)myButton1.getIndex();
        }
    }
    hV_HAL_delayMilliseconds(100);
}

Define the other pages

The others pages are similar to the home page, except the additional title of the page on top with a button to return to the home page.

ConfigureUse

The configuration calls drawButtonHome() to set the title of the page with a Home button and defines the local elements.

myGUI.delegate(false);

drawButtonHome("Page 1");

item myItem = setItem(0x0002, "Page 2");
button myButton;
myButton.dDefine(dx * 1, dy * 2, dx * 2, dy, myItem, fontButton);
myButton.draw();

myScreen.flushFast();

The technical note Design a page provides more details.

The main loop checks the Home button and the elements defined locally.

myGUI.delegate(true);
while (fsmPage == fsmPage1)
{
    if (myScreen.getTouchInterrupt())
    {
        if (checkButtonHome())
        {
            fsmPage = fsmHome;
        }
        else if (myButton.check())
        {
            fsmPage = fsmPage2;
        }
    }
    hV_HAL_delayMilliseconds(100);
}