Select HELP (How to create slider with options)

Follow

A7_ma7

Snap Lens Network Member Lens Studio Team

• September 09, 2019 21:42

im trying to make a slide selector

i tried to detect a button location between two points
when point detected activate a post effect

but its just not working :(

// -----JS CODE-----

// @input Component.ScreenTransform screenTransform
var less = 3.2473533153533936;
var plus= 3.247354030609131;

var bb = script.screenTransform.getTransform().getLocalPosition();

if(bb.x >= less && bb.x <= plus){

print(" detected");
}else{
print(" nor detected");
}

this is a preview how its looks like

https://filebin.net/071a5uniiv0si125/previ.mp4?t=3uwbcfqc 

 

 

 

 

0

• 

  Olha

  Snap Lens Network Member Lens Studio Team

  • September 18, 2019 17:00

  Hi, Just Me!

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

  Thanks!

  Comment actions Permalink
• 

  Olha

  Snap Lens Network Member Lens Studio Team

  • December 09, 2019 22:03

  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);
  
  }

   

  Comment actions Permalink
• 

  Olha

  Snap Lens Network Member Lens Studio Team

  • December 09, 2019 22:32
  • Edited

  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

   

   

  Comment actions Permalink

Please sign in to leave a comment.