Select HELP (How to create slider with options)

Hi, Just Me!

Could you please share a project with me so I could troubleshoot it asap?

Thanks!

Hi, just me!

I will create an example of a slider with a set of different choices.

1. Setting up sceneObjects 

So first i created a Screen Transform that will be a ScrollBar container. 

Then i created a Bar ScreenImage and made it a child of the container.

Also I created 4 images of a checkpoints (set them to fixed width and height so they are not affected by resizing a parent) and a Knob 

Here is a hierarchy setup: 

2. Scripting  

I will use a screenTransform's API that makes it very easy to transform between screen, world and relative screen transform positions.

Especially this functions may be useful:

   screenPointToLocalPoint(vec2 screenPoint) : vec2

   containsScreenPoint(vec2 screenPoint) : Boolean

Also screenTransform.anchors.getCenter() and screenTransform.anchors.setCenter()

Adding inputs:

//@input Component.ScreenTransform parentTransform
//@input Component.ScreenTransform knobTransform
//@input Component.ScreenTransform[] checkPoints

Creating events:

script.createEvent("TouchStartEvent").bind(updatePos);
script.createEvent("TouchMoveEvent").bind(updatePos);
script.createEvent("TouchEndEvent").bind(onTouchEnd);

Storing checkpoint values to the array and creating empty callbacks: 

var values = []
var callbacks = []

for (var i = 0; i < script.checkPoints.length; i++) {
    values.push(script.checkPoints[i].anchors.getCenter().x)
    callbacks.push(function (idx) { return function () { print(idx + " is Selected") } }(i));//empty func
}

Then defining updatePos function:

function updatePos(eventData) {
   var localPos = script.parentTransform.screenPointToLocalPoint(eventData.getTouchPosition());
   //transforming screen position to the screenTransform position inside it's parent 
   localPos.x = clamp(localPos.x);



localPos.y = 0;

script.knobTransform.anchors.setCenter(localPos);

}

Hi, just me!

I will create an example of a slider with a set of different choices.

1. Setting up sceneObjects 

So first i created a Screen Transform that will be a ScrollBar container. 

Then i created a Bar ScreenImage and made it a child of the container.

Also I created 4 images of a checkpoints (set them to fixed width and height so they are not affected by resizing a parent) and a Knob 

Here is a hierarchy setup: 

2. Scripting  

I will use a screenTransform's API that makes it very easy to transform between screen, world and relative screen transform positions.

Especially this functions may be useful:

   screenPointToLocalPoint(vec2 screenPoint) : vec2

   containsScreenPoint(vec2 screenPoint) : Boolean

Also screenTransform.anchors.getCenter() and screenTransform.anchors.setCenter()

Adding inputs:

//@input Component.ScreenTransform parentTransform
//@input Component.ScreenTransform knobTransform
//@input Component.ScreenTransform[] checkPoints

Creating events:

script.createEvent("TouchStartEvent").bind(updatePos);
script.createEvent("TouchMoveEvent").bind(updatePos);
script.createEvent("TouchEndEvent").bind(onTouchEnd);

Storing checkpoint values to the array and creating empty callbacks: 

var values = []
var callbacks = []

for (var i = 0; i < script.checkPoints.length; i++) {
    values.push(script.checkPoints[i].anchors.getCenter().x)
    callbacks.push(function (idx) { return function () { print(idx + " is Selected") } }(i));//empty func
}

Then defining updatePos function:

function updatePos(eventData) {
   var localPos = script.parentTransform.screenPointToLocalPoint(eventData.getTouchPosition());
   //transforming screen position to the screenTransform position inside it's parent 
   localPos.x = clamp(localPos.x);

localPos.y = 0;
script.knobTransform.anchors.setCenter(localPos);
}

function clamp(v) {
    return Math.min(Math.max(v, -1.0), 1.0);
}

And onTouchEnd function, that snaps to the closest checkpoint:

function onTouchEnd() {
//finding closest value
var curPos = script.knobTransform.anchors.getCenter();
var minDistance = 100.0;// very big value
var index;
for (var i = 0; i < values.length; i++) {
var diff = Math.abs(values[i] - curPos.x);
if (diff < minDistance) {
minDistance = diff;
index = i;
}
}

if (index != undefined) {
curPos.x = values[index];
script.knobTransform.anchors.setCenter(curPos);
callbacks[index]();
}
}

3. Adding callbacks

And here is an example of a script that enables one of several objects according to the selected checkpoint 

function addCallback(idx, callBack) {
    if (idx < callbacks.length) {
        callbacks[idx] = callBack;
    }
    else {
        print("no such index")
    }
}

It is only an example, that can be extended with a functionality you need. I just added an example of screenTransform positions use and transforming between and local ScreenTransform spaces

Example project can be found here

Best 

Olha