QR Code

QR Code

Youtube Demo

• https://youtu.be/EjubRnoS9DA

A printed QR code on a card will return one of the following text

• fish
• cat
• dog

the app shows up the corresponding image. you can trigger the animation or the action too.

• QR Scanner $5/month is a corona plugin to read a QR Code. It works for iOS & Android. You need to purchase the plugin to test your app on a real device.

  • https://spiralcodestudio.com/corona-to-solar2d/

    a Patreon based access to all of my plugins. With a pledge $5 a month or more you can use all my plugins

If you run it on Corona simulator, the sample project will work in debug mode and it returns a dummy text of a QR code.

• qr_popup.lua is the external code of Kwik. It calls the plugin and then receives the result and show the layer associated with the result.

Sample project is here

• https://kwiksher.com/tutorials/Kwik4/QRPopUp.zip

Please open the page 1.

Art Layers

• fish shape

• cat shape

• dog shape

  each layer’s name must be matched with the text of the QR code. As of the rule of Kwik, a layer name has to consist of alphabet without a special symbol like +-/* etc

• qrBtn is a button to turn on a device’s camera

• searching overlays the camera view to show the rectangle for user to scope the QR code at the center

• mismatch is also an overlay. It appears when the QR code not found in the area

• found is also an oaverlay. It appears when the QR code is found

Kwik Components

Strictly Necessary to control the QR Code process

• qr_act is called when the QR code is processed and you may add actions like playAudio etc. The text from a QR code is returned in the message parameter

      print("QR code message is ", params.event.message )
  

• qr_grp holds the layers associated with the QR codes and the members of the group is indexed for QR codes. If the text from a QR Code is found, the group member’s artLayer appears.

• qr_store is a variable of a table. The table store the text from QR code like this

      UI.qr_store['dog'] = layer['dog']
  

• hide_qr_grp when the page is loaded, ‘dog’, ‘fish’ and ‘cat’ are hidden

• but_qr invokes the device’s camera to take a QR Code.

Option

• anim_{layer name} is one of linear, path anim, pulse, blink,bounce animation that will play when a QR code is retrieved. For instance, anim_fish linear animation will be played if ‘fish’ is retrieved. You have to set the name as “anim_” + the name of the layer

• drag_fish is a drag interaction for user to drag a layer with a finger. This is not related with the QR code process.

qr_grp

• Create Groups

  

• dog, cat and fish are the member of qr_grp. The Name of the group must be qr_grp because it is referenced from the external code

  

qr_store

• Create Variable

  

• The name of the variable must be qr_store

  • Content: Formula/Boolean
  • Type: Local
  • This is a Table: checked
  • Before: selected
  • Keep track : checked
  

hide_qr_grp

• Hide layer or Group

  

• Hide group: selected with qr_grp

  

but_qr

• Add button

  

• Add External code - qr_popup.lua

  

anim_fish

• Linear Animation

  

• Name: anim_fish

• Starts: wait request

  

Build for device

• build.settings

  the plugin needs to be declared in build.settings

  settings = {
  plugins  =  {
      ['plugin.qrscanner'] = {
          publisherId = 'com.spiralcodestudio'
      }
  },
  ...
  
  

that’s all. Build the app. You find QR codes in page3

qr_popup.lua

local QR_STORE_LOAD = false
--
local function listener(event)
	if not event.isError then
		-- event.message contains the value of a scanned QR Code or a barcode.
		print("Scanned message:", event.message)
		print("Scanned symbol:", event.symbol)
		-- native.showAlert('QR Code Scanner', event.message, {'OK'})
		local _target = event.message
		for i = 1, layer.qr_grp.numChildren do
			local child = layer.qr_grp[i]
			if child.name == _target then
				print(child.name)
				UI.qr_store[_target] = child
				child.alpha = 1
				--anim_fish
				UI.scene:dispatchEvent({name = "action_qr_act", message = _target})
				local _AC = require("commands.kwik.actionCommand")
				_AC.Animation:playAnimation("anim_" .. _target)
				break
			end
		end
	else
		print("Error occured:", event.errorCode, event.errorMessage)
		native.showAlert("Error: " .. event.errorCode, event.errorMessage, {"OK"})
	end
end
--
layer.qr_grp.alpha = 1
for i = 1, layer.qr_grp.numChildren do
	layer.qr_grp[i].alpha = 0
end
--
if QR_STORE_LOAD then
	for k, v in pairs(UI.qr_store) do -- {fish=layer.fish, }
		UI.qr_store[k] = layer[k]
		layer[k].alpha = 1
	end
end
layer.searching.alpha = 0
layer.found.alpha = 0
layer.mismatch.alpha = 0
--
if (system.getInfo("environment") == "simulator") then
	local i = math.random(layer.qr_grp.numChildren)
	local param = {message = layer.qr_grp[i].name}
	local function onComplete( event )
    if ( event.action == "clicked" ) then
        local i = event.index
        if ( i == 1 ) then
				  listener(param)
        elseif ( i == 2 ) then
        end
    end
 end
	native.showAlert("Dummy: QR will return" , layer.qr_grp[i].name, {"OK"},  onComplete)
else
	local qrscanner = require("plugin.qrscanner")
	qrscanner.show {
		listener = listener,
		topbar = {
			text = "QR Scanner",
			fontSize = 0.5,
			color = {0.5, 0.8, 0},
			backgroundColor = {0.2, 0.2, 0.8}
			--isHidden = true
		},
		overlays = {
			searching = {
				filename = "assets/images/p" .. UI.curPage .. "/searching.png",
				baseDir = system.ResourceDirectory
			},
			found = {
				filename = "assets/images/p" .. UI.curPage .. "/found.png",
				baseDir = system.ResourceDirectory
			},
			mismatch = {
				filename = "assets/images/p" .. UI.curPage .. "/mismatch.png"
			}
		},
		-- filter = "^https?://.*", -- Match an URL
		-- mask = {
		-- 	x = 0.2,
		-- 	y = 0.25,
		-- 	width = 0.6,
		-- 	height = 0.25,
		-- 	color = {1, 0, 1, 0.25}
		-- }
	}
end