increase value in increments?

MoKaLux · August 2021

I have a problem I cannot solve

I have this slider class: https://wiki.gideros.rocks/index.php/UI_Slider#Slider_with_Increments

How can I move the slider incrementaly? for example move the slider every value of 10?

Could you point me to a possible solution please?

Thank you in advance

PS: you can copy/paste the class and it should be working out of the box + example provided as well.

This is for the paramaters for my game, or I might use imgui instead but I don't want to increase my app size too much

keszegh · August 2021

well, in setValue you should use some math.round in this line:
posX = self.width * value / self.maximum
e.g. something like:
posX = math.round(self.width * value / self.maximum /rounding_const)*rounding_const
i think that could be enough.

MoKaLux · August 2021

Thanks keszegh I will try that.

E1e5en · August 2021

At small values, the slider does not behave quite correctly: if it moves, then the value should change, or if it was released, it should be set in the desired position. And now he has a zone in which he moves, but this does not affect. This is not correct for a UI component.

Therefore, you can add processing so that when the onMouseUp event occurs, the nearest integer is determined and the slider is set to it.
You can also develop to more accurately set the value (if necessary):
- when you left-click on the scroll bar, if the slider is to the right of the cursor, then it moves to the left by the step value and vice versa;
- or add buttons to the left and right (arrows or plus-minus), by clicking on which you add or remove a step value.
This will make it easier for the user to set a specific value.

And since the component is cool and moves smoothly, it's a pity that you can't set a step.

MoKaLux · August 2021

I almost fixed it, will post asap

keszegh · August 2021

you should check the slider class of @Scouser from this demo, i think i modified his in the past when i made mine, it was really good:
http://forum.giderosmobile.com/discussion/886/simple-options-screen#Item_8

MoKaLux · August 2021

I found an old code I did and here is the updated class

may not be the best though

https://wiki.gideros.rocks/index.php/UI_Slider#Slider_with_Increments

thank you keszegh, I will have a look at it

EDIT: I prefer mine

E1e5en · August 2021

Judging by the example, at the maximum value of 5, switching occurs, but the values of 2 and 0 remain unchanged. With a maximum value of 5, you will have 6 positions: from 0 to 5. And in the example it turns out more.
Plus, you can leave the smooth movement of the slider when moving. And in the UP event, already shift to the nearest value.

MoKaLux · August 2021

no don't worry about the gif example it is very bad

you can set the maximum value and the steps (I just chose bad values in the example

)
The only issue is how I handle the steps but you can change it to your needs.

MoKaLux · August 2021

https://wiki.gideros.rocks/index.php/UI_Slider#Slider_with_Increments
there is a little offset when you drag the slider

good enough for me though, thanks everyone for your help much appreciated

Viva gideros!

MoKaLux · August 2021

I was wrong, good enough for me but not for the community

updated: https://wiki.gideros.rocks/index.php/UI_Slider#Slider_with_Increments

edit: you can easily add textures to the pixels

Peace.

E1e5en · August 2021

It became interesting for me to experiment with your component. And it turned out to be very easy to do what I was talking about (move smoothly, and set the value on the Up event). And I added a color change to the slider so that it can be seen better in the picture:

True, we need to refine it a little more, but this is just as an experiment.
It was enough to add one line:

function Slider2:onMouseUp(event)
	if self.isFocus then
		self.isFocus = false
 
		local e = Event.new("value_changed")
		e.value = self.value
		self:dispatchEvent(e)
 
		event:stopPropagation()
		self:setValue(self.value) -- !!!
	end
end

But I'm already experimenting with this to better understand the engine.

MoKaLux · August 2021

Very well done man, I will update it with your code ;-)

MoKaLux · August 2021

https://wiki.gideros.rocks/index.php/UI_Slider#Slider_with_Text

(at)E1e5en can you try to improve it so it behaves as it should (with your modifications in previous posts) please? You can post your code here

E1e5en · August 2021

The fact is that I ruled the very first version, in which the code for smooth movement in the Move event was described. Now, if you return it and return the record to the variable x0 (which was in the Down event), and now add the line self: setValue (self.value) to the Up event, then it will work as I have already shown.
Here is the code for the 3 events:

-- events
function SliderText:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		local x, y = self:globalToLocal(event.x, event.y)
		self.isFocus = true
		self.x0 = event.x -- RETURN
		self.knob:setX(self:setRange(x, self.steps))
 
		self.value = self:round(self.maximum * self.knob:getX() / self.width)
		local e = Event.new("value_changed")
		e.value = self.value
		self:dispatchEvent(e)
 
		self.textfield:setText(self.text..self.value)
 
		event:stopPropagation()
	end
end
 
function SliderText:onMouseMove(event)
	if self.isFocus then
		--RETURN and change
		local dx = event.x - self.x0
		self.knob:setX(self.knob:getX() + dx)
		self.x0 = event.x
 
		-- keep the knob position within its range
		if self.knob:getX() < 0 then self.knob:setX(0) end
		if self.knob:getX() > self.width then self.knob:setX(self.width) end
		self.value = self.maximum * self.knob:getX() / self.width // 1
 
		local e = Event.new("value_changed")
		e.value = self.value
		self:dispatchEvent(e)
 
		self.textfield:setText(self.text..self.value)
		event:stopPropagation()
	end
end
 
function SliderText:onMouseUp(event)
	if self.isFocus then
		self.isFocus = false
		self:setValue(self.value) -- ADD
		event:stopPropagation()
	end
end

Result:

I believe that the code needs to be refined and slightly cleaned up, since the calculation of movement "in steps" during movement must be removed and all the functions and variables necessary for it.

When turning, it does not work very correctly, tk. just click elsewhere (not exactly hitting the component) and it will process.

Update:
Now it turns out that there are 2 versions of the development of this component:
- smooth movement and fixation on the value;
- switching when moving in steps.
And you need to develop in one direction.

MoKaLux · August 2021

Oh I see you were still using self.x0
I need to review my code then. Thank you ;-)

E1e5en · August 2021

Namely, I used an old version of the component and modified it. This is just a demonstration of what other behavior the slider can do. This is clearly not code for release =D

MoKaLux · August 2021

I will try to make it code for release asap ;-)

Ps: i will also check the rotation issue.

MoKaLux · September 2021

ok final for me (I couldn't make it work like you want E1e5en, it was breaking my vertical slider

)
only horizontal and vertical are working ok.

https://wiki.gideros.rocks/index.php/UI_Slider#Slider_with_Text_.28Increments.29

I think gideros imgui is the best option, but I wanted to try a quick slider

Peace and viva gideros

PS: please notice this line

if self.slit:hitTestPoint(event.x, event.y) or self.knob:hitTestPoint(event.x, event.y) then

PS2: particle effect by hgy29

https://wiki.gideros.rocks/index.php/Examples#PARTICLES_EFFECT_1_.40hgy29

EDIT: I added an id value in case of several sliders. Final?

MoKaLux · September 2021

oh la la, updated with one more example

https://wiki.gideros.rocks/index.php/UI_Slider#Slider_with_Text_.28Increments.29
END

Howdy, Stranger!

Categories

In this Discussion

Top Posters

increase value in increments?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

increase value in increments?

Comments