[Solved] Setting Image picture to a png retrieved from QR Code api

in my app, i was tooling with a system to get a qr code from an api.

issue is, setting the set image 1 to block seems to just crash or bug out whenever i try to set it as the response from the api. As far as i know, its not being returned in json format or anything like that. any ideas?

i tried using the qr and setting it as the value on the set cell block, but no dice, airtable returns an “invalid attachment” response. didn’t know if anyone had tried this before

link to the API: QR code API

First I would recommend you find out what is in the response. the easiest way is to send the unaltered response to a label or text_input. Is it sending HTML? URL? JSON? It would surprise me if it were sending the actual image.

Could you show your blocks and the results of this test?

The sample url http://api.qrserver.com/v1/create-qr-code/?data=HelloWorld!&size=100x100 returns a QR code but not in a formatted way (e.g. JSON). So I don’t think you can use that API with Thunkable. There’s not a way to “grab” the image… you really need a text response, ideally JSON, where you can parse out the filename that ends in .png.

The documentation does indicate that you can specify the output format as JSON when reading a QR code but it doesn’t seem to offer that option when creating a QR code. A quick Google search did not turn up any QR code generator APIs that return JSON. Well, I did find one (Mussa Studios listed on this page) but it was not secure so I didn’t look at it.

3 Likes

That’s what I thought, I’ll have to do this manually, or until they add this feature.

I just thought I was doing something wrong because it allowed me to put the response onto the set imagine to block

Thunkable doesn’t do a ton of error checking when placing blocks in the editor. It does some.

One option would be to simply create the url you want for the API and then use a web viewer to display the QR code in Thunkable. It’s a little messy, perhaps, but it could work.

1 Like

The idea is that they sign up, it makes a qr from the vin, and displays it on their screen

Well, it’s possible with a webviewer. Here’s a demo:

https://x.thunkable.com/copy/f6089e61df8155e6c2beb8b6462d1de3

Edit: new version without webviewer:

https://x.thunkable.com/copy/c67e9de0c06a1eb9feaa1635a77197ef

Also a web app version: thunkablecompanion

2 Likes

Oh, no, I know that part, but I don’t think I can automate it’s creation and saving to airtable with thunkable

The only thing I found a lead with was somehow converting. The image to base 64. But I don’t think I can do that for what I’m doing here

So you’re wanting to store the image of the QR code in Airtable? Nope, I don’t think you can do that.

It would be a pain to make the user do all this but you could generate the QR code on their device using the webviewer method above and then ask them to take a screenshot and tap a button in your app to upload the screenshot to Airtable from their photo album. Again, messy!

But again, you don’t actually have the image. It’s not a block value in Thunkable that you can manipulate. All you have is a web url. That’s not going to allow you to access the image that’s generated.

Oh, shoot! I tried with web viewer and it just rendered x blank screen!!

This might work, they’ll just have to either save their png or screen shot it… For now…

Did you see the screenshot I posted above, with the demo link? Does that not work for you?

I also updated the project link.

I’ll try it in a bit! I’m actually at work :rofl:

I’ll do some fiddling on my break, thanks man.

1 Like

I had a thought. I bet there’s a way to extract an image from a url using an API. And you know what? There is! I don’t have it working yet but how sweet would that be if you could generate a url from the VIN # and then extract the QR code image with an API and have the png filename/url for use in your app? I think it’s possible now.

This looks promising: Smart Image Downloader - Algorithm by util - Algorithmia although it doesn’t appear to be free. I tried this one for a bit, too, but couldn’t quite get the API call to work: https://urlmeta.org

I think we are thinking a bit too hard about this problem. I was surprised that the API is returning an actual image. Since that is the case you can display the image thus

I haven’t worked with cloudinary (media DB) in a while, bit I THINK you can pass it the URL as a target

2 Likes

It was just returning a png, but I can’t use it for anything, I can’t set an image to it, I can’t put it into firebase in an “attachment” collum, nothing.

It’s a pain in the butt, because it just crashed when you try

The blocks above work for me.

You can set an image to the qr code png?


2 Likes

Ohh, okay, so instead of using an API block, use the text itself?

Although, I’m not familiar with the “busy” block :thinking:

Did you make a function?

Ignore busy and ready (custom functions). Sorry about that.