Slider events (component specific events)

1

Hi all
Maybe I’m missing something but … which events are available for (let’s say) Slider component ? Just the Component’s default ?

I would like to use something like “start drag” and “stop drag”.
I tried to register a mouse_down on a slider but it doesn’t work (I guess due to the unregister in the Slider class)

Honestly, it has been a while since the last time I worked with Haxe so it’s a bit dusty if not brand new for me :smiley: (I used stablexui at that time)

Thanks

2

I think you might want UIEvent.CHANGE, i think there is a start and stop drag event too, but pretty sure its not dispatched for sliders… might be a decent addition, is change not enough?

Cheers,
Ian

3

Well, unfortunately can’t use it for neko and android
I’ve used .onChange but it fires everytime the value changes not only at the “drag stop”, so the bound action is run repeatedly.
I’m testing with wifi light bulb brightness, so you can imagine the disco effect :grin:

I’ve used MOUSE_UP that does the job for the drag stop, but I need to catch the drag start too to disable a “polling” feature that refresh the slider pos

I did a quick peek to the code and I’ve seen something like internal events … that as you said are internal :smiley:

1 Like
4

Ah, good point. Great example too :wink:

So, i think the best solution is to also add the events for beginning and ending drag - the use case makes perfect sense :+1:

Cheers,
Ian

5

OK, so in haxeui-core git sliders will now dispatch a UIEvent.DRAG_START and UIEvent.DRAG_END.

slider-events

Let me know if that helps, also, feel free to share a video or something of your app changing lighting… i love that type of stuff (HA in general)

Cheers,
Ian

1 Like
6

Great :+1:
I’ll try this later.

7

Hai Ian
I’m trying to use the event ,but I noticed something using registerEvent.
I’m almost sure it’s due to my dusty haxe knowledge, but anyway, here it is.

If I use the event directly I can’t get the target pos or value (returns null) even if it seems there is a target object but of type Unknown<0>

    brightness.registerEvent(UIEvent.DRAG_END, function(e) {
        changeBrightness(e.target.value);
    });

If I add the event to the Slider.hx
@:event(UIEvent.DRAG_END) public var onDragEnd:UIEvent->Void;
and use the class method
brightness.onDragEnd = function(e) {changeBrightness(e.target.value);};
It works as expected and the target type is correct (haxe.ui.core.Component)

I’m sure there something stupid I’m missing, but I can’t find what :grin:

8

I think you’d need to type your event argument, ie, function(e:UIEvent) { .. } - if im understanding correctly i think thats what you are asking?

9

FYI, ive also added:

    //***********************************************************************************************************
    // Public Events
    //***********************************************************************************************************
    @:event(UIEvent.DRAG_START)                     public var onDragStart:UIEvent->Void;    
    @:event(UIEvent.DRAG_END)                       public var onDragEnd:UIEvent->Void;

To Slider.hx… should have been there anyway i guess :slight_smile:

Cheers,
Ian

10

As I said … it was something stupid :smiley:
ty

FYI, ive also added:

Yep, It Looks much more neat :slight_smile:

11

If you like neatness you might want to consider custom views / components:

@:build(haxe.ui.macros.ComponentMacros.build("assets/main-view.xml"))
class MainView extends VBox {
    public function new() {
        super();
        trace(brightness.value); // every component in the xml will now be a correctly typed member variable of the class
    }

    @:bind(brightness, UIEvent.DRAG_START)
    @:bind(brightness, UIEvent.DRAG_END)
    @:bind(brightness, UIEvent.CHANGE) // can bind any number of events to a function
    function onBrightness(e:UIEvent) {
        trace(e.type + " => " + brightness.value);
    }
}

Obviously that example is small, but as an application grows custom components will be really helpful (imo), plus no more findComponents, etc.

You can use the class just as if it were any other component (in fact, it is just any other component), eg:

        var app = new HaxeUIApp();
        Toolkit.theme = "dark";
        app.ready(function() {
            app.addComponent(new MainView());
        });

More info here: haxeui-guides/custom-components.md at master · haxeui/haxeui-guides · GitHub

Anyway, just an fyi since you mentioned neatness :slight_smile:

Cheers,
Ian

12

I’m definitely heading there, but I like the “baby steps” approach to better understand the module … and to refresh my Haxe memories, since I was using 2.something and a lot has changed since then :smiley:

1 Like