// "https://editor.p5js.org/olivierbrcknr/sketches/kqwP-zCyf"

// bei "index.html" link zu "socket.io.min.js" eingebaut

​

let blokdotsIsConnected = false;

let socket = null;

​

// dieser Wert soll via Poti "live" verändert werden

let r = 250;

​

function setup() {

  createCanvas(600, 600);

​

  // ist bei mir identisch

  socket = io("http://localhost:8777/blokdots");

​

  // das schaltet bei mir nicht um

  // durch was wird das "connect" veranlasst?

​

  // Olivier: "connect" ist ein standard event von

  // socket.io, wenn sich der client mit dem server

  // verbindet:

  // https://socket.io/docs/v4/client-api/#event-connect

​

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

    blokdotsIsConnected = true;

  });

  socket.on("disconnect", function () {

    blokdotsIsConnected = false;

  });

​

  // https://blokdots.com/documentation/components/integrations/socketio/#usage-in-blokdots

  // Hier lese ich mein eigenes Event aus:

  socket.on("blokdots", function (data) {

    // Dann fange ich hier die Nachricht ab und nehme

    // den "msg" Wert aus blokdots

    if (data.msg === "A0-Potentiometer") {

      // und speichere den wert in einer globalen variable

      r = data.val;

    }

  });

}

​

function draw() {

  background(220);

  noFill();

  stroke(255, 0, 0);

  strokeWeight(4);

  ellipse(width / 2, height / 2, r, r);

​

  // Meldung, ob Blokdots verbunden ist

  push();

  noStroke();

  blokdotsIsConnected ? fill("#1abc9c") : fill("red");

  text(

    `blokdots is ${blokdotsIsConnected ? "connected" : "disconnected"}`,

    10,

    24

  );

  pop();

}

​