Erster Commit

js/pluslife.js

@@ -0,0 +1,115 @@
+var chart;
+var channel_colors = {
+    "0": {"color": "#a6cee3", "name": "Channel 1"},
+    "1": {"color": "#1f78b4", "name": "Channel 2"},
+    "2": {"color": "#b2df8a", "name": "Channel 3"},
+    "3": {"color": "#33a02c", "name": "Control Channel (4)"},
+    "4": {"color": "#fb9a99", "name": "Channel 5"},
+    "5": {"color": "#e31a1c", "name": "Channel 6"},
+    "6": {"color": "#fdbf6f", "name": "Channel 7"}
+};
+
+var channel_time_data = {
+    "0": new Map(),
+    "1": new Map(),
+    "2": new Map(),
+    "3": new Map(),
+    "4": new Map(),
+    "5": new Map(),
+    "6": new Map()
+};
+
+var labels = [];
+var datasets = {};
+for (const [channel, time_values] of Object.entries(channel_time_data)) {
+    datasets[channel] = {
+        label: channel_colors[channel].name,
+        borderColor: channel_colors[channel].color,
+        fill: false,
+        cubicInterpolationMode: 'monotone',
+        tension: 0.4,
+        channel: channel,
+        data: []
+    }
+    //TODO: gaps?
+    for (const [time, value] of time_values.entries()) {
+        if (! labels.includes(time)) labels.push(time);
+        datasets[channel].data.push(value);
+    }
+}
+
+var config = {
+  type: 'line',
+  data: {
+    labels: labels,
+    datasets: Object.values(datasets)
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    interaction: {
+      intersect: false,
+    },
+    plugins: {
+      legend: {
+        labels: {
+          boxWidth: 10
+        }
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        title: {
+          display: true,
+          text: "Test Time [min:sec]"
+        }
+      },
+      y: {
+        display: true,
+        //suggestedMin: -10,
+        //suggestedMax: 200
+      }
+    },
+    elements: {
+      point: {
+        radius: 2,
+      }
+    }
+  },
+};
+
+function update_chart(obj){
+    for (const [channel, data] of Object.entries(obj)) {
+        for (var [time, value] of Object.entries(data)) {
+            time = Number(time);  // js json keys are always strings...
+            channel_time_data[channel].set(time, value);
+
+            if (! chart.data.labels.includes(time)) {
+                chart.data.labels.push(time);
+                var progress_html = document.getElementById('status').getElementsByTagName('progress')[0];
+
+                time_remaining = 35*60 - time;
+                minutes_remaining = (time_remaining/60).toFixed(0);
+                seconds_remaining = (time_remaining%60);
+                human_readable_remaining = `${minutes_remaining}:${seconds_remaining} min`;
+
+                progress_html.innerHTML = human_readable_remaining;
+                progress_html.value = time;
+                document.getElementById('timeremaining').innerHTML = `${human_readable_remaining} remaining`;
+            }
+
+            chart.data.datasets.forEach((dataset) => {
+                if (dataset.channel == channel)
+                    dataset.data.push(value);
+            });
+        }
+    }
+    if (obj) chart.update();
+}
+
+(function() {
+    chart = new Chart(document.getElementById('data'), config);
+})();
+

js/plweb.js

@@ -0,0 +1,98 @@
+function get_human_readable_time(time){
+    minutes = (time > 60) ? Math.floor(time/60) : 0;
+    seconds = (time%60).toFixed(0);
+    return `${minutes}:${seconds}`;
+}
+
+function result_text(result) {
+	const result_enum = {1: 'Negative', 2: 'Positive', 3: 'Invalid'};
+	if (Number.isInteger(result)) return result_enum[Number(result)];
+	else return result.toLowerCase().replace(/\b\w/g, s => s.toUpperCase());
+}
+
+function result_color(result) {
+	const result_color = {1: 'success', 2: 'danger', 3: 'dark'};
+
+	if (Number.isInteger(result)) return result_color[Number(result)];
+	else {
+		switch (result.toLowerCase()) {
+			case "negative":
+				return result_color[1];
+				break;
+			case "positive":
+				return result_color[2];
+				break;
+			default:  // includes invalid
+				return result_color[3];
+				break;
+		}
+	}
+}
+ 
+function parse_and_show_pluslife_result(overall_result, channel_results){
+	$("#testresult").append("Pluslife says: " + result_text(overall_result));
+
+    channel_results_html = '';
+    for (const [channel, data] of Object.entries(channel_colors)) {
+        var result = result_text(channel_results[Number(channel)]);
+        var color = result_color(channel_results[Number(channel)]);
+        if (channel == "3"){
+            result = (result == "Positive") ? "Detected" : "Not Detected";
+            color = (result == "Detected") ? "primary" : color;
+        }
+
+        channel_results_html += `<span class="badge rounded-pill text-bg-${color} me-1">${channel}: ${result.slice(0,3)}</span>`;
+    }
+    $("#testresult_channels").append(channel_results_html);
+}
+
+function update_chart(timestamp, overall_result, result_channels, sampledata){
+    $("#testdate").append(new Date(timestamp).toUTCString());
+
+    if (overall_result || result_channels)
+        parse_and_show_pluslife_result(overall_result, result_channels);
+
+    document.getElementById('datacontainer').hidden = false;
+
+    chart.data.labels.length = 0;
+    chart.data.datasets.forEach((dataset) => {
+        dataset.data.length = 0;
+    });
+    var offset = -1;
+    var data_index = 0;
+    var filled_array = Array(1000).fill(-1);
+    sampledata.forEach((sample) => {
+        var human_readable_time = get_human_readable_time(Math.floor(sample.samplingTime/10));
+        if (! chart.data.labels.includes(human_readable_time)){
+            chart.data.labels.push(human_readable_time);
+            offset += 1;
+        }
+        data_index = offset*7 + sample.startingChannel;
+        filled_array[data_index] = sample.firstChannelResult/64;
+
+        chart.data.datasets.forEach((dataset) => {
+            if (dataset.channel == sample.startingChannel)
+                dataset.data.push(sample.firstChannelResult);
+        });
+    });
+    chart.update();
+}
+
+
+function show_error(text) {
+	console.log(text);
+	$("#error").append(text);
+	$("#error").show();
+}
+
+(function() {
+	if (data != null && typeof data == 'object') {
+	    update_chart(Date.parse(json.test.data.temperatureSamples[0].time),
+			json.test.result.detectionResult,
+			json.test.result.channelResults,
+			json.test.data.samples);
+	} else {
+		show_error("Konnte Testdaten nicht laden");
+	}
+})();
+