[Core2] How to download JPG from web and display it on screen?



  • I would like to download a JPG file from Spotify, save it to micro SD card and display it on the Core2 screen. Sounds easy, but so far it didn't work for me.

    With MicroPython I found some challenges. I can download the image with urequests, and save it to micro SD card. lcd.image can only read files, but crashes when reading from micro SD card. M5Img only uses PNG on Core2. There seems to be a lcd.image_buff to maybe work around with, but I don't find any documentation.

    It sounds really easy, but with MicroPython I did not get far:

    1. Get JPG image from web via https [ok]
    # connect to WiFi first
    import urequests
    response = urequests.get('https://mosaic.scdn.co/300/e337f3661f68bc4d96a554de0ad7988d65edb25a134cd5ccaef9d411eba33df9542db9ba731aaf98ec04f9acee17a7576f939eb5aa317d20c6322494c4b4399d9b7c6f61b6a6ee70c616bc1a985c7ab8')
    
    1. Save image to micro SD card [ok]
    with open('/sd/images/test.jpg', 'a') as fs:
      fs.write(response.content)
    import os
    os.stat('/sd/images/test.jpg')
    
    1. Display JPG image on screen from micro SD card. It usually crashes or does nothing.
    from m5stack import *
    lcd.clear(0xFFFFFF)
    lcd.image(lcd.CENTER, lcd.CENTER, "/sd/images/test.jpg")
    

    Is it possible to to display a JPG from SD on the Core2 screen with MicroPython?

    Or should I switch to Arduino?



  • I tried various ways with lcd.image, but it usually crashes or just does not do anything when called first.

    lcd.image(0, 0, "/sd/images/test.jpg")
    lcd.image(0, 0, "/sd/images/test.jpg", 0)
    lcd.image(lcd.CENTER, lcd.CENTER, "/sd/images/test.jpg")
    lcd.image(lcd.CENTER, lcd.CENTER, "/sd/images/test.jpg", 0)
    


  • When replacing SD with flash it just works seamlessly, this drives me crazy !

    # connect to WiFi first
    
    import urequests
    response = urequests.get('https://mosaic.scdn.co/300/e337f3661f68bc4d96a554de0ad7988d65edb25a134cd5ccaef9d411eba33df9542db9ba731aaf98ec04f9acee17a7576f939eb5aa317d20c6322494c4b4399d9b7c6f61b6a6ee70c616bc1a985c7ab8')
    
    with open('/flash/images/test.jpg', 'a') as fs:
      fs.write(response.content)
    import os
    os.stat('/flash/images/test.jpg')
    
    from m5stack import *
    lcd.clear(0xFFFFFF)
    lcd.image(lcd.CENTER, lcd.CENTER, "/flash/images/test.jpg", 0)
    


  • Is it possible that lcd.image expects an image smaller than the lcd? Perhaps it needs to be resized.
    Have you tried displaying a small image?



  • I tried with various sizes, it seems to not make a difference. The same image is displayed fine when loaded from /flash, but it crashes when loaded from /sd.



  • The lcd.image() doesn't work with /sd, so I just tested undocumented(?) lcd.image_buff(x, y, buffer) and it works:

    response = urequests.get('https://mosaic.scdn.co/300/e337f3661f68bc4d96a554de0ad7988d65edb25a134cd5ccaef9d411eba33df9542db9ba731aaf98ec04f9acee17a7576f939eb5aa317d20c6322494c4b4399d9b7c6f61b6a6ee70c616bc1a985c7ab8')
    
    lcd.image_buff(lcd.CENTER, lcd.CENTER, response.content)
    

    Now I only have to read the file from /sdinto a buffer and hopefully get around the crash.



  • Here we go, easy work-around the faulty lcd.image():

    from m5stack import *
    buffer = open("/sd/images/test.jpg").read()
    lcd.image_buff(lcd.CENTER, lcd.CENTER, buffer)