[deepamehta-devel] click detection

Torsten Ziegler torsten at ziegi.de
Do Sep 26 20:54:16 CEST 2013

Hi all,

I just want to share my latest experiences,
as I will be offline and busy with other things
the next (3-4) weeks.

I found out that the whole subject of the click
detection (along with caching) is non trivial
(i guess you knew this before me)

Working with multidimensional arrays that act as a
lookup table for the whole canvas slows down
everything a lot.
The usual html5 game code uses a second canvas
with a color code given to all objects for click detection.
While the translation of the topic.id to the 3 eight bit
rgb values seems possible this will still not allow for
overlapping objects.

What I am working with now is to give each
topic on the topicmap (=TopicView) two own
in memory canvases.
Two because I want to have two different
areas where I want to perform the click detection.
(one for opening the detail pane, one for starting
an association)
All rendering of those canvases is done in the init
In the draw function I just copy the in memory canvases
to the output canvas using drawImage.
(I first tried to cache only the imageData but this
does not allow for transparency)
This proved to be very fast.
In the find_position function for click detection I still
test for the bounding box of the topics but then also
query the in memory canvas about the alpha of the image
at the given position.
Here I will have to do more optimization..

Sorry, no fully working code at the moment,
I just wanted to share my 2cents and will get
back to you end of octobre.


Am 24.09.2013 10:31, schrieb Torsten Ziegler:
> Hi Jörg and all GUI developers,
> I am about to implement a new click detection for my renderer
> and seek for some advice, respectively am looking for a common
> ground of my development and the default renderer.
> Right now the click detection in the functions
> find_topic_by_position and .._association_..
> implements "a a second drawing process"
> - all calculation is done over again on each mouse event
> - possible all but one objects on the canvas have to be examined
> - right now works only with rectangular bounding boxes of shapes
> (clicking on the "not painted corner" of the standard note ball will
> counted as click on the icon itself)
> - topics are always preferred over associations
> - topics first painted are preferred over the other ones in case of 
> overlap
> (without repecting that visibility is the other way round)
> What I would like to implement:
> - a lookup table to find the object without new calculations
> - non rectangular areas to reflect the transparent portions of an icon,
> or irregular shapes
> - allow for certain areas of one topic to react differently to the 
> mouse interaction
> - allow more advanced detection of overlapped objects:
> -- certain objects might know that its not them to react but the lower 
> one
> -- if unsure ask the user which one he/she tries to click
> (as it is just so nasty to move a topic accidently over another and
> suddenly you are not able to select it any more, but have to work your 
> way
> through the selectable ones till you reach the one you would like to 
> have selected
> in the beginning)
> I see 2(3) ways to do this and here I would like your input:
> 1. using a muldimensional array to keep track of all the objects and 
> desired action on the canvas
> (object_canvas[x][y]=[{"id":id,"action":action},..] <- each point 
> holds an array of one or many object ids and actions,
> empty points may be removed from the array ?speed vs. memory use?)
> - on drawing each object registers itself to this array (object_id + 
> action(show detail pane, start association, bring to front etc.))
> - for unregular shapes or icons with alpha a helper function
> -- is provided with the smallest possible bounding box that includes 
> the object
> -- does a bitmap compare of the canvas region bevore and after drawing
> -- calculates the visible parts that should be registered in the array
> - on a mouse event only the array has to be queried and all possible 
> objects are directly accessible by lookup of their id
> 2. using the KineticJS (http://kinetikjs.com)
> - implement the whole drawing and click detection using the kineticjs 
> framework
> - pro: less code as drawing, caching, event handling is allready 
> implented (using a second canvas for hit detection)
> - contra: overlapping objects are not supported, topmost rules
> 3. wait till browsers implement the HTML5 HitRegion
> - this may take a while
> Inspired by the KineticJS I would also like to look into caching of 
> the objects,
> if this makes sense for the yet simple objects.
> It works the way that the object is drawn only once but then saved as 
> an image that is
> drawn to the canvas later on.
> What do you think?
> torsten

Torsten Ziegler
torsten at ziegi.de

Mehr Informationen über die Mailingliste devel