Pages

Thursday, June 11, 2020

TouchSlider control

Aloha,

Yesterday evening and this morning I've spent some time on creating a new control...a touch slider. To be honest I can't remember why I had the idea to create one but who cares...now it's ready :)
So here is a screenshot of it...


So it's not really fancy but it works and is customizable in many ways. So first of all one can set the orientation to either horizontal or vertical. 
You can set a name and you can also define if that name should be visible or not. In addition you can define if the current value should be visible or not.
The color of the bar background, the bar itself, the thumb, the value text, the name text and the zero indicator are also adjustable.
This control is based on the JavaFX Canvas node which means it does not use a lot of nodes. But even if it is based on the Canvas node it is still styleable by CSS. If you take a look at the Demo class in the github repo you will figure out that the black and blue sliders are styled using code but the red slider on the right side ist styled using CSS.
This works because JavaFX offers so called StyleableProperties which bridge the gap between code and CSS.
The plan is to use this slider in a specific Tile for TilesFX for control e.g. IoT projects.
Here is a little video of the slider in action...


In addition to the above mentioned features you can also define if the bar should start at the zero position, this might come in handy if you have to control values that go from a negative to a positive value.
In this control I've used a little bit different approach to set the min and max values. Here you can define the min value and the range. The value property of the slider will always be in the range from 0 - 1 but if you call the getSliderValue you will get the "real" value based on the min value and the range back.
The slider will fire TouchSliderEvents when you drag it so that you can attach an observer to it and react on the events.
Well that's in principle it and as always you can find the code at github...

That's it for today...so keep coding...

No comments:

Post a Comment