let connectBtn;

let toggleBtn;

let bttnOn = false;

​

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

  toggleBtn = createButton('LED ON');

  toggleBtn.position(240, 200);

  toggleBtn.mousePressed(toggleBtnClick);

}

​

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 toggleBtnClick() {

  bttnOn = !bttnOn; 

  if(bttnOn){

    port.write("H");

    toggleBtn.html('LED OFF');

  } else {

    port.write("L");

    toggleBtn.html('LED ON');

  }

}