I'm currently exploring ways to dynamically replace the fixed values 1, 2, and 3 within this GUI interface with a range of numbers based on the size of an array. I aim for the GUI to automatically adjust as the array is updated, without the need for manual intervention each time. https://i.sstatic.net/BSYYY.png
The challenge lies in the fact that these values are individual objects within the GUI, hence using a simple array of numbers proves cumbersome. This is the code snippet in question:
gui.add(data, 'system', {
"1": 0,
"2": 1,
"3": 2
})
Imagine working with a random array populated with arbitrary data like so:
var arr = [];
for (var i = 0; i<51;i++){
arr.push("element");}
This array contains 51 elements, and my goal is to display numbers "1", "2", "3", "4", "5", "6" (consistent with 10-element intervals) in the GUI without causing any disruptions. The intention behind dividing by 10 is to streamline the user experience by offering just 6 clickable options instead of all 51.
What steps should I take? Your insights would be greatly appreciated. For reference, here is the fiddle containing my code: FIDDLE
EDIT: To clarify further, my current setup involves hardcoding the values 1, 2, and 3 into the object as follows:
gui.add(data, 'system', {
"1": 0,
"2": 1,
"3": 2
}).name('system #').onChange(function(value) {
updateSets(value);
});
However, my objective is to automate this process whereby the numerical values correlate with the length of an array. With a 3-element array, it should input those values accordingly. Yet, if the array expands to 51 elements, I seek a method to limit the displayed numbers under the system object to just 6 - excluding the one leftover.