let connectBtn;

let toggleBtn;

let bttnOn = false;

let slider;

​

function setup() {

  createCanvas(400, 400);

  background(220);

​

  // setup ports

  port = createSerial();

  let usedPorts = usedSerialPorts();

  if (usedPorts.length > 0) {

    port.open(usedPorts[0], 9600);

  }

  connectBtn = createButton('_Connect_');

  connectBtn.position(80, 200);

  connectBtn.mousePressed(connectBtnClick);

​

  // setup toggle button

  toggleBtn1 = createButton('Turn to 0');

  toggleBtn1.position(240, 200);

  toggleBtn1.mousePressed(toggleBtnClickL);

  // setup toggle button

  toggleBtn2 = createButton('Turn to 180');

  toggleBtn2.position(240, 250);

  toggleBtn2.mousePressed(toggleBtnClickR);

  //create slider

  slider = createSlider(1,3);

  slider.position(10, 10);

  slider.size(80);

​

}

​

function draw() {

  // this makes received text scroll up

  copy(0, 0, width, height, 0, -1, width, height);

​

  // reads in complete lines and prints them at the

  // bottom of the canvas

  let str = port.readUntil("\n");

  if (str.length > 0) {

    text(str, 10, height-20);

  }  

  // changes button label based on connection status

  if (!port.opened()) {

    connectBtn.html('_Connect_');

  } else {

    connectBtn.html('Disconnect');

  }

}

​

function connectBtnClick() {

  if (!port.opened()) {

    port.open('Arduino', 9600);

  } else {

    port.close();

  }

}

​

function slideLR(){

  port.write(slider.value());

}

​

function toggleBtnClickL() {

  //bttnOn = !bttnOn; 

  //if(bttnOn){

    port.write("1");

    toggleBtn.html('Servo is 0 degree');

  //} 

}

​

function toggleBtnClickR() {

  //bttnOn = !bttnOn; 

  //if(bttnOn){

    port.write("3");

    toggleBtn.html('Servo is 180 degree');

  //} 

}