Timed Gesture

you can download the sample project from

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 = onTimeBtnEventRelase

Kwik4 publishes the button's codes in the following file. You need to add onRelese 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 http://localhost:4000/tutorials/kwik/programming/tmplt_and_customization.html

results matching ""

    No results matching ""