Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Bonito slider emit event only if mousedrag stops #256

Open
baxmittens opened this issue Sep 30, 2024 · 2 comments
Open

Make Bonito slider emit event only if mousedrag stops #256

baxmittens opened this issue Sep 30, 2024 · 2 comments

Comments

@baxmittens
Copy link

Hi there,

in the following example, the update should only take place after releasing the slider and not on any change. Is that possible?

using Bonito
using WGLMakie
import Bonito.TailwindDashboard as D

app = App() do session::Session
	sliders = [Bonito.Slider(-1:.1:1, value=0.0) for i = 1:6]
	vals = map!(Observable{Any}(), map(x->x.value, sliders)...) do x...
		return [x...]
	end
	f = Figure(size=(1000,200))
	ax = Axis(f[1,1])
	scatter!(ax, 1:6, vals) 
        sliderdiv(slider) = DOM.div(slider, "value: ", slider.value)
	flexrow = D.FlexCol(map(sliderdiv,sliders))
	return DOM.div(flexrow, f)
end

I appreciate any help you can give me.
Greetz max

@SimonDanisch
Copy link
Owner

You could do something like this:

slider_val = Observable(0.0; ignore_equal_values=true)
onany(ax.scene.events.mousebutton, slider.value) do mb, val  
    if mb.action == Mouse.release 
        slicer_val[] = val
    end
end

@baxmittens
Copy link
Author

I altered my example

using Bonito
using WGLMakie
import Bonito.TailwindDashboard as D

app = App() do session::Session
	sliders = [Bonito.Slider(-1:.1:1, value=0.0) for i = 1:6]

	f = Figure(size=(1000,200))
	ax = Axis(f[1,1])

	slider_vals1 = map!(Observable{Any}(), map(x->x.value, sliders)...) do x...
		return [x...]
	end
	slider_vals2 = map!(Observable{Any}(), map(x->x.value, sliders)...) do x...
		return [x...]
	end
	onany(ax.scene.events.mousebutton, slider_vals2) do mb, val  	
    	        if mb.action == Mouse.release 
        	      slider_vals1[] = val
    	        end
	end

	scatter!(ax, 1:6, slider_vals1) 
        sliderdiv(slider) = DOM.div(slider, "value: ", slider.value)
	flexrow = D.FlexCol(map(sliderdiv,sliders))
	return DOM.div(flexrow, f)
end

But this also doesn't work. It seems like since the sliders are not part of the scene the event
Makie.MouseButtonEvent(Makie.Mouse.left, Makie.Mouse.release)
is triggered each time I change a slider.

Another solution would be to use Makie.Slider but there I do not know how to register an interaction on a slider because it is no Axis. If I could do so, I could watch for the leftdragstop event.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants