actualisation de la dat.gui avec les nouvelles valeurs

Je voudrais rafraîchir la dat.menu de l'interface graphique avec de nouvelles valeurs. J'ai chargée un modèle et d'affichage dans le répertoire, le nom des objets à l'intérieur d'un gui dossier.

Comment puis-je afficher le nouveau nom de l'objet lorsque j'ajoute un autre modèle ?

Ou il est possible de réinitialiser/effacer l'interface graphique.
actualisation de la dat.gui avec les nouvelles valeurs

InformationsquelleAutor user2244365 | 2013-04-23
  1. 18

    Fondamentalement, vous devez définir les contrôleurs à "écouter" pour la saisie lorsque vous les ajoutez, par exemple,

    gui = new dat.GUI();
var guiX = gui.add( parameters, 'x' ).min(0).max(200).listen();

    Pour la documentation, voir:

    http://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically

    Pour un exemple de cela dans Three.js voir:

    http://stemkoski.github.io/Three.js/GUI-Controller.html

    • Cela ne veut pas fonctionner, parce que la première fois, lorsque je charge un modèle que j'ai un dossier avec des noms comme : dossier.ajouter(nom1, true); dossier.ajouter (nom2, true); ... Et lorsque je charge un nouveau modèle de changement de nom. Donc je voudrais changer le nom du dossier ou de la réinitialisation de l'interface graphique.
    • J'ai finalement trouvé une solution avec le gui ajouter prototype de Andreas Köberle qui supprimer des dossiers
    • Il semble que l'écoute ne fonctionne plus. Je suis en train d'écouter un SelectController, et je reçois un message d'avertissement lorsque je charge ma page 'webkitRequestAnimationFrame' is vendor-specific. Please use the standard 'requestAnimationFrame' instead. dat.l'interface graphique.js:2841, je suis en utilisant google Chrome version 40.0.2214.115
    • Je ne sais pas si c'est officiellement pris en charge, mais le réglage du contrôleur de options semble fonctionner. Exemple : stackoverflow.com/a/41382243/1431042
    InformationsquelleAutor Lee Stemkoski
  2. 12

    Echt Einfach la solution n'a pas fonctionné pour moi, et Stemkoski est un peu large. J'ai finalement réussi avec le updateDisplay fonction:

    for (var i in gui.__controllers) {
    gui.__controllers[i].updateDisplay();
}

    http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Manually

    Notez que si vous avez les valeurs dans un dossier folder1 l'appel est comme ceci:

    for (var i = 0; i < this.gui.__folders.folder1.__controllers.length; i++) {
    this.gui.__folders.folder1.controllers[i].updateDisplay();
}

    Si vous ne voulez pas coder en dur folder1, ou que vous souhaitez simplement mettre à jour tous les dossiers, vous pouvez procéder comme suit:

    for (var i = 0; i < Object.keys(gui.__folders).length; i++) {
    var key = Object.keys(gui.__folders)[i];
    for (var j = 0; j < gui.__folders[key].__controllers.length; j++ )
    {
        gui.__folders[key].__controllers[j].updateDisplay();
    }
}
    InformationsquelleAutor jmmut
  3. 4

    Écrit une fonction pour mettre à jour dat.gui des listes déroulantes avec un nouvel ensemble de valeurs:

    function updateDatDropdown(target, list){   
    innerHTMLStr = "";
    if(list.constructor.name == 'Array'){
        for(var i=0; i<list.length; i++){
            var str = "<option value='" + list[i] + "'>" + list[i] + "</option>";
            innerHTMLStr += str;        
        }
    }

    if(list.constructor.name == 'Object'){
        for(var key in list){
            var str = "<option value='" + list[key] + "'>" + key + "</option>";
            innerHTMLStr += str;
        }
    }
    if (innerHTMLStr != "") target.domElement.children[0].innerHTML = innerHTMLStr;
}

    Utilisation: 

    myDropdown = gui.add(MyObject, 'myVariable', ['one','two','three']);
updateDatDropdown(myDropdown , ['A','B','C']);

//Also accepts named values

updateDatDropdown(myDropdown , {'A':1,'B':2,'C':3});
    InformationsquelleAutor Andru Phoenix
  4. 3

    Lee Stemkoski et Echt Einfach les solutions de l'utilisation de l' .méthode listen() sur un contrôleur sélectionné dans l'interface graphique.

    jmmut la solution de l'aide .updateDisplay(), boucle par TOUS les contrôleurs dans l'interface graphique

    Il me semble que ces deux types de solution sont CHERS, si vous souhaitez uniquement mettre à jour manuellement la valeur d'un seul contrôleur à un moment donné.

    Vous pouvez éviter cela en utilisant la méthode .updateDisplay() pour un SEUL contrôleur.

    Une façon pour ce faire est si vous savez à l'avance de l'index[i] du contrôleur unique. Mais c'est assez fastidieux à mettre en œuvre.

    Une meilleure façon est de faire référence au contrôleur spécifique par nom

    //AT INITIALISATION TIME
gui1 = new dat.GUI();
Gparameters = { x: 0, y: 0, z: 0}
var gui1_X = gui1.add( Gparameters, 'x' ).min(0).max(200); //note no need to use the method .listen()

//AT RUN TIME
Gparameters.x++;
gui1_X.updateDisplay()

    Remarque: je n'ai pas inclus le code supplémentaire nécessaire pour faire ce travail avec les contrôleurs à l'intérieur des dossiers. Vous pouvez obtenir ce à partir de l'autre des réponses.

    InformationsquelleAutor steveOw
  5. 2

    Il est facile, quand j'ai lu le code source de la dat.gui:

    https://github.com/dataarts/dat.gui/blob/master/src/dat/controllers/Controller.js#L36

    Comme vous le voyez, this.object = object, this est un contrôleur de vous ajouter, et object est ce que vous avez besoin de changer. Voici un exemple de code:

    var gui = new dat.GUI();

//init a controller
var controller = gui.add(object, 'property');

//update a controller
controller.object = newObject;
    InformationsquelleAutor 徐乾伟
  6. 1

    Ma réponse ne pas refléter votre question, mais sera utile pour les autres de programme pour changer les valeurs dans la scène 3d et de la nécessité de mettre à jour les contrôles d'interface utilisateur graphique.

    Lorsque vous déclarez: 

        var cubeX = folder1.add( parameters, 'x' ).min(-100).max(100).step(1).listen();

    vous avez déclaré que les paramètres à l'avance, par exemple

    parameters = {
    x: 0, y: 0, z: 0
}

    Maintenant, vous pouvez écouter de la ou des événements clés de l'événement approprié et modifier les valeurs dans l'interface graphique comme ça:

    window.addEventListener('keydown', function(event) {
    if(event.keyCode == 88) { //x pressed
        parameters.x++; //GUI value changed
        cube.scale.x = parameters.x; //3d object changed
    }
}
    InformationsquelleAutor Kai Noack
  7. 1

    écouter a un bug associés avec elle, si vous utilisez les menus déroulants. Voir ici: https://code.google.com/p/dat-gui/issues/detail?id=59

    Voici une petite fonction pour mettre à jour tous les contrôleurs en parcourant tous les dossiers. 

    function updateDisplay(gui) {
    for (var i in gui.__controllers) {
        gui.__controllers[i].updateDisplay();
    }
    for (var f in gui.__folders) {
        updateDisplay(gui.__folders[f]);
    }
}
    InformationsquelleAutor thc