Forum Documentation Showcase Pricing Learn more

[New Plugin] Generate and Read QR Codes

#1

We just added a new plugin that allows you to generate and scan QR codes right from your bubble app.

  1. Install the plugin from the plugin directory.

  2. Create the dataset where you’ll store the generated QR image. The data field has to be an image.

  3. Use the “Get data from an external API” action and select QR Code - Generate

  4. Enter the URL encoded text that you’d like to hide inside your QR code or use dynamic data. Use the pixels field to set the size of the QR code you’d like to generate.

  5. Make sure that your data is URL encoded. You can add URL encoding by using the :formatted as URL ENCODED action. For example, here we’ll encode the user’s phone number into the generated QR code:

  6. The generated QR code will be saved as an image.

Reading QR Code

  1. Create the dataset where you’ll store the information coming from the QR code.

  2. Use the “Get data from an external API” action and select QR Code - Scan

  3. Enter the URL encoded URL of the QR code that you’d like to read. You can even have the user take a picture and use that picture to scan it almost immediately.

Answer if the QR code was read successfully:

Answer if the QR code reading attempt failed:

13 Likes

QR Code Scanning
QR Scanner plugin
#2

Wow cool!!

2 Likes

#3

this is cool! - well done!

1 Like

#4

Hey Cho!
First of all - great initiative, thank you!
We’ve been looking to do the same but there’s always so little time :slight_smile:

Second, I have generated the QR code with no problems, but constantly running into issues while trying to read one.

  • Can you please let me know what should be the dataset for the info coming from the QR code that you reference in point1?

You clearly outlined that the data field for storing the generated QR code should be an image, and that worked like charm. But it’s not clear what is the expected data set type for the scan API output.

I’ve tried multiple approaches, among them create a Thing with 3 different fields (seq, data, error), and save data there, but that does not work.

Also, I see that the plugin introduces 2 new data types - Scan and Scan Symbol (which looks like should be doing the trick, among other different data types and fields, but there’s no information on what they are and what they should be (scan, symbol, type, etc.) Since the API input\output data types definition panel is hidden from us and wrapped into the plugin, you can only guess what all of those mean :slight_smile:

And whenever I try to scan, I’m anyways hitting one and the same error, that does not explain me what is the problem at all :slight_smile:

Is it me doing something wrong?
Thanks in advance for your help!

Vlad.

GM at Bubblewits - Bubble Certified Partner


http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtonbubble.com - Collection of apps built on Bubble

0 Likes

#5

When you hit such a message best is to file a bug report.

1 Like

#6

Thank you, just did.

0 Likes

#7

Hi everybody, any luck with this topic?
I am having some issues at time of reading the QR, take a look:


Thank you all.

1 Like

#8

This is great and I almost got it working… for some reason multiple parameters are not being passed.

Im trying to pass 2 parameters in a url, one is dynamic and the other is static. But even for two static parameters, the second one isnt passed to the page.

http://www.url.com/version-test/qrresult?client=test&no=1

This only results in the first being passed. And with passed I mean captured in the QR code. The dynamic parameter works fine and a static one too, its just when there are 2 that it doesnt work. Any thoughts?

0 Likes

#9

@cho @emmanuel @vladlarin @vincent56

Ok guys, I finally made it work, now I can create and read any information I want using QR, this is how I made it work after the Cho explanation where there are some things missing:

  • when he says:
    “Enter the URL encoded URL of the QR code that you’d like to read. You can even have the user take a picture and use that picture to scan it almost immediately.”
    You would need to write :http:" before the dynamic text, something like this:

  • On important missing thing is you need to give to QR api provider an image less than 1 meg, and usually when you capture an image with “Capture Uploader” at the bubble input form from at cellphone (I am using an iphone here, I do not know how this works in any others cellphones) the image is around 3 megs, so after read that the imgix.com plugin only works to render images when load and doesn’t work for uploads (which I believe is kind of inefficient in terms of bandwidth), I had to use an external api, and here is where I use Blockspring. After tried all the options in the Blocksrpring service image processing, where not any one of those sevices were working at the moment I was trying them out, I finally gave it at shot to the web scrapping service called “Screenshot A Website” which make a great job and convert my 3 mb image in an around 100 kb PNG and there everything works OK:

I hope you guys understand all my words and this helps your bubbleing.

Cheers

Carlos A. Escobar

3 Likes

#10

Hi there can you help me with the qr scan been searching everywhere information about it but I can’t get it done yet :confused: Any help would be super awesome

1 Like

#11

Any help ? been 3 days waiting for a respond :weary: , my apologies if it sounds rude is not my intention at all just searching for some help if possible thanks.

1 Like

#12

Can this work where user clicks button, device camera opens and scans QR code, and whatever info is contained in the QR code is stored into a field on the page.

Ideally, I’d like the ability to scan code into repeating group and repeat every time a code is scanned until a stop scan button has been clicked. I’m not looking for the user to be taken to URLs, I need the data captured and stored in the database.

I’m using ios 11, currently but will also need for android later. Is this possible? Can someone show is how to set this up because I can’t figure it out?

Thanks!!

1 Like

#13

I also am confused by documentation for the QR code Plugin. I have come to my own conclusion that in order to scan qr codes one must open the scanning app on their mobile device and the qr code has to include an appropriate url to get information into a bubble app.

Is this correct? Is there a way to open a mobile scanning app from bubble?

Can you weigh in on this @cho, @caeroa?

Thanks for the help!

2 Likes

#14

I’m trying to use this app as a scanner to sign in users. An admin will have the reader and the users will have the qr code. This doesn’t seem possible as you’d already have to know the user that is signing in to get the code, which leads me to the question; what are people using this plugin for? Its not really a reader as much as another way to store information which any data field can be used for.

1 Like

#15

Good luck getting a response to your question. I asked mine 25 days ago and still no answer.

2 Likes

#16

Hi Bubblers!

Does anyone know if pressing a button can open the camera and read the code from within Bubble? I used Droid QR and it managed to pull out the unique User ID perfectly!

But now I have a unique Bubble ID outside of the app. Anyone know how to get this working without getting stuck into code (http GET and POST etc?)

@romanmg - any ideas?

2 Likes

#17

When a plug-in is listed, an there is zero support or feedback from the developer, and no one seems to be able to get it to work, how is it still listed? I’m not saying delete it but at least don’t list it until there is some engagement from the developer. @cho and @emmanuel

1 Like

#18

works perfectly fine for me so not sure what the problem here is. Its very simple, you generate a QR with whatever information you put on it and use whatever reader (or create your own) to get the information out.

We use it to generate labels. QR holds the id of the label thing in Bubble. Labels are put on crates etc. We use a reader to scan the qr and a browser is opened that triggers a workflow to show the contents of the label.

I’m now working on adding a native scanner in our iOS app so it will be a much smoother experience.

0 Likes

#19

Thanks for your reply. Generating is no problem, works fine. Scanning is the problem. Have a button in app, press scan, open camera, scan code and retrieve data. Maybe I’m missing something? It’s just frustrating when you get nothing back when you ask.

1 Like

#20

What do you mean open camera, scan code? Camera on your phone doesnt automatically scan QR?

Also, if you want to use this in an app, I assume its a native ANdroid or iOS app? In that case it would make sense to build the scanning part into the native app. At least this is my logic that I’m now working out…

otherwise you use a third party scanner and put the url of the page you need to go with your scanned result in the QR code.

0 Likes