Support for ANSI color code

server/.gitignore

@@ -0,0 +1,131 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+package-lock.json
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

server/package.json

@@ -18,7 +18,11 @@
   "pkg": {
     "scripts": "main.js",
     "assets": "www/**",
-    "targets": ["node14-windows-x64", "node14-linux-x64", "node14-linux-armv7" ],
+    "targets": [
+      "node14-windows-x64",
+      "node14-linux-x64",
+      "node14-linux-armv7"
+    ],
     "outputPath": "build"
   }
 }

server/www/classes/DataSerie.js

@@ -188,6 +188,7 @@ function getSerieInstanceFromTelemetry(telemetryName)
         throw new Error(`Trying to instanciate a DataSerie from a non existant telemetry name : ${telemetryName}`);
 
     serie.name = telemetryName;
+    serie.colored_name = ansi_coloring.ansi_to_html(telemetryName);
     serie.values = telemetry.values; // this way, serie.values always equals telemetry.values
     serie.unit = telemetry.unit;
     serie.type = telemetry.type;

server/www/classes/Telemetry.js

@@ -2,6 +2,7 @@ class Telemetry{
     constructor(_name, unit = undefined, type = "number"){
         this.type = type; // either "number", "text", "3D" or "xy"
         this.name = _name;
+        this.colored_name = ansi_coloring.ansi_to_html(_name);
         this.unit = ( unit != "" ) ? unit : undefined;
         this.usageCount = 0;
 
@@ -22,7 +23,7 @@ class Telemetry{
         // this is what will be displayed on the left pannel next to the telem name, 
         // it is either the current value of the telem (number), or its text or the type of the shape ...
         this.values_formatted = ""; 
-
+        this.colored_values_formatted ="";
 
         if (this.type == "3D") 
             this.setShapeTypeDelay();
@@ -94,6 +95,6 @@ class Telemetry{
         {   
             this.values_formatted =  "";
         }
-
+       this.colored_values_formatted = ansi_coloring.ansi_to_html(this.values_formatted);
     }
 }

server/www/classes/communication/serverMessageReading.js

@@ -103,10 +103,20 @@ function parseVariablesData(msg, now)
     }
 
     // Extract values array
-    let values = msg.substring(startIdx+1, endIdx).split(';')
     let xArray = [];
     let yArray = [];
     let zArray = [];
+
+    //If it contains the text flag (singleValue or |t), then ignore ; 
+    let values;
+    if(isTextFormatTelem)
+    {
+        values = msg.substring(startIdx+1, endIdx).split()
+
+    }else{
+        values = msg.substring(startIdx+1, endIdx).split(';')
+    }
+
     for(let value of values)
     {
         /*  All possibilities : 

server/www/classes/view/logs/LogConsole.js

@@ -61,7 +61,7 @@ class LogConsole
 
                 if (currLog == undefined) return;
 
-                el.innerHTML = currLog.text;
+                el.innerHTML = ansi_coloring.ansi_to_html(currLog.text);
 
 
                 el.addEventListener("mouseover", function () {

server/www/components/singleValue/singleValue.js

@@ -26,7 +26,6 @@ computed: {
         else
             return "Click to change precision";
     }
-
 },
 methods: {
     onContainerResized()
@@ -40,6 +39,9 @@ methods: {
         if (this.$refs.value_responsive_text2 != undefined)
             this.$refs.value_responsive_text2.triggerTextResize();
         this.$refs.unit_responsive_text.triggerTextResize();
+    },
+    ansi_to_html(txt){
+        return ansi_coloring.ansi_to_html(txt);
     }
 },
 mounted() {
@@ -61,17 +63,18 @@ updated() {
 unmounted(){
     resizeObserverForSingleValue.unobserve(singleValueContainer);
 },
+
 template:'\
         <div ref="single_value_container_ref" class="single-value-container">\
             <div id="single-value-telem-id" class="single-value-telem-div">\
-                <vue-responsive-text ref="telem_responsive_text" v-bind:isTelem="true" >{{telem}}</vue-responsive-text>\
+                <vue-responsive-text ref="telem_responsive_text" v-bind:isTelem="true" ><span v-html="ansi_to_html(telem)"></span></vue-responsive-text>\
             </div>\
             <div @click="widget.changeValuePrecision()" v-bind:title="getWidgetTitle" class="single-value-value-div">\
                 <div class="value1-solo" v-bind:class="{ \'value1-2-duo\': value2!=undefined }">\
-                    <vue-responsive-text ref="value_responsive_text1" v-bind:isValue="true">{{value1}}</vue-responsive-text>\
+                    <vue-responsive-text ref="value_responsive_text1" v-bind:isValue="true"><span v-html="ansi_to_html(value1)"></span></vue-responsive-text>\
                 </div>\
                 <div v-if="value2!=undefined" class="value1-2-duo">\
-                    <vue-responsive-text ref="value_responsive_text2" v-bind:isValue="true">{{value2}}</vue-responsive-text>\
+                    <vue-responsive-text ref="value_responsive_text2" v-bind:isValue="true"><span v-html="ansi_to_html(value2)"></span></vue-responsive-text>\
                 </div>\
             </div>\
             <div class="single-value-unit-div">\

server/www/components/vueResponsiveText/vue-responsive-text.js

@@ -65,7 +65,7 @@ Vue.component('vue-responsive-text', {
   template:'<span id="current-responsive-text-wrapper"\
             v-bind:class="{ \'responsive-text-wrapper-telem\' : isTelem, \'responsive-text-wrapper-unit\' : isUnit, \'responsive-text-wrapper-value\' : isValue }"\
             :style="{ ...scaleStyle }"> \
-                <slot></slot> \
+            <slot></slot> \
             </span>'
 });
 

server/www/index.html

@@ -180,10 +180,10 @@
                             <span v-if="telem.type =='text' " class="symbol-text-format-telem">T</span>
                             <span v-if="telem.type =='3D' " class="symbol-3d-telem">3D</span>
 
-                            <span class="serie-name">{{telem.name}}</span>
+                            <span class="serie-name" v-html="telem.colored_name"></span>
                             <span v-if="telem.unit != undefined" class="serie-unit">({{telem.unit}})</span>
                         </div>
-                        <div class="var-vue-value">{{telem.values_formatted}}</div>
+                        <div class="var-vue-value"  v-html="telem.colored_values_formatted"></div>
                     </div>
                     <div style="text-align: center;color: #bdc3c7;">Drag on chart for<br/> multi-series</div>
                 </div>
@@ -213,7 +213,7 @@
                                             <span v-if="widget.type == 'chart'" class="serie-color" v-bind:style="{'background-color':serie.options.fill, 'border-color':serie.options.stroke}" >
                                                 <span class="serie-value">{{serie.values_formatted}}</span>
                                             </span>
-                                            <span class="serie-name">{{serie.name}}</span>
+                                            <span class="serie-name" v-html="serie.colored_name"></span>
                                             <span v-if="widget.type == 'chart' && serie.unit != undefined" class="serie-unit" >({{serie.unit}})</span>
                                         </div>
                                         <div v-if="serie.type == '3D'" class="serie-3d-details-container">
@@ -313,6 +313,7 @@
         </div>
 
     </body>
+    <script src="./lib/ansi_up/ansi_up.js"></script>
     <script src="./utils/javascriptUtils.js"></script>
     <script src="./lib/uPlot/uplot.iife.js"></script>
     <script src="./lib/three/three.js"></script>

server/www/lib/ansi_up/LICENSE

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2011 Dru Nelson
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.