var client;

var brightnessValue = new uiFloat(100);

var deviceid = "432708";

var subject = "wled";

​

function setup() {

  noStroke();

  noScrolling();

  createCanvas(windowWidth, windowHeight);

  loadGoogleFont("Droid Sans");

  textFont("Droid Sans");

  frameRate(30);

  client = mqtt.connect("wss://public:public@public.cloud.shiftr.io", {

    clientId: "p5jsids",

  });

​

  client.on("connect", function () {

    console.log("connected!");

    client.subscribe(subject + "/" + deviceid + "/api");

  });

​

  client.on("message", function (topic, message) {

    print(topic + ": " + message);

  });

}

​

function draw() {

  background(200);

  uiUpdateSimple();

  uiContainerStart(30, 30, 150);

  if (uiButton("Turn on").clicked) {

    let jsonMsg = { seg: [{ id: 0, on: true }] };

    client.publish(subject + "/" + deviceid + "/api", JSON.stringify(jsonMsg));

  }

​

  if (uiButton("Turn off").clicked) {

    let jsonMsg = { seg: [{ id: 0, on: false }] };

    client.publish(subject + "/" + deviceid + "/api", JSON.stringify(jsonMsg));

  }

​

  if (uiScrollbar("Brightness", 0, 100, brightnessValue).clicked) {

    let jsonMsg = {

      seg: [{ id: 0, on: true, bri: Math.round(brightnessValue.get()) }],

    };

    client.publish(subject + "/" + deviceid + "/api", JSON.stringify(jsonMsg));

  }

​

  if (uiButton("Color").clicked) {

    let jsonMsg = { seg: [{ id: 0, bri: 50, on: true, col: [[0, 255, 200]] }] };

    client.publish(subject + "/" + deviceid + "/api", JSON.stringify(jsonMsg));

  }

​

  uiContainerEnd();

}

​

function keyReleased() {

  if (key == "f") {

    fullScreenToggle();

  }

}

​