therminator/data/script.js

const canvasA = document.getElementById("chartA");
const canvasB = document.getElementById("chartB");
const mobCanvasA = document.getElementById("chartA-mobile");
const mobCanvasB = document.getElementById("chartB-mobile");

const maxValsSelect = document.getElementById("maxVals");
let maxVals = maxValsSelect.options[maxValsSelect.selectedIndex].text;

const chartAdata = {
  data: {
    labels: [],
    datasets: [
      {
        label: "Channel A temperature",
        backgroundColor: "red",
        borderColor: "red",
        data: [],
      },
    ],
  },
};

const chartBdata = {
  data: {
    labels: [],
    datasets: [
      {
        label: "Channel B temperature",
        backgroundColor: "blue",
        borderColor: "blue",
        data: [],
      },
    ],
  },
};

const options = {
  responsive: true,
  plugins: {
    legend: {
      labels: {
        color: "rgba(250, 250, 250, 1)",
      },
    },
  },
  scales: {
    y: {
      title: {
        display: true,
        text: "Temperature (°C)",
        color: "rgb(250, 250, 250)",
      },
      grid: {
        color: "rgba(250, 250, 250, 0.5)",
      },
      ticks: {
        color: "rgba(250, 250, 250, 0.5)",
      },
      suggestedMin: 0,
      suggestedMax: 50,
    },
    x: {
      title: {
        display: true,
        text: "Time (s)",
        color: "rgb(250, 250, 250)",
      },
      grid: {
        color: "rgba(250, 250, 250, 0.5)",
      },
      ticks: {
        color: "rgba(250, 250, 250, 0.5)",
      },
    },
  },
};

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,
});

const mobChartA = new Chart(mobCanvasA, {
  type: "line",
  data: {
    labels: [],
    datasets: [
      {
        label: "Channel A temperature",
        backgroundColor: "red",
        borderColor: "red",
        data: [],
      },
    ],
  },
  options: options,
});

const mobChartB = new Chart(mobCanvasB, {
  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 changeUpdateInterval() {
  const updateSelect = document.getElementById("updateInterval");
  let updateInt = updateSelect.options[updateSelect.selectedIndex].text;
  websocket.send("u" + updateInt);
  location.reload();
}

// 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 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);
  }
  if (isNaN(data["tempA"])) {
    document.getElementById("error-tempA").innerHTML =
      "<h3>" + data["tempA"] + "</h3>";
  } else {
    document.getElementById("error-tempA").innerText = "";
  }
  if (isNaN(data["tempB"])) {
    document.getElementById("error-tempB").innerHTML =
      "<h3>" + data["tempB"] + "</h3>";
  } else {
    document.getElementById("error-tempB").innerText = "";
  }
  addData(chartA, data["time"] / 1000, data["tempA"]);
  addData(chartB, data["time"] / 1000, data["tempB"]);
  addData(mobChartA, data["time"] / 1000, data["tempA"]);
  addData(mobChartB, data["time"] / 1000, data["tempB"]);
}