Scroll Control with a Push button " Long press / Short Press "

Community Usage questions
1

Hi there !

I made a button that set the scroll of a panel to different state / position.
I mean :
-1st tap : scroll = 0, what became scroll:false in the panel's prop (except in the gif down below)
-2nd tap : scroll = 100
-3nd tap : scroll = 200

And if i tap again the button, we're back to 0, then 100...

To get this, i have a variable widget and this in the button's script

set('scrollvar',get('scrollvar')+100)
if(get('scrollvar') > 290) set('scrollvar',0)
setScroll("panel_1",0,get('scrollvar'))

Here is what i have on screen :
scrolling

Now, what i'd like to do is add another behaviour to that button...

I'd like to set the panel scroll state false / true depending on how long i stay pushing the button...

Is that possible ?

Long press -> scroll True // Short press 1, 2, 3, 1, 2, 3... // Long press -> scroll False

Second question : is it possible to modify the scrolling "sensitivity" ?...

Thank you

2

You could set the panel's scroll property to VAR{scroll, false} and the button's script as follows:

if (value == 1) {
  locals.pressTimeout = setTimeout(()=>{
    // do something
    var scrollVar = getVar('panel_id', 'scroll')
    setVar('panel_id', 'scroll',  !scrollVar)
  }, 500) // after 0.5s
  // + any other action that should occur uppon regular press
} else {
  // cancel if button is released (assuming mode == push)
  clearTimeout(locals.pressTimeout)
}

Second question : is it possible to modify the scrolling "sensitivity" ?...

No

3

Ok, thank you very much ! I've just tried it and it's super interesting. A lot to learn in the code you just gave me :slight_smile: Coool :+1:

Question : what does mean the final !scrovall in the setVar() ??

Well, now i don't think this is going to be handy for me this way. Cause i deal with a little bit more than three knobs...

Actually, i made this, and i love scrolling from one controller to the other...
ezgif.com-gif-maker

The only problem is that sometimes, as i trigger some fader or knob... wooops... i get scrolling... a bit hard to deal with... And that's why i'd like to hold the scroll value as long as i need.

Setting scroll prop to false bring me to the top image, and i didn't find anyway to stay at the same level...

I know i could use tabs... visibility... but scrolling is really cool, so...

If you have any other idea, it would be great !

Thanks again

4

Getting closer to what i need...

I have a push button that switches between three scroll positions with "short press", and set panel's scroll true/false with a "long press".

it5mO5i2ll

With VAR{SCROLL} in the panel's propertie, and this button's script using setInterval :

if(locals.T === undefined) locals.T = 0
if(locals.scroll === undefined) locals.scroll = 0
if(locals.compteur === undefined) locals.compteur = 0

if(value==1) locals.hop=setInterval(function() {if(locals.T < 60) locals.T+=1},10) 

else if(value===0) 
{
  clearInterval(locals.hop);
  if(locals.T<60) 
    {
      locals.compteur+=1 ; 
      if(locals.compteur>3) locals.compteur=1
      if(locals.compteur==1)
        {
          set('led_4',1);set('led_5',0);set('led_6',0)
          setScroll('panel_2',0,0)  
          locals.T=0 
        }
      if(locals.compteur==2)
        {
          set('led_4',0);set('led_5',1);set('led_6',0)
          setScroll('panel_2',0,100)  
          locals.T=0    
       }
      if(locals.compteur==3)
       { 
         set('led_4',0);set('led_5',0);set('led_6',1)
         setScroll('panel_2',0,1000)  
         locals.T=0    
       }
    }

Now, the only thing that doesn't suit my needs is that when Scroll is false, it goes to its 0,0 position...

Maybe using a loop to send it the same position again and again could be a solution...

5

You could leave scroll to true and hide the scrollbar by adding this css when needed:

inner {
  overflow: hidden
}
6

Oh great, thank you !

I'm on it, now :slight_smile:

7

Cooooool... this time i got it whitout overthinking it...

JS{{
var css=''
if (@{button_over} == 1) css = "inner { overflow: hidden }"
else css = ''
return css
}}
8

Yes ! Only one pair of bracket is needed for the JS{} syntax (two pairs were required a bunch of version ago). The else line can be removed.

9

Thank you :+1:

10

I note this