QR Code

Youtube Demo

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 $20/Year 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.

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

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

results matching ""

    No results matching ""