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