Scroll view

  • Hi, Marco Vanossi!

    I've make a simple example of scroll view in the screen space. Please take a look at the project here

     

    Here is a simple script that allows to drag ScreenTransform vertically or horizontally: 

    // @input Component.ScreenTransform screenTransform
    // @input bool dragX
    // @input bool dragY


    var startPos = script.screenTransform.anchors.getCenter();

    global.touchSystem.touchBlocking = true;

    var canDrag = false;
    var offset = vec2.zero();

    var touchStarEvent = script.createEvent("TouchStartEvent");
    touchStarEvent.bind(function (eventData) {

    var touchPos = eventData.getTouchPosition();
    if (script.screenTransform.containsScreenPoint(touchPos)) {
    var localPosition = script.screenTransform.screenPointToParentPoint(touchPos);
    offset = localPosition.sub(script.screenTransform.anchors.getCenter())
    canDrag = true;// allow dragging if the touch started in the screen transform area
    }
    });

    var event = script.createEvent("TouchMoveEvent");
    event.bind(function (eventData) {
    if (canDrag) {
    var touchPos = eventData.getTouchPosition();
    var localPosition = script.screenTransform.screenPointToParentPoint(touchPos).sub(offset);
    if(!script.dragX){
    localPosition.x = startPos.x;
    }
    if(!script.dragY){
    localPosition.y = startPos.y;
    }
    script.screenTransform.anchors.setCenter(localPosition);
    }
    });

    var touchEndEvent = script.createEvent("TouchEndEvent");
    touchEndEvent.bind(function (eventData) {
    canDrag = false;
    });

    Let me know if there are any questions!

    Best

    Olha

    Comment actions Permalink
  • Thank you, Olha! I’ll try it out and let you know! 🤗

    Comment actions Permalink
  • Hi Olha,

    Is there a way to limit how far the user can scroll?

    For example, I only want the user to scroll to the last square and no further.

    Thank you!

    Comment actions Permalink
  • Hi, Justin!

    Yes, definitely.

    So in my script i am controlling relative position of the center of the screenTransform rectangle. 

    Let's take a look what would be maximum and minimum relative positions of my panel : 

    in my case maximum y position would be 1 and minimum -1 

    i added two new input variables :

    // @input vec2 limitsHorizontal = {-1, 1}
    // @input vec2 limitsVertical = {-1, 1}

    defined clamp function 

    function clamp(min, max, v) {
    return Math.min(Math.max(v, min), max);
    }
    and added couple lines of code to the update function :

    if (canDrag) {
    var touchPos = eventData.getTouchPosition();
    var localPosition = script.screenTransform.screenPointToParentPoint(touchPos).sub(offset);
    if (!script.dragX) {
    localPosition.x = startPos.x;
    } else {
    localPosition.x = clamp(script.limitsHorizontal.x, script.limitsHorizontal.y, localPosition.x);
    }
    if (!script.dragY) {
    localPosition.y = startPos.y;
    } else {
    localPosition.y = clamp(script.limitsVertical.x, script.limitsVertical.y, localPosition.y);
    }
    script.screenTransform.anchors.setCenter(localPosition);
    }

    Here is a complete script, you can replace it in the previous project 

    You can even try to develop it further, adding smooth movement and snapping. 

    Let me know if there are any questions!

    Best 

    Olha

    Comment actions Permalink
  • Ah, that makes sense. This is great. Thank you so much for the help Olha!!

    Best,
    Justin

    Comment actions Permalink
  • Hi Olha,

     

     Thanks for the tutorial. Im finally making a lens that uses it. My use case is for horizontal scroll.

     Your example for limiting the drag is incorrect though. The correct way would to limit dragging as follows for when script.dragX==true

    if(localPosition.x>startPos.x && localPosition.x<startPos.x+size.x)

    {

      localPosition.x=startPos.x;

    }

    where

     

    var startPos = script.screenTransform.anchors.getCenter();

    var size = script.screenTransform.anchors.getSize();

     

    Well even more correct would be to get the actual screen width and do

     

    if(localPosition.x>startPos.x && localPosition.x<startPos.x+size.x-widht/2)

    {

      localPosition.x=startPos.x;

    }

     

    thanks,

    Marco

     

    Comment actions Permalink
  • Olha!

    I just spent sometime playing with scrollviews and in the end it didn’t turn out feasible. I need to show 1600 text objects within a scroll view somehow it stops working after a few hundred. There’s probably a limit on how many objects a the scene can render.

    So I’ve been thinking a better approach would be to use reusable cells similar to what iOS does with table views and collection views. If you have a tutorial for that that would be great!

    Thanks

    Comment actions Permalink
  • Hi, Marco Vanossi!

    Thanks for pointing on my mistake!

    I am working on some kind of layouts right now, I'll be glad to share them later

    Best 

    Olha

    Comment actions Permalink
  • Hi Olha!

     That's awesome!

     Collection views and table views with reusable cell would be great!

     Maybe also date picker, drop down, etc!

    Marco

    Comment actions Permalink
  • hello my bro how are you how work and everything pls and me in you whatsapp contact see my number 07067706969

    Comment actions Permalink
  • I tried to copy and paste the links from Snapchat to the search bar in Snap Camera but sadly they do not appear to be working here.

     

    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!