Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Multitouch UI — Gideros Forum
  • Home
    • ›

    Multitouch UI

    RickyngkRickyngk Member
    edited July 2012 in Relax cafe
    I’d like to introduce a simple way to handle multitouch in gideros with some common UI items such as button, checkbox, radio button; and some utility functions such as drag-measuring and zoom-gesture.

    http://www.guava7.com/2012/gideros-multitouch-ui/
    Document will be added here soon!

    Likes: phongtt, twisttap

    Dislikes: xhargh

    http://www.guava7.com/
    +1 -1 (+2 / -1 )Share on Facebook

    Comments

    • DikkesnoekDikkesnoek Member
      To me, this example is at the moment a little to complicated. I am looking for a simpler example how to use onTouces? In my code I create a couple of blocks. When I touch one block on the iPhone, I will pick up all the blocks at once. When I'll use the the onMouse events it will work great even on the iPhone. Any idea what is going wrong.:

      main.lua part:
      ------------
      -- Create multiple blocks.
for i = 0, 5 do
	-- The block image.
	local blockSprite = Bitmap.new(Texture.new("3D_Block3.png"))
 
	-- The block value (later also + - : x)
	local blockValue = math.random(1000)
 
	-- Create new block.
	local block = Block.new(blockSprite, blockValue, blockFont)
 
	block:setPosition((i * 144) + 40, 540)
	stage:addChild(block)
end
      in the block class i do:
      block = Core.class(Sprite)
 
function Block:init(sprite, value, font)
	-- Register to all mouse and touch events.
	self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
	self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
	self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
 
	self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
	self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self)
	self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self)
	--self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self)
 
	-- Add a label.
	label = TextField.new(font, value)
 
	-- Center the label on parent sprite.
	label:setPosition(sprite:getWidth()  / 2 - label:getWidth()  / 2 - 8, 
			          sprite:getHeight() / 2 + label:getHeight() / 2 + 14)
 
	-- Add label to the parent sprite.
	sprite:addChild(label)
	self:addChild(sprite)
end
 
-- If block is on focus, stop propagation of touch events
function Block:onTouchesBegin(event)
		print("BEGIN")
 
		-- Get start postion.
		self.x0 = event.touch.x
		self.y0 = event.touch.y
end
 
-- If block is on focus, stop propagation of touch events.
function Block:onTouchesMove(event)
	print("MOVE")
 
	-- Calculate delta value.
	local deltaX = event.touch.x - self.x0
	local deltaY = event.touch.y - self.y0
 
	-- Update new postion.
	self:setX(self:getX() + deltaX)
	self:setY(self:getY() + deltaX)
 
	-- Store the new postion.
	self.x0 = event.touch.x
	self.y0 = event.touch.y
 
end
 
-- If block is on focus, stop propagation of touch events.
function Block:onTouchesEnd(event)
 
	--print("END")
 
end
 
-- If touches are cancelled, reset the state of the button.
function Block:onTouchesCancel(event)
	if self.focus then
		self.focus = false;
		self:updateVisualState(false)
		event:stopPropagation()
	end
end
 
function Block:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		self.x0 = event.x
		self.y0 = event.y
		event:stopPropagation()
	end
end
 
function Block:onMouseMove(event)
	if self.focus then
		local dx = event.x - self.x0
		local dy = event.y - self.y0
 
		self:setX(self:getX() + dx)
		self:setY(self:getY() + dy)
 
		self.x0 = event.x
		self.y0 = event.y
 
		event:stopPropagation()
	end
end
 
function Block:onMouseUp(event)
	if self.focus then
		self.focus = false
		event:stopPropagation()
	end
end
      Etc.

      Other question, are x0 and y0 standard properties of a Sprite object? Is is documented somewhere?

      Thanks,

      Marc
      +1 -1Share on Facebook
    • ar2rsawseenar2rsawseen Maintainer
      edited July 2012
      @Dikkesnoek
      x0 and y0 are not internal properties of Sprite object. In your code you set them up manually, just to save the previous position is dragging.
      What you miss actually is getting id of touch, which is event.touch.id. You need to save it on touch start, and then on touch move and touch end check if id is the same, something like that:
      -- If block is on focus, stop propagation of touch events
function Block:onTouchesBegin(event)
	if self.id ==nil then
		self.id = event.touch.id
		print("BEGIN")
 
		-- Get start postion.
		self.x0 = event.touch.x
		self.y0 = event.touch.y
	end
end
 
-- If block is on focus, stop propagation of touch events.
function Block:onTouchesMove(event)
	if self.id = event.touch.id then
		print("MOVE")
 
		-- Calculate delta value.
		local deltaX = event.touch.x - self.x0
		local deltaY = event.touch.y - self.y0
 
		-- Update new postion.
		self:setX(self:getX() + deltaX)
		self:setY(self:getY() + deltaX)
 
		-- Store the new postion.
		self.x0 = event.touch.x
		self.y0 = event.touch.y
 	end
end
 
-- If block is on focus, stop propagation of touch events.
function Block:onTouchesEnd(event)
	if self.id = event.touch.id then
		self.id = nil
		--print("END")
 	end

      And don't merge touch and mouse events altogether, it could give confusing results. use one or another.
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    • DikkesnoekDikkesnoek Member
      Thanks, you helped me a lot. From Objective-C I have to dig into Lua and the engine. This forum is great. Where did you find this .id intell?

      Regards,

      Marc
      +1 -1Share on Facebook
    • TeranthTeranth Member
      @Rickyngk Very cool, I was able to get it to work on my Droid X no problem--the iPad only demo--however the code has some errors--or missing references anyway.

      In the CButton.lua file references are made to CSprite which is not included in the files, changing the code to Sprite works fine though.

      CButton.lua:65: attempt to call method 'AddChild' (a nil value) is thrown due to a typo AddChild instead of addChild--or this could be a custom function for the CSprite class but I have no way of knowing :)

      Anyway changing the function to addChild works with the CSprite to Sprite changes. Very neat demo. :) Thanks for sharing.
      ThumbHurt Games / FB: ThumbHurt Games / FB: Eli/Teranth | Skype: teranth37
      +1 -1Share on Facebook
    • ar2rsawseenar2rsawseen Maintainer
      @Dikkesnoek
      from the touchexplorer sample project with Gideros Studio
      and here:
      http://www.giderosmobile.com/documentation/events.htm
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    • RickyngkRickyngk Member
      edited July 2012
      so sorry, I've just fixed.
      Please update lasted version in github regularly :)
      http://www.guava7.com/
      +1 -1Share on Facebook
    • DikkesnoekDikkesnoek Member
      Hi there,

      I still don't get it work on the iPhone. In the main, I will create 6 blocks on the screen. I've created a separate block class. When I touch the screen anywhere I will move all the 6 blocks (I don't even have to touch a block). I like to move the blocks separately to different positions. Here are some code fragments:
       
------------
-- main.lua
------------
 
-- Create multiple blocks.
for i = 0, 5 do
	-- The block image.
	local blockSprite = Bitmap.new(Texture.new("3D_Block3.png"))
 
	-- Create new block.
	local block = Block.new(blockSprite)
 
        -- Place blocks in the bottom screen side by side.
	block:setPosition((i * 150) + 32, 540)
	stage:addChild(block)
end
 
------------
--block.lua
------------
 
Block = Core.class(Sprite)
 
function Block:init(sprite)
	-- Register touch events.	
	self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
	self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self)
	self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self)
	self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self)
 
	self:addChild(sprite)
end
 
-- If block is on focus, stop propagation of touch events
function Block:onTouchesBegin(event)
	if self.id == nil then
		self.id = event.touch.id
 
		print("BEGIN")			
 
		-- Get start postion.
		self.x0 = event.touch.x
		self.y0 = event.touch.y
	end
end
 
-- If block is on focus, stop propagation of touch events.
function Block:onTouchesMove(event)
	if self.id == event.touch.id then
 
		print("MOVE")
 
		-- Calculate delta value.
		local deltaX = event.touch.x - self.x0
		local deltaY = event.touch.y - self.y0
 
		-- Update new postion.
		self:setX(self:getX() + deltaX)
		self:setY(self:getY() + deltaX)
 
		-- Store the new postion.
		self.x0 = event.touch.x
		self.y0 = event.touch.y
	end
end
 
-- If block is on focus, stop propagation of touch events.
function Block:onTouchesEnd(event)
	if self.id - event.touch.id then
 
		print("END")
 
		self.id = nil
	end
end
 
-- If touches are cancelled, reset the state of the button.
function Block:onTouchesCancel(event)
	if self.focus then
		self.focus = false;
		self:updateVisualState(false)
		event:stopPropagation()
	end
end
      Thanks again,

      Marc

      Likes: Yan

      +1 -1 (+1 / -0 )Share on Facebook
    • ar2rsawseenar2rsawseen Maintainer
      @Dikkesnoek better create a new thread for problem and also post if you get any errors or what exactly is not working right
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    Sign In or Register to comment.