Controlling image height programatically

  • Hi, Marco!

    Sorry for the late answer!

    That is a good learning example indeed. I will implement this for the Screen Image ( The Image with a Screen Transform Component on it)

    I do this because ScreenTransform has a convenient API that transforms screen point to objects local point. 

    In case if you need to use Image in World Space we can adjust controller later. 

     

    I decided to modify UV coordinates to achieve desired event. 

    To do this I created a custom Graph Material [add link] 

     

    I prepared 3 textures:

    1. Contents opacity mask ( black is transparent , white is solid)

    2. Contents itself (with a transparent pixel row at the top)

    3. Glass Image (with transparency)

     

    Then I pressed Add New -> Graph Unlit , double clicked on created material and set up 

    I am going to change Contents texture UV coordinates to shift it up and down 

    This image has graph scheme. It may seem a bit complicated but it's a nice exercise :

    Double click to see full sized image

    So basically my material has a parameter that can have values from 0 to 1 and affects UМ offset of Contents texture. 

    Let's see how it works 

    Select AddNew -> Screen Image on the Objects panel and assign our material to the image . Then Select GraphMaterial on the Resources and drag the slider to see how it affects Image:

     

    If you move your cursor over the property of material you can see it's Script Name ( you can also select corresponding node on the material graph editor window)

    Knowing Scripting Name i can modify this property via script. For example : 

    //@input Asset.Material material

    //@input string tweakName = "Tweak_N9"

    script.material.mainPass[script.tweakName] = 0.5;

    Then i made a script that takes a screen position and affects material parameter.

    //@input Component.MaterialMeshVisual image
    //@input Asset.Material material
    //@input string tweakName

    // coefficient for smooth movement
    var smoothKoef = 0.3
    global.touchSystem.touchBlocking = true;
    //creating events
    var touchEndEvent = script.createEvent("TouchEndEvent");
    touchEndEvent.bind(onTouchEnd);
    var touchStartEvent = script.createEvent("TouchStartEvent");
    touchStartEvent.bind(onTouchStart);
    var touchMoveEvent = script.createEvent("TouchMoveEvent");
    touchMoveEvent.bind(onTouchMove);
    var updateEvent = script.createEvent("UpdateEvent");
    updateEvent.bind(onUpdate);

    var dragging = false;
    var targetValue = undefined;
    //image has to have screen transform and be a child of a Orthographic camera
    var screenTransform = script.image.getSceneObject().getComponent("Component.ScreenTransform");

    function onTouchStart(eventData) {
    dragging = true;
    targetValue = getValue(eventData.getTouchPosition());
    offset = script.material.mainPass[script.tweakName] - targetValue;
    }
    function onTouchEnd() {
    if (dragging) {
    dragging = false;
    }
    }

    function onTouchMove(eventData) {
    if (dragging) {
    targetValue = getValue(eventData.getTouchPosition());
    }
    }

    function onUpdate() {
    if (targetValue) {
    var currentValue = lerp(script.material.mainPass[script.tweakName], targetValue, smoothKoef);
    script.material.mainPass[script.tweakName] = currentValue;
    }
    }

    function getValue(screenPos) {
    var localPos = screenTransform.screenPointToLocalPoint(screenPos);
    return remap(-1, 1, 0, 1, clamp(-1, 1, localPos.y));
    }

    //helper functions

    function clamp(minValue, maxValue, value) {
    return Math.min(Math.max(minValue, value), maxValue);
    }
    function remap(minFrom, maxFrom, minTo, maxTo, value) {
    return minTo + (maxTo - minTo) * (value - minFrom) / (maxFrom - minFrom);
    }
    function lerp(a, b, t) {
    return a + (b - a) * t
    }

    [Hint] Set Stretch mode of an image to fit height : 

    It's a bit complex but It might give a direction to work on

    Let me know if you have any questions!

    Best

    Olha

    Project file

     

    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!