Unable to make setScroll work

I try to change a panel scroll position in a script like, for example, exposed in this thread : Scroll Control with a Push button " Long press / Short Press "

But I can't make it work.
I can see that the position values are updated but the widget is not.

Maybe it has something to do with the fact that I don't really undestand the doc here Scripting - Open Stage Control when it says that "Scrollable panels expose their scroll position normalized between 0 and 1 with their value" ...

Any idea ?

Could you please upload the session with what you've attempted so far ?

Sure ! :slight_smile:
(cannot upload yet, here's the json)

{
"createdWith": "Open Stage Control",
"version": "1.25.2",
"type": "session",
"content": {
"type": "root",
"lock": false,
"id": "root",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"colorText": "auto",
"colorWidget": "auto",
"alphaFillOn": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorBg": "auto",
"layout": "default",
"justify": "start",
"gridTemplate": "",
"contain": true,
"scroll": true,
"innerPadding": true,
"tabsPosition": "top",
"hideMenu": false,
"variables": "@{parent.variables}",
"traversing": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "",
"widgets": [
{
"type": "button",
"top": 170,
"left": 550,
"lock": false,
"id": "button_1",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorTextOn": "auto",
"label": "auto",
"vertical": false,
"wrap": false,
"on": 1,
"off": 0,
"mode": "tap",
"doubleTap": false,
"decoupled": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "set('scrollvar',get('scrollvar')+100)\nif(get('scrollvar') > 290) {\n set('scrollvar',0)\n}\nsetScroll("panel_1",0,get('scrollvar'))\nconsole.log(getScroll("panel_1"));"
},
{
"type": "panel",
"top": 60,
"left": 310,
"lock": false,
"id": "panel_1",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorBg": "auto",
"layout": "default",
"justify": "start",
"gridTemplate": "",
"contain": true,
"scroll": true,
"innerPadding": true,
"tabsPosition": "top",
"variables": "@{parent.variables}",
"traversing": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "",
"widgets": [
{
"type": "fader",
"top": 130,
"left": 50,
"lock": false,
"id": "fader_1",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"design": "default",
"knobSize": "auto",
"horizontal": false,
"pips": false,
"dashed": false,
"gradient": ,
"snap": false,
"spring": false,
"doubleTap": false,
"range": {
"min": 0,
"max": 1
},
"logScale": false,
"sensitivity": 1,
"steps": "",
"origin": "auto",
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "",
"onTouch": ""
}
],
"tabs":
},
{
"type": "variable",
"lock": false,
"id": "scrollvar",
"comments": "",
"value": 0,
"default": 0,
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": ""
}
],
"tabs":
}
}

Unfortunately the informations in the thread you found are outdated, all you need now is to set the panel's value to change its scroll position:

// set panel's x and y scroll: set('panel_id', [x, y])
// with x and y between 0 and 1
set('panel_1', [0, Math.random()])
// log scroll position to console
console.log(get('panel_1'))

got it now !
thanks a lot for the quick answers

well I ... almost got it
it seems that the set method doesn't apply to matrix (the get method returns an array with the children values, not the scroll position, so I guess that's why the set method doesn't affect the scroll position)
so I try to put the matrix inside a panel, but then cannot get scrollbars on the panel (contain = false, scroll = true .. but no scrollbar unless I put some big dumb value on matrix height)

(sorry still can't upload )

{
"createdWith": "Open Stage Control",
"version": "1.25.2",
"type": "session",
"content": {
"type": "root",
"lock": false,
"id": "root",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"colorText": "auto",
"colorWidget": "auto",
"alphaFillOn": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorBg": "auto",
"layout": "default",
"justify": "start",
"gridTemplate": "",
"contain": true,
"scroll": true,
"innerPadding": true,
"tabsPosition": "top",
"hideMenu": false,
"variables": "@{parent.variables}",
"traversing": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "",
"widgets": [
{
"type": "button",
"top": 10,
"left": 660,
"lock": false,
"id": "button_1",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorTextOn": "auto",
"label": "scroll",
"vertical": false,
"wrap": false,
"on": 1,
"off": 0,
"mode": "tap",
"doubleTap": false,
"decoupled": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "set('scrollvar',get('scrollvar')+20)\nif (get('scrollvar') > 100) {\n set('scrollvar',0)\n}\nset("panel_1",[0,get('scrollvar')/100])\nset("matrix_1",[0,get('scrollvar')/100])\nset("panel_2",[0,get('scrollvar')/100])"
},
{
"type": "variable",
"lock": false,
"id": "scrollvar",
"comments": "",
"value": 0,
"default": 0,
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": ""
},
{
"type": "button",
"top": 80,
"left": 660,
"lock": false,
"id": "button_2",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorTextOn": "auto",
"label": "reset",
"vertical": false,
"wrap": false,
"on": 1,
"off": 0,
"mode": "tap",
"doubleTap": false,
"decoupled": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "set('scrollvar',0)\nset("panel_1",[0,get('scrollvar')])\nset("matrix_1",[0,get('scrollvar')/100])\nset("panel_2",[0,get('scrollvar')])\n"
},
{
"type": "button",
"top": 220,
"left": 660,
"lock": false,
"id": "button_3",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": "auto",
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorTextOn": "auto",
"label": "log",
"vertical": false,
"wrap": false,
"on": 1,
"off": 0,
"mode": "tap",
"doubleTap": false,
"decoupled": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "console.log(get("matrix_1"));"
},
{
"type": "panel",
"top": 10,
"left": 20,
"lock": false,
"id": "panel_1",
"visible": true,
"interaction": true,
"comments": "",
"width": 130,
"height": 510,
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorBg": "auto",
"layout": "default",
"justify": "start",
"gridTemplate": "",
"contain": false,
"scroll": true,
"innerPadding": true,
"tabsPosition": "top",
"variables": "@{parent.variables}",
"traversing": false,
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "",
"widgets": [
{
"type": "fader",
"top": 130,
"left": 50,
"lock": false,
"id": "fader_1",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": 540,
"expand": "false",
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"design": "default",
"knobSize": "auto",
"horizontal": false,
"pips": false,
"dashed": false,
"gradient": ,
"snap": false,
"spring": false,
"doubleTap": false,
"range": {
"min": 0,
"max": 1
},
"logScale": false,
"sensitivity": 1,
"steps": "",
"origin": "auto",
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "",
"onTouch": ""
}
],
"tabs":
},
{
"type": "matrix",
"top": 10,
"left": 160,
"lock": false,
"id": "matrix_1",
"visible": true,
"interaction": true,
"comments": "",
"width": "auto",
"height": 450,
"expand": true,
"colorText": "auto",
"colorWidget": "auto",
"colorStroke": "auto",
"colorFill": "auto",
"alphaStroke": "auto",
"alphaFillOff": "auto",
"alphaFillOn": "auto",
"lineWidth": "auto",
"borderRadius": "auto",
"padding": "auto",
"html": "",
"css": "",
"colorBg": "auto",
"layout": "vertical",
"justify": "start",
"gridTemplate": "",
"contain": false,
"scroll": true,
"innerPadding": true,
"tabsPosition": "top",
"variables": "@{parent.variables}",
"traversing": false,
"widgetType": "text",
"quantity": 100,
"props": "JS{\nvar props = {}\nprops.height=30;\nprops.value = \nreturn props;\n}\n", "value": "", "default": "", "linkId": "", "address": "auto", "preArgs": "", "typeTags": "", "decimals": 2, "target": "", "ignoreDefaults": false, "bypass": false, "onCreate": "", "onValue": "", "widgets": [], "tabs": [] }, { "type": "panel", "top": 10, "left": 380, "lock": false, "id": "panel_2", "visible": true, "interaction": true, "comments": "", "width": "auto", "height": 450, "expand": false, "colorText": "auto", "colorWidget": "auto", "colorStroke": "auto", "colorFill": "auto", "alphaStroke": "auto", "alphaFillOff": "auto", "alphaFillOn": "auto", "lineWidth": "auto", "borderRadius": "auto", "padding": "auto", "html": "", "css": "", "colorBg": "auto", "layout": "vertical", "justify": "start", "gridTemplate": "", "contain": false, "scroll": true, "innerPadding": true, "tabsPosition": "top", "variables": "@{parent.variables}", "traversing": false, "value": "", "default": "", "linkId": "", "address": "auto", "preArgs": "", "typeTags": "", "decimals": 2, "target": "", "ignoreDefaults": false, "bypass": false, "onCreate": "", "onValue": "", "widgets": [ { "type": "matrix", "top": 0, "left": 0, "lock": false, "id": "matrix_2", "visible": true, "interaction": true, "comments": "", "width": "auto", "height": "auto", "expand": true, "colorText": "auto", "colorWidget": "auto", "colorStroke": "auto", "colorFill": "auto", "alphaStroke": "auto", "alphaFillOff": "auto", "alphaFillOn": "auto", "lineWidth": "auto", "borderRadius": "auto", "padding": "auto", "html": "", "css": "", "colorBg": "auto", "layout": "vertical", "justify": "start", "gridTemplate": "", "contain": false, "scroll": false, "innerPadding": false, "tabsPosition": "top", "variables": "@{parent.variables}", "traversing": false, "widgetType": "text", "quantity": 100, "props": "JS{\nvar props = {}\nprops.height=30;\nprops.value = \nreturn props;\n}\n\n",
"value": "",
"default": "",
"linkId": "",
"address": "auto",
"preArgs": "",
"typeTags": "",
"decimals": 2,
"target": "",
"ignoreDefaults": false,
"bypass": false,
"onCreate": "",
"onValue": "",
"widgets": ,
"tabs":
}
],
"tabs":
}
],
"tabs":
}
}

You're right, it doesn't work with matrices because they expose an array with their children's values in it instead of the scroll position.

but no scrollbar unless I put some big dumb value on matrix height)

Well you were close actually, you can get it working by setting the matrix' height to something like

#{@{this.quantity} * 30}

Yes I ended with something like this and some custom var to make the height depends on the quantity.
Thanks