Added curves legend at multi-curves spectrum (betaflight#786)

* added legend at multi-spectrum chart

* The buttons are placed in one row

* Changed buttons height

* resolved issue of wrong legend drawing code placement

* Code style improvement

Co-authored-by: Mark Haslinghuis <[email protected]>

---------

Co-authored-by: Mark Haslinghuis <[email protected]>

Author: demvlad

index.html

@@ -474,10 +474,10 @@ <h4>Workspace</h4>
                         </div>
 
                         <div id="spectrumComparison" data-toggle="tooltip" title="Spectrum comparison">
-                          <button id="btn-spectrum-export" type="button" class="spectrum-comparasion-button" title="Export spectrum to CSV">Export</button>
-                          <button type="button" class="spectrum-comparasion-button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Import</button>
+                          <button id="btn-spectrum-export" type="button" title="Export spectrum to CSV">Export</button>
+                          <button type="button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Import</button>
                           <input type="file" id="btn-spectrum-import" accept=".csv" style="display:none" multiple/>
-                          <button type="button" id="btn-spectrum-clear" class="spectrum-comparasion-button" title="Clear imported spectrums">Clear</button>
+                          <button type="button" id="btn-spectrum-clear" title="Clear imported spectrums">Clear</button>
                         </div>
 
                         <div id="analyserResize" class="btn-nobg view-analyser-fullscreen" data-toggle="tooltip" title="Zoom Analyser Window">

src/css/main.css

@@ -647,6 +647,7 @@ html.has-analyser-fullscreen.has-analyser
   border: gray;
   border-style: solid;
   border-width: 1px;
+  display: flex;
 }
 
 .analyser #spectrumComparison select {
@@ -655,9 +656,11 @@ html.has-analyser-fullscreen.has-analyser
   color: black;
 }
 
-.spectrum-comparasion-button {
-  width: 100%;
+#spectrumComparison button {
+  width: auto;
+  height: auto;
   border-radius: 3px;
+  float: left;
 }
 
 .analyser input#analyserZoomX {

src/graph_spectrum.js

@@ -292,11 +292,12 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
 
     this.importSpectrumFromCSV = function(files) {
       const maxImportCount = 5;
+      let importsLeft = maxImportCount - GraphSpectrumPlot.getImportedSpectrumCount();
+
       for (const file of files) {
-        if (GraphSpectrumPlot.getImportedSpectrumCount() == maxImportCount) {
+        if (importsLeft-- == 0) {
           break;
         }
-
         const reader = new FileReader();
         reader.onload = function (e) {
           try {
@@ -316,7 +317,7 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
               };
             });
 
-            GraphSpectrumPlot.addImportedSpectrumData(spectrumData);
+            GraphSpectrumPlot.addImportedSpectrumData(spectrumData, file.name);
           } catch (e) {
             alert('Spectrum data import error: ' + e.message);
             return;
@@ -330,7 +331,7 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
   } catch (e) {
     console.log(`Failed to create analyser... error: ${e}`);
   }
-  
+
   this.clearImportedSpectrums = function() {
     GraphSpectrumPlot.clearImportedSpectrums();
   };

src/graph_spectrum_plot.js

@@ -94,8 +94,12 @@ GraphSpectrumPlot.getImportedSpectrumCount = function () {
   return this._importedSpectrumsData.length;
 };
 
-GraphSpectrumPlot.addImportedSpectrumData = function (curvesData) {
-  this._importedSpectrumsData.push(curvesData);
+GraphSpectrumPlot.addImportedSpectrumData = function (curvesData, name) {
+  const curve = {
+    points: curvesData,
+    name:   name,
+  };
+  this._importedSpectrumsData.push(curve);
   this._invalidateCache();
   this._invalidateDataCache();
   GraphSpectrumPlot.draw();
@@ -171,8 +175,6 @@ GraphSpectrumPlot._drawGraph = function (canvasCtx) {
 };
 
 GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
-  canvasCtx.lineWidth = 1;
-
   const HEIGHT = canvasCtx.canvas.height - MARGIN;
   const WIDTH = canvasCtx.canvas.width;
   const LEFT = canvasCtx.canvas.left;
@@ -181,6 +183,7 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
   const PLOTTED_BUFFER_LENGTH = this._fftData.fftLength / this._zoomX;
   const PLOTTED_BLACKBOX_RATE = this._fftData.blackBoxRate / this._zoomX;
 
+  canvasCtx.save();
   canvasCtx.translate(LEFT, TOP);
 
   this._drawGradientBackground(canvasCtx, WIDTH, HEIGHT);
@@ -225,12 +228,14 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
     "Chocolate",
   ];
 
-  for (let spectrumNum = 0;  spectrumNum < this._importedSpectrumsData.length; spectrumNum++) {
-    const curvesPonts = this._importedSpectrumsData[spectrumNum];
+  const spectrumCount =  this._importedSpectrumsData.length;
+  for (let spectrumNum = 0;  spectrumNum < spectrumCount; spectrumNum++) {
+    const curvesPonts = this._importedSpectrumsData[spectrumNum].points;
     const pointsCount = curvesPonts.length;
     const scaleX = 2 * WIDTH / PLOTTED_BLACKBOX_RATE * this._zoomX;
 
     canvasCtx.beginPath();
+    canvasCtx.lineWidth = 1;
     canvasCtx.strokeStyle = curvesColors[spectrumNum];
     canvasCtx.moveTo(0, HEIGHT);
     const filterPointsCount = 50;
@@ -259,6 +264,31 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
     canvasCtx.stroke();
   }
 
+//Legend draw
+  if (this._isFullScreen) {
+    const legendPosX = 0.84 * WIDTH,
+          legendPosY = 0.6 * HEIGHT,
+          rowHeight = 16,
+          padding = 4,
+          legendWidth = 0.13 * WIDTH + padding,
+          legendHeight = spectrumCount * rowHeight + 3 * padding;
+
+    const legendArea = new Path2D();
+    legendArea.rect(legendPosX, legendPosY, legendWidth, legendHeight);
+    canvasCtx.clip(legendArea);
+    canvasCtx.strokeStyle = "gray";
+    canvasCtx.strokeRect(legendPosX, legendPosY, legendWidth, legendHeight);
+    canvasCtx.font = `${this._drawingParams.fontSizeFrameLabelFullscreen}pt ${DEFAULT_FONT_FACE}`;
+    canvasCtx.textAlign = "left";
+    for (let row = 0; row < spectrumCount; row++) {
+      const curvesName = this._importedSpectrumsData[row].name.split('.')[0];
+      const Y = legendPosY + padding + rowHeight * (row + 1);
+      canvasCtx.strokeStyle = curvesColors[row];
+      canvasCtx.strokeText(curvesName, legendPosX + padding, Y);
+    }
+  }
+  canvasCtx.restore();
+
   this._drawAxisLabel(
     canvasCtx,
     this._fftData.fieldName,