Keyboard

Keyboard

The demo file in this tutorial was created by Leonardo Amora, owner of http://www.amoraleite.com You can download the source files here. Updated for Kwik5

  • TODO zip

User clicks the button 1, 2 or 3 to match the number at Tip: 33133211 and You Won!! is displayed

you can extend it, as adding 4, 5, 6,,,0 or alphabets characters to make it a full software keyboard!

The psd size is updated for 1920x1080. See page1.pst in Photoshop/Keyboar folder.

Dynamic Text & Variables

let’s enable a text layer to display the value of a variable.

  • Texto layer is associated with variable LCD. this is the number appearing at the LCD layer when user clicks the button.
  • txtodica layer is associated with variable numDica. this is the number at Tip: layer

Create variables

click the Var icon

  • LCD

    1. input name as LCD then press Conitnue
    2. select “string”

    • Name:LCD

    • isAfter: false

    • isLocal: true

    • isSave: true

    • Value: ""

      Formula/Boolean was used in Kwik4. Kwik5 just uses string.

  • numDica

    • Name:numDica
    • isAfter: false
    • isLocal: true
    • isSave: true
    • Value: ""

Dynamic Text Replacement

Let’s assign the variables to Textto and textodica layer

  1. Select “textodica” layer

  2. Click Replacements > Dynamic Text

  • Textto is associated with LCD

  • textodica layer is associated with numDica

External Code - createDica.lua

We are going to intiate value to numDica. The value is random 8 digits.

UI.numDica = math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)
function M:createDica(UI)
  local value = math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)..math.random(1,3)
  textodica_dynamictext:update(value)
  --
  -- hide Win
  --
  local obj    = UI.sceneGroup[_Win]
  obj.isVisible = false
end
  • GUI extCode/extLib in kwik editor

  1. click AddCode icon

    it opens App/uiHandler.lua in vscode

    local parent,root, M = newModule(...)

function M:init(UI)
end

function M:create(UI)
end
...
...
return M

  2. edit uiHandler.lua

    • as of an external library, “keyboard.mycode module” as mycode
    • as of external code, “UI.mycode:createDica(UI)” is added to create() function
    local parent,root, M = newModule(...)

M.libs = {
  {name="mycode", value = "keyboard.mycode"}
}

function M:init(UI)
   print("book name is", UI.props.name)
   for i, v in next, self.libs do
     UI[v.name] = require(parent..v.value)
   end
end

function M:create(UI)
   UI.mycode:createDica(UI)
end

Buttons

OK button checks LCD variable equals to the numDica variable. Clear button clears the input. User clicks each 1, 2, 3 button to make it match value of LCD with value of numDica.

nameeventTypeoverobject
oktouchOkDownwidget button
N0xtap(none)display image

OK Button

“ok” layer as Button, and the button action checking LCD value equals to numDica.

Here let’s create “__if” statement, “Show Win” action, “end” statament in kwik editor.

if LCD == numDica then
    Show Win
end

  1. select “ok” layer then click Interactions > Button icon

  2. click “over” property, then select “OkDown” layer in layerTable. The value of over field will be set as “OkDown”.

    In Photsoshop, make sure the over layer for pressing down should be under ok button.

    App/keyboard/components/page1/index.lua

      {
     OkDown = {
     }
   },
   {
     ok = {
       class={ "button", }  }
   },

  3. click “onTap” property to create an action

  4. input “onOK” for the action name, then click Continue

  5. select Controls > Condition > __if

    the difference between “__if” and “_if”

    {{#__if}}
if {{exp1}}  {{exp1Op}} {{exp1Comp}} {{exp2Cond}}  {{exp2}}  {{exp2Op}} {{exp2Comp}} then
{{/__if}}

{{#__if_}}
if {{condition}} then
{{/__if_}}

    • __if

    • A1_: UI:getVariable(“LCD”)

    • A2_Operand: ==

    • A3_: UI:getVariable(’numDica')

      if you need a string value, use tostring(“value”) or ‘your string"

    • AB_Condition: nil

    • B1_: ""

    • B2_Operand: ""

    • B3_: ""

      nil or make it empty if you don't need the second B1, B2_Oprand, B3_

    Kwik4 internally had a local variable in UI table. Kwik5 UI.variables table has all the variable references. Use UI:getVariable(’name’) to get the value

  6. click Save button on the left bottom

  7. Click “Save” button on the right bottom for __if statement

    condition.__if is added

  8. From ActionCommandView, select Layer > showHide

    • _target: Win

    • hide: false

    • toggle: false

      click “_target” property to select “Win” layer from layerTable

      save it

  9. From ActionCommandView, select Condition > _end

    this is the end statament of if

    save it

  10. Save the button on the center bottom for saving onOK action

  11. Now you have created onTap as “onOK” it is new button for “ok” layer. Save it.

    ok button is created

Clear Button

it clears LCD variable to empty string.

  • Clear button

  • onTap: onClear

  • Edit Variable

    • LCD
    • Value: ""
    • type: string

Number 1,2,3 Button

We use kwik edtior to create actions for N01, N02, N03 buttons. The action will be rendered like this, LCD variable is updated with checkLCD function. checkLCD is a function loaded in keyboard.mycode library.

function M.checkLCD(value)
  if string.len(value) > 7 then  --check if string lenght is larger than 8 (maximum number to be displayed in the LCD
    return string.sub(value, -7) -- shows the last 8 digits of the string only
  end
  return value
end

function M:onButton1(UI)
  local value = UI:getVariable(_LCD)
  value = self.checkLCD(value.."1")
  Texto_dynamictext:update(value)
end

  1. Select ON1 layer

  2. Click Interactions > button

  3. Click onTap property

    it shows the context menu to create or select an action

  4. click “New”

  5. Input an new action name, and click Continue

    • name: onN01

  6. From ActionCommandView, select Controls > Variable

    the following values should be set to editVar properties.

    • Edit Variable
      • target: LCD
      • Value: UI.mycode.checkLCD(value..‘1’)
      • type: function

  7. Click “_target” property, it opens Variable Table, Select “LCD”

  8. “LCD” has been set to _target, then click the text field of value

    manually copy the value above in this tutotrial, and paste it to the text field.

  9. Click “Save” button on the rihgt bottom for action editVar

  10. Save the button on the center bottom for saving onN01 action

Repeat creating button with onTap action for N02, N03 layer. Or you can copy & paste N01 action, and rename onN01_copied to onN02, onN03.

  • For the button number 2,

    value: UI.mycode.checkLCD(value..‘2’)

  • For the button number 3,

    value: UI.mycode.checkLCD(value..‘3’)

Or you can edit the internal code of onN01 action in vscode to make it handle N02 and N03 too

function command:execute(params)
  local UI         = params.UI
  local sceneGroup = UI.sceneGroup
  local layers      = UI.layers
  local event      = params.event

  print("onN01.target")
  printKeys(event.target) -- N01, N02, N03

  local handlers = {}
  handlers["N01"] = function(value) return UI.mycode.checkLCD(value.."1") end
  handlers["N02"] = function(value) return UI.mycode.checkLCD(value.."2") end
  handlers["N03"] = function(value) return UI.mycode.checkLCD(value.."3") end
  --
  AC.Var:editVar(UI, "LED",  handlers[event.target.name])
end

Done!