M5Paper text

Powersoft

@murraypaul
Thanks again.
Do you have experience with converting bmp to a c-file.
Found the window program "lcd-image-converter", know how to works, but how to setup the conversion?

Powersoft

@murraypaul Do you have try the command:

Function: flushes the data in the buffer to the specified area of the screen in the specified mode.

m5epd_err_t UpdateArea(uint16_t x, uint16_t y, uint16_t w, uint16_t h, m5epd_update_mode_t mode);

to update partial the canvas? Have tried it but with no results!

Cheers,

Jan

murraypaul

@Powersoft Sorry, didn't see the question about bmps. No, I don't have any experience there.

With regard to partial updating, I think this is working correctly, but there is an extra step required which is usually hidden from the user.

To display something on the EPD requires three steps:

Draw to the internal framebuffer of the Canvas object
Transfer that data to the memory of the EPD
Refresh the EPD display

Normally steps 2 and 3 are combined in the pushCanvas(x,y,mode) function.
To do a partial update I think you need to do step 2 manually.
The key thing to note is that that UpdateArea is a member of M5EPD_Driver, not of M5EPD_Canvas, so it doesn't have access to the canvas framebuffer, you have to transfer the data yourself.

The program below demonstrates how to do that.
The circle is drawn (1), and pushed to the EPD memory (2) all in one go, but the screen is refreshed (3) in small chunks.
Then the text is drawn over the top, and you can see from the screen flash that only the area around the text is drawn.

You could push only partial memory to the EPD, but that is more complex, and shouldn't be a real performance issue, so I think it is simpler to always push the complete framebuffer but only update the screen area you want to change.

#include "M5EPD.h"

M5EPD_Canvas Canvas(&M5.EPD);

void setup() {
  M5.begin();
  M5.EPD.SetRotation(90);
  M5.EPD.Clear(true);
  M5.TP.SetRotation(90);
  M5.RTC.begin();

  Canvas.createCanvas(540,960); 
}

void loop() {
  Canvas.fillCanvas(0);
  Canvas.fillCircle(540/2,540/2,540/2,15);
  M5.EPD.WriteFullGram4bpp((uint8_t*)Canvas.frameBuffer());

  const int xChunk = 64;
  const int yChunk = 64;
  for( int x = 0 ; x < 540 ; x += xChunk )
    for( int y = 0 ; y < 540 ; y += yChunk )
    {
      M5.EPD.UpdateArea(x,y,xChunk,yChunk,UPDATE_MODE_DU);
      delay(100);
    }

  Canvas.setTextColor(0);
  Canvas.setTextDatum(CC_DATUM);
  Canvas.useFreetypeFont(false);
  Canvas.setFreeFont(&FreeSans12pt7b);
  Canvas.drawString("Hello",540/2,540/2);  
  M5.EPD.WriteFullGram4bpp((uint8_t*)Canvas.frameBuffer());
  M5.EPD.UpdateArea(540/2-64,540/2-16,128,32,UPDATE_MODE_GC16);

  delay(1000);
}

[Edit: This assumes your canvas is the full screen. If not, there is a WritePartGram4bpp function you can use.]

Powersoft

@murraypaul said in M5Paper text:

this is what i was looking for. Now also applied it for the clock in the OpenWeatherMap program. Thank you very much!!!!

Powersoft

@murraypaul How do you get this nice listing?

murraypaul

@powersoft The code showing on the black background? That is a markdown code block.
Before and after the code you want to list, have a line with just three back-quote characters: ```
So:

```
this = code;
```
Will display as:

this = code;

You can also add a little bit of inline code with single back-quote characters, so `this = code` shows as this = code as part of a sentance.

If you click the little question mark by the word compose in the top-right of the edit box when writing a post, that will give you a link to the markdown documentation.

Powersoft

@murraypaul
Thanks again, this is very helpful.

I need to switch often from the font

canvas.loadFont("/fonts/DSEG7Classic-Bold.ttf", SD);

Is it posible to store the font in memory and call it when I need it, or should I convert the font to a "C" file?
Is there a program that can do the translation work?

murraypaul

@powersoft This website will convert a TTF font at a specified size to a C header file that you can include and use: https://rop.nl/truetype2gfx/

For example, I downloaded the Ballet font from here: https://fonts.google.com/specimen/Ballet?preview.text_type=custom, and extracted the TTF file.

Then on the website I clicked Choose File, selected that file and clicked Uploaded, then Get GFX Font File.
This created a file called Ballet_Regular_VariableFont_opsz20pt7b.h

The, in Arduino, create a new sketch and copy that header file into the sketch folder, and use this as the code:

#include <M5EPD.h>

#include "Ballet_Regular_VariableFont_opsz20pt7b.h"

M5EPD_Canvas canvas(&M5.EPD);

void setup()
{
    M5.begin();
    M5.EPD.SetRotation(90);
    M5.EPD.Clear(true);
    M5.RTC.begin();
    canvas.createCanvas(540, 960);
    canvas.setFreeFont(&Ballet_Regular_VariableFont_opsz20pt7b);

    canvas.drawString("Hello World", 45, 150);
    
    canvas.setTextSize(1);
    canvas.drawString("Hello World", 45, 250);
    
    canvas.setTextSize(2);
    canvas.drawString("Hello World", 45, 350);
    
    canvas.setTextSize(3);
    canvas.drawString("Hello World", 45, 450);
    
    canvas.pushCanvas(0,0,UPDATE_MODE_DU4);
}

void loop() {}

The advantages of this method are:

No reliance on external files
Can use any TTF font
Quicker to switch between different fonts, as no need to render them as bitmaps, that has already been done
Can use this to display bold/italic, which cannot be efficiently done with TTF fonts

The downsides are:

The font is pre-rendered at a specific size. The only scaling you can do is to print it x2, x3,... the size, which just upscales the bitmap and looks blocky, as you can see in the example
So if you need multiple sizes, you need to prerender multiple files and include them all
You have to make font and size choices at compile time, users cannot switch in and out any font they want

The code does also support loading a TTF font from memory. So you could convert the entire TTF font to a header file and read it directly with M5EPD_Canvas::loadFont(const uint8_t *memory_ptr, uint32_t length). This is an example of a tool that would do this: https://sourceforge.net/projects/bin2header/

I tried this with the Ballet font example, and it crashed the device.
With the standard Arial font, it worked fine, but the font used about 20% of the available program memory, so I don't know if it is really reasonable.

To test, just drag the Arial font from your c:\Windows\Fonts directory to somewhere else, run bin2header on arial.ttf to get arial.ttf.h and do this in Arduino:

#include "arial.ttf.h"
...
    canvas.loadFont(arial_ttf,sizeof(arial_ttf));

    canvas.createRender(30,32);
    canvas.setTextSize(30);
    canvas.drawString("Hello World", 45, 150);

Medy

@murraypaul

can I copy these generated fonts onto the m5stack flash and import them via micropython ?

murraypaul

@medy I've never used micropython, so I can't help with that.

blusky

@murraypaul

Thank you sir! I really learn a lot from you.

ScheduleDisplay

Hello,
I Got the GFX font header file (by converting the Roboto.ttf file). Loaded the font file using canvas.setFreeFont(&Roboto_Medium50pt7b) and then display the text using canvas.printf(textString.c_str());.
It is working fine and display the text properly but when I am giving some special characters äöü then they are not appearing on M5stack paper.
Can someone please guide me what I am doing wrong? Am I missing something?

Thanks

The link to my question can be found here