4. Load images on M5Paper in UIFlow

Load images on M5Paper in UIFlow


  • Hi,

    I'm trying to load images in a M5Paper unit using uiflow with no success. I've tried several formats (png, bmp, jpg) and different options when saving, but I always get the same result...

    I'm uploading the image in the device file manager, and then after adding the image at the position where I want it, I add the following blocks:

    • Set screen background color
    • Set image0 to image.bmp (to the right name of the image file)
    • Show image0
    • Set screen show

    But When running the program, I get an exclamation mark at the top of the screen.

    Am I doing anything wrong? Is this feature actually working?

    0
    X
     1 Reply

  • Hello @fr3nd

    have you tried to display the default.jpg? Does that work?

    Using UIFlow 1.8.7 (https://flow.m5stack.com) these are the steps which worked for me:

    • drag image icon onto screen (e.g. image0)
    • block set image0 image default.jpg
    • block set screen show

    Thanks
    Felix

    0 1 Reply

  • Hi @felmue

    This works with the default image default.png, but once I upload a different one it shows the exclamation mark symbol.

    I've tried with different formats and options when saving, but I haven't found a combination that works. Is there any documentation on the requirements of the images? Has anyone had any success using custom images in m5paper in uiflow?

    Thanks

    0

  • Hello @fr3nd

    sorry, I don't know of any documentation on the requirements of the images.

    Thanks
    Felix

    0

  • For the record, I was finally able to generate images that load properly with the following ImageMagick command:
    convert image.png -colorspace RGB -depth 8 -colors 16 PNG8:exported/image.png

    1 1 Reply

  • @fr3nd I was just about to say that it is an issue with the way the image is saved.
    I started making a document here :https://github.com/Ajb2k3/UIFlowHandbook/blob/master/En-Coreink-V2.pdf

    1
  • D

    This is a bit late, but today I was trying to display images in M5Stack Fire module, and had the same problem. After a bit of trial and error, I discovered that if the PNG file names are long, this error will trigger. And it is not easy to guess that the long file name caused it!

    0

  • This is a limit of the filesystem formatting.

    0
  • 7

    I know this is an older thread but it really saved me! I downloaded GIMP (latest version is currently 2.10.34) and by exporting a PNG, Turning all checks off and compression level to 9 (max) and then pixelformat to 8bpc RGB. With a small filename the image will appear in the UI Flow workspace and on the M5 stick C Plus.

    I couldnt get Photoshop, Aseprite and even Paint to get anything in UI flow. But GIMP worked just fine.
    Hope this helps someone else down the road.

    1 1 Reply

  • @7ames I have used GIMP since 1999 and used it in my guide document. Glad you worked it out.

    1
  • X

    @fr3nd the picture must be less than 50kb

    1
  • M

    I just got my M5Paper today, so this is very timely info for me, thanks!

    0