Custom drawing could not be rendered correctly

Hello,
I'm trying to switch my project to tcMenu recently. I don't want to refector the entire project, so I kept a page by creating a CustomDrawing class, in which you could change an integer value by rotating the encoder, switch a boolean value by pressing down the encoder, and go to menu by holding the encoder.

And here comes the problem:
When the page was loaded for the every first time the board boots, everything looks great, and all functions works well, shown as pic1.
However, if I go to the menu by holding the encoder and then go back to this page through a function which calls renderer.takeOverDisplay();, the page could not be loaded correctly, shown as pic2.

Are there anything done incorrectly in my code?

Here's my setup() function:

void setup()
{
    EEPROM.begin(512);

    setupMenu();
    menuMgr.load();
    menuBPM.setCurrentValue(120);
    homePage();
    motorDirection = menuDirection.getBoolean();

    // something else...

CustomDrawing class:

class HomePageDrawingHandler : public CustomDrawing
{
public:
    ~HomePageDrawingHandler() = default;

    void reset() override
    {
        // if we get here the display has been reset because
        // of a timeout of the user interface for example to
        // take over the display
        renderer.takeOverDisplay();
    }

    void started(BaseMenuRenderer *currentRenderer) override
    {
        // take over display has just been called, and we
        // now need to do any initial activity
        gfx.clear();
        switches.changeEncoderPrecision(menuBPM.getMaximumValue(), menuBPM.getCurrentValue());
        draw();
    }

    void draw()
    {   
        gfx.setFontDirection(0);
        gfx.firstPage();
        do
        {
            gfx.setFont(u8g2_font_inr42_mn);
            gfx.setCursor(30, 63);
            gfx.print(menuBPM.getCurrentValue());

            gfx.setFont(u8g2_font_wqy16_t_gb2312a);
            if (menuPlay.getCurrentValue())
            {
                gfx.drawUTF8(0, 14, "On");
            }
            else
            {
                gfx.drawUTF8(0, 14, "Off");
            }

            gfx.setFont(u8g2_font_open_iconic_play_4x_t);
            if (menuPlay.getCurrentValue())
            {
                gfx.drawGlyph(0, 50, 0x0045);
            }
            else
            {
                gfx.drawGlyph(0, 50, 0x0044);
            }

            gfx.setFont(u8g2_font_profont17_mr);
            gfx.drawUTF8(3, 62, "BPM");

        } while (gfx.nextPage());
    }

    void renderLoop(unsigned int currentValue, RenderPressMode userClick) override
    {
        // Button Hold: go to menu
        if (userClick == RPRESS_HELD)
        {
            renderer.giveBackDisplay();
        }
        // Button Click: switch status
        else if (userClick == RPRESS_PRESSED)
        {
            menuPlay.setBoolean(!menuPlay.getBoolean());
            switches.changeEncoderPrecision(menuBPM.getMaximumValue(), menuBPM.getCurrentValue());  // might be the solution of https://www.thecoderscorner.com/jforum/posts/list/167.page
            draw();
        }
        // Rotate: change speed
        if (menuBPM.getCurrentValue() != currentValue)
        {
            menuBPM.setCurrentValue(currentValue);
            draw();
        }
    }
} HomePageDrawingHandler;

void homePage()
{
    renderer.setCustomDrawingHandler(&HomePageDrawingHandler);
    renderer.takeOverDisplay();
}

Callback function which calls renderer.takeOverDisplay();:

void CALLBACK_FUNCTION toHomePage(int id)
{   
    menuMgr.save();
    EEPROM.commit();
    renderer.takeOverDisplay();
}

I'm not a native English speaker, so there might be some grammar mistakes, apology for that.

And finally, thanks everyone's effort on this great library!

[Thumb - IMG_20211031_181015-min.jpg]

Filename IMG_20211031_181015-min.jpg

Description pic1-page rendered correctly when board boots

Filesize 2006 Kbytes

Downloaded 1007 time(s)

[Disk] Download

[Thumb - IMG_20211031_181028-min.jpg]

Filename IMG_20211031_181028-min.jpg

Description pic2-page rendered incorrectly arfer called takeOverDisplay()

Filesize 1307 Kbytes

Downloaded 1002 time(s)

[Disk] Download

When you are called back in take over display you need to reinitialise all aspects of the drawing library. It looks to me like the font baseline point is wrong, make sure you reset the baseline to your prefered choice before starting drawing.

davetcc wrote:When you are called back in take over display you need to reinitialise all aspects of the drawing library. It looks to me like the font baseline point is wrong, make sure you reset the baseline to your prefered choice before starting drawing.

Thanks for your reply!
Solved by adding

gfx.setFontPosBaseline();

in setup() successfully (I'm using u8g2 and the display is called gfx).

Thanks for letting me know.

To summarise for anyone reading this thread, when takeOverDisplay is called for any graphical renderer, you must ensure you reset the font settings (size, baseline, font), colors, and drawing modes.

When you give back the display, there is no need to reset anything, it will be reconfigured by the library before drawing.


Filename	IMG_20211031_181015-min.jpg
Description	pic1-page rendered correctly when board boots
Filesize	2006 Kbytes
Downloaded	1007 time(s)
Download


Filename	IMG_20211031_181028-min.jpg
Description	pic2-page rendered incorrectly arfer called takeOverDisplay()
Filesize	1307 Kbytes
Downloaded	1002 time(s)
Download