therminator/data/script.js

const maxVals = 15;
const canvasA = document.getElementById("chartA");
const canvasB = document.getElementById("chartB");
const options = {
  suggestedMin: 0,
  suggestedMax: 50,
}
const chartA = new Chart(canvasA, {
  type: "line",
  data: {
    labels: [],
    datasets: [
      {
        label: "Channel A temperature",
        backgroundColor: "red",
        borderColor: "red",
        data: [],
      },
    ],
  },
  options: options,
});
const chartB = new Chart(canvasB, {
  type: "line",
  data: {
    labels: [],
    datasets: [
      {
        label: "Channel B temperature",
        backgroundColor: "blue",
        borderColor: "blue",
        data: [],
      },
    ],
  },
  options: options,
});
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
// Init web socket when the page loads
window.addEventListener("load", onload);

function onload(event) {
  initWebSocket();
}

function getReadings() {
  websocket.send("getReadings");
}

function initWebSocket() {
  console.log("Trying to open a WebSocket connection...");
  websocket = new WebSocket(gateway);
  websocket.onopen = onOpen;
  websocket.onclose = onClose;
  websocket.onmessage = onMessage;
}

// When websocket is established, call the getReadings() function
function onOpen(event) {
  console.log("Connection opened");
  getReadings();
}

function onClose(event) {
  console.log("Connection closed");
  setTimeout(initWebSocket, 2000);
}

function addData(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  chart.update();
}

function removeFirstData(chart) {
  chart.data.labels.splice(0, 1);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.shift();
  });
}
// Function that receives the message from the ESP32 with the readings
function onMessage(event) {
  console.log(event.data);
  var data = JSON.parse(event.data);
  var keys = Object.keys(data);

  for (var i = 0; i < keys.length - 1; i++) {
    var key = keys[i];
    document.getElementById(key).innerHTML = data[key];
  }
  var today = new Date();
  var date =
    today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
  var time =
    today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date + " " + time;
  document.getElementById("time").innerHTML = dateTime;
  if (chartA.data.labels.length > maxVals) {
    removeFirstData(chartA);
  }
  if (chartB.data.labels.length > maxVals) {
    removeFirstData(chartB);
  }
  addData(chartA, dateTime, data["tempA"]);
  addData(chartB, dateTime, data["tempB"]);
}