Timed Gesture

Timed Gesture

you can download the sample project from

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

Please update Kwik4 as well today is Aug 18, 2017

• timedBtn is default button image.

• timedOver is button over image. It is grey rectangle.

button and action

when timed layer is pressed for 5 seconds, it triggers an action. Let’s create the button and the action with the following names.

• act_timed
• but_timed

Create a action - act_timed

For instance, you can set actions like gotoPage, animations etc. The sample project sets editImage to enlarge the txt 150%

Create a button - but_timed

• Default state : Layer timedBtn
• Over staet : timedOver
• Press

the button’s action is one external codes. Click Code > External codes and select a file from Browse button

• timed_action.lua

timed_acction.lua

When the timedBtn is pressed for 5 seconds, it fires the action_act_timed event. If you created the action with a different name, please change the name of dispatchEvent parameter. It should be action_{YOUR_ACTION_NAME}

print(layer.timedBtn.type)

if layer.timedBtn.type == "press" then
    _K.timed = 0
    _K.timerStash.timedGestureTimer = timer.performWithDelay(1000, function ()
        if _K.timed == 5 or _K.message == "Released" then
            _K.message = "Released"
        else
            _K.timed = _K.timed + 1
            _K.message = _K.timed .."s"
        end
        print(_K.message)
        end, 6)
else -- release
    print("release", _K.message)
    if _K.message == "Released" then
        print("Fired")
        UI.scene:dispatchEvent({name="action_act_timed"})
    else
        _K.timed = 0
        _K.message = _K.timed .."s"
    end
    timer.cancel(_K.timerStash.timedGestureTimer)
    _K.timerStash.timedGestureTimer = nil
end

Edit button

lua for adding onRelease = onTimeBtnEventRelease. Kwik4 publishes the button’s codes in the following file. You need to add onRelease function and set it to the newButton function.

• build4/components/page01/timedBtn_button_but_timed.lua

onTimeBtnEventRelease function is added. Layer.timeBtn.type is “release”

            local function ontimedBtnEventRelease(self)
                if layer.timedBtn.enabled == nil or layer.timedBtn.enabled then
                    layer.timedBtn.type = "release"
                -- but_timed(layer.timedBtn)
                UI.scene:dispatchEvent({name="timedBtn_button_but_timed", layer=layer.timedBtn })
                end
            end

onRelease = ontimedBtnEventRelease is added to the newButton function

            layer.timedBtn = widget.newButton {
                id          = "timedBtn",
                defaultFile = _K.imgDir..imagePath,
                overFile    = _K.imgDir.."p1/timedover.png",
                width       = imageWidth,
                height      = imageHeight,
                onPress     = ontimedBtnEvent,
                onRelease   = ontimedBtnEventRelease
            }

• Before

  function _M:buttonLocal(UI)
  local sceneGroup = UI.scene.view
  local layer      = UI.layer
          local function ontimedBtnEvent(self)
              if layer.timedBtn.enabled == nil or layer.timedBtn.enabled then
                  layer.timedBtn.type = "press"
                  UI.scene:dispatchEvent({name="timedBtn_button_but_timed", layer=layer.timedBtn })
              end
          end
          layer.timedBtn = widget.newButton {
              id          = "timedBtn",
              defaultFile = _K.imgDir..imagePath,
              overFile    = _K.imgDir.."p1/timedover.png",
              width       = imageWidth,
              height      = imageHeight,
              onRelease   = ontimedBtnEvent
          }
          layer.timedBtn.x        = mX
          layer.timedBtn.y        = mY
          layer.timedBtn.oriX     = mX
          layer.timedBtn.oriY     = mY
          layer.timedBtn.oriXs    = layer.timedBtn.xScale
          layer.timedBtn.oriYs    = layer.timedBtn.yScale
          layer.timedBtn.alpha    = oriAlpha
          layer.timedBtn.oldAlpha = oriAlpha
          layer.timedBtn.name     = "timedBtn"
          sceneGroup.timedBtn     = layer.timedBtn
          sceneGroup:insert(layer.timedBtn)
  end
  

• After

      function _M:buttonLocal(UI)
      local sceneGroup = UI.scene.view
      local layer      = UI.layer
          local function ontimedBtnEvent(self)
              if layer.timedBtn.enabled == nil or layer.timedBtn.enabled then
                  layer.timedBtn.type = "press"
                  UI.scene:dispatchEvent({name="timedBtn_button_but_timed", layer=layer.timedBtn })
              end
          end
          --
          local function ontimedBtnEventRelease(self)
              if layer.timedBtn.enabled == nil or layer.timedBtn.enabled then
                  layer.timedBtn.type = "release"
              -- but_timed(layer.timedBtn)
              UI.scene:dispatchEvent({name="timedBtn_button_but_timed", layer=layer.timedBtn })
              end
          end
          --
          layer.timedBtn = widget.newButton {
              id          = "timedBtn",
              defaultFile = _K.imgDir..imagePath,
              overFile    = _K.imgDir.."p1/timedover.png",
              width       = imageWidth,
              height      = imageHeight,
              onPress     = ontimedBtnEvent,
              onRelease   = ontimedBtnEventRelease
          }
          layer.timedBtn.x        = mX
          layer.timedBtn.y        = mY
          layer.timedBtn.oriX     = mX
          layer.timedBtn.oriY     = mY
          layer.timedBtn.oriXs    = layer.timedBtn.xScale
          layer.timedBtn.oriYs    = layer.timedBtn.yScale
          layer.timedBtn.alpha    = oriAlpha
          layer.timedBtn.oldAlpha = oriAlpha
          layer.timedBtn.name     = "timedBtn"
          sceneGroup.timedBtn     = layer.timedBtn
          sceneGroup:insert(layer.timedBtn)
      end
  

make it as custom file.

Next time you publish the project, you lost your change. So copy the lua file to the custom folder and keep it.

copy timedBtn_button_but_timed.lua to the following Destination

• build4/custom/components/page01/timedBtn_button_but_timed.lua

ref https://kwiksher.com/doc/tutorials/kwik/programming/tmplt_and_customization