Hello Everyone:
It took me about a week to figure out how to create a file that can be interpreted by Bubble for use in workflows… but I did it! You can use the code in this FREE plugin, Barcode Generator, which allows you to create barcodes for your own data.
The library I utilized has a lot more features and I’ll be working to roll those out soon. I wanted to publish ASAP so that the code could be an example for others (it’s open-source).
View the plugin here: https://bubble.io/plugin/barcode-generator-1609209698393x206083649188921340
View my Gitbook guide here: https://elegislate.gitbook.io/bubble-plugins/barcode-generator/barcode-generator-plugin (work-in-progress)
I believe in the MIT Licensing, so everything I build on Bubble is open, and I love helping others who get stuck, so if anyone wants help, feel free to email me: me@nicholasrbarrow.com.
6 Likes
Thanks a lot for this plugin! It works well in a small repeating group, but in another one with more than 10 lines the QR codes do not show up :
1 Like
Hi @josselin.noire
I checked you app, and it appears the issue is not with the plugin, but with your Bubble implementation. If you open your browser’s console, you will see the debug logs that each barcode did in fact generate. I made a video in my Google Drive demonstrating this, here: https://drive.google.com/file/d/1wxYMUxE-HJ_ALu2emQnOuhAXr5our5k2/view?usp=sharing
Take a look at your Bubble setup and see if you can diagnose the issue there.
Hi Nicholas,
I hope you’re well. I’ve dropped you an email but in case it’s gets sent to Junk and in the interest of sharing with others, I thought I’d add the same info here too.
Please could you help me resolve an issue I’m experiencing with the Barcode and QR Generator plugin? Please see screenshot below:
When trying to generate the barcode, I’m getting the above error RE the CORS policy. Are you able to advise on a cause please? Notes / debugging as follows:
- I give my a user a unique URL when they sign up. In my database, I have a barcodeImg field for each user which I set to be the QR code from your plugin once it’s finished generating and only when the barcodeImg is empty. (Screenshot of workflow at the bottom).
- To my knowledge, I’ve not changed anything in the app and I’ve had this working perfectly for months but I’m doing some testing with a new user and it’s now presenting this error.
- If I login as a user who does already have a barcodeImg, I still get the error; even though the barcode generation isn’t occurring. (screenshot below)
- If I “hide” the barcode generator element from the page, the error doesn’t present itself so I know it’s not something else on the page causing the error.
- I also use the QR generator on a different page for Team barcodes and I’m getting the same behaviour / error.
- None of the bubble forum posts RE CORS policy offer much in the way of resolution.
- I’m using plugin version 1.6.0
Many Thanks,
Chris
For @chris.anderson and anyone else interested, I’m developing a 100% server-side solution, so you will not need the Generator elements on your page anymore, you will be able to do this in workflows 100% of the time (either backend or frontend), and will not experience the CORS issues. Will update hopefully by end of day tomorrow.
Edit: this will come in the form of an update to this existing plugin and remain 100% free/open-source.
3 Likes
Thanks @nicholasrbarrow, looking forward to this!
Just a quick update: experiencing some delays in converting the code due to a bug in the Plugin Editor that is blocking me from publishing. I’ve notified Bubble via a bug report and hope to have a new version pushed within the next few days. With tomorrow starting the Christmas season, I’m not sure how quick Bubble will get to it, but as soon as they do, I can publish the plugin.
I just pushed version 2.0.0 (demo) that brings the new features to beta:
- complete server-side rendering of all barcodes and QR codes, giving you the ability to load things server-side and display client-side (or save things for later use server-side)
- advanced “QR Code with Logo” element (frontend / client-side only)
- advanced handling to get around pesky CORS issues
Major Warning
Version 2.0.0 is essentially a 100% overhaul of this plugin. I originally wrote the plugin almost two years ago when my JavaScript skills were still pretty entry-level and my Bubble plugin-building skills were near non-existent. Maintaining the legacy code had become a far greater task, and I found myself spending more time chasing bugs than I would have by completely redesigning the plugin… hence this major change. This update was a complete redesign to adopt cleaner code, better plugin-design practices, and more control for the end-user (such as only outputting base-64 URIs unless the user specifically tells the plugin to upload the output file(s) to the database/file manager).
Current/Known Limitations:
- even though the “QR Code With Logo” element is marked as “responsive” in the plugin editor, Bubble is not treating it as a responsive element; a bug report was filed late yesterday evening, and as soon as that is fixed, I can push another update (EDIT: it works with responsive now
)
- I wish I was able to generate the QR Code With Logo in the backend/server-side, but Bubble is not only using horrendously out-of-date Node 14, but it’s also using an Amazon server-less environment that does not support Node Canvas (I confirmed this with Bubble’s engineers a few weeks ago, and they do not have any good fix for it any time soon), which is a must-have for rendering any images server-side. The two libraries for basic QR code/barcode had pure javascript workarounds, but drawng the logo necessitates Node Canvas, limiting it to the frontend for the time being.
4 Likes
Thanks @nicholasrbarrow. I’ll upgrade and test over the holidays and let you know how it goes
1 Like
Hey @nicholasrbarrow ,
I’ve been through your demo and the new instructions above and I’m struggling with two things, which I wondered if you could help me with please:
- I can’t find a way to save the QR Code against my user in my database (but it is being uploaded to File Manager)
- The logo quality in the QR Code
Re point 1
I can get the QR Code to render (although the sizing / responsiveness is off as you’ve mentioned above) but cannot get it to save to the DB.
Ideally, I’d like to it work in the same way as we had with the previous version of the plugin, where we have the QR Code Element shown but only 1 pixel in size (so effectively hidden from the user), let it finish generating and then provide a URL which I can store against the Barcodeimg field for this user in my database. I have an Image element on screen which displays conditionally, once the BarcodeImg field is populated and we can size accordingly without needing to worry about the responsiveness issue above.
As you can see below, on page load if we do not have a QR Code saved for the current user, we will generate one using the new version of the plugin
Then when the QR Code has finished generating, we make a change to the current user to set the “Barcodeimg” field to be the newly generated QR Code (like we did with the old version)
However, it isn’t saving to the DB and I don’t know why. It is however saving against the user in file manager but then I don’t know how to call use this in the app
File manager
Database
In Summary
Please can you advise on the workflow required to generate the QR Code with a logo and store it in the database against a user so that: we only have to generate it once, we can store the image against the user and then show the QR Code in an image element for the current user?
Re point 2
The URL I’m using for the logo is here https://uploads-ssl.webflow.com/6307717ecbaa55e0fa1f0e43/63ac260d8af6f9bfb9f88080_Black%20logo%20-%20no%20background.png which shows a large, high quality image. Once it’s used with the QR Code generator, the logo is pixelated. I’m not sure if it’s to do with the sizing mentioned above or there is anything you can advise on here please.
Any help would be greatly appreciated here as we’re now unable to use the app following the CORS issue with the earlier version. Thanks in advance! 
Hi @chris.anderson :
I’ll answer your questions in order.
-
You can still set the QR Code With Logo element to be 1 px by 1 px if you’d like, and then just display the output from Question 2.
-
You can capture the image by replicating the following screenshots’ workflows. The reason why the “is generated” workflows do not contain the URL is because I am now generating the base-64 version of the URLs so users technically never need to save anything to the file manager (what with Bubble’s new extremely low file-storage limits that did not exist when I originally wrote the plugin). Accordingly, since the QR Code is technically generated with the base-64 output, the “is generated” workflow now fires once the base-64 is available, and the “is uploaded” only fires when the QR Code is uploaded (if you choose to do so, file uploading is now optional). I’m logging the URL to my console, but you could save it however you’d like (or use it to set a state on an image and display the URL directly in that image, being able to control for responsiveness):
1 Like
Documenting the new Flow:
- User triggers QR/Barcode Generation.
- Base64 Output is made available (or an error occurs before this)
- The “is generated” workflow fires
-
If the plugin is configured to upload the output to the file manager, the file is uploaded (or an error occurs before this.
- The URL is made available in the “url” state.
- The “is uploaded” workflow fires.
2 Likes
Also, @chris.anderson, quick tip: you can also set any Bubble image’s source to a base64 URI (like the one my plugin outputs) and Bubble will still properly render and display the image; you do not need to only set an image’s source to a https:// … URL.
1 Like
Awesome, thanks @nicholasrbarrow, I’ve now able to generate and store the image as per my requirements! The only thing I’m struggling with now is the sizing / quality as mentioned above.
In the old version, I think we could size the element on screen to be 1x1 pixels to make it almost invisible to users but in the element settings we could specify the size of QR code image generated, separate from the element. However, in this version I can’t seem to be able to do that, so the size of the element on screen appears to dictate the size of the QR Code generated. So if I set it to 1x1 pixels, the image generated is tiny and unusable. If I make it larger, the user can see it. I’ve also tried hiding the element completely but then the plugin doesn’t run.
In each of the screenshots below, the top image is just an image element. The bottom image is the QRCodeWithLogo Element. You can see I need to make it larger than the image size in order to get the required quality but obviously, I’d rather not show QRCodeWithLogo Element at all.
(The reason for not generating / rendering each time is to improve speed and make sure I have a local copy (to bubble) of the image which may also be printed out, etc).
In Summary: Do you have any advice please to meet the requirement of specifying the generated QR Code size, without needing to show the element of the same size?
QRCodeWithLogo Element at 500 x 500
QRCodeWithLogo Element at 250x250
Thanks again!!!
Hi @chris.anderson:
Good catch. Just pushed v.2.1.0. See below screenshot. Note that nothing will render to the screen if you override the size, so you can make the element by 1 px by 1 px if you want to.
1 Like
@nicholasrbarrow well that works brilliantly!!! Amazing, well done!!! Kudos to you for this plugin, the clear instructions and the quick turnaround. And for making it free! Thanks very much!!! 
1 Like
Hi @nicholasrbarrow ,
The plugin requires to enter the Website Home URL. What is it used for?
Thanks,
Guy
Hi @gyangting :
The website home URL is so you can upload things to the file manager.
Okay. Thx.
Does it mean I could use this to upload it somewhere else, like box.com or google drive?
