let slider;

let img;

​

//preload images

function preload(){

  img = loadImage('onlight.png');

  img2 = loadImage('offlight.png');

}

​

function setup() {

  createCanvas(400, 400);

  //create slider

  slider = createSlider(0, 255, 100);

  slider.position(width/2-50,height/2+25);

  slider.style('width', '80px');

}

​

function draw() {

  background(255);

  image(img,215,130,150,180); 

  image(img2,50,160,100,160);

  let val = slider.value();

  brightness = val;

  // instructions

  textAlign(CENTER,CENTER);

  textSize(20);

  text("Use the slider to control brightness",width/2,100);

  //connects serial port

  if (!serialActive) {

    textSize(10);

    text("Press Space Bar to select Serial Port", 100, 30);

  } else {

    textSize(10);

    text("Connected",100,30);

  }

}

​

function keyPressed() {

  if (key == " ") {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

}

​

​

function readSerial(data) {

  ////////////////////////////////////

  //READ FROM ARDUINO HERE

  ////////////////////////////////////

  if (data != null) {

    // if there is a message from Arduino, continue

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    let sendToArduino = brightness + "\n";

    writeSerial(sendToArduino);

  }

}

​

​