Generating QR Code with Thunkable X

Hello, Thunkers! :tada:

I am back with another Tutorial, Generating QR Code with Thunkable X
In this Tutorial, we will experiment with the GoQR API.

Intro to QR code API

You can generate and decode/read QR code graphics with our QR code generator web API at api.qrserver.com.

Important features of GoQR

  • Create QR codes via Internet (develop your own QR code generator )
  • Read / scan QR codes via Internet (develop your own QR code reader )
  • Social QR code with logo (Facebook or Twitter logo / image embedded in the QR code) (coming soon)
  • Create colored QR codes
  • Professional QR code print file formats (vector graphics, QR code EPS and SVG )
  • High performance server
  • Encrypted communication via HTTPS (SSL/TLS)

Find more at QR code API.

Steps

Designer

At the Designer Area, We just have to Add a Web Viewer, A Button, and a TextInput for the data which we want for the QR code.

Code

In the Coding area, We just have to add a from web view set url block and add the url according to our request.

Description of Blocks
The join block will create the final URL. The structure of our URL is -

http://api.qrserver.com/v1/create-qr-code/?data=textinput.text&size=150x150

The size means the size of the qr code image in pixels. 150x150 looks better.
The " http://api.qrserver.com/v1/create-qr-code/ " is our base URL; " ?data " & " ?size= " are our Query Parameters. These parameters are sent to the GoQR API for a QR Generating Request.

Bonus Tip

  • You may store the above URL (created in the join block) to a stored Variable, or in Local Storage. And on other screen, take an image component and set it’s image to the url. -

Storing the URL :

Viewing the image :

2%20code2



For Scanning QR Codes, Refer to this Medium Blog.



:star: Thanks for Reading! :star:
Hope you understand the Tutorial :smile:

Happy Thunking! :tada:

6 Likes

Please feel free to give suggestions!

1 Like

Thanks @domhnallohanlon for reccomending this Tutorial to others! :smile:

2 Likes

Hey @kartik14, after creating this QR code, do you receive this as an image, or is the image displayed via a URL as the src for a component image. It looks like the second option.

2 Likes

Hi, @jared! :wave:

When you format the URL, and call it, the URL displays the QR Code, as an image (jpg/png). Then we set the image component’s image to the URL, which is a direct address to the QR Code image.

Thanks for your interest! :blush:

Link for remix?

send qr code link please

hello I need an updated version of this please as the new thinkable doesn’t have create a block i dont think(please its for a school project due in a week)