* @name Slider

 * @description You will need to include the

 * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>

 * for this example to work in your own project.<br><br>

 */

// https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114/4

// test a 2 slider multiplex idea 

// 1 slider selects the fan to operate

// 2 slider selects the speed for that fan

​

// here the 9 slider version using the GUI lib

// https://editor.p5js.org/kll/sketches/kaYULGIFA

// where i not know how to do the multiplexing

​

let sSlider, fSlider;

let s = 10, sold, f = 1, fold;

​

function setup() {

  createCanvas(710, 400);

  makeSlider();

}

​

function draw() {

  background(200, 200, 0);

  checkSlider();

}

​

function makeSlider() {

  sold = s;

  fold = f;

  fSlider = createSlider(1, 9, f, 1);

  fSlider.position(20, 20);

  sSlider = createSlider(0, 250, s, 5);

  sSlider.position(320, 20);

}

​

function checkSlider() {

  textSize(15);

  s = sSlider.value();

  f = fSlider.value();

  if (f != fold) { // HMI Fan Slider changed

    print("changed f " + f);

    sSlider.remove(); // can not change setpoint??? ok delete it

    sSlider = createSlider(0, 250, 100, 5); // make new slider with new setpoint !! creates a speed event in following loop

    sSlider.position(320, 20);

  }

  if (s != sold) { // HMI Speed Slider changed

    print("changed s " + s);

    // here save to your speed array

  }

  sold = s; // our memory

  fold = f;

​

  text('Speed Fan '+f+" : " + s, sSlider.x + sSlider.width + 10, 35);

  text('Fan ' + f, fSlider.x + fSlider.width + 10, 35);

​

}