Linear converter

Hi, can anyone help with the basic rules of linear converter, i’m trying to make sense of it through the samples but its just bouncing off my head, esp. how do you calculate the sample input a, sample output a, sample input b and sample output b values.

I’m trying to create a scroller on the bottom that moves the main image in the background, but instead of using the whole scroller, I just want a rectangle that moves across the bottom to move the background.

thanks

Hi @melvyn_br

Here is a sample i have made that will show you how to move an image with a slider.

This was taken from @Seb Sample for the opacity example.

SliderWithMovingImage.zip (7.7 MB)

I hope this helps,

Regards

Louie

Hi Mike, thank you for that, I was looking at that but it looks like its not what I want to achieve, my background image is bigger than the screen, and needs to be bound to the scroller on screen.

thanks for the help though

Hi @melvyn_br,

I’m not sure you’ll need a linear converter here. Since the Slider I made (the one shared by @Promultis) is based on a scroll collection, you could have your background image in a scroll collection as well.
You then just need to bind the scroll offset in % so that the image scroll follows the slider.
Would that fit your need?

Seb

Hi Seb, i tried that but it doesnt match the size of the scroller, please see screenshot, maybe that will make it clearer

Something like this?

Yes seb

Cool! You can download the Intuiface XP here: Panorama Slider :slight_smile:
I used the percentage of the scroll collection, that’s why it doesn’t matter if they don’t have the same size.

1 Like

Hi Seb, thank you for that, really appreciate your effort to putting this sample together. Also, I am more keen to know the principles of the linear converter, can you please tell me what are the rules to calculate the sample A, B values, etc.

1 Like

@melvyn_br This should be the article you will need :slight_smile: https://support.intuiface.com/hc/en-us/articles/360007179612-Linear-Converter

Hi Mike, I did have a read of that, but it just bounced off my head - I find it hard to understand theoretical stuff being more of a practical guy :slight_smile:

Damn, I was expecting this diagram to be clear when I wrote the article but I shouldn’t forget I loved maths when I was young, which is maybe not typical for UX Designers :smiley:
image

BTW, you noticed that in the sample I sent you that you didn’t need any linear converter. The scroll offset (in percentage) of the panorama collection is purely equal to the scroll offset of the slider collection. This math equation is called “identity”, where for y = a*x+b, a = 1 and b = 0, meaning we have y = x. In the diagram, it means that output A = input A and output B = input B. You could use any number there, such as output A = input A = 0 and output B = input B = 100.

Let me try to take another example to describe what the diagram means. To create an animation where an image (at the bottom) is aligned with another one (at the top) on the left edge of screen, but reaches the right edge of the screen when the top image only reaches its center, I’ll take 2 “pictures” of that animation. These will be the A & B point used to compute the linear converter parameters.

Point A: I want the 2 images aligned on the left edge. The X property equals 191px for both images, for both input and output.

image

Point B: I want the bottom image to be aligned to the right edge of the screen when the top image is at the center. The output will be 1729px when the input is 960px.

image

Let’s put these values in the linear converter properties.

And here’s the result within Composer. The bottom image follows the top image with a linear interpolation rule.

I hope this clarifies these Input / Output things.

Seb

1 Like

Could you put this on the article for other users to understand how it works?

Regards

Louie

Sure, check this new paragraph.

1 Like

Hi Seb, thank you for this, indeed this is a more simpler explanation. Also, I’d really like to thank Alex, who gave me an explanation in layman terms that just made it alot easier to understand a complicated thing.

Thank you everyone who helped me understand this better.

1 Like