let RED = 6; // HIP HOP

let YELLOW = 5; // HISTORIC EVENTS

let GREEN = 4; // CLASSIC ROCK/ OLDIES

let TEAL = 3; // CLASSICAL

let BLUE = 2; // KHALEEJI FM

​

//let currentStation = OFF;

// let station;

// let oldData; // ?

​

// ?

// redSounds.play(random);

​

function preload() {

  radioBackground = loadImage ("radio.png");

  radioFont = loadFont ("digital-7 (italic).ttf");

  soundFormats("mp3");

  // RED (HIP HOP)

  redSong1 = loadSound ("NWA.mp3");

  let redSounds = [redSong1,] // etc

  // GREEN (CLASSIC ROCK/ OLDIES)

  greenSong1 = loadSound ("QUEEN.mp3")

  let greenSounds = [greenSong1,] // etc

  // TEAL (CLASSICAL)

  tealSong1 = loadSound ("NUTCRACKER.mp3")

  let tealSounds = [tealSong1,] // etc

}

​

// variable to hold an instance of the p5.webserial library:

const serial = new p5.WebSerial();

// HTML button object:

let portButton;

let inData;                   // for incoming serial data

let outByte = 0;              // for outgoing data

function setup() {

  createCanvas(512, 384);          // make the canvas

  // check to see if serial is available:

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

  // if serial is available, add connect/disconnect listeners:

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

  // check for any ports that are available:

  serial.getPorts();

  // if there's no port chosen, choose one:

  serial.on("noport", makePortButton);

  // open whatever port is available:

  serial.on("portavailable", openPort);

  // handle serial errors:

  serial.on("requesterror", portError);

  // handle any incoming serial data:

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

}

function draw() {

  // oldData holds the *previous* value of inData

  // Check if user changed the station

  // Check if the inData has changed compared to oldData and

  // print the change

  // if (inData != oldData) {

  //   // The station changed

  //    console.log("changed from" + oldData + "to" + inData);

    // Pause the current song

    // Change current song to new station

    // Start playing the current song

  // }

   background(radioBackground);

   fill(255);

   text("sensor value: " + inData, 30, 50);

    if (inData == OFF) {

    noStroke();

    text ('off', 22, 110);

  } else if (inData == RED) {

    noStroke();

    fill (128,172,57); // text color

    textFont(radioFont, 45); // (font name, font size)

    text("HIP HOP", 194, 148); // (text, x, y)

    glow(color(128,172,57), 19); // calls glow function

    // redSongs();

    //redSong1.play();

  } else if (inData == YELLOW) {

    noStroke();

    fill (128,172,57); // text color

    textFont(radioFont, 45); // (font name, font size)

    text("HISTORY", 188, 148); // (text, x, y)

    glow(color(128,172,57), 19); // calls glow function

  } else if (inData == GREEN) {

    noStroke();

    fill (128,172,57); // text color

    textFont(radioFont, 45); // (font name, font size)

    text("CLASSIC ROCK", 142, 148); // (text, x, y)

    glow(color(128,172,57), 19); // calls glow function

    greenSongs(); // replace with randomized array?

  } else if (inData == TEAL) {

    noStroke();

    fill (128,172,57); // text color

    textFont(radioFont, 45); // (font name, font size)

    text("CLASSICAL", 168, 148); // (text, x, y)

    glow(color(128,172,57), 19); // calls glow function

    // tealSongs(); // replace with randomized array?

  } else if (inData == BLUE) {

    noStroke();

    fill (128,172,57); // text color

    textFont(radioFont, 45); // (font name, font size)

    text("KHALEEJI", 178, 148); // (text, x, y)

    glow(color(128,172,57), 19); // (color, intensity) calls glow function

  }

  // oldData = inData;

}

​

function glow(glowColor, blurriness) {

  drawingContext.shadowBlur = blurriness;

  drawingContext.shadowColor = glowColor;

}

​

function redSongs() {

  // redSong1.play();

}

​

function greenSongs() {

  greenSong1.play(); // replace with randomized array??

}

​

function tealSongs() {

  tealSong1.play(); // replace with randomized array??

}

​

​

​

// if there's no port selected, 

// make a port select button appear:

function makePortButton() {

  // create and position a port chooser button:

  portButton = createButton("choose port");

  portButton.position(10, 10);

  // give the port button a mousepressed handler:

  portButton.mousePressed(choosePort);

}

// make the port selector window appear:

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

// open the selected port, and make the port 

// button invisible:

function openPort() {

  // wait for the serial.open promise to return,

  // then call the initiateSerial function

  serial.open().then(initiateSerial);

  // once the port opens, let the user know:

  function initiateSerial() {

    console.log("port open");

  }

  // hide the port button once a port is chosen:

  if (portButton) portButton.hide();

}

// pop up an alert if there's a port error:

function portError(err) {

  alert("Serial port error: " + err);

}

// read any incoming data as a string

// (assumes a newline at the end of it):

function serialEvent() {

  inData = Number(serial.readLine());

  console.log(inData);

}

// try to connect if a new serial port 

// gets added (i.e. plugged in via USB):

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

// if a port is disconnected:

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

function closePort() {

  serial.close();

}