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 Kwik4

• https://www.kwiksher.com/tutorials/Kwik4/Keyboard.zip

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

The psd size is for 1024x768 so let’s create a kwik project with iPad Mini.

Dynamic Texts & Variables

these functions enables a text layer to display the value of a variable.

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

Create variables

• LCD

  
  • Name:LCD
  • Value: ""
  • Local
  • Content:Formula/Boolean
  • Before layers are rendered

  the reason why Formula/Boolean is because we assign a formula as LCD ..“1” to LCD later.

• numDica

  
  • Name:numDica
  • Value: ""
  • Local
  • Content:Formula/Boolean
  • Before layers are rendered

Dynamic Text Replacement

Let’s assign the variables to the text layers.

• Textto is associated with LCD

• textdica is associated with numDica

External Code - createDica.lua

it intiates the 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)

• After layers

Buttons

OK button to check LCD variables equals to numDica variable. Clear button to clear the input. Each 1, 2, 3 button to add the number to LCD.

OK Button

the logic is like this

if LCD == numDica then
    Show Win
end

• IF

  • Variable: LCD
  • Operator:EQUAL
  • Comparison: UI.numDica
  

  Kwik4 internally holds local variable by UI table. So if you need to set UI.numDica to input text field.

• Show/Hide: Win layer to show

• End IF

Clear Button

it clears LCD variable to empty string.

• Edit Variable
  • LCD
  • Value: ""

Number 1,2,3 Button

the logic is like this

if LCD length <= 7 then
   LCD = LCD.."1"
end

it concatinates LCD text string with the input number

• IF
  • LCD
  • LESS OR EQUAL THAN
  • Comparison:7

• Edit Variable
  • LCD
  • Value:UI.LCD..“1”

For the button number 2, use UI.LCD ..“2”,

For the button number 3, use UI.LCD ..“3”,

Hide Win layer

Win layer should be transparent when the page starts

Hide layer: Win

that’s all.