* Added button for simplified plotting.

Signed-off-by: Christian Berger <christian.berger@gu.se>
chalmers-revere · Aug 26, 2018 · 73212ee · 73212ee
1 parent 231976d
commit 73212ee
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 32 deletions.
diff --git a/webapp/js/main.js b/webapp/js/main.js
@@ -162,6 +162,7 @@ function processEnvelope(incomingData) {
             $tableMessagesDetails.empty(); // empty is more explicit
 
             var $row = $('<tr>').appendTo($tableMessagesDetails);
+            $('<th>').text("action(s)").appendTo($row);
             $('<th>').text("ID").appendTo($row);
             $('<th>').text("senderStamp").appendTo($row);
             $('<th>').text("message name").appendTo($row);
@@ -172,18 +173,21 @@ function processEnvelope(incomingData) {
                 var messageName = Object.keys(g_mapOfMessages[k].envelope)[5];
                 var senderStamp = g_mapOfMessages[k].envelope.senderStamp;
 
-                var $row = $('<tr>').appendTo($tableMessagesDetails);
+                const key = messageName + "." + senderStamp;
+                if (!(key in g_mapOfDataForGnuplot)) {
+                    g_mapOfDataForGnuplot[key] = "";
+                }
+
+                var $row = $('<tr id="' + key + '">').appendTo($tableMessagesDetails);
+                // Add action(s).
+                $('<td>').html('<button id="btn-' + key + '" type="button" class="fas fa-chart-bar" style="font-size:20px;color:#555;padding: 5px 30px;" title="Plot numerical signals." onclick=\'plotSignals("'+ key + '")\'></button>').appendTo($row);
+
                 $('<td>').text(g_mapOfMessages[k].envelope.dataType).appendTo($row);
                 $('<td>').text(senderStamp).appendTo($row);
                 $('<td>').text(messageName).appendTo($row);
                 $('<td>').text(g_mapOfMessages[k].sampleTimeStamp).appendTo($row);
-                var msg = g_mapOfMessages[k].envelope[Object.keys(g_mapOfMessages[k].envelope)[5]];
-
-                var key = messageName + "." + senderStamp;
-                if (!(key in g_mapOfDataForGnuplot)) {
-                    g_mapOfDataForGnuplot[key] = "";
-                }
 
+                var msg = g_mapOfMessages[k].envelope[Object.keys(g_mapOfMessages[k].envelope)[5]];
                 var tmp = "";
                 var gnuplotDataEntry = "";
                 for (var j in msg) {
@@ -205,9 +209,10 @@ function processEnvelope(incomingData) {
 
                     tmp += ": " + v + "<br>";
                 }
-                g_mapOfDataForGnuplot[key] += gnuplotDataEntry + '\n';
-
                 $('<td>').html(tmp).appendTo($row);
+
+                // Add values for plotting.
+                g_mapOfDataForGnuplot[key] += gnuplotDataEntry + '\n';
             }
 
             // Plot data.
@@ -622,6 +627,7 @@ function setupUI() {
         console.log("Error: websockets not supported by your browser.");
     }
 
+    ////////////////////////////////////////////////////////////////////////////
     if (IS_PLAYBACK_PAGE) {
         var slider = document.getElementById("playbackrange");
         slider.addEventListener("change", function() {
@@ -630,12 +636,12 @@ function setupUI() {
 
             var output = g_libcluon.encodeEnvelopeFromJSONWithoutTimeStamps(remotePlayerJSON, 9 /* message identifier */, 0  /* sender stamp */);
 
-//                strToAB = str =>
-//                  new Uint8Array(str.split('')
-//                    .map(c => c.charCodeAt(0))).buffer;
+//            strToAB = str =>
+//              new Uint8Array(str.split('')
+//                .map(c => c.charCodeAt(0))).buffer;
 
-//     Instead of sending the raw bytes, we encapsulate them into a JSON object.
-//                ws.send(strToAB(output), { binary: true });
+//            // Instead of sending the raw bytes, we encapsulate them into a JSON object.
+//            ws.send(strToAB(output), { binary: true });
 
             var commandJSON = "{\"remoteplayback\":" + "\"" + window.btoa(output) + "\"" + "}";
             g_ws.send(commandJSON);
@@ -883,6 +889,33 @@ function setupUI() {
 }
 
 ////////////////////////////////////////////////////////////////////////////////
+function plotSignals(val) {
+    var plottingCode = "# Example for plotting " + val + " data using gnuplot.\n";
+    plottingCode += `set terminal svg size 500,400 enhanced fname 'arial' fsize 5 solid
+set output 'out.svg'    # Output must always be named 'out.svg' to display.
+
+`;
+
+    plottingCode += "set title '" + val.replace(/_/g , "\\_") + "'\n";
+    plottingCode += `set xlabel 'Value 1'    # Define label for x axis.
+set ylabel 'Value 2'    # Define label for y axis.
+set key inside top left # Add legend box located at top/left.;
+
+`;
+    plottingCode += "# Plot first numerical signal of message '" + val + "'.\n";
+    plottingCode += "# Replace 'using 1' with 'using 1:2' or similar to access other fields.\n\n";
+    plottingCode += "# Actual call to plot data.\nplot \"" + val + "\" using 1 title 'Line 1' with lines\n";
+
+    document.getElementById("gnuplot-script").value = plottingCode;
+
+    if (!g_gnuplot.isRunning) {
+        gnuplot_runScript();
+    }
+
+    // Activate tab for plotting.
+    $('.nav-tabs a[href="#panel-plot"]').tab('show');
+}
+
 function setupGnuplot() {
     g_gnuplot = new Gnuplot("js/gnuplot.js");
 
@@ -899,9 +932,9 @@ function setupGnuplot() {
 var g_lastTAContent = "";
 function gnuplot_scriptChange() {
     var val = document.getElementById("gnuplot-script").value;
-    if (g_lastTAContent == val)
+    if (g_lastTAContent == val) {
         return;
-    localStorage["gnuplot.script"] = val;
+    }
     if (g_gnuplot.isRunning) {
         setTimeout(gnuplot_scriptChange, 1000);
     }
@@ -921,7 +954,7 @@ var gnuplot_runScript = function() {
     }
 
     g_gnuplot.run(editor.value, function(e) {
-        g_gnuplot.onOutput('Execution took ' + (Date.now() - start) / 1000 + 's.');
+        g_gnuplot.onOutput('Plotting took ' + (Date.now() - start) / 1000 + 's.');
         g_gnuplot.getFile('out.svg', function(e) {
             if (!e.content) {
                 g_gnuplot.onError("Output file out.svg not found!");

diff --git a/webapp/views/main.hbs b/webapp/views/main.hbs
@@ -30,6 +30,11 @@
     <link type="text/css" rel="stylesheet" href="css/maptalks.css"/>
 
     <style>
+    textarea {
+        font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+        font-size:12px;
+    }
+
     .bg {
         background-image: url("background.jpg");
         height: 100%; 
@@ -350,21 +355,8 @@
                             <div class="col-md-12">
                                 <div class="row">
                                     <div class="col-md-6">
-                                        <textarea id="gnuplot-script" rows="15" cols="90" onkeyup="gnuplot_scriptChange()">
-# Example for plotting latitude/longitude data using gnuplot.
-set terminal svg size 500,400 enhanced fname 'arial' fsize 5 solid
-# Output must always be named 'out.svg' to display.
-set output 'out.svg'
-
-# Add legend top/left.
-set key inside top left
-
-set title 'GPS Coordinates'
-set xlabel 'Longitude'
-set ylabel 'Latitude'
-
-# Plot fields 2 and 1 of message "opendlv_proxy_GeodeticWgs84Reading".
-plot  "opendlv_proxy_GeodeticWgs84Reading.0" using 2:1 title 'Path' with lines
+                                        <textarea id="gnuplot-script" rows="20" cols="90" onkeyup="gnuplot_scriptChange()">
+# Click on the 'plot' button in the tab 'Messages' to add example code for plotting here.
                                         </textarea> <br>
                                         <textarea id="gnuplot-output" rows="5" cols="90"></textarea>
                                     </div>