* @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

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

​

// 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

​

// now try a fan selector instead a slider

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

​

let fsel;

let sSlider;

​

let speed = [10, 20, 30, 40, 50, 60, 70, 80, 90]; // speed settings

let angles = [0, 0, 0, 0, 0, 0, 0, 0, 0];

let s = speed[0],  sold, f = 1,  fold;

let many = 9;

​

let angle = 0;

let maxRpm = 100;

let lastMillis = 0;

​

function setup() {

  createCanvas(900, 200);

  makeHMI();

  rectMode(CENTER);

  angleMode(DEGREES);

  lastMillis = millis();

​

}

​

function draw() {

  background(200, 200, 0);

  checkSlider();

  text('Fan ' + f, 70, 35);

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

  draw_fans() ;

}

​

function makeHMI() {

  // change memory

  sold = s;

  fold = f;

  // FAN selector

  sel = createSelect();

  sel.position(20, 20);

  for (let i = 1; i <= 9; i++) sel.option(i);

  sel.changed(checkSelector); // defime callback on change

  // SPEED slider

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

  sSlider.position(320, 20);

  textSize(15);

}

​

function checkSelector() {

  f = sel.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, speed[f-1], 5); // make new slider with new setpoint !! creates a speed event in following loop

    sSlider.position(320, 20);

  }

  fold = f;

}

​

function checkSlider() {  

  s = sSlider.value();

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

    print("Fan "+f+" changed s " + s);

    speed[f-1] = s;  // array vs fan number 

  }

  sold = s; // our memory

}

​

​

function updateAngle() {

  let newMillis = millis();

  let elapsedMillis = newMillis - lastMillis;

  //  let rpm = maxRpm * (Rotations / 255.0);

  for (let i = 0; i < many; i++) {

    let rpm = maxRpm * (speed[i] / 255.0);

    let rps = rpm / 60;

    let rev = rps * (elapsedMillis / 1000);

    angles[i] += 360 * rev;

  }

  lastMillis = newMillis;

}

​

function draw_fans() {

  updateAngle();

  translate(0, 100);

  for (let i = 0; i < many; i++) draw_fan(i+1,angles[i]);

}

​

function draw_fan(n,angle) {

  translate(90, 0);

  text("Fan "+n,-20,+80);

  push();

  rotate(angle);

  stroke(0);

  fill(0,0,200);

  rect(0, 0, 12, 70);

  circle(0, 0, 25);

  pop();

}

​