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.
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.
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?
Cool! You can download the Intuiface XP here: Panorama Slider
I used the percentage of the scroll collection, that’s why it doesn’t matter if they don’t have the same size.
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.
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
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.
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.
Let’s put these values in the linear converter properties.
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.