Merge pull request #173 from amosproj/feature/#166-indicators-remove-…

…bouncing-balls

Feature/#166 indicators remove bouncing balls

Apps/frontend/src/app.scss

@@ -179,26 +179,24 @@ nav {
   grid-row: 1;
 }
 
-.indicators {
-  grid-column: 1/3;
-  grid-row: 2;
-  justify-self: end;
-}
-
 .settings {
   &--close {
     display: flex;
   }
+
   &--headline {
     display: inline;
   }
+
   &--headline-section {
     width: fit-content;
     margin: 0;
   }
+
   &--list-element {
     display: table;
     width: fit-content;
+
     & > div {
       display: table-cell;
 
@@ -232,6 +230,28 @@ nav {
   }
 }
 
+.indicators {
+  &--line {
+    grid-column: 1/3;
+    grid-row: 2;
+    justify-self: end;
+  }
+
+  &--text {
+    grid-column: 4/6;
+    grid-row: 2;
+    font-family: monospace;
+    font-size: min(1em, 1.5vw);
+    text-align: left;
+    line-height: calc(0.5vw + 0.5em);
+    padding-left: 1vmax;
+
+    td {
+      vertical-align: top;
+    }
+  }
+}
+
 .control-panel {
   &--top {
     &_general {
@@ -243,11 +263,6 @@ nav {
     }
   }
 
-  &--right {
-    grid-column: 4/6;
-    grid-row: 2;
-  }
-
   &--bottom {
     grid-column: 1/6;
     grid-row: 3;

Apps/frontend/src/const.js

@@ -4,13 +4,9 @@ export const CANVAS_WIDTH = 1000;
 export const CANVAS_HEIGHT = 500;
 export const NUM_INTERVALS_VERTICAL = 20;
 export const NUM_INTERVALS_HORIZONTAL = 10;
-
-export const INDICATOR_MARGIN = 4;
-export const INDICATOR_WIDTH = 8;
-export const INDICATOR_FONT_SIZE = 11;
-export const INDICATOR_DECIMAL_PLACES = 3;
-export const INDICATOR_SECTION_WIDTH = 240;
-export const INDICATOR_ZERO_LINE_COLOR = "#000000";
+export const INDICATORS_UPDATE_FREQUENCY = 1000;
+export const TEXT_INDICATORS_DECIMAL_PLACES = 3;
+export const LINE_INDICATORS_CANVAS_WIDTH = 120;
 
 export const COORDINATE_LINE_COLOR = "#FFFFFF80";
 
@@ -28,6 +24,9 @@ export const LINE_COLORS = [
 ];
 
 export const LINE_COLORS_RGBA = LINE_COLORS.map(rgbArrayToRGBAString);
+export const LINE_COLORS_WEBGL = LINE_COLORS.map((color) =>
+  color.map((num) => num / 255).concat([1])
+);
 export const LINE_THICKNESS_SMALL = 0.002;
 export const LINE_THICKNESS_BIG = 0.008;
 

Apps/frontend/src/helper.js

@@ -1,4 +1,4 @@
-import { INDICATOR_DECIMAL_PLACES } from "./const";
+import { TEXT_INDICATORS_DECIMAL_PLACES } from "./const";
 
 /**
  * Returns hex string for array of rgb values.
@@ -9,9 +9,12 @@ import { INDICATOR_DECIMAL_PLACES } from "./const";
 export const rgbArrayToRGBAString = (rgb) =>
   `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`;
 
-export const roundVoltage = (voltage) =>
-  Math.trunc(voltage * 10 ** INDICATOR_DECIMAL_PLACES) /
-  10 ** INDICATOR_DECIMAL_PLACES;
+export const roundVoltage = (voltage) => {
+  return (
+    Math.trunc(voltage * 10 ** TEXT_INDICATORS_DECIMAL_PLACES) /
+    10 ** TEXT_INDICATORS_DECIMAL_PLACES
+  );
+};
 
 export const logSocketCloseCode = (code) => {
   // See https://www.rfc-editor.org/rfc/rfc6455#section-7.4.1

Apps/frontend/src/shader/indicatorShaders.js

@@ -0,0 +1,31 @@
+export const fragmentShader = `#version 300 es
+precision mediump float;
+
+in vec4 v_colour;
+out vec4 o_colour;
+
+void main() {
+  o_colour = v_colour;
+}
+`;
+export const vertexShader = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_colour;
+uniform float u_sample;
+uniform int u_channel;
+uniform float u_offset;
+uniform float u_scale;
+
+in vec2 inputVertex;
+out vec4 v_colour;
+
+void main() {
+  float index = float(u_channel);
+  float y = (u_sample * u_scale / 5.0) + u_offset;
+  float x = (inputVertex.x / 5.0);
+  x = x - 1.0 + index / 5.0;
+  gl_Position = vec4(x, y, 1, 1);
+  v_colour = u_colour;
+}
+`;

Apps/frontend/src/shader/shaderHelper.js

@@ -0,0 +1,37 @@
+export function createShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert(
+      `Unable to initialize the shader program: ${gl.getProgramInfoLog(
+        shaderProgram
+      )}`
+    );
+    return null;
+  }
+  return shaderProgram;
+}
+
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert(
+      `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`
+    );
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}

Apps/frontend/src/views/GeneralButtons.svelte

@@ -7,7 +7,8 @@
   import SettingsButton from "../components/SettingsButton.svelte";
 
   let onOffButton;
-  export let indicatorElement;
+  export let lineIndicatorElement;
+  export let textIndicatorElement;
   export let waveElement;
 </script>
 
@@ -24,7 +25,8 @@
       onOffButton.click();
     }
     // clear canvas and indicators
-    indicatorElement.clearCanvas();
+    lineIndicatorElement.reset();
+    textIndicatorElement.reset();
     waveElement.resetPlot();
   }}
 />