Text Button: different results for identical parameters

[u1550l]

I created a GUIslice page using GUIslice Builder with 6 identical text-buttons:

The generated code:

// page E_PG2_4_USER
#define dummyTxt "11111\n67890\nabcde"
#define BTN64 dummyTxt                 
#define BTN65 dummyTxt                 

// Create E_ELEM_BTN64 button with modifiable text label
static char m_strbtn64[21] = BTN64;
pElemRef = gslc_ElemCreateBtnTxt(&m_gui,E_ELEM_BTN64,E_PG2_4_USER,
	(gslc_tsRect){104,0,105,92},
	(char*)m_strbtn64,21,E_BUILTIN15X24,&CbBtnCommon);
gslc_ElemSetRoundEn(&m_gui, pElemRef, true);
m_pElemBtn64 = pElemRef;

// Create E_ELEM_BTN65 button with modifiable text label
static char m_strbtn65[21] = BTN65;
pElemRef = gslc_ElemCreateBtnTxt(&m_gui,E_ELEM_BTN65,E_PG2_4_USER,
	(gslc_tsRect){215,2,105,92},
	(char*)m_strbtn65,21,E_BUILTIN15X24,&CbBtnCommon);
gslc_ElemSetRoundEn(&m_gui, pElemRef, true);
m_pElemBtn65 = pElemRef;

I was expecting to get the same image on my 320x240 pix TFT.
but the two buttons on the right side seem to need more space for the text. The distance between the lines is calculated differently:

Is this a bug?
Any ideas?

Regards, Richard

(edited: replaced "image-button" by "text-button")

[Pconti31]

@u1550l It appears to be a bug inside the GUIslice API since the text is shown differently in the two right buttons but I would guess the '\n' is causing a cursor advancement that's occuring because of the 320 limit being exceeded or on a threshold . Or at least the driver GUIslice is layered upon thinks so (not GUIslice). If that's the case you might want to just shrink the buttons and text so that a margin on the right hand exists.

This would be @ImpulseAdventure Calvin's domain but since He's MIA I could take a look at it if you can post a zip file of your project with just this screen.

Paul--

[u1550l]

@Pconti31
Thank you for your offer.
I will set up a new little project, because the screenshot comes from a somewhat bigger project which you for sure will not want to understand...

= Richard

[u1550l]

hello @Pconti31
this little project shows the problem already:
threeLineButton.zip

I am using a standard 320x240 TFT (ILI9341 controller)

-Richard

[Pconti31]

@u1550l You are not going to believe how easy this was to fix...
Your bug is because you set the last button X position to 215 while its width is 105 which equals 320.
Your display is 320 but the indexing is 0 to 319! Setting x = 214 and the button text shows up fine.
Paul--

[u1550l]

@Pconti31 :
I shouldn't work on the computer close to midnight affter a party....

I corrected my example (all done in builder: button width 103, button pos x= 217
This should be allowed (most right pixel at x= 319), and the builder let me shift it there by mouse.

could you check again?

threeLineButton.zip

--Richard

[u1550l]

@Pconti31 :
one more:
threeLineButton.zip

with some space left between button and display edge: posX=217, width=100, remaining=3

--Richard

[Pconti31]

@u1550l I ran your sample unmodified on my ESP32 with a ILI9341 dusplay 320x240 and also on my Arduino Mega with a different
ILI9341 display 320x240 and both worked fine. I wish I could be more help but I have no idea why you would still be having a problem. Inside my GUIslice_version.h the GUIslice API version is:

#define GUISLICE_VER "0.17.1.7"

while my Adafruit_ILI9341 driver library.properties show:

name=Adafruit ILI9341
version=1.6.0

Paul--

[u1550l]

@Pconti31,
I am using a Teensy4.1
I do not have any debugger tools. So, can you give me an advice where I should start looking into the code?
I will check tomorrow, which lib versions I am using.
Thanks again for your help.
-Richard

[Pconti31]

@u1550l I see, using a Teensy might be the problem since I tested with ESP32 and Arduino Mega.
Assuming you are using version 0.17.1.7 the bug likely is either inside
line 1207 bool gslc_DrvDrawTxt() or line 991 bool gslc_DrvGetTxtSize()

However, Calvin is using a large amount of #if #else's that make the code really hard to follow...
I will also look through the code but I can't promise I'll find anything...

[Pconti31]

@u1550l You might also try editting your config file to use a different library

//  #define DRV_DISP_ADAGFX_ILI9341   // Adafruit ILI9341
  #define DRV_TOUCH_NONE            // No touch enabled
  #define DRV_DISP_ADAGFX_ILI9341_T3 // PaulStoffregen/ILI9341_t3 (NOTE: Requires latest from GitHub)

Although that could lead to font issues... So maybe not?

[Pconti31]

@u1550l In looking over the code inside GUIslice_drv_adagfx.cpp I think the problem area is between
line 1421 to line 1450

    // Handle multi-line text:
    // If we just output a newline, Adafruit-GFX will automatically advance
    // the Y cursor but reset the X cursor to 0. Therefore we need to
    // readjust the X cursor to our aligned bounding box.
    if (ch == '\n') {
...
      #else
        int16_t   nCurPosY = 0;
        nCurPosY = m_disp.getCursorY();
        m_disp.setCursor(nTxtX,nCurPosY);
      #endif
    }

Paul--

[ImpulseAdventure]

Hi Paul -- thanks for highlighting this piece of code. As you can see, the Adafruit-GFX handling of newlines (forcing X=0 without accounting for any "starting X") requires me to relocate the X position, but still use the Adafruit getCursorY(). Are you thinking that GUIslice should be computing this differently, or is this just a nuance of the Adafruit getCursorY calculation? thx.

[Pconti31]

@u1550l I honestly don't know if this would work or not but since you are using the Adfruit built-in fonts maybe we can avoid adafruit automatically moving the Y cursor like so: lines 1445 to 1450 changed:

      #else
        if (nTxtScale > 0) { // built-in fonts
          // this might work for built-in fonts sizes 1-5?
          nTxtY += 9*nTxtScale;
          m_disp.setCursor(nTxtX,nTxtY);
        } else {
          int16_t   nCurPosY = 0;
          nCurPosY = m_disp.getCursorY();
          m_disp.setCursor(nTxtX,nCurPosY);
        }
      #endif

Thus doing the Y positioning by hand.
Paul--

[u1550l]

Hi @Pconti31 ,
wow! That's a lot of input.

currently I get these version infos (compile output):
GUIslice in Version 0.17.0
Adafruit_GFX_Library in Version 1.11.9
ILI9341_t3n in Version 1.1.1
XPT2046_Touchscreen in Version 1.4

But I noticed that the GUIslice (master branch) /library.properties file is 4 years old and still contains 0.17.0

I have to compare/merge the arduino lib and the github master branch.
As I am using the second SPI on Teensy 4.1, I had to add some fixes to my local copy of GUIslice to make it work. This should only affect the XPT2046 touch handling.

I will be back in a few days ...

-Richard

[u1550l]

Hi @Pconti31 ,
I now merged my additions to the latest GUIslice from github. I am not using the standard SPI0, but SPI1. This was not supported by the exisiting GUIslice config templates. But this did only affect the touch.
The problem stays.
While merging, I noticed that there are some gaps in custom font support for the ILI9341_T3n (Teensy).
I am using the default fonts anyway.... but that's another story.

I will now try your suggestions

one other thing:
if I had some useful addition to the code, what/how should I do to share? It would be somewhat Teensy specific.

-Richard

[Pconti31]

@u1550l @ImpulseAdventure Assuming you have your changes marked between #if defined areas you can issue a pull request to merge your changes back into GUIslice. After you have done a git push origin your-branch-name and you go to the web site of your forked GUIslice repository you should see a message about creating the pull request. In worst case if you select the Pull request tab it should have a message about creating a pull request.

Paul--

[u1550l]

Hi all,
just some interim result:
I tried to understand the program flow where Paul pointed me to:

@u1550l In looking over the code inside GUIslice_drv_adagfx.cpp I think the problem area is between line 1421 to line 1450

    // Handle multi-line text:
    // If we just output a newline, Adafruit-GFX will automatically advance
    // the Y cursor but reset the X cursor to 0. Therefore we need to
    // readjust the X cursor to our aligned bounding box.
    if (ch == '\n') {
...

Some lines above I found the call to ILI9341_t3n::print(ch)
which results in a call to ILI9341_t3n::write(const uint8_t *buffer, size_t size)
Inside that function there is some "\n" handling already.
I thought, that there should not be a double handling and inserted the if (!="\n"):

    #else
      // Call Adafruit-GFX for rendering
      // NOTE: This should automatically advance the "cursor" (current text position)
      if(ch != '\n') 
        m_disp.print(ch);
    #endif

see the result:

The lines in the right buttom are too close together.
This is shows that the ILI9341_t3n::write(const uint8_t *buffer, size_t size) would only do a little line spacing, and the // Handle multi-line text: ... does some line spacing in addition to that.

It looks like the extra space is done by some auto-linewrap when the 6th char ina line is printed and the screen borrder hit.

Does this info trigger any ideas?

--Richard

[Pconti31]

@u1550l Ok, I have modified the driver to try and adjust spacing if teensy is used.
My changes makes the code decide spacing between lines for built-in font instead of allowing ILI9341_t3n to chose.
Any other font but the built-in ones will continue to be a problem.

The Built-in font sizes have heights of
nTxtScale of 1 = 8
nTxtScale of 2 = 16
nTxtScale of 3 = 24
nTxtScale of 4 = 32
nTxtScale of 5 = 48

So my code change which I susgested above is calculated on line 1451

          nTxtY += 10*nTxtScale;

gives two pixels between lines. You can try higher or lower...

I hope it helps...

Paul--

[u1550l]

Hi @ImpulseAdventure, hi @Pconti31,

I think, I can tell you the solution:

KurtE 's optimized ILI9341-for-teensy driver has an auto-scroll functionality which obviously seems not to be fully aware of the font size. When writing the 5th character, this mechanism hit the right edge of the screen and decided to do a CR/LF.

In https://github.com/KurtE/ILI9341_t3n/blob/master/src/ILI9341_t3n.h:
class ILI9341_t3 has a member variable:
boolean wrap; // If set, 'wrap' text at right edge of display
and
boolean scrollEnable,

I set both to false. Now my Buttons are all beautiful :)

Thank you so much for your support.
-Richard