therminator/data/script.js

const canvasA = document.getElementById("chartA");
const canvasB = document.getElementById("chartB");
const chartUpdateInt = document.getElementById("chartUpd").value;
document.getElementById("stopRec").disabled = true;
let data;
let record = 0;
let filename;
let csvData;
let labelA, labelB;
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 = {
  animation: false,
  elements: {
    point: {
      pointStyle: false,
    },
  },
  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,
});

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 setUpdateInterval() {
  let updateInt = document.getElementById("upd").value;
  websocket.send("u" + updateInt);
  location.reload();
}

function getUpdateInterval() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("upd").value = this.responseText;
    }
  };
  xhttp.open("GET", "/int", true);
  xhttp.send();
}

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);
  data = JSON.parse(event.data);
  let timestamp = new Date();
  document.getElementById("time").innerHTML = timestamp.getTime();
  data["time"] = timestamp.getTime();
  if (record == 1) {
    csvData.push(createCSV(data));
  }
}

setInterval(function () {
  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"], data["tempA"]);
  addData(chartB, data["time"], data["tempB"]);
}, chartUpdateInt);

function escapeValue(value) {
  var result = "";
  var escape = false;

  for (var i = 0; i < value.length; ++i) {
    var entry = value[i];

    result += entry;

    switch (entry) {
      case '"':
        result += '"';
      case ",":
        escape = true;
    }
  }

  if (escape) return '"' + result + '"';

  return result;
}

function createCSV(object) {
  var body = "";

  for (var column in object) {
    if (object.hasOwnProperty(column)) {
      if (body) body += ",";

      var value = object[column];

      if (value == null) continue;

      body += escapeValue(value.toString());
    }
  }

  return body;
}

function startRecording() {
  date = new Date();
  let filedate = date.toISOString().slice(0, -5).replaceAll(":", "");
  filename = "therminator-" + filedate + ".csv";
  labelA = document.getElementById("labelA").value;
  labelB = document.getElementById("labelB").value;
  csvData = ["time,\"" + labelA + "\",\"" + labelB + "\""]
  record = 1;
  document.getElementById("startRec").disabled = true;
  document.getElementById("stopRec").disabled = false;
}
function stopRecording() {
  record = 0;
  let csvFile = csvData.join("\n");
  const blob = new Blob([csvFile], { type: "text/csv;charset=utf-8," });
  const objUrl = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.setAttribute("href", objUrl);
  link.setAttribute("download", filename);
  document.querySelector("body").append(link);
  link.click();
  csvData.length = 1;
  document.getElementById("startRec").disabled = false;
  document.getElementById("stopRec").disabled = true;
}