From b47dc8aa2c252c0c266867c0d4d5287bd5362cdc Mon Sep 17 00:00:00 2001
From: cevv-be <106259677+cevv-be@users.noreply.github.com>
Date: Sat, 25 Jun 2022 01:02:26 +0200
Subject: [PATCH] Raw dashboard used in our glider simulator (as described in
 https://github.com/cevv-be/Condor-simu)

This is a raw html file, not in a nice format for a contrib. This is more to see if interest.

There are two interesting features in the file:
- Dynamic configuration of the speed limits using a separate json file and a dropdown in a form
- Interactive buttons using "onclick"
---
 src/contrib/Dash.html  | 379 +++++++++++++++++++++++++++++++++++++++++
 src/contrib/gliders.js | 124 ++++++++++++++
 2 files changed, 503 insertions(+)
 create mode 100644 src/contrib/Dash.html
 create mode 100644 src/contrib/gliders.js
diff --git a/src/contrib/Dash.html b/src/contrib/Dash.html
new file mode 100644
index 0000000..a409f47
--- /dev/null
+++ b/src/contrib/Dash.html
@@ -0,0 +1,379 @@
+<html>
+  <body>
+    <script src="d3.v7.min.js"></script>
+    <script src="g3.min.js"></script>
+    <script src="gliders.js"></script>
+    <script>
+
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString)
+var glider = urlParams.get('Glider')
+
+// set default glider
+if( glider == null){
+    glider="K21";
+}
+var sp;
+if( glider in gliders_speeds){
+    sp = gliders_speeds[glider];
+}
+
+//Airspeed
+var airspeed=g3.gauge()
+        .metric('airspeed').unit('km/h')
+        .measure(d3.scaleLinear().domain([sp.minspeed,sp.maxspeed]).range([-165, 150]))
+        .append(
+            g3.gaugeFace(),
+            g3.gaugeScrew().shape('phillips').x(-90).y(-90),
+            g3.gaugeScrew().shape('phillips').x(-90).y(90),
+            g3.gaugeScrew().shape('phillips').x(90).y(90),
+            g3.gaugeScrew().shape('phillips').x(90).y(-90),
+            g3.gaugeLabel("WINTER").size(12).x(-40).y(-45),
+            g3.gaugeLabel("R-10-210.8").size(12).x(20).y(-45),
+            g3.gaugeLabel("Km/h").size(12).y(33),
+            g3.gaugeLabel("W78258").x(-50).y(0),
+            g3.axisTicks().step(10).size(7).style('stroke-width: 3'),
+            g3.axisTicks().step(50).size(15).style('stroke-width: 10'),
+            g3.axisSector([sp.ab1, sp.ab2]).inset(12).size(5),  // white arc
+            g3.axisSector([sp.av1, sp.aj1]).inset(5).size(7).class('g3-normal-fill'),// green arc
+            g3.axisSector([sp.aj1, sp.aj2]).inset(5).size(7).style('fill: yellow; stroke: yellow'),  // yellow arc
+            g3.axisTicks([sp.vne]).size(17).style('stroke-width: 7').class('g3-danger-stroke'),//red mark vne
+            g3.axisTicks([sp.voa]).shape('wedge').size(12).width(15).style('fill: yellow; stroke: yellow').inset(-10),//trait jaune
+            g3.axisLabels().step(50).inset(30),
+            g3.axisLabels([sp.minspeed]).size((sp.minspeed % 50) ?10:0).inset(25),
+            g3.axisLabels([sp.maxspeed]).size((sp.maxspeed % 50) ?10:0).inset(25),
+
+            g3.indicatePointer().shape('sword').clamp([sp.minspeed-10,sp.maxspeed])
+        );
+//altimeter
+var qfe=0.0;
+var setQfe= false;
+// return QNH if qfe is 0, deduct qfe value if qfe is set.
+function Qnh2FE(h){
+    // record altitude as qfe when switch is set to QFE.
+    if(setQfe){
+        qfe=h;
+        setQfe=false;
+    }
+    return h - qfe;
+}
+// on click function for button
+function checkQFE(evt){
+    var label = document.getElementsByClassName('qnh-label')[0]
+    if(qfe>0){
+        qfe=0;
+        label.innerHTML="QNH"
+    } else {
+        setQfe=true;
+        label.innerHTML="QFE"
+    }
+}
+var altimeter=g3.gauge()
+        .metric('altitude').unit('m')
+        .measure(d3.scaleLinear().domain([0, 1000]).range([-180, 180]))
+        .defs(
+            g3.element('pattern', {
+                id: 'altitudeDangerPattern',
+                width: 10, height: 10,
+                patternTransform: 'rotate(45)',
+                patternUnits: 'userSpaceOnUse'
+            }).append(g3.element('rect', {width: 10, height: 5}).class('g3-fg-fill')),
+        )
+        .append(
+            // self-indicating gauge for pressure, to view through window, IF there would be such a metric available
+            g3.put().rotate(90).append(
+                g3.gauge()
+                    //.metric('pressureSetting').unit('hPa')
+                    .fake(g3.forceSeries(1013,1014))
+                    .measure(d3.scaleLinear().domain([1013,1014]).range([0, 10]))
+                    .autoindicate(false)
+                    .append(
+                        g3.gaugeFace().style('fill: #111'),
+                        g3.axisTicks().step(5).size(5).inset(10),
+                        g3.axisTicks().step(1).size(3).inset(10),
+                        g3.axisTicks([1013.25]).size(5).inset(10).class('g3-danger-stroke'),
+                        g3.axisLabels(d3.range(1013, 1014, 5)).size(10).orient('relative').rotate(-90),
+                    )
+            ),
+            // add a face with two see-through windows
+            g3.gaugeFace().window((_, g) => {
+                g3.axisSector([725, 775]).inset(11).size(24).style('fill: black')(_, g); // pressure window
+            }).style('filter: url(#dropShadow3)'),  //TODO doesn't drop shadow windows properly?
+            g3.axisTicks([750]).shape('wedge').size(10).width(3),
+            g3.axisTicks().step(20),
+            g3.axisTicks().step(100).size(15).style('stroke-width: 2'),
+            g3.axisLabels().step(100).format(v => v/100).size(35),
+            // g3.gaugeLabel("ALTITUDE").y(-10).size(15),
+            g3.gaugeLabel("mB").x(60).y(0).size(6),
+            g3.gaugeLabel("hm-km").x(-40).y(25).size(10),
+            g3.indicatePointer().shape('blade').rescale(h => Qnh2FE(h)/10),
+            g3.indicatePointer().shape('sword').rescale(h=> Qnh2FE(h)),
+            g3.gaugeScrew().shape('phillips').x(-90).y(-90),
+            g3.gaugeScrew().shape('phillips').x(90).y(90),
+            g3.gaugeScrew().shape('phillips').x(90).y(-90),
+            g3.put().x(-85).y(85).append(
+                g3.gaugeLabel("QNH").size(15).style('stroke: #e6e1dc').class('qnh-label'),
+                // here the big trick to attach a javascript function to a SVG element
+                g3.element('circle', {r: 15, onclick: "checkQFE(evt)"}).style('fill: url(#highlightGradient); opacity: 0.5')
+            )
+        );
+//Mechanical Vario
+var Vv=g3.gauge()
+.metric('vario').unit('m/s')
+        .measure(d3.scaleLinear().domain([-5, 5]).range([90, 90+360]))
+        .append(
+            g3.gaugeFace(),
+            g3.gaugeScrew().shape('phillips').x(-90).y(-90),
+            g3.gaugeScrew().shape('phillips').x(-90).y(90),
+            g3.gaugeScrew().shape('phillips').x(90).y(90),
+            g3.gaugeScrew().shape('phillips').x(90).y(-90),
+            g3.axisTicks().step(0.5).size(5),
+            g3.axisTicks().step(1).size(15).style('stroke-width: 5'),
+            g3.axisLabels().step(1).format(v => Math.abs(v)),
+            
+            g3.gaugeLabel("39543").x(50).y(-25).size(12),
+            g3.gaugeLabel("m/s").x(50).y(-10).size(10),
+            // add up/down arrows as sector lines plus custom tick marks
+            g3.axisSector([-1,1]).size(0).inset(45).class('g3-fg-stroke').style('stroke-width: 4'),
+            // TODO this should be a custom tick mark shape, with access to current tick val?
+            (_, g) => {
+                _.selectAll(null).data([-1, 1])
+                .enter().append('path')
+                    .attr('d', "M 2,0 l -7,4 l 0,-8 Z")
+                    .attr('transform', d => g.marktransform(d, 45) + (d < 0 ? ' rotate(180)':''))
+                    .attr('class', 'g3-fg-fill')
+            },
+            //g3.gaugeLabel("+").x(-57).y(-37).size(15).style('text-anchor: start'),
+            //g3.gaugeLabel("-").x(-57).y(37).size(15).style('text-anchor: start'),
+            g3.indicatePointer().shape('sword').clamp([-5, 5]),
+        );
+// Electronic Vario
+var Vel=g3.gauge()
+        .metric('evario').unit('m/s')
+        .measure(d3.scaleLinear().domain([-10, 10]).range([90, 90+360]))
+        .append(
+            g3.gaugeFace(),
+            g3.gaugeScrew().shape('phillips').x(-90).y(-90),
+            g3.gaugeScrew().shape('phillips').x(-90).y(90),
+            g3.gaugeScrew().shape('phillips').x(90).y(90),
+            g3.gaugeScrew().shape('phillips').x(90).y(-90),
+            g3.axisTicks().step(1).size(15).style('stroke-width: 2'),
+            g3.axisLabels().step(2).format(v => Math.abs(v)),
+            g3.gaugeLabel("Electro").y(15).size(15),
+            g3.gaugeLabel("m/s").y(25).size(15),
+            g3.gaugeLabel("+").x(-47).y(-37).size(15).style('text-anchor: start'),
+            g3.gaugeLabel("-").x(-47).y(37).size(15).style('text-anchor: start'),
+            // needle with integrator before to be printed below
+            g3.gauge()
+                .metric('integrator').unit('m/s')
+                .measure(d3.scaleLinear().domain([-10, 10]).range([90, 90+360]))
+                .append(
+                    g3.indicatePointer().shape('rondel').clamp([-10, 10])
+                ),
+            g3.indicatePointer().shape('sword').clamp([-10, 10]),
+
+
+        );
+
+
+//Clock
+// extract the minutes from hour in decimal format
+function HdecMin(t){
+    var minutes = Math.trunc(60  * (t - Math.trunc(t)))
+    var s = "00" + minutes;
+    return s.substr(s.length-2);
+}
+function HdecSec(t){
+    var remain = t - Math.trunc(t);
+    var minutes = 60  * (t - Math.trunc(t))
+    var sec = Math.trunc( 60 * (minutes -Math.trunc(minutes)))
+
+    var s = "00" + sec;
+    if(sec % 2 == 0) {
+        return ' '+ s.substr(s.length-2);
+    } else {
+        return ':'+ s.substr(s.length-2);
+    }
+
+}
+var clock=g3.gauge()
+        .metric('time').unit('h')
+        .css('text.g3-indicate-text { fill: #20282C }')
+        .append(
+            g3.element('rect', {width: 160, height: 50, x: -50, y: -25}).attr('rx', 10).style('fill: #A8A8A4'),
+            g3.put().x(-22).append(
+                g3.indicateText().format(t => Math.trunc(t)+":").size(36).style('font-family: DSEG7-Classic')
+            ),
+            g3.put().x(43).append(
+                g3.indicateText()
+                    .format(t => HdecMin(t) )
+                    .size(36).style('font-family: DSEG7-Classic')
+            ),
+            g3.put().x(90).append(
+                g3.indicateText()
+                .format(t => HdecSec(t))
+                .size(20).style('font-family: DSEG7-Classic')
+            )
+        );
+        
+//slipball
+var slipball=g3.gauge()
+        .metric('slipball').unit('deg')
+        .fake(g3.forceSeries(-10, 10))
+        .measure(d3.scaleLinear().domain([-3, 3]).range([-20, 20]))
+        .clip(g3.element('rect', {width: 400, height: 80, x: -200, y: 0}))
+        .append(
+            //g3.gaugeFace().window(g3.element('rect', {width: 160, height: 0, x: 0, y: -25}).attr('rx', 10)),
+            // gauge for slip, degrees of ball deflection
+            g3.gauge()
+                .metric('slipball').unit('deg')
+                .measure(d3.scaleLinear().domain([4,-4]).range([170,190]))
+                .r(300)
+                .append(
+                    //g3.gaugeFace(),
+                    g3.gaugeLabel('WINTER').size(12).y(10),
+                    g3.gaugeScrew().shape('phillips').x(-100).y(50).r(12,5),
+                    g3.gaugeScrew().shape('phillips').x(100).y(50).r(12,5),
+                    g3.put().y(-255).append(
+                        // background for the tube
+                        g3.axisSector([-6,6]).inset(-9).size(18).style('fill: #c0c0a8; filter: url(#dropShadow3)'),
+                        // add ball as pointer
+                        g3.indicatePointer().clamp([-4,4]).append(
+                            g3.put().scale(0.8,1).y(-300).rotate(-180).append(
+                                // add ball background plus a highlight, with the rotate(-180) to avoid having
+                                // the highlight flipped since the ball is tyipcally indicating near 180 rotation
+                                g3.element('circle', {r: 8}).style('fill: #333'),
+                                g3.element('circle', {r: 8}).class('g3-highlight'),
+                            )
+                        ),
+                        g3.axisTicks([-1,1]).inset(-9).size(18).style('stroke-width: 2; stroke: #666'),
+                        // add a blurred highlight to the tube
+                        g3.axisSector([-6,6]).inset(0).size(6)
+                            .style('fill: white; filter: url(#gaussianBlur1); fill-opacity: 0.33')
+                    )
+                ),
+            //g3.axisSector([0,360]).size(24).class('g3-bg-fill').style('filter: url(#dropShadow2)'),
+            
+        );
+
+
+var compass = g3.gauge()
+        .append(
+            g3.gaugeScrew().shape('phillips').x(-90).y(-90).r(13),
+            g3.gaugeScrew().shape('phillips').x(-90).y(90).r(13),
+            g3.gaugeScrew().shape('phillips').x(90).y(90).r(13),
+            g3.gaugeScrew().shape('phillips').x(90).y(-90).r(13),
+            g3.gauge()
+            .clip(g3.gaugeFace())
+            .append(
+                g3.gaugeFace(),
+                g3.axisTicks([0]).size(200),   
+                g3.put().y(100).append(              
+                    g3.gauge()
+                    .r('130')
+                    .metric('compass').unit('deg')
+                    .measure(d3.scaleLinear().domain([0,360]).range([0,360]))
+                    .autoindicate(true)
+                    .append(
+                        g3.axisTicks().step(5).size(5),
+                        g3.axisTicks().step(10).size(10),
+                        g3.axisTicks().step(30).size(10).style('stroke-width: 2'),
+                        g3.axisLabels().step(30).orient('relative'),
+                    ),
+                ),
+                g3.axisSector().size(30).class('g3-bg-fill'),
+            )
+        );
+var maxG=1;
+var minG=1;        
+function maxg(g){
+    if(g > maxG){
+        maxG=g;
+    }
+    return maxG;
+}
+function ming(g){
+    if(g <  minG){
+        minG=g;
+    }
+    return minG;
+}
+function resetG(){
+    maxG=1;
+    minG=1;
+}
+
+var Gmeter = g3.gauge()
+        .metric('gforce').unit('g')
+        .measure(d3.scaleLinear().domain([-6,8]).range([-220,80]))
+        .append(
+            g3.gaugeScrew().shape('phillips').x(-90).y(-90).r(10,5),
+            g3.gaugeScrew().shape('phillips').x(90).y(90).r(10,5),
+            g3.gaugeScrew().shape('phillips').x(90).y(-90).r(10,5),
+            g3.gaugeFace(),
+            g3.axisTicks().step(1).size(15).style('stroke-width: 2'),
+            g3.axisTicks().step(.2).size(5).style('stroke-width: 1'),
+            g3.axisLabels().step(1).format(v => Math.abs(v)),
+            g3.gaugeLabel("G").y(15).size(15),
+            g3.indicatePointer().shape('omega-baton-short').rescale(g =>maxg(g)).clamp([0,10]),
+            g3.indicatePointer().shape('omega-baton-short').rescale(g =>ming(g)).clamp([-10,1]),
+            g3.indicatePointer().shape('sword').clamp([-10, 10]),
+            g3.put().x(-85).y(85).append(
+                g3.gaugeLabel("R").size(15).style('stroke: #e6e1dc'),
+                // here the big trick to attach a javascript function to a SVG element
+                g3.element('circle', {r: 18, onclick: "resetG()"}).style('fill: url(#highlightGradient); opacity: 0.5')
+            )
+        );
+
+//création du panneau
+var panel = g3.panel()
+    .width(1920)
+    .height(1200)
+    //.grid(true)
+    .append(    
+        g3.put().x(275).y(255).scale(2.55).append(airspeed),
+        g3.put().x(960).y(1200-670).scale(1.6).append(slipball),
+        g3.put().x(960).y(255).scale(2.55).append(Vv),
+        g3.put().x(1920-275).y(255).scale(2.55).append(Vel),
+        g3.put().x(275).y(1200-360).scale(2.0).append(Gmeter),
+        g3.put().x(960).y(1200-360).scale(1.6).append(compass),
+        g3.put().x(923).y(1200-80).append(clock),
+        g3.put().x(1920-275).y(1200-300).scale(2.55).append(altimeter),
+    ).interval(100).url("http://localhost:8080/metrics/condor.json");
+    panel('body');
+
+    // Create a form dynamically
+    var form = document.createElement("form");
+    form.setAttribute("method", "get");
+    form.setAttribute("action", "#");
+    form.style.position= 'absolute';
+    form.style.top = '1150px';
+    form.style.left = '10px'
+
+
+    var selectList = document.createElement("select");
+    selectList.id="Glider";
+    selectList.name="Glider";
+    selectList.setAttribute("onchange","this.form.submit()");
+    selectList.style.fontSize="2em";
+    selectList.style.fill = "#A8A8A4";
+
+    Object.keys(gliders_speeds).forEach(key => {
+        var option = document.createElement("option");
+        option.value = key;
+        option.text = key;
+        option.style.fontSize= "2em";
+        if(key == glider){
+            option.selected=true;
+        }
+        selectList.appendChild(option);
+    })
+    form.appendChild(selectList);
+
+    document.getElementsByTagName("body")[0]
+                            .appendChild(form);
+    </script>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/src/contrib/gliders.js b/src/contrib/gliders.js
new file mode 100644
index 0000000..fd312be
--- /dev/null
+++ b/src/contrib/gliders.js
@@ -0,0 +1,124 @@
+// typical speed for HSI
+var gliders_speeds = {
+    K13 : {
+        minspeed:30,
+        ab1:60,
+        ab2:200,
+        av1:60,
+        aj1:150,
+        aj2:200,
+        vne:200,
+        voa:90,
+        maxspeed:250
+    },
+    K8 : {
+        minspeed:30,
+        ab1:0,
+        ab2:0,
+        av1:63,
+        aj1:130,
+        aj2:190,
+        vne:190,
+        voa:70,
+        maxspeed:220
+    },
+    K21: {
+        minspeed:30,
+        ab1:0,
+        ab2:0,
+        av1:80,
+        aj1:180,
+        aj2:280,
+        vne:280,
+        voa:91,
+        maxspeed:300
+    },
+    DuoDiscus: {
+        minspeed:40,
+        ab1:0,
+        ab2:0,
+        av1:90,
+        aj1:180,
+        aj2:265,
+        vne:265,
+        voa:95,
+        maxspeed:280
+    },
+     Antares: {
+        minspeed:50,
+        ab1:0,
+        ab2:0,
+        av1:95,
+        aj1:195,
+        aj2:280,
+        vne:280,
+        voa:120,
+        maxspeed:300
+    },
+     Blanik: {
+        minspeed:30,
+        ab1:60,
+        ab2:110,
+        av1:65,
+        aj1:148,
+        aj2:255,
+        vne:255,
+        voa:110,
+        maxspeed:270
+    },
+     Pegase: {
+        minspeed:30,
+        ab1:0,
+        ab2:0,
+        av1:80,
+        aj1:170,
+        aj2:250,
+        vne:250,
+        voa:90,
+        maxspeed:270
+    },
+    Genesis: {
+        minspeed:40,
+        ab1:0,
+        ab2:0,
+        av1:75,
+        aj1:205,
+        aj2:275,
+        vne:275,
+        voa:90,
+        maxspeed:280
+    },
+     StdCirrus: {
+        minspeed:40,
+        ab1:0,
+        ab2:0,
+        av1:70,
+        aj1:170,
+        aj2:220,
+        vne:220,
+        voa:95,
+        maxspeed:230
+    },
+     Diana2: {
+        minspeed:50,
+        ab1:95,
+        ab2:233,
+        av1:105,
+        aj1:195,
+        aj2:275,
+        vne:275,
+        voa:95,
+        maxspeed:300
+    },
+     DG808: {
+        minspeed:50,
+        ab1:85,
+        ab2:190,
+        av1:97,
+        aj1:190,
+        aj2:270,
+        vne:270,
+        voa:105,
+        maxspeed:270
+    }
+}
\ No newline at end of file
