Advanced Controls Revamp

.github/workflows/CI.yml

@@ -69,6 +69,9 @@ jobs:
     - uses: actions/setup-python@v2
       with:
         python-version: 3.9
+    - name: Install Dependencies
+      run: |
+        pip install -r source/requirements.txt
     - name: Check Image Size
       run: |
         make sizecheck

.gitignore

@@ -101,3 +101,6 @@ venv/
 # If by any chance some Inspector temp files or the report passed through
 *.tmp
 report.md
+
+# Temp JS build
+source/_static/js/pid-tune.js

source/_static/css/pid-tune.css

@@ -0,0 +1,31 @@
+.flex-grid {
+    display: flex;
+    margin: 5px;
+
+}
+
+@media (max-width: 600px) {
+    .flex-grid {
+      display: block;
+      margin: 5px;
+
+    }
+  }
+
+.col {
+    flex: 1;
+    min-height: 300px;
+    margin: 5px;
+}
+
+controlTable {
+    margin: 5px;
+}
+
+.viz-div {
+  margin:10px;
+  border-style: solid;
+  border-width: 3px;
+}
+
+

source/_static/js/pid-tune/0-delay-line.js

@@ -0,0 +1,23 @@
+class DelayLine
+{
+    constructor(num_samples)
+    {
+        this.items = [];
+        this.desLen = num_samples;
+    }
+
+    addSample(val)
+    {
+        this.items.push(val)
+        this.num_samples++;
+    }
+
+    getSample()
+    {
+        if(this.items.length >= this.desLen){
+            return this.items.shift()
+        } else {
+            return 0;
+        }
+    }
+}

source/_static/js/pid-tune/0-util.js

@@ -0,0 +1,94 @@
+function drawArrow(context, fromx, fromy, tox, toy, arrowWidth, color){
+  //variables to be used when creating the arrow
+  var headlen = 10;
+  var angle = Math.atan2(toy-fromy,tox-fromx);
+
+  context.save();
+  context.strokeStyle = color;
+
+  //starting path of the arrow from the start square to the end square
+  //and drawing the stroke
+  context.beginPath();
+  context.moveTo(fromx, fromy);
+  context.lineTo(tox, toy);
+  context.lineWidth = arrowWidth;
+  context.stroke();
+
+  //starting a new path from the head of the arrow to one of the sides of
+  //the point
+  context.beginPath();
+  context.moveTo(tox, toy);
+  context.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),
+             toy-headlen*Math.sin(angle-Math.PI/7));
+
+  //path from the side point of the arrow, to the other side point
+  context.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),
+             toy-headlen*Math.sin(angle+Math.PI/7));
+
+  //path from the side point back to the tip of the arrow, and then
+  //again to the opposite side point
+  context.lineTo(tox, toy);
+  context.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),
+             toy-headlen*Math.sin(angle-Math.PI/7));
+
+  //draws the paths created above
+  context.stroke();
+  context.restore();
+}
+
+const zip = (a, b) => a.map((k, i) => [k, b[i]]);
+
+const gaussian = (mean, stdev) => {
+  let y2;
+  let use_last = false;
+  return function () {
+    let y1;
+    if (use_last) {
+      y1 = y2;
+      use_last = false;
+    } else {
+      let x1, x2, w;
+      do {
+        x1 = 2.0 * Math.random() - 1.0;
+        x2 = 2.0 * Math.random() - 1.0;
+        w = x1 * x1 + x2 * x2;
+      } while (w >= 1.0);
+      w = Math.sqrt((-2.0 * Math.log(w)) / w);
+      y1 = x1 * w;
+      y2 = x2 * w;
+      use_last = true;
+    }
+
+    return mean + stdev * y1;
+  }
+}
+
+const isNear = ([x1, y1], [x2, y2], tolerance) => {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return dx * dx + dy * dy <= tolerance * tolerance;
+}
+
+const scalarMultiplyState = (scalar, [posRad, velRadPerS]) => {
+  return [scalar * posRad, scalar * velRadPerS];
+}
+
+const addState = (...states) => {
+  return states.reduce((prev, cur) => [prev[0] + cur[0], prev[1] + cur[1]]
+  );
+}
+
+const secondOrderRK4 = (dstate, state, inputVolts, timestepS) => {
+  // These are sometimes named "k1" etc
+  const d1 = dstate(state, inputVolts);
+  const d2 = dstate(addState(state, scalarMultiplyState(0.5 * timestepS, d1)), inputVolts);
+  const d3 = dstate(addState(state, scalarMultiplyState(0.5 * timestepS, d2)), inputVolts);
+  const d4 = dstate(addState(state, scalarMultiplyState(timestepS, d3)), inputVolts);
+
+  return addState(state,
+    scalarMultiplyState(timestepS / 6,
+      addState(d1,
+        scalarMultiplyState(2, d2),
+        scalarMultiplyState(2, d3),
+        d4)));
+}

source/_static/js/pid-tune/1-base-sim.js

@@ -0,0 +1,174 @@
+class BaseSim {
+  constructor(divIdPrefix, processVariableUnits, stateMin, stateMax) {
+    this.divIdPrefix = divIdPrefix;
+    this.speedGraph = null;
+    this.voltsGraph = null;
+    this.containerDiv = document.getElementById(divIdPrefix + "_container");
+    let plotDrawDivVals = document.getElementById(divIdPrefix + "_plotVals");
+    let plotDrawDivVolts = document.getElementById(divIdPrefix + "_plotVolts");
+
+    this.processVariableChart = new Highcharts.Chart(
+      plotDrawDivVals,
+      defaultOptions
+    );
+    this.voltsChart = new Highcharts.Chart(plotDrawDivVolts, defaultOptions);
+
+    this.voltsChart.addSeries({ name: "Control Effort", color: "green" });
+    this.processVariableChart.addSeries({
+      name: "Output",
+      color: "purple",
+      zIndex: 2,
+    });
+    this.processVariableChart.addSeries({
+      name: "Setpoint",
+      color: "red",
+      zIndex: 1,
+    });
+
+    this.voltsChart.yAxis[0].setTitle({ text: "Volts" });
+    this.processVariableChart.yAxis[0].setTitle({ text: processVariableUnits });
+
+    this.voltsChart.yAxis[0].setOptions({ min: -14.0, max: 14.0 });
+    this.processVariableChart.yAxis[0].setOptions({
+      min: stateMin,
+      max: stateMax,
+    });
+
+    this.visualizationDrawDiv = document.getElementById(divIdPrefix + "_viz");
+
+    this.animationStartTimeS = null;
+    window.requestAnimationFrame((t) => this.animate(t));
+
+    this.controlDrawDiv = document.getElementById(divIdPrefix + "_ctrls");
+
+    this.animationReset = true;
+  }
+
+  resetData() {
+
+  }
+
+  animate(currentTimeMs) {
+    let currentTimeS = currentTimeMs / 1000.0;
+
+    if (this.animationReset) {
+      this.animationStartTimeS = currentTimeS;
+      this.animationReset = false;
+    }
+
+    let animationTimeS = (currentTimeS - this.animationStartTimeS) % this.simDurationS;
+
+    let timeIndex = Math.floor(animationTimeS / this.simulationTimestepS);
+
+    this.drawAnimation(timeIndex, animationTimeS);
+
+    window.requestAnimationFrame((t) => this.animate(t));
+  }
+
+  setControlEffortData(data) {
+    this.voltsChart.series[0].setData(data, false, false, true);
+  }
+
+  setOutputData(data) {
+    this.processVariableChart.series[0].setData(data, false, false, true);
+  }
+
+  setSetpointData(data) {
+    this.processVariableChart.series[1].setData(data, false, false, true);
+  }
+
+  redraw() {
+    this.processVariableChart.xAxis[0].setExtremes(
+      0.0,
+      this.simDurationS,
+      false
+    );
+    this.voltsChart.xAxis[0].setExtremes(0.0, this.simDurationS, false);
+    this.processVariableChart.redraw();
+    this.voltsChart.redraw();
+  }
+
+  drawAnimation(timeIndex, animationTimeS) {
+    this.visualization.drawDynamic(timeIndex, animationTimeS);
+  }
+}
+
+let defaultOptions = {
+  credits: {
+    enabled: false,
+  },
+
+  chart: {
+    zoomType: null,
+    animation: false,
+    ignoreHiddenSeries: true,
+    panning: false,
+    showAxes: true,
+    marginLeft: 80, // Keep all charts left aligned
+    spacingTop: 20,
+    spacingBottom: 20,
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, "rgb(255,255,255)"],
+        [1, "rgb(230,230,230)"],
+      ],
+    },
+  },
+
+  title: {
+    //disable title
+    text: null,
+  },
+
+  xAxis: {
+    type: "linear",
+    title: "Time (sec)",
+    lineColor: "#000",
+    tickColor: "#000",
+    gridLineColor: "#BBB",
+    gridLineWidth: 1,
+    labels: {
+      style: {
+        color: "#222",
+        fontWeight: "bold",
+      },
+    },
+    title: {
+      style: {
+        color: "#222",
+      },
+    },
+  },
+
+  legend: {
+    layout: "vertical",
+    align: "right",
+    verticalAlign: "top",
+    borderWidth: 1,
+    backgroundColor: "#ddd",
+    floating: true,
+    itemStyle: {
+      font: "9pt Trebuchet MS, Verdana, sans-serif",
+      color: "#222",
+    },
+  },
+
+  exporting: {
+    enabled: false,
+  },
+
+  colors: ["#FF0000", "#0000FF", "#00BB00", "#FF00FF", "#00FFFF", "#FFFF00"],
+
+  plotOptions: {
+    line: {
+      marker: {
+        radius: 2,
+      },
+      lineWidth: 3,
+      threshold: null,
+      animation: true,
+    },
+  },
+  series: [],
+};