🤖Have you ever tried Chat.M5Stack.com before asking??😎
    M5Stack Community
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Register
    • Login

    M5Paper text

    Cores
    7
    23
    58.8k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      Powersoft @murraypaul
      last edited by

      @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?

      1 Reply Last reply Reply Quote 0
      • P
        Powersoft @murraypaul
        last edited by

        @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

        1 Reply Last reply Reply Quote 0
        • M
          murraypaul
          last edited by 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:

          1. Draw to the internal framebuffer of the Canvas object
          2. Transfer that data to the memory of the EPD
          3. 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.]

          P 2 Replies Last reply Reply Quote 0
          • P
            Powersoft @murraypaul
            last edited by

            @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!!!!

            1 Reply Last reply Reply Quote 0
            • P
              Powersoft @murraypaul
              last edited by

              @murraypaul How do you get this nice listing?

              M 1 Reply Last reply Reply Quote 0
              • M
                murraypaul @Powersoft
                last edited by

                @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.

                P 1 Reply Last reply Reply Quote 0
                • P
                  Powersoft @murraypaul
                  last edited by

                  @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?

                  M 1 Reply Last reply Reply Quote 0
                  • M
                    murraypaul @Powersoft
                    last edited by 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);
                    
                    M B 2 Replies Last reply Reply Quote 0
                    • M
                      Medy @murraypaul
                      last edited by

                      @murraypaul

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

                      M 1 Reply Last reply Reply Quote 0
                      • M
                        murraypaul @Medy
                        last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • B
                          blusky @murraypaul
                          last edited by

                          @murraypaul

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

                          1 Reply Last reply Reply Quote 0
                          • ScheduleDisplayS
                            ScheduleDisplay
                            last edited by 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

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post