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

    M5Paper and images drawing

    Cores
    4
    9
    15.2k
    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.
    • TitiMobyT
      TitiMoby
      last edited by

      I'm looking for example of loading and drawing BMP or Jpg images on the M5Paper.
      It's a bit hard to try to figure it out from the Factory test so if anyone has some shorter example, that will help me a lot.

      world101W 1 Reply Last reply Reply Quote 0
      • world101W
        world101 @TitiMoby
        last edited by

        @titimoby

        Here is a simple sketch for displaying an image from the SD card or from online. With some trial and error, I have found that Grey color space images don't work, but RGB color space images do.

        #include <M5EPD.h>
        
        M5EPD_Canvas canvas(&M5.EPD);
        
        void setup()
        {
            M5.begin();
            M5.EPD.SetRotation(90);
            M5.EPD.Clear(true);
            //overlay bg on full screen
            canvas.createCanvas(540, 960);
            //canvas.setTextSize(2);
            //jpg must be in 90degree (full screen)
        
            //image from SD card
            canvas.drawJpgFile(SD, "/image.jpg"); //put image.jpg on the sdcard before uploading sketch
        
            //image from online source (png or jpg)
            //canvas.drawPngUrl("http/https link to png image");
            //canvas.drawJpgUrl("https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/example_pic/flower.jpg");
            
            //load the scene starting at x0 y0 position
            canvas.pushCanvas(0,0,UPDATE_MODE_GC16);
            delay(2000);
            //shutdown to save battery
            Serial.println("shutting down now...");
            M5.shutdown();
        }
        
        void loop()
        { 
        
        }
        
        1 Reply Last reply Reply Quote 1
        • TitiMobyT
          TitiMoby
          last edited by

          It looks like what I tried.
          I need to isolate the part of my code that is supposed to draw the image.
          Maybe there is an issue with the file I use.
          Thanks a lot.

          1 Reply Last reply Reply Quote 0
          • TitiMobyT
            TitiMoby
            last edited by

            So I did some experiment and I was on the right way to do it, except I'm trying to port an example that uses BMP files and those won't be displayed.

            I downloaded the flower from M5Paper examples.
            I put it on my SD card, both as /flower.jpg and /bmp/flower2.jpg (I know, bmp is for... bmp files, but I wanted to test file in a folder)
            Then I run the code from @world101 just renaming the file I wanted.
            This works.

            I then put my bmp files (coming from an Adafruit guide) in my SD card, folder is bmp.
            I even tried to use a shorter name for the file.
            None worked.

            
            M5EPD_Canvas canvas(&M5.EPD);
            
            void setup()
            {
              M5.begin();
              M5.EPD.SetRotation(90);
              M5.EPD.Clear(true);
              //overlay bg on full screen
              canvas.createCanvas(540, 960);
              //canvas.setTextSize(2);
              //jpg must be in 90degree (full screen)
            
              //image from SD card
              //canvas.drawJpgFile(SD, "/bmp/flower2.jpg"); //put image.jpg on the sdcard before uploading sketch
              //canvas.drawBmpFile(SD, "/bmp/weather_icons_20px.bmp", 0, 0);
              canvas.drawBmpFile(SD, "/bmp/shortname.bmp", 0, 0);
            
              canvas.pushCanvas(0, 0, UPDATE_MODE_GC16);
              delay(2000);
              //shutdown to save battery
              Serial.println("shutting down now...");
              M5.shutdown();
            }
            
            void loop()
            {
            
            }
            

            I think I need to dig the documentation to find which precise BMP format is supported.

            1 Reply Last reply Reply Quote 0
            • TitiMobyT
              TitiMoby
              last edited by

              I did not find definition of supported BMP file format.
              Do someone knows this?

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

                From a quick look at the source, it supports single-plane, 24 bit, uncompressed BMP files.

                You should get one of these:

                • error log of "File not found", return value 0
                • error log of "BMP format not recognized", return value 0
                • debug log of "Loaded in x ms", return value 1
                • no log output, return value 1

                If you get the last one, it means the bmp file didn't have the correct header ("BM"), but this doesn't give an error.

                1 Reply Last reply Reply Quote 0
                • ajb2k3A
                  ajb2k3
                  last edited by

                  I wrote up what I knew in my Eink book but now I have my M5pages I can test it out.

                  UIFlow, so easy an adult can learn it!
                  If I don't know it, be patient!
                  I've ether not learned it or am too drunk to remember it!
                  Author of the WIP UIFlow Handbook!
                  M5Black, Go, Stick, Core2, and so much more it cant be fit in here!

                  1 Reply Last reply Reply Quote 0
                  • world101W
                    world101 @TitiMoby
                    last edited by

                    @titimoby said in M5Paper and images drawing:

                    I did not find definition of supported BMP file format.
                    Do someone knows this?

                    I couldn't use the Adafruit bmp images as is, but with a little trial and error, I used Gimp (on a Mac) to convert those Adafruit bmp files to something that the M5Paper would display.

                    First I changed the mode from Indexed to RGB.
                    0_1611681531992_Screen Shot 2021-01-26 at 12.15.52 PM.png

                    Than I exported as a bmp at 24-bits (8-bit for each RGB).
                    0_1611681569148_Screen Shot 2021-01-26 at 12.14.36 PM.png

                    You can find all the original weather icons here for that Adafruit MagTag weather forecast display. You can download them in PSD, EPS, SVG, etc. format and convert them to bmp, png, or jpg for use on the M5Paper.

                    1 Reply Last reply Reply Quote 1
                    • TitiMobyT
                      TitiMoby
                      last edited by

                      As the weather looks really rainy this week end, I'll have plenty things to try.
                      Thanks all, I'll keep posted my progress.

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