Is a filmstrip the only method of creating a vslider image that follows the mouse vertically? If I have, for instance, a 300px diameter circle - just a single image - is there no way to track its y-pos other than skinning a vslider with a filmstrip?
Vslider images/filmstrip
Take a look at the sliders widget example that ships with Cabbage. Accessible from the examples menu, or here.
Got it. I guess there’s no way to make the tracker disappear so just the image is visible? Tried setting all colour alphas to 0 but didn’t seem to take…
No, I’m afraid there is no way to do this. What I would suggest is to use a simple image, and place it on top of an invisible slider. When the slider moves, change the image bounds. Here is the slider csd hacked to do this with the first slider.
customSlider.csd (3.7 KB)
works great… thanks!
1 Like
Mm, I have a question that I think is related (to vsliders): I´m using a filmstrip image with (what I understand is) the ´slider thumb´ already embedded in each frame (it´s a ´crude´ slider with only 12 steps). In my experience, sliding with the mouse works fine, but clicking on a fader position is somewhat offset from where the mouse is (the mouse is lower than where the ´thumb´ should be). I experimented with ´RemoveA´& ´RemoveB´ but don´t know if that actually did anything? Please see attached video…I guess the question is if we could somehow add an ´offset´ to the mouse position on a vslider?
Please see attached video:
I´m also including an example image and csd file:
VSlider FS Test.csd (1.6 KB)
Thanks!
[edit: for some reason the image gets corrupted when uploading, will share generating code on ps5.js]
I think both dragging and clicking behave the same. They both jump upwards, if you are half way up a rectangle. Let me take a look at the source…
I understand, thanks!!
I think in this case you jut have to make sure that everything is broken up into nice equal parts. Right now your slider have 11 steps, and its overall length is 160px, which means each segment is 14.5 pixels. This will lead to those jumps you see. If however you do this:
vslider bounds(50, 20, 28, 220) range(0, 11, 0, 1, 1) filmstrip("KeysTest5.png", 12) channel("i2")
so that each step is 10 pixels, the problem is solved.
Mm, I´m a little confused here. Isn´t the actual range 12 (0-11, with 0 included)? In ps5 I made a filmstrip with 12 frames and the value readout turns out correct (there are 12 discrete steps starting at 0) –– do you mean that I should divide the overall height (from vslider bounds) by the top-value of the range (11) and not the actual range (12)?
Right, good point! I guess I just got lucky with my code 
Did you try setting it up so that each step is an integer multiple of the length?
Haha, yes I did actually! It´s much better that way, though in general the mouse seems to be a little bit “under” if that makes sense (it´s not a biggie! we can remember that a bike ride under the sun might be more worth our times if our dream plugins can make a sound ultimately!)
Thanks 
No problem. I like your GUIs. They have a very unique visual style. Keep sharing them with us!
1 Like
When adding the filmstrip you will need to re do the coding manually, I believe you might need to write the alpha code manually or rename the slider channel, when setting the alpha, it happened to me in some versions of cabbage but I work around the coding and notice some words it have to be re written, I hope you understand my English. Jejejeje it’s not that good.
Also sometimes I need to open another .csd and copy a word like imageFile and paste it on the imageFile code , because if I re write it it will keep not working and also it still the word in color white, as soon I paste it it change to red color and the error desálese, …. Strange!
I think I know why this is actually. I updated the image loaded so that images are cached. It results in much better performance because the software renderer doesn’t have to keep drawing each image. The problem is it happens in the IDE too. I will try to sort this out, it’s quite annoying when one is trying to design their UI.