2

I try to declare Variables via an array to use them in an dat.Gui controller. This is my attempt:

<script>
  window.Horizontale = 300;
  window.Vertikale = 300;
  window.A = new Array();

  for (var i=1; i<7; i++) {
    window.A[i] = false;
  }

  window.onload = function() {
    var gui = new dat.GUI();
    gui.add(window, 'Horizontale', 0, 600);
    gui.add(window, 'Vertikale', 0, 600);

    for (var i=1; i<7; i++) {
      gui.add(window, A[i]);
    }
    gui.remember(window);
  };
</script>

The variables in the array dont appear in the GUI. I am really new to Javascript, so maybe it is just a problem of the declaration?

1Blerk
  • 162
  • 1
  • 3
  • 13
  • How do you decided that it doesn't appear in the controller? Can you show the method `gui.add` declaration if you are not able to access the array inside this method. Also it might be that something fails before the 'for' loop so the code in the loop is not being executed. I would suggest to check in firebug or chrome js console if it doesn't show you any errors – jonasnas Feb 14 '13 at 16:19
  • I am not sure if i get you right. When i run this script a dat.gui appears with the controllers "Horizontale" and "Vertikale", but not A[1], A[2], A[3]... The other controllers are working well. – 1Blerk Feb 14 '13 at 16:26
  • Aptana and Firebug both dont show any errors. – 1Blerk Feb 14 '13 at 16:41
  • add `alert(A[i])` before `gui.add(window, A[i]);` and if these alerts show you false on execution it means smth is wrong with your `gui.add(window, A[i]);` – jonasnas Feb 14 '13 at 16:47
  • Ok. if i add `alert(A[1]);` before the `gui.add(window, A[i]);` the alert appears, if i put it behind it doesnt. – 1Blerk Feb 14 '13 at 16:59
  • I think it might be a problem, that `'Horizontale'`has this quote signs and `A[i]` doesnt have. But i already tried `gui.add(window, A[i]);`, `gui.add(window, 'A'[i]);`, `gui.add(window, 'A'+[i]);` and `gui.add(window, 'A[i]');` – 1Blerk Feb 14 '13 at 17:07
  • So if you put alert after the `gui.add(window, A[i]);` and it is not being executed it means something is wrong with the function `gui.add(window, 'A[i]')` You need to look inside it and find out why it fails – jonasnas Feb 14 '13 at 17:15

1 Answers1

2

In this line:

gui.add(window, A[i]);

…add() looks on the object window for a property with the name specified by A[i], which in this case evaluates to false.

However, there's no property named false on window. So you need to specify properties on an object somewhere with the names you want, and then you can assign each of them the values you want to pass as the additional argument to add() – In this case, false would give you a checkbox in the unchecked state.

So assuming that you wanted 6 unchecked checkboxes named 1 - 6, there are a few things you could do, but they all involve adding 6 named properties to an object somewhere. Here's one way to do it using a second object to hold your controller names, which would replace your second for loop:

for (var i=1; i<7; i++) {
  controller_names[i] = A[i];
  gui.add(controller_names, i, A[i]);
}

However, this may not play nicely with the save settings functionality – dat.gui seems to only be able to save settings for controls defined on the gui object itself, as explored here: Save dat.gui presets for dynamically added controls?

…in which case, you might try something more like this:

<script>
  window.onload = function() {

    var gui = new dat.GUI();
    gui.Horizontale = 300;
    gui.Vertikale = 300;
    gui.A = new Array();

    for (var i=1; i<7; i++) {
      gui.A[i] = false;
    }

    gui.add(gui, 'Horizontale', 0, 600);
    gui.add(gui, 'Vertikale', 0, 600);

    for (var i=1; i<7; i++) {
      gui.add(gui.A, i, gui.A[i]);
    }
    gui.remember(gui);
  };
</script>
Community
  • 1
  • 1
meetar
  • 7,443
  • 8
  • 42
  • 73