0

Image base64 query
Moderators: adafruit_support_bill, adafruit

Forum rules
If you're posting code, please make sure your code does not include your Adafruit IO Active Key or WiFi network credentials.
Please be positive and constructive with your questions and comments.

Image base64 query

by otills on Sat Jul 31, 2021 6:36 pm

I have been battling for sometime to get images displaying smoothly in an Adafruit IO Dashboard, but so far to no avail. What I can't work out is why if the image can be visible in the preview panel (Edit Layout / Edit Block / Next Step and then pasting the Base64 string in the test value), the image is not displayed when received live in the Dashboard page itself. I expect I am overlooking something obvious, but I am not sure where to look. I have tried png and jpeg, but no difference. Have also tried various resolutions - the string below is a 50 x 50 image, and while it appears as in the Block Preview window, I do not get the view updated in the Dashboard itself when I receive this, or other similar images.

This is a base64 string:
Code: Select all | TOGGLE FULL SIZE
/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAyADIDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AIyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2Q==


This is only a dark image, but appears in the preview window when pasted (via the steps above). This has been copied directly from data received into an Adafruit feed, yet the image is never displayed (I just see the template camera logo).

Any pointers are gratefully appreciated.

otills
 
Posts: 7
Joined: Thu May 27, 2021 10:28 am

Re: Image base64 query

by jwcooper on Mon Aug 02, 2021 10:06 am

Thanks for this test case. I'll take a look at it, and see what's going on.

Could you also post the original image as well? Just to confirm, it's a small black square png?

jwcooper
 
Posts: 802
Joined: Tue May 01, 2012 9:08 pm

Re: Image base64 query

by otills on Mon Aug 02, 2021 10:46 am

Yes this is just a small black square. I am not in the office atm so cannot send the original image - it was made encoded following the guides online.

Have been struggling with this for quite a while..

otills
 
Posts: 7
Joined: Thu May 27, 2021 10:28 am

Re: Image base64 query

by otills on Mon Aug 02, 2021 3:14 pm

Please find the image attached. Just to be clear - this is a thumbnail from a Raspberry Pi HQ camera downsampled via:

This is not pretty, but this is largely an artefact of having tried so many variations on a theme.

Code: Select all | TOGGLE FULL SIZE
        print('formatting image for gsm')
        tmp = cv2.imread(path + 'img_000.jpg')
        thumb = cv2.resize(tmp, (50,50), cv2.INTER_NEAREST)
        generated_data['thumbnail'] = [thumb]
        image = Image.fromarray(generated_data['thumbnail'][0])
        stream = io.BytesIO()
        image.save(stream,format='jpeg', quality=70,optimize=True)
        stream.seek(0)
        value = base64.b64encode(stream.read())
        generated_data['image'] = str(value.decode)


Generated_data['image'] is then sent via e-mail and linked IFTTT to AdafruitIO. I had assumed this must be a formatting issue, but the image appears fine in the preview.. I have also tried changing the size and encoding between jpeg and png, but no change.
Attachments
test.jpeg
test.jpeg (307 Bytes) Viewed 98 times

otills
 
Posts: 7
Joined: Thu May 27, 2021 10:28 am

Re: Image base64 query

by jwcooper on Mon Aug 02, 2021 4:00 pm

I just tested this, and the original base64 string previewed and also viewed properly within the dashboard image block.

What browser and operating system are you using?

One issue I had initially was that I copied some empty spaces prior to the base64 string. I think it would be useful if we trimmed any spaces at the beginning and end of that image data.

Here is how it looks in my dashboard:

jwcooper
 
Posts: 802
Joined: Tue May 01, 2012 9:08 pm

Re: Image base64 query

by otills on Tue Aug 03, 2021 4:33 am

Just tried sending an image via the AdafruitIO Python API and that works fine, however when I send exactly the same data via GSM (e-mailed with an IFTTT linkage to Adafruit) the image does not get displayed (although the data appears).

I have tried a side by side comparison of these data on the Adafruit side - i.e. copying and pasting what is received using each approach and doing a 'find differences', but there are no differences. There is also no white space apparent in either.

I am running the Python/GSM code on a Raspberry Pi 4. Have tried loading the dashboard on a variety of browsers and operating systems - but am primarily using MacOS with Safari.

I have attached screenshots from the feed - i) being Python API via wired internet - preview and the data, and ii) being the equivalent for data sent via GSM and IFTTT - as you can see GSM is not treated in the same way, but I cannot see why as they appear identical.
Attachments
GSM.png
GSM.png (95.62 KiB) Viewed 90 times
AdafruitIO_API_data.png
AdafruitIO_API_data.png (223.75 KiB) Viewed 90 times
AdafruitIO_API.png
AdafruitIO_API.png (110.75 KiB) Viewed 90 times

otills
 
Posts: 7
Joined: Thu May 27, 2021 10:28 am

Re: Image base64 query

by otills on Wed Aug 04, 2021 4:59 pm

Still no progress with this issue.

I can copy the received base64 image i.e 'Value' in the Feeds page, click 'Add Data' and paste it and the thumbnail appears. Yet the 'received' data is not displayed - either in the preview on the feeds page, or on the Dashboard. There are no apparent spaces, or other formatting issues being corrected via the copying and pasting.

Is this a bug, or can anyone suggest a work around? I am using the Adafruit IFTT 'Send Data to Adafruit IO' action. We are getting desperate with this now.

otills
 
Posts: 7
Joined: Thu May 27, 2021 10:28 am

Re: Image base64 query

by jwcooper on Thu Aug 05, 2021 3:01 pm

Can you post that new base64 string, starting with the 'i'? The one in the screenshot.

Your original string was a jpeg, this one appears to be a png.

jwcooper
 
Posts: 802
Joined: Tue May 01, 2012 9:08 pm

Re: Image base64 query

by otills on Thu Aug 05, 2021 3:34 pm

Of course. Please find below. I have tried both jpeg and png and the behaviour is the same. Displays fine when manually 'added' to a feed, but not if sent to it.
Code: Select all | TOGGLE FULL SIZE
iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAACdUlEQVR42u3TsQ0AAAjDsJb/j+YGJhb7hEhpGuDRSAAmBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTAiYEEwImBBMCJgQTggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCQETggkBE4IJAROCCcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYSACcGEgAnBhIAJwYRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYELAhGBCwIRgQsCEYEIwoQRgQjAhYEIwIWBCMCFgQjAhYEIwIWBCMCFgQjAhYEIwIWBCMCFgQjAhYEIwIWBCMCFgQjAhYEIwIWBCMCFgQjAhYEIwIWBCMCFgQjAhYEIwIXCz3nkCWQot7KUAAAAASUVORK5CYII=


For info, I'm using the 'Send data to Adafruit IO' IFTTT action, but have actually found the same thing happens (data received, apparently intact, but not displayed) when using MQTT (I switched to email because assumed via IFTTT in an effort to get something working.

otills
 
Posts: 7
Joined: Thu May 27, 2021 10:28 am

Please be positive and constructive with your questions and comments.