Issues with U8G2 and Offset Panel

[lucamarrochi]

Hello,

I've put down a little example of ArduinoMenu using 256x64 pixels with U8G2 renderer. I would like to use a panel that has offset in X and Y, as defined below: `#define fontName u8g2_font_5x7_tf

define fontX 5

define fontY 9

define offsetX 10

define offsetY 10

define U8_Width 200

define U8_Height 54

U8G2_SSD1322_NHD_256X64_F_4W_HW_SPI u8g2(U8G2_R0, / cs=/ U8_CS, / dc=/ U8_DC, / reset=/ U8_RST);`

The menu is very simple: MENU(mainMenu, "Blink menu", Menu::doNothing, Menu::noEvent, Menu::wrapStyle ,FIELD(timeOn,"On","ms",0,1000,10,1, Menu::doNothing, Menu::noEvent, Menu::noStyle) ,FIELD(timeOff,"Off","ms",0,10000,10,1,Menu::doNothing, Menu::noEvent, Menu::noStyle) ,EXIT("<Back") );

I got an issue with visualization: on the left side of the menu (when offset is specified) there is an unwanted pipe as you can see from images. They are located at offsetX-1. The pipe is present also on menu title at the same position.

[neu-rah]

Hi

that offset if for adjusting the font margin, you should set it to remove the pipe.

an example of panels (menu position) as defined here: https://github.com/neu-rah/ArduinoMenu/blob/master/examples/U8G2/U8G2/U8G2.ino#L188

U8G2_OUT(u8g2,colors,fontX,fontY,offsetX,offsetY,{0,0,U8_Width/fontX,U8_Height/fontY})

this is the panel definition in character coordinates (size depends on chosen font)

{0,0,U8_Width/fontX,U8_Height/fontY}

you should change the 0,0 (x,y) and set the width height accordingly.

please note that u8g2 menu driver will not respect the right margin to solve UTF8 issues, so its up to you to not define extensive content.

you can also specify multiple panels, menu will use them whenever possible (submenus and preview), by specifying a list of panels

{{x0,y0,w0,h0},{x1,y1,w1,h1},...}

hope that helps

[lucamarrochi]

Thank you for the reply. I've tried two different configuration:

#define fontName u8g2_font_5x7_tf #define fontX 5 #define fontY 9 #define offsetX 0 #define offsetY 0 #define U8_Width 200 #define U8_Height 54 U8G2_SSD1322_NHD_256X64_F_4W_HW_SPI u8g2(U8G2_R0, /* cs=*/ U8_CS, /* dc=*/ U8_DC, /* reset=*/ U8_RST);

MENU_OUTPUTS(out,MAX_DEPTH
  ,U8G2_OUT(u8g2,colors,fontX,fontY,offsetX,offsetY,{10/fontX,10/fontY,U8_Width/fontX,U8_Height/fontY})
  ,SERIAL_OUT(Serial)
);`

and

#define fontName u8g2_font_5x7_tf #define fontX 5 #define fontY 9 #define offsetX 10 #define offsetY 10 #define U8_Width 200 #define U8_Height 54 U8G2_SSD1322_NHD_256X64_F_4W_HW_SPI u8g2(U8G2_R0, / cs=/ U8_CS, / dc=/ U8_DC, / reset=/ U8_RST);``

MENU_OUTPUTS(out,MAX_DEPTH
  ,U8G2_OUT(u8g2,colors,fontX,fontY,offsetX,offsetY,{0,0,U8_Width/fontX,U8_Height/fontY})
  ,SERIAL_OUT(Serial)
);`

But I get the same result. My aim is to have only one panel, aligned to the right side of the display. I would like to use the left part of the display to render other informations not related to the menu.

[neu-rah]

please use just integers char pos x,y as menu driver will already account for font size

ex: {2,2,U8_Width/fontX-2,U8_Height/fontY-2}

[lucamarrochi]

Using:

#define fontName u8g2_font_5x7_tf
  #define fontX 5
  #define fontY 9
  #define offsetX 0
  #define offsetY 0
  #define U8_Width 200
  #define U8_Height 54

MENU_OUTPUTS(out,MAX_DEPTH
  ,U8G2_OUT(u8g2,colors,fontX,fontY,offsetX,offsetY,{2,2,U8_Width/fontX-2,U8_Height/fontY-2})
  ,SERIAL_OUT(Serial)
);

I see different offset but same result

[neu-rah]

I will check this. Hope that I can duplicate it on similar display... I will give some feedback as soon as possible Thanks for reporting

[lucamarrochi]

I've tried also on SSD1306 I2C Display with U8G2, same result.

[neu-rah]

this is great because i have this display, thank you definitely something is wrong there.

[lucamarrochi]

Hi neu-rah, I think I've found some code that is related to this:

in u8g2Out.h I've changed this line

void clearLine(idx_t ln,idx_t panelNr=0,colorDefs color=bgColor,bool selected=false,status stat=enabledStatus,bool edit=false) override {
                const panel p=panels[panelNr];
                setColor(color,selected,stat,edit);
                gfx.drawBox(p.x*resX + offsetX - 1,(p.y+ln)*resY + offsetY /*- fontMarginY*/,maxX()*resX /*+ fontMarginY*/ /*+ fontMarginY*/,resY /*+ fontMarginY*/ /*+ fontMarginY*/);
                //setCursor(0,ln);
            }

gfx.drawBox(p.xresX + offsetX - 1,(p.y+ln)resY + offsetY /- fontMarginY/,maxX()resX /+ fontMarginY/ /+ fontMarginY/,resY /+ fontMarginY/ /+ fontMarginY*/);

With this:

void clearLine(idx_t ln,idx_t panelNr=0,colorDefs color=bgColor,bool selected=false,status stat=enabledStatus,bool edit=false) override {
                const panel p=panels[panelNr];
                setColor(color,selected,stat,edit);
                gfx.drawBox(p.x*resX + offsetX ,(p.y+ln)*resY + offsetY /*- fontMarginY*/,maxX()*resX /*+ fontMarginY*/ /*+ fontMarginY*/,resY /*+ fontMarginY*/ /*+ fontMarginY*/);
                //setCursor(0,ln);
            }

gfx.drawBox(p.xresX + offsetX ,(p.y+ln)resY + offsetY /- fontMarginY/,maxX()resX /+ fontMarginY/ /+ fontMarginY/,resY /+ fontMarginY/ /+ fontMarginY*/);

Here's the result:

I don't know if it's the right behavior, but for sure it's on that part!

[neu-rah]

looks good, wana submit a PR?

[lucamarrochi]

it's ok, which branch should I use?

In the meantime, I've found another strange behavior related to panel offset: The panel of the menu is right justify, and I draw a 20x20pixels frame in the left part. Scrolling the menu is ok until you reach EXIT entry. In that case the frame disappear. The routine to draw is reported below:

MENU(mainMenu, "Blink menu", Menu::doNothing, Menu::noEvent, Menu::showTitle
  ,FIELD(timeOn,"On","ms",0,1000,10,1, Menu::doNothing, Menu::noEvent, Menu::noStyle)
  ,FIELD(timeOff,"Off","ms",0,10000,10,1,Menu::doNothing, Menu::noEvent, Menu::noStyle)
  ,EXIT("<Back")
);

void loop() {
  //nav.doInput();
  // digitalWrite(LEDPIN, ledCtrl);
  //if (nav.changed(0)) {//only draw if menu changed for gfx device
    //change checking leaves more time for other tasks

    u8g2.clearBuffer();  
    //nav.doOutput(); 
    nav.poll();
    u8g2.drawFrame(0,0,20,20);
    u8g2.sendBuffer();
    delay(100);//simulate other tasks delay
}

Scrolling the menu you see:

[neu-rah]

Master branch please that menu looks really nice! and i like the positioning, can i use this image as an example? thank you.

[lucamarrochi]

Sure you can use the image! I have to find what is wrong with the rendering of the rectangle when in "< Back" position of the menu. The only difference is that's is an "EXIT" entry in the menu.

[neu-rah]

Thank you! https://github.com/neu-rah/ArduinoMenu/pull/292 please reopen if needed

[NoObjective]

In the meantime, I've found another strange behavior related to panel offset: The panel of the menu is right justify, and I draw a 20x20pixels frame in the left part. Scrolling the menu is ok until you reach EXIT entry. In that case the frame disappear.

I also have this problem, any solution?