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!

    Comment actions Permalink
  • 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
  • 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
Have a comment?

Please sign in to leave a comment.

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!