M5Core2 LCD Screen Button Programming & Text Display

Projects Programming
1

I'm working on an Arduino project using an M5Stack Core2 AWS with an LCD display.

I can get the lower 3 pre-programmed buttons to work OK.

  1. However for my project I need to occasionally add 2 more buttons on the screen (loaded on the bottom). Before I draw the buttons on the screen, the Text that I write is OK. Once I add the screen buttons, the text gets all screwed up. Changed to a VERY LARGE font and messes up badly and I can't seem to reset it to the correct size.

  2. The other problem that I'm working to try to resolve is that when I'm writing text on the screen (For now, I'm using the top 2 lines, 16 Characters, TextSize=3. The problem is that every display update (I'm using M5.Lcd.clear()) the screen flickers. If I don't use the clear() screen, then the characters that are being overwritten end up OVERWRITING the previous values and not clearing the contents, so the characters OVERLAP each other as they change. The clear() also hides the screen buttons that I created.

I've been working with this for a long time and I can't find any examples that help either situation.

#include <M5Core2.h>

ButtonColors on_clrs = { RED, WHITE, WHITE };
ButtonColors off_clrs = { BLACK, WHITE, WHITE };
Button BtnL(10, 190, 60, 40, false, "", off_clrs, on_clrs, TL_DATUM);  //Left
Button BtnR(250, 190, 60, 40, false, "", off_clrs, on_clrs, TL_DATUM); //Right

void setup() {
  Serial.begin(115200);
  M5.begin();
  //Make sure the buttons are erased:
  BtnL.erase(BLACK);
  BtnR.erase(BLACK);
  
  //Setup the Text on the screen.
  M5.Lcd.setTextColor(YELLOW);  // Set the font color to white.
  M5.Lcd.setTextSize(3);       // Set the font size (Large for now!).
  M5.Lcd.clear(); 
  M5.Lcd.display();
  M5.Lcd.setCursor(0, 0);  //(X,Y) where X is Horizontal and Y is Vertical
  M5.Lcd.print(" 10 Second Loop. ");
  M5.Lcd.setCursor(0, 35);
  M5.Lcd.print("  TESTING");
  delay(1500);
  M5.Lcd.print("                ");
}

void loop() {

  
  LcdPrint();
  delay(5000);  //Allow the screen to display, showing that it works.

  //Create the two buttons.
  Serial.println("Create...");
  BtnL.setLabel("DEC");
  BtnR.setLabel("INC");
  M5.Buttons.draw();

  //Loop and detect the buttons
  unsigned long Timeit = millis();
  do {
    LcdPrint();  //Reprint the screen 1. To show the FONT Error   2. Show the Overwritten text (if I can fix Error #1)
    M5.update();
    if (BtnL.wasReleased()) Serial.print(" dec ");
    if (BtnR.wasReleased()) Serial.print(" inc ");
    delay(100);
  } while (millis() < (Timeit + 10000));

  //Erase the buttons...
  Serial.println("");
  Serial.println("ERASE...");
  BtnL.erase(BLACK);
  BtnR.erase(BLACK);
  
  //Reprint the screen without the screen buttons. 
  LcdPrint();

  delay(10000);
}


void LcdPrint() {
  static int Count;
  Count++;
  String sCount = "Loop" + String(Count);
  Serial.println(sCount);
  M5.Lcd.clear();   //                    with this commented out, the Screen buttons don't erase!
  //M5.Lcd.display();
  M5.Lcd.setTextColor(RED);  // Set the font color to white.
  M5.Lcd.setTextSize(3);       // Set the font size (Large for now!).
  
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.print(" 10 First Loop. ");
  M5.Lcd.setCursor(5, 35);
  M5.Lcd.print(sCount);
}

I'm obviously missing something here, and I'd sure appreciate some help with this.

I tried to convert this to M5Unified.h but again, I can't find any examples of how to create the screen buttons.

Sir Michael

2

Perhaps I am not understanding, but you have two basic approaches. The first is to draw the entire screen every loop startig with a clear. That may produce flickering but is reliable. The second is to only draw selected areas that are dynamic. This is more code and prone to mistakes but looks great. The ket is to make sure you understand the bounds of the portion of the screen you are updating and to make 100% sure you do NOT exceed them. It isn't magic, just good old fashioned planning and careful coding.

3

sonofycy,

I'm afraid that that doesn't help me. Yes, I can live with the flickering, but the big problem is the corruption of the display after the buttons have text added to them.

M5Stack Screen
M5Stack Screen204×115 7.81 KB

I've played with the sketch extensively and learned that anytime I try to add some text to the buttons, either in the declaration (before the setup()) or in the .setLabel() function, any text writes to the screen are corrupted!

The .setLabel() wants a "const char * label". A text string such as:

button.setLabel("INC");

corrupts the subsequent writes. Also, in the declaration:

Button BtnL(10, 190, 60, 40, false, "DEC", off_clrs, on_clrs, TL_DATUM);   //Left

corrupts all subsequent screen writes (with the "DEC") for the button text. If I remove the DEC leaving just the "", the text writes are OK until I add text in the .setLabel("DEC").

I tried:

  String Label1 = "INC";
  BtnL.setLabel(Label1.c_str());

and all of the subsequent text writes are still corrupted!

If I run it leaving the Label in the button blank, all of the Text Writes, even to the end work OK.

Why can't I add a label to the buttons that I created?

Sir Michael

4

Well, I put in somewhat of a kludge of a fix for both of these problems.

  1. For the flicker problem, I found out that where the M5.Lcd.clear() statement takes 35ms to execute, which was causing the flicker. To fix this, I put in some somewhat complicated code to FIRST re-write any line that changed at all, by re-writing the previous line in BLACK, then write the new changed text. The screen flicker is essentially gone. I do run the clear() command every 100 updates & any complete screen change. This reduced the screen updates from ~50ms to less than 8ms.
  2. For the corrupted screen characters, pictured above (where the text got HUGE) I found that any time I added ANY text to the screen buttons
BtnL.setLabel("Text");

(or in the declaration) this caused the problem. I fixed this by writing the button text above the buttons, not pretty but it works. This is a BUG in the button code for the M5Core2 code.

The code is somewhat complex for what it should be, but at least I have it working reasonably well now.

Sir Michael