Make exported plots interactive

nur557 · nur557 · commit 1157ba373427 · 2025-06-30T18:10:05.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/modules/ipc.js b/src/modules/ipc.js
@@ -1,5 +1,6 @@
 import { ipcMain, dialog } from "electron";
 import fs from "fs";
+import path from "path";
 import { parseFlightLog } from "./logparser.js"
 import { exportFlightLogToCSVs } from "./flightlog.js"
 import { connect, disconnect, command, cliCommand, getList } from "./serial.js";
@@ -74,17 +75,16 @@ export function subscribeListeners() {
     event.sender.send("EXPORT_FLIGHTLOG_CSVS");
   });
 
-  ipcMain.on("EXPORT_FLIGHTLOG_HTML", (event, flightLogHtmlStr) => {
+  ipcMain.on("EXPORT_FLIGHTLOG_HTML", (event, flightLog, useImperialUnits) => {    
+    const flightlogJson = JSON.stringify(flightLog);
+    const useImperialUnitsString = String(true);
 
-    flightLogHtmlStr = `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <script src="https://cdn.plot.ly/plotly-2.18.2.min.js"></script>
-        </head>
-      <body>
-    ` + flightLogHtmlStr + "</body></html>"
-    fs.writeFile("plots.html", flightLogHtmlStr, 'utf8', function (err) {
+    let plotsHTML = fs.readFileSync(path.join(__dirname, '../templates/plots.html'), 'utf8');
+
+    plotsHTML = plotsHTML.replace("/* FLIGHTLOG_PLACEHOLDER */", flightlogJson);
+    plotsHTML = plotsHTML.replace("/* USE_IMPERIAL_UNITS_PLACEHOLDER */", useImperialUnitsString);
+
+    fs.writeFile("plots.html", plotsHTML, 'utf8', function (err) {
       if (err) {
         console.log("An error occurred while writing CSV Object to File.");
         return console.log(err);
diff --git a/src/modules/plots.js b/src/modules/plots.js
@@ -1,19 +1,6 @@
 import Plotly from 'plotly.js-dist';
 import { getDisplayValue } from "@/utils/unitConversions.js";
 
-const COLOR = "rgb(100, 100, 100)"
-const EVENT_MAP = {
-    0: { name: "ev_moving", color: COLOR },
-    1: { name: "ev_ready", color: COLOR },
-    2: { name: "ev_liftoff", color: COLOR },
-    3: { name: "ev_burnout", color: COLOR },
-    4: { name: "ev_apogee", color: COLOR },
-    5: { name: "ev_main_deployment", color: COLOR },
-    6: { name: "ev_touchdown", color: COLOR },
-    7: { name: "ev_custom1", color: COLOR },
-    8: { name: "ev_custom2", color: COLOR },
-}
-
 function adaptTraceNameForConverterFunction(name) {
     if (name === 'height') return 'altitude';
     if (name === 'Ax') return 'acceleration';
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -131,7 +131,7 @@ export default {
     },
     exportFlightLogHtml() {
       this.exportButtonLoading = true;
-      window.renderer.send("EXPORT_FLIGHTLOG_HTML", this.$refs.flightLogPlotContainer.innerHTML);
+      window.renderer.send("EXPORT_FLIGHTLOG_HTML", this.flightLog, true);
     },
     setResizeTimer() {
       clearTimeout(this.resizeTimer)
