dat.GUI don't update variables value

kuprin5

Hi,

I try to add dat.GUI to my sketch. GUI load variables correct, but not change they values.

var bgColor = [102, 0, 204];
var eStroke = true;

function setup() {
  createCanvas(600, 600);
  createGUI();
}

function draw() {
  background(bgColor);
  fill(204);
  if (eStroke) {
    strokeWeight(2);
  } else {
    noStroke();
  }
  ellipse(width/2, height/2, 300);
}

function createGUI() {
  gui = new dat.GUI();
  var keys = {
            "bgColor" : bgColor,
            "eStroke" : eStroke,
        }
    gui.addColor(keys, 'bgColor');
    gui.add(keys, 'eStroke');
}

How I can fix it?

GoToLoop

The bgColor[] array property from your keys{} object declared locally inside createGUI() function isn't the same as the global array variable bgColor[] declared at the top of your sketch! [-X

In other words, your dat.GUI instance is changing the keys{}'s properties, not your global variables! =;

How about declaring your keys{} object globally, so both p5.js & dat.GUI libs can have access to it? *-:)

Go to the link below and watch the tweaks I've made to your sketch: B-)
http://Bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62

/**
 * DatGuiTest (v2.1.1)
 * Kuprin5 (2017-Feb-23)
 * mod GoToLoop
 *
 * forum.Processing.org/two/discussion/21777/
 * dat-gui-don-t-update-variables-value#Item_1
 *
 * Bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62
 */

"use strict";

const props = {
  bgColor: [102, 0, 204],
  fgColor: 204,
  useStroke: true
};

function setup() {
  createCanvas(600, 600);
  strokeWeight(2.5).ellipseMode(CENTER);
  colorMode(RGB).noLoop();
  createGUI();
}

function draw() {
  background(props.bgColor).fill(props.fgColor);
  props.useStroke && stroke(0) || noStroke();
  ellipse(width>>1, height>>1, height>>1);
}

function mousePressed() { // Conflicting listener fix hack!
  return false;
}

function createGUI() {
  const gui = new dat.GUI;
  gui.addColor(props, 'bgColor').onFinishChange(redraw);
  gui.add(props, 'fgColor', 0, 0xff, 1).onChange(redraw);
  gui.add(props, 'useStroke').onChange(redraw);
}

kuprin5

GoToLoop, thanks! It's really work!

kuprin5

One more question. When I press mouse and move it across the canvas appears a text cursor, although the mouse is in the p5 canvas. How can this be corrected?

GoToLoop

That's the same regular select text cursor I get when I press mouse's left button at any non-clickable place. I doubt we can change that, unless we turn the canvas to be clickable. :-??

kuprin5

Hi, GoToLoop! I make clickable sketch. But the problem remained. However, if I press H to hide GUI, text cursor no longer appears. I think that here the problem is the interaction of DOM elements. Are there any ideas on this?

var settings = {
  penSize: 2
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  var gui = new dat.GUI();
  gui.add(settings, 'penSize', 1, 10);
  background(229);
}

function mouseDragged() {
  strokeWeight(settings.penSize);
  stroke(0);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

GoToLoop

Sorry but I've never used dat.GUI before. I didn't even know about that hide H key. =P~
But if it's detecting key presses outside its GUI, it means it's listening globally.
And guess what, p5.js also attach listeners globally! 3:-O
Maybe they're conflicting w/ each other? Dunno. :-/

kuprin5

I think I found a solution to a similar error with another library. How would this be applied to p5js?

// "Select" clashes with MouseDown Event (jsfiddle)

var mycanvas = document.getElementById('mycanvas');
renderer = new THREE.WebGLRenderer({
    canvas: mycanvas
});
mycanvas.addEventListener('mousedown', documentMouseDown, false);

function documentMouseDown(event) {

  event.preventDefault();
  // console.log ('in mouseDown');
  mouseDown = true;
}

GoToLoop

I'm very noob w/ DOM. So I can only blind-guess. X_X
If onmousedown() is related to that glitch, just maybe add this to the p5.js sketch. No guarantees at all:

function mousePressed() {
  return false;
}

kuprin5

GoToLoop, it's really work! Big thanks!

GoToLoop

Worked?! O_o
Wow! That was just a shot in the dark! :))

GoToLoop

NEWS! Updated to version 2.1!

1. Added return false; hack for mousePressed() to fix conflict w/ dat.GUI.
2. Renamed keys{} to props{} to avoid conflicting w/ console API's keys().
3. Commented out blendMode(REPLACE); b/c it's buggy under Firefox-based browsers! :-&

http://Bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62