Multiple clickable areas in an image

rpallen · December 2017

I've made an image for a volume control button (see attached image). What I want is, itouching the top half of the button increases the volume and touching the bottom half decreases the volume.

Is there a way in Gideros to implement multiple "hitTestPoint"s within an image?

If not, will the method below work?

My idea is to create a group with the base image (the volume control button image) as the bottom layer. Then create a shape (volumeUp = Shape.new()) that is half the size of that image and position it over the top half of the button and create another shape (volumeDown = Shape.new()) that is half the size and position it over the bottom half of the button. I will set the alpha of these shapes to 0 so they aren't seen. Then I can use volumeUp:hitTestPoint and volumeDown:hitTestPoint in the function for changing volume.

Again, will this work? Will the fact that the alpha is 0 cause a problem?

keszegh · December 2017

what you say should work, but probably it's easier to check after hittestpoint where the hit occured. something like this:

if button:hitTestPoint(event.x,event.y) then
local lX,lY= button:localToGlobal(event.x,event.y)
if lY<=button:getHeight(true)/2 then 
--upper half
else 
--lower half
end
end

oleg · December 2017

divide the button image in half

TextureRegion
http://docs.giderosmobile.com/reference/gideros/TextureRegion

oleg · December 2017

local texture = Texture.new("musicVolumeButton.png")
 
 
local region1 = TextureRegion.new(texture, 0,   0,   50, 50)
local region2 = TextureRegion.new(texture, 0, 50,   50, 50)
 
 
local bitmap1 = Bitmap.new(region1)
local bitmap2 = Bitmap.new(region2)
 
local up= Button.new(bitmap1 )
	up:setPosition(100,100)
	stage:addChild(up)
 
 
	up:addEventListener("click", 
		function(e)	
		e:stopPropagation()
		-- bla bla bla
 
		end)
 
 
local down= Button.new(bitmap2 )
	down:setPosition(100,150)
	stage:addChild(down)
 
 
	down:addEventListener("click", 
		function(e)	
		e:stopPropagation()
		-- bla bla bla
 
		end)

Button = gideros.class(Sprite)
 
function Button:init(upState,flag)
	self.flag=flag
	self.upState = upState
	self:addChild(self.upState)
 
 
	self.focus = false
 
	self:updateVisualState(false)
 
	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)
end
 
function Button:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		self:updateVisualState(true)
		event:stopPropagation()
	end
end
 
function Button:onMouseMove(event)
	if self.focus then
		if not self:hitTestPoint(event.x, event.y) then
			self.focus = false;
			self:updateVisualState(false)
		end
		event:stopPropagation()
	end
end
 
function Button:onMouseUp(event)
	if self.focus then
		self.focus = false;
		self:updateVisualState(false)
		self:dispatchEvent(Event.new("click"))
		event:stopPropagation()
	end
end
 
-- if button is on focus, stop propagation of touch events
function Button:onTouchesBegin(event)
	if self.focus then
		event:stopPropagation()
		move=1
	end
end
 
-- if button is on focus, stop propagation of touch events
function Button:onTouchesMove(event)
	if self.focus then
		event:stopPropagation()
	end
end
 
-- if button is on focus, stop propagation of touch events
function Button:onTouchesEnd(event)
	if self.focus then
		event:stopPropagation()
		move=0
	end
end
 
-- if touches are cancelled, reset the state of the button
function Button:onTouchesCancel(event)
	if self.focus then
		self.focus = false;
		self:updateVisualState(false)
		event:stopPropagation()
	end
end
 
-- if state is true show downState else show upState
function Button:updateVisualState(state)
	if state then
 
			--self:setAlpha(0.5)
			if  self.flag~=false then
				self:setColorTransform(2, 2, 2, 1)
			end
 
	else
 
			--self:setAlpha(1)
			if  self.flag~=false then
				self:setColorTransform(1, 1, 1, 1)
			end
 
	end
end

rpallen · December 2017

Thanks all for the suggestions. I'm pretty busy this week and I doubt I'll get around to trying these suggestions before the week, but I will look more closely and try one or ore of these suggestions.
Thanks again.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Multiple clickable areas in an image

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Multiple clickable areas in an image

Comments