Update plusieurs entrées dat.GUI par WiizMamel - page 1

Update plusieurs entrées dat.GUI

WiizMamel

25 mai 2017 à 0:59:52

Bonsoir,

Je suis en train d'utiliser dat.GUI pour la première fois et je bloque sur un problème que je ne comprend pas;

Dans ma "boite" de controles j'ai 3 champs :

- time = minutes * heures;

- heures

- minutes

J'aimerais que lorsque je modifie une entrée les autres soient affectées également.

La où je coince c'est que lorsque je met à jour time celui ci réagit très bizarrement (je n'arrive pas à l'expliquer en fait) alors que les autres fonctionnent correctement.

Si quelqu'un pourrais jeter un œil et m'expliquer le problème par la même occasion -> https://jsfiddle.net/WiizMamel/agoycbs5/

Merci d'avance

-
Edité par WiizMamel 25 mai 2017 à 1:04:33

Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie... je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi...

ninjavascript

25 mai 2017 à 1:51:59

Hello.

Si la valeur d'une propriété dépend des 2 autres, ce ne sera pas au rôle de dat.GUI() de s'occuper de cela, mais d'un properties descriptor sur ton objet.

Voici un exemple d'implémentation :

(function() {
	'use strict';
  
  // -------------------------
  // Objet 'date' personnalisé
  // -------------------------
  
  var date = (function() {
    var _time = 0;
    var _hours = 0;
    var _minutes = 0;
    
    var obj = {};
    Object.defineProperties(obj, {
      'hours' : {
        configurable : true,
        enumerable : true,
        set : function(newVal) {
                obj.time = newVal * _minutes;
                _hours = newVal;
              },
        get : function() { return _hours; }
      },
      'minutes' : {
        configurable : true,
        enumerable : true,
        set : function(newVal) {
                obj.time = newVal * _hours;
                _minutes = newVal;
              },
        get : function() { return _minutes; }
      },
      'time' : {
        configurable : true,
        enumerable : true,
        set : function(newVal) {
                _time = newVal;
              },
        get : function() { return _time; }
      }
    });
    
    return obj;
  })();
  
  // Valeurs par défaut de 'hours' et 'minutes' sur notre objet date
  // (Grâce à notre descripteur ci-dessus, la valeur interne de date.time se mettra à jour automatiquement)
  date.hours = 3;
  date.minutes = 2;
  // date.time vaut maintenant 6 (3*2)
  
  // ----------------
  // Partie "dat.GUI"
  // ----------------
  
  var gui = new dat.GUI();
  
  gui.add(date, 'hours', 0, 23).step(1).listen();
  gui.add(date, 'minutes', 0, 59).step(1).listen();
  gui.add(date, 'time', 0, 1357).step(1).listen();
  
})();

Testable ici : https://jsfiddle.net/jmpp77/wu3ts4kd/2/

-
Edité par ninjavascript 25 mai 2017 à 1:57:16

WiizMamel

25 mai 2017 à 9:10:21

Bonjour,

Merci beaucoup ça marche bien !

Et puis time c'est n'importe quoi ce que j'ai dis ce serai plutôt (heure * 60) + minute

Ah la la la fatigue

Merci beaucoup en tout cas

WiizMamel

26 mai 2017 à 12:29:10

Bon en fait je reviens vers toi ^^,

Je n'arrive pas a faire en sorte que :

- si je modifie heures ou minutes ça change time

- et si je modifie time, ça change heures et minutes

J'aimerais donc que les 3 valeurs soient "liées".

J'ai réussi à le faire avec dat.GUI() mais j'ai l'impression que defineProperties ne permet pas ça.

Lien -> jsfiddle.net

Aurais tu une explication à m'apporter ?

Merci d'avance

-
Edité par WiizMamel 26 mai 2017 à 12:36:53