Dispatching pointer events from Container to child Element(s)

[Guillermo Rodriguez Garcia]

Hello all,

I have a Container (a Group) that has several child elements. Some of these are text labels and indicators, then there are two "buttons" (icons) in the left and right hand sides. Think of volume up/down buttons for example.

Currently I can press the buttons, but if I press anywhere else in the container, nothing happens.

What I would like to do is to catch all pointer events in the container, and forward them to the buttons. For example if x < w/2, the event would be forwarded to the "left" button; if x >= w/2, the event would be forwarded to the "right" button.

I don't only want to send "click" events -- I need to send pressed/released events so that the buttons can also be updated to show the "selected" state and so on.

Currently I am doing the following:

public void ClickableGroup extends Group {

    private Behavior.Click _behave;

    public ClickableGroup() {

        _behave = new Behavior.Click(this);

        // Absorb all clicks that do not hit a child of this layer

        set(Flag.HIT_ABSORB, true);

        // wire up our behavior as a layer listener

        layer.events().connect(_behave);

    }

    [...]

}

With this I can already receive pointer events in the ClickableGroup object. However I am not sure how to "forward" these events to specific child elements in the group (in fact I don't even know if this is supported out of the box)

Any hints / recommendations?

Thank you,

Guillermo

[Michael Bayne]

Just forwarding the events is probably going to be problematic because the buttons are likely to check that they intersect their bounds and see that they don't and then ignore them.

A better place to start would be putting custom hit testers in the layers for the buttons (Layer.HitTester). Those hit testers can say "Yes, this click hit me" even when the click is way outside the button bounds. That will ensure that the events are delivered to the buttons in the first place. Then you may have trouble with the button "behavior" (TPUI Behavior class) because it probably checks whether the click is in bounds to decide whether to show the button in the selected or unselected state, so you may need to subclass the Behavior.Click class and hack it to use the bigger bounds.

--

---
You received this message because you are subscribed to the Google Groups "PlayN" group.
To unsubscribe from this group and stop receiving emails from it, send an email to playn+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

-- m...@samskivert.com

[Michael Bayne]

Oh actually, it looks like you can override Element.contains and just do your cheating there and everything will just use that. Element already installs a custom HitTester that checks contains() to see if an event is inside itself. And Behavior.Click also uses contains().

--

-- m...@samskivert.com

[Andres Q]

making the buttons bigger so that they occupy all the space is out of the question? maybe with a transparent background + images it can be made graphically similar as to what you have now

[Guillermo Rodriguez Garcia]

Hi Michale, 

This looks promising. I'll need to look further into this.

Thank you!

Guillermo Rodriguez Garcia
guille.r...@gmail.com

[Guillermo Rodriguez Garcia]

Hi,

Yes. That's indeed the first thing I did, since the buttons are already icons with a transparent background.

But this approach has its limitations: (Without modifying the icons) I can only make the buttons bigger simmetrically in all directions, as otherwise the visual position of the icon would also be affected.

This was good enough as a quick fix to enlarge the touchable area a bit. But for a "proper" solution I wanted to make the whole container touchable :-)

Guillermo

Guillermo Rodriguez Garcia
guille.r...@gmail.com