I’m trying to create a group of images where the images that are farthest from the center are more faded so I can make a row of images that the user can swipe left and right while they fade into view.
I’ve got an image the fades from opaque to transparent to opaque but I can’t figure out how to implement it the way I want.
Has anyone accomplished this?
Hi @brathgeber,
As this is a request we have had a few times now (left and right slider), I have created an example project to help explain how this can be done.
Firstly, you can download the project here - Slider Button Selector.zpp (2.4 MB)
The project contains 5 buttons (planes) named from -2 to 2 in the Hierarchy (0 being the button starting in the middle). These planes have no functionality added to them, but material and color can be changed by simply editing the individual properties.
In my example, I want the planes to be interactive buttons (can be touched). This means that the ‘Touch Plane’ holding all the sliding inputs is positioned below the buttons so it does not interfere with the pointer down events. If for your project you would only like them to be images, you can position the ‘Touch Plane’ over the planes and change the opacity value to 0 so the instructions are not visible.
I have commented most of the work in the ‘Script’ node so should be understandable, but to summarise, the ‘Touch Plane’ works out the pointer move event which alters the positioning of the ‘Buttons’ group. There are then 2 trigger regions on either side. When a plane enters either trigger region, it is then positioned back at the start of the opposite side.
Hope this helps and please do feel free to use and edit this, to incorporate it in any projects you may have.
George
Thanks for the reply George.
This is very close to what I’m looking to make. However I want my edges to fade into transparency whereas the example you provided has them fading into white.
Hi @brathgeber,
I have just added a PNG image overlay on top. It could be done programmatically, but this was a quick way of doing it.
In theory, you can work out the position of each plane and change the transparency material based on this position value (that would take some work).
You could have a play around with the changing the material of the overlay and see if you can get it closer to what you are expecting?
George
Hi George,
I am keen to try this project as it is something I have been struggling with, however the download is not working for me but is coming through as an Exec file. I am a Mac user; is this an issue?
cheers,
Paddy
Hi @paddywardnz,
This was just a quick example to show how it could be done.
The file attached was created on a Windows machine but should work seamlessly on a Mac. It will be classed as a ZPP file which is the Studio file type, because of this, it should just drag into the symbol definitions panel within Studio. Once in the symbols definitions panel, it can then be dragged into the Hierarchy. You can also double click on the subsymbol and take a look at how it is set up.
Let me know if you have any questions regarding how it is created.
George
Hi @George. So I’m playing with the slider you shared here and I’m struggling with the trigger regions a bit. Let’s say you go from 5 boxes to three, would you set the 2.5 +/- in the script to get them to scroll even like the five boxes do? I have played around with the script a bit but I don’t think I’m fully understanding. Any additional clarification would be great when you get time. Thanks in advance.
Hi @destery,
Not a problem at all.
The buttons and trigger regions are set up in a sequence with equal space in between them. If you want to remove some of the buttons you will then need to re-position them (and the trigger regions) to be part of an equal sequence again.
Also, each time a trigger region is entered by a button, that button is ± by a value which brings it back to the opposite side. This value will need to be edited within the script, depending on the sequence and position of the trigger regions.
This was just a quick example that I put together. We are working on a new tutorial that will utilize a slider with the ability to change the number of buttons and looks, so be sure to keep an eye out for that!
Hope this helps.
George
Thanks, @George for the clarification. I changed to three buttons and added an additional trigger region in the middle with trigger enter/leave states to get the faded sides. As you mentioned in your comments I moved the touch plane over the buttons and made it invisible. I attached my file in case anyone can benefit from the modifications. Thanks again for the help.Slider_Fade_Working.zpp (2.6 MB)
Question George how can I find out what box I’m moving? (-2,-1,0,1,2) I would like to change info on the box (png, or color) I would like to add text box I could change text on. But I need to know what node it is.
Thanks
Steve
Hi @stevesanerd,
Please have a look at this updated version, it has letters showing which box (state) is activated using a centered trigger region.
Slider Button Selector.zpp (1.9 MB)
Let me know if you have any further questions regarding this example and as always, post your projects containing it on our show and tell page! 
George
Thank you I’ll take a look.
Ps. your files are missing the .zpp at the end.
Steve
George I love you but your killing me here… 
I’m going to use this like a date selector. So 0 - 31 I wanted to change the text as it passes each way without making 32 different Tags. I can change the tags as it move around but then I’ll loss which one is the text I need to change. If Zappar would just pass the name of the node like all the other settings it would make life much simpler.
I guess I can make more tags and use them like variables. (Text1,Text2 … so on) So I will know which one is which and then change another tag like a it was a variable. So I would have 3 tages. (Enter, Text1,#)
Time to play…
Thanks,
Steve
OK question. First THANK YOU for sharing the examples! A starting point is so helpful when you have ideas and are not quite sure how to get off the ground.
What I’m doing. I took the example slider and added to it. There are now three sliders, each updating it’s own text area. I want it to act as a code. So when the correct three letters are selected you select the button and it checks then causing the next action or scene to happen. I have it set so that when three letters are selected the button will check and activate the pass or fail state.
So my enigma. I want the button to reset if the fail option is reached so that they can adjust the code and try again. Currently, when they select it verifies and says pass or fail (green or red) but I’m not sure where to put the “reset” for the button so they could try again. The “code check” button is in the Display group along with the pointer down script. The correct code is “ABC” left to right. I have included the file.
Any guidance would be appreciated.
Slider Button_Codex.zpp (1.9 MB)
I’m using the same thing to get data. here is my code I’m using:
let DateInfo;
symbol.nodes.Trigger_RegionMiddle.on(“triggerenter”, (e) => {
let TagList = e.node.tags();
let TagOne = TagList[0]; // Enter
let TagTwo = TagList[1]; // Text Tag
let TagNext;
console.log("Tag List = " + TagList);
console.log("Tag One = " + TagOne);
console.log("Tag Two = " + TagTwo);
var integer = parseInt(TagTwo);
console.log("Test = " + integer);
DateInfo = integer; //the DataInfo will hold data
});
@George and @destery When I scroll fast sometimes it will miss blocks and they will keep going. How can I stop this?
Thanks
Steve
Hay @George
So I have things working very well. The only problem I have is if you scroll to fast the bock will jump past the Square trigger region. The on enter command will not fire. I have been playing with things and found it will not fire till the blocks 0,0,0 has passed the edge of the trigger region. It looks like if the block jumps past the edge of the trigger region so it’s not recognized as passing through it.
Any suggestions on how to fix this?
Thanks
Steve
Hi @stevesanerd,
I will take a look to see if I can find why this bug is happening.
As mentioned previously, this is just an example and inspiration showcasing how a slider can be set up. There are many other ways and we will be looking to finalise a similar slider and have it built into Studio as a subsymbol.
Will post an updated fixed version soon.
George