Syntax for Setting and Getting Array Data From a Panel

aaronventure

I have a panel that I want to use to create a horizontal range slider. The slider will have two control points on each side, allowing the user to define the range of whatever.

I cannot use two panels because I need to be interoperable -- pulling one over the other will move the other along.

So I need to be storing the values of each in a simple array with two elements. But how do store this in the panel? What's the correct syntax for setValue and getValue in this case?

ulrik

@aaronventure I set up a condition, if the panels value is not an "object", I set the min and max value in the its callback like this

inline function onRangeSliderControl(component, value)
{
	if (typeof value != "object")
		component.setValue({"min": component.get("min"), "max": component.get("max")});
};

Content.getComponent("RangeSlider").setControlCallback(onRangeSliderControl);

You can take a look how I usually do it in the snippet below.

HiseSnippet 1494.3ocsW02SaaDF2FvaKYqSqR6u1ecKSZxoDLgVVaEcrx6crwKQjttNUUUcXew9FN2EYeI.pkOK66T+jrO.SZ644N63KPnBgVif.2yq+dd67i6jICY44xLG2ZO+7ALG2uvq64BUxlITtvY2sbb+RuinhXFoaJOhk4rw4Cn44rHGW2YeFJias4bze96mtAMkJBYUjbbdgjGx1i2mqpn1YsekmltCMh8bdeKoWdscCkhMkoxg.dl0qsy.Z3IzX1ATTrY7bb+jsi3JYVWEUwxcbmaCYz4cSjmJLx+BdN+3TFdXImtfgLj2QlFgHFo5rYBOMpSYbm6.VoSUVXVSV3q81mGwGSuJa7UZFjJMryGtyLI7lcB3sjM7ZaAuo.IWKHMmAR20qaXFefphChmO2aWghk0iBocanXj0Yl+4S81TBRHTA8omv1ICNLVC+G1tcKB7UymTu9hKV6n0O3YaS5t2tas8QjNqev16Uaga1m5PgKWQzcJcNhrJo2PQnhKE9wMq+150FQyHTfrJgmGDyT6ICooaHGJhx8QuWyHRetvRH+Fv4FHWMO5YSxidllWgpirX9BZ5PleohY512U0FXAzE1t6k.C5qt+qWTK087GE.DW.90xsSQF5YExTuVbPNSYZZ8qP2wwFRMZhFJNnGzweDFurniXgJvPoL+WAYe3Gz132O30KtL7OE4Ca6Z9SdvobUx5oCRnVdhqX8K8UKSJHhpnAIxQrLxSIKEzlrBocvi+fHASEZvfw6BlSWFQX5PMQMPwNSMt.kOrWOttFEjO73bUFWD6qB3fmN6vd9MVYkFMm+9.DCRYhXURodivp054OGrEn7.ZVNC5PMUhlj4Ks67jFsHMf+XKA8rJIpvnwRUoh9xg4rsfwPHcX6sU.rjwFjhiBH7l2XHvMMtZMXxndxpaTF8z0S4wBVDZXeTBH+AFJDl7xXQaHUJYezpW.8LVCK6u4F1SKrQf7imXt9d5ayfx0OKb4llUIZbXN8Da9UYxRYfPOVaDdOhA9Ago7vSXQj28NKYZVuFDUkEbPcCTVbLP+cdjJwuI4dEJgUbC.AieUqC1qlEvBSJhr8opj.5w4ESxfuZR9wInBytZpOknSaPWfNEY4nqZ1UMxpcp1vkdRGE9f8ZgfsEwzSh1hklyJDWWPtr3Zynm2JtEyDMFOFoqzWLt3.covSfT9EMPEcPXxT2EYd1L3jx65iw119CjB3feCKYvNg5VmwF7NnogqDTbAyu3JbPrKI09XoeSZZ5wvCk8KadQyUuNWjB5NtMlHEVJiXJSl5GVBnVlgPcatNcCOeS1yPj7sPpVd7eB2Loy1iUBgfYF3s5RwJjJVUi.sL0xqxDmAtnH6cCRRl4dMtGGxSKnzguUXefTwNT3qCs5WTmbYV85MUdEVKkkMU13ZRYeHE8EC6eLKyNwhBB6NL4BIdW+BI16KEZRPVBJE6J3pCGvDW2VTNEYUb4kBTAhpzqtbmxUWnBVpCOBoXkKczn1w8679ktGdPY4c4G0Nn8354RK+P33ENN+1taAClkdAbH.hArLEGiO2sXif8MMKLUyaKV9IJ4.srE0YXA2aFlNqZuz+XsysObJdQUEA9ZILdbh09s+zZ4zQvSn5jwf1Hv6yT8LZPpO48u+8sQ4fFK4oksW.5+FuMw61xaQ9Y80veOYK3hyX3wnNUOxAMv+BePCfTwU.06ssxJ8ycfj0Xbr1eslyUWiDVfUFMLkplbqVbU9BFPm0DqRhqKJx4pysW0++sUcuoP7tdc3pvjoiwYlBFgVjOFXr3EDti2185AWRUAv4714kebda.GycywvSPx3P806fg86BsBgLv6Bn8EmrcmAmAMmaimwLPWlHRe.6XJXtDd1sf4RkLgNmvL4aBMSt3qf7YZJ.lD529pl293YxRkSqddv.oSe3sgdSXHF9K.WKLcct+sPmGbKzY4agN+vsPmGdKz4Q2Bcd7GTG7EQWeHrVoYb.HzYa8cittaKnPmktKz4+PbII4v

Christoph Hart

@ulrik what‘s the benefit of using the min / max properties? I usually just call setValue with an array of two numbers and call it a day.

ulrik

@Christoph-Hart that I'm using an object instead of an array? I guess it's just old habits

aaronventure

@ulrik Isn't accessing an object property slower?

ulrik

@aaronventure I've never thought about that, maybe you're right.

aaronventure

@Christoph-Hart how to set an array, then? How to specify which element I'm setting? setValue only expects one parameter.

Christoph Hart

@aaronventure that parameter can be an array or an object (the only illegal type is string because that can cause weird number conversion issues).

ulrik

@Christoph-Hart @aaronventure Would this be a better implementation?
I store the min, max and range properties at init (so no more looking at properties at runtime)

HiseSnippet 1600.3ocsWstSabDEdWfsJ1sQpQp+p+Z59ip0EXw1gP.Sog6ozvEKbZZpPnngcGudJqm0Z2wFPI7rzGi9Z02f1yYlc8NDLHDp0Bg8LmKy2bNemYNS6zj.VVVRpkck2d0.lk8W4z4Jgr2V8nbg0daaY+0NGSEQLRmXdHKkzzZyqFPyxXgV11S+ZTK6JyXo972uZSZLUDvJmxx5cI7.1979bY4rsW+M733cogr2x6an8hquWPhXqj3jg.hl1ot0.Zv4zH1gTTsobrr+hcB4xjzNRpjkYYOylIgW0oWxEBs9uimwOKlgCZX0Abjd5cShCQDiyZsUOdbX6hcdlE3k1kwgo0wguw4.dHe77lwCT.ozBy3g8T2DdSeC30vDd0Mf2DfjsAjlQCom4zIHkOPVJAwyW5rmPxR6RgvtITz5ZM0e8DmsR.MDR+9zyY6lBCFag2R0qOGA9WsUqVcgEpb7FG95cHc1eus24XR6MNbm8qL+C6SUHwkIIJtR6iIqQ5NTDH4IBunZU+X0JinoDJLsrGOyOhI2OIfFuYxPQXlGt5Upn0YjgNuiFOj4gB0x5yEuGDSOo4oKLxOUQK+Ah2H+QnhmT+Tx7jQ9fVnIJCnWdeFzvzfpUh7yXRM4yq.BdtmEomxsF50H+t.y8XD2rviYARvmwLuSfnH7GtP3+e9oKrH7i5Zna5W8WY9Wvk81HdPOpwJwkr9Eq0b5fPHUR86kLBJ7dEogecRKRc+kuWjfAIEXvM+73nYadaLgQGoQn1yUxtT5VD3xF1sK+RTte1vyxjobQjmzmCq0kG00ysUK2Znak9wLQjrWgcp35FYuE7EX7.ZZFC3ZFYnZjYKb9rD24HtvW2RsFFpUhVsOKCK8SFlw1FJsfPi451BPUJaPLRuQfNq1QvZ4d67wM2+2LSGlRuXiXdjfEhN1C0.hjfiBfpoTV3lIRYRezqWC7GiBfC1ZSyJ.1HP+wUA2EC+yS3qQT1oGspo7xcdgN.TiTNg2knWN+fXdv4rPxm9jgN0pVAPQQpBLunpXgwP523gxdd0f5DsYXhRUinqQu8J.9T4TkDiZw0PuONghJXrEB5oV10Tv3GIFl8JhKrXtPZzEXvt3phKaEVbF6tbxATYOe5YYFK+7vOpAd9VhZjKZBqy0Uy2e2dIVSqsZaXtG09WEC8fYmSGplybmidt.7Fm7LISK7qxMzKyOVTui0HITQVtdLeAH5vESRubNXNIDyuJhX9k1qQJtBHBY98GjHfAdtF5fr3pFiwZj1nqgSXjbAyK+jcPsOSqCP13Vz33yf6p8J3+n6pVkKhAaGWIPRDFFiXJMI1Kn.PyoqiUUJpz.bsWRW8jjuCRAIm8GvAct4r3X7JD7RAX+M1G5hYUtZ0RcnWNAcfrtRmx4yJpH+nxCsHpboRyVnSfeqxW5QyqkpfGLyIpgv7md83bjNuifE1rYIwL+AoX5RYS4ghqduJn4P.4DyvOfDo93MUrcbZYRAdUJxH0bXhjcjvSE9qdcUxmKpa2IJK2awrzIJF6vK89LzSLr+YrTyjOpHz1yM6kx4t6kxrUu.c.xPwDwdBt7nALwc0.nUdTE66JGUfpRUWWOsnqKpfEawCwYLhkVJTaY+FmeoyQGVvap6WeLuoY855gETmwSLl4r7KTSrxRvWmdsk0ut21vgOEnA.F.1ArTIGiC1ayFAsTq6Irhy1rrykICT5lyGft3eXX+xxVu+80uxbvE3s.kSvWuGiG0ynE9eZ8x1UvlPWtwJMZ1b4UV1BnbIWTP7.79sNagWTjMG4mU2q88jsgahhfNJrJuyEe3whMWYwUV5kMW4EJAnWU8i1pU+LKHVNdwW+OWOiNBZYncJC35vVeJqa2tLzndR3vXp7lcuiOYIW.PCuQKyXawhLt7Jymz7eVK8OTH9Lm1bYPuIiwol.FAdx+GXL+gPO0YmtcgScKA3LN699+ed0ik9xlH3lwTNjucNbX+N.6HfAqt.3v3w.PxFMUMtNNFi.cXhP0f+A9jKrAN1NWXiBg.SJHM4CA5xb7oVOQMCfIg5UlUbN.GSZTTZ63.kkV8gW88gf.b6OObFxjso4ivlm+HrYwGgMu3QXyROBad4ivlkuWavGbuwPnUac4.LQ6cTGPZauifBLKEKz5eAieFzFA

aaronventure

@Christoph-Hart Alright, so what does it look like?

I feel like I'm miscommunicating this -- I can't figure out how to write these two lines of code.

What's the syntax for storing an array in a panel with .setValue(), and for getting it?

aaronventure

@ulrik Sure? I mean, the other one also only gets executed once perhaps, at the very first run while it's undefined.

This is what I was referring to:
https://youtu.be/fV9hOZrNO_g?t=1360

d.healey

@aaronventure said in Syntax for Setting and Getting Array Data From a Panel:

I have a panel that I want to use to create a horizontal range slider.

Why not use the built in range slider?

ulrik

@d-healey said in Syntax for Setting and Getting Array Data From a Panel:

@aaronventure said in Syntax for Setting and Getting Array Data From a Panel:

I have a panel that I want to use to create a horizontal range slider.

Why not use the built in range slider?

Is it not broken?

Christoph Hart

What's the syntax for storing an array in a panel with .setValue(), and for getting it?

setValue([0.5, 0.8]);
min = getValue()[0]; // case that panel is not initialised needs to be handled too though...

d.healey

@ulrik said in Syntax for Setting and Getting Array Data From a Panel:

Is it not broken?

I never used it. But I just tried it and seems to be broken. I suggest we nag Christoph to fix it instead of hacking a panel (unless you need the panel method for some particular reason). :)

aaronventure

@d-healey The default controls don't let me define custom modifier behavior (ctrl, alt, shift), don't have the useful .data functionality and don't have the mouse callback.

d.healey

@aaronventure said in Syntax for Setting and Getting Array Data From a Panel:

define custom modifier behavior (ctrl, alt, shift), don't have the useful .data functionality and don't have the mouse callback.

Broadcaster would solve those issues I think (well not the data one).

aaronventure

@d-healey True, but I still can't disable built-in modifier behavior.

aaronventure

@Christoph-Hart Thanks.

Is there a way to set only one element, or do I have to be defining all elements every time I'm setting the value?

Is this done by setting these value somewhere else, like a local var which is an array

local tempVal = [];

and then passing the array itself every time I setValue

setValue(tempVal);

?

Christoph Hart

local v = this.getValue();
v[1] = "New Value";

// technically this is not required because the value is already == v
this.setValue(v); 

// this will fire the notification that the value has changed.
this.changed();

Syntax for Setting and Getting Array Data From a Panel

19

1.8k

10.4k

90.8k