use texture map to create dotted plot lines

refactor for clarity

src/plugins/plot/res/templates/plot-options-browse.html

@@ -44,19 +44,16 @@
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
-                         title="The line rendering style for this series.">Line Style</div>
-                    <div class="grid-cell value">{{ {
-                        'none': 'None',
-                        'linear': 'Linear interpolation',
-                        'stepAfter': 'Step After'
-                        }[series.get('interpolate')] }}
+                         title="The line style and rendering method to join lines for this series.">Line Method and Style</div>
+                    <div class="grid-cell value">
+                        {{ series.lineOptionsDisplayText() }}
                     </div>
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
                          title="Whether markers are displayed, and their size.">Markers</div>
                     <div class="grid-cell value">
-                        {{series.get('markers') ? "Enabled: " + series.get('markerSize') + "px" : "Disabled"}}
+                        {{ series.markerOptionsDisplayText() }}
                     </div>
                 </li>
                 <li class="grid-row">

src/plugins/plot/res/templates/plot-options-edit.html

@@ -52,7 +52,7 @@
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
-                         title="The line rendering style for this series.">Line Style</div>
+                         title="The rendering method to join lines for this series.">Line Method</div>
                     <div class="grid-cell value">
                         <select ng-model="form.interpolate">
                             <option value="none">None</option>
@@ -61,15 +61,45 @@
                         </select>
                     </div>
                 </li>
+                <li class="grid-row" ng-show="form.interpolate !== 'none'">
+                    <div class="grid-cell label"
+                         title="The line style for this series.">Line Style</div>
+                    <div class="grid-cell value">
+                        <select ng-model="form.lineStyle">
+                            <option
+                                ng-repeat="option in lineStyleOptions"
+                                value="{{ option.value }}"
+                                ng-selected="option.value === form.lineStyle"
+                            >
+                                {{ option.name }}
+                            </option>
+                        </select>
+                    </div>
+                </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
                          title="Whether markers are displayed.">Markers</div>
-                    <div class="grid-cell value"><input type="checkbox" ng-model="form.markers"/></div>
+                    <div class="grid-cell value">
+                        <input type="checkbox" ng-model="form.markers"/>
+                        <select
+                            ng-show="form.markers"
+                            ng-model="form.markerShape">
+                            <option
+                                ng-repeat="option in markerShapeOptions"
+                                value="{{ option.value }}"
+                                ng-selected="option.value == form.markerShape"
+                            >
+                                {{ option.name }}
+                            </option>
+                        </select>
+                    </div>
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
                          title="Display markers visually denoting points in alarm.">Alarm Markers</div>
-                    <div class="grid-cell value"><input type="checkbox" ng-model="form.alarmMarkers"/></div>
+                    <div class="grid-cell value">
+                        <input type="checkbox" ng-model="form.alarmMarkers"/>
+                    </div>
                 </li>
                 <li class="grid-row" ng-show="form.markers || form.alarmMarkers">
                     <div class="grid-cell label"

src/plugins/plot/src/chart/MCTChartController.js

@@ -371,7 +371,8 @@ function (
             chartElement.getBuffer(),
             chartElement.color().asRGBAArray(),
             chartElement.count,
-            chartElement.series.get('markerSize')
+            chartElement.series.get('markerSize'),
+            chartElement.series.get('markerShape')
         );
     };
 
@@ -379,7 +380,8 @@ function (
         this.drawAPI.drawLine(
             chartElement.getBuffer(),
             chartElement.color().asRGBAArray(),
-            chartElement.count
+            chartElement.count,
+            chartElement.series.get('lineStyle')
         );
     };
 
@@ -395,9 +397,10 @@ function (
                 this.offset.yVal(highlight.point, highlight.series)
             ]),
             color = highlight.series.get('color').asRGBAArray(),
-            pointCount = 1;
+            pointCount = 1,
+            shape = highlight.series.get('markerShape');
 
-        this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE);
+        this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE, shape);
     };
 
     MCTChartController.prototype.drawRectangles = function () {

src/plugins/plot/src/configuration/PlotSeries.js

@@ -25,12 +25,16 @@ define([
     'lodash',
     '../configuration/Model',
     '../lib/extend',
-    'EventEmitter'
+    'EventEmitter',
+    '../draw/LineStyles',
+    '../draw/MarkerShapes'
 ], function (
     _,
     Model,
     extend,
-    EventEmitter
+    EventEmitter,
+    LINE_STYLES,
+    MARKER_SHAPES
 ) {
 
     /**
@@ -55,7 +59,9 @@ define([
      * `interpolate`: interpolate method, either `undefined` (no interpolation),
      *                `linear` (points are connected via straight lines), or
      *                `stepAfter` (points are connected by steps).
+     * `lineStyle`: string, style of line.
      * `markers`: boolean, whether or not this series should render with markers.
+     * `markerShape`: string, shape of markers.
      * `markerSize`: number, size in pixels of markers for this series.
      * `alarmMarkers`: whether or not to display alarm markers for this series.
      * `stats`: An object that tracks the min and max y values observed in this
@@ -101,8 +107,10 @@ define([
                 xKey: options.collection.plot.xAxis.get('key'),
                 yKey: range.key,
                 markers: true,
+                markerShape: 'point',
                 markerSize: 2.0,
-                alarmMarkers: true
+                alarmMarkers: true,
+                lineStyle: 'solid'
             };
         },
 
@@ -410,6 +418,36 @@ define([
             } else {
                 this.filters = deepCopiedFilters;
             }
+        },
+        lineOptionsDisplayText: function () {
+            const lineMethods = {
+                'none': 'None',
+                'linear': 'Linear interpolation',
+                'stepAfter': 'Step After'
+            }
+            const lineMethodKey = this.get('interpolate');
+            const lineMethod = lineMethods[lineMethodKey];
+
+            if (lineMethod === 'None') {
+                return lineMethod;
+            }
+
+            const lineStyleKey = this.get('lineStyle');
+            const lineStyle = LINE_STYLES[lineStyleKey].label;
+
+            return `${lineMethod}: ${lineStyle}`;
+        },
+        markerOptionsDisplayText: function () {
+            const showMarkers = this.get('markers');
+            if (!showMarkers) {
+                return "Disabled";
+            }
+
+            const markerShapeKey = this.get('markerShape');
+            const markerShape = MARKER_SHAPES[markerShapeKey].label;
+            const markerSize = this.get('markerSize');
+
+            return `${markerShape}: ${markerSize}px`;
         }
     });
 

src/plugins/plot/src/draw/Draw2D.js

@@ -23,10 +23,14 @@
 
 define([
     'EventEmitter',
-    '../lib/eventHelpers'
+    '../lib/eventHelpers',
+    './LineStyles',
+    './MarkerShapes'
 ], function (
     EventEmitter,
-    eventHelpers
+    eventHelpers,
+    LINE_STYLES,
+    MARKER_SHAPES
 ) {
 
     /**
@@ -84,9 +88,8 @@ define([
         this.origin = newOrigin;
     };
 
-    Draw2D.prototype.drawLine = function (buf, color, points) {
-        var i;
-
+    Draw2D.prototype.drawLine = function (buf, color, points, style) {
+        const pattern = LINE_STYLES[style].pattern;
         this.setColor(color);
 
         // Configure context to draw two-pixel-thick lines
@@ -95,11 +98,12 @@ define([
         // Start a new path...
         if (buf.length > 1) {
             this.c2d.beginPath();
+            this.c2d.setLineDash(pattern);
             this.c2d.moveTo(this.x(buf[0]), this.y(buf[1]));
         }
 
         // ...and add points to it...
-        for (i = 2; i < points * 2; i = i + 2) {
+        for (let i = 2; i < points * 2; i = i + 2) {
             this.c2d.lineTo(this.x(buf[i]), this.y(buf[i + 1]));
         }
 
@@ -121,18 +125,17 @@ define([
         buf,
         color,
         points,
-        pointSize
+        pointSize,
+        shape
     ) {
-        var i = 0,
-            offset = pointSize / 2;
+        const drawC2DShape = MARKER_SHAPES[shape].drawC2D.bind(this);
 
         this.setColor(color);
 
-        for (; i < points; i++) {
-            this.c2d.fillRect(
-                this.x(buf[i * 2]) - offset,
-                this.y(buf[i * 2 + 1]) - offset,
-                pointSize,
+        for (let i = 0; i < points; i++) {
+            drawC2DShape(
+                this.x(buf[i * 2]),
+                this.y(buf[i * 2 + 1]),
                 pointSize
             );
         }

src/plugins/plot/src/draw/DrawWebGL.js

@@ -23,30 +23,58 @@
 
 define([
     'EventEmitter',
-    '../lib/eventHelpers'
+    '../lib/eventHelpers',
+    './LineStyles',
+    './MarkerShapes'
 ], function (
     EventEmitter,
-    eventHelpers
+    eventHelpers,
+    LINE_STYLES,
+    MARKER_SHAPES
 ) {
 
     // WebGL shader sources (for drawing plain colors)
-    var FRAGMENT_SHADER = [
-            "precision mediump float;",
-            "uniform vec4 uColor;",
-            "void main(void) {",
-            "gl_FragColor = uColor;",
-            "}"
-        ].join('\n'),
-        VERTEX_SHADER = [
-            "attribute vec2 aVertexPosition;",
-            "uniform vec2 uDimensions;",
-            "uniform vec2 uOrigin;",
-            "uniform float uPointSize;",
-            "void main(void) {",
-            "gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);",
-            "gl_PointSize = uPointSize;",
-            "}"
-        ].join('\n');
+    const FRAGMENT_SHADER = `
+        precision mediump float;
+        uniform vec4 uColor;
+        uniform int uLineStyle;
+        uniform int uMarkerShape;
+        uniform sampler2D uPattern;
+        uniform float uPointCount;
+        varying float vLengthSoFar;
+        
+        void main(void) {
+            if (uMarkerShape == 2) {
+                float distance = length(2.0 * gl_PointCoord - 1.0);
+                if (distance > 1.0) {
+                    discard;
+                }
+            }
+            gl_FragColor = uColor;
+
+            if (uLineStyle == 2) {
+                gl_FragColor = texture2D(
+                    uPattern,
+                    vec2(fract(vLengthSoFar * 10.0))
+                );
+            }
+        }
+    `;
+
+    const VERTEX_SHADER = `
+        attribute vec2 aVertexPosition;
+        attribute float aLengthSoFar;
+        uniform vec2 uDimensions;
+        uniform vec2 uOrigin;
+        uniform float uPointSize;
+        varying float vLengthSoFar;
+        
+        void main(void) {
+            gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);
+            gl_PointSize = uPointSize;
+            vLengthSoFar = aLengthSoFar;
+        }
+    `;
 
     /**
      * Create a draw api utilizing WebGL.
@@ -90,6 +118,7 @@ define([
         this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
         this.gl.shaderSource(this.vertexShader, VERTEX_SHADER);
         this.gl.compileShader(this.vertexShader);
+
         this.fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
         this.gl.shaderSource(this.fragmentShader, FRAGMENT_SHADER);
         this.gl.compileShader(this.fragmentShader);
@@ -104,19 +133,21 @@ define([
         // Get locations for attribs/uniforms from the
         // shader programs (to pass values into shaders at draw-time)
         this.aVertexPosition = this.gl.getAttribLocation(this.program, "aVertexPosition");
+        this.aLengthSoFar = this.gl.getAttribLocation(this.program, "aLengthSoFar");
         this.uColor = this.gl.getUniformLocation(this.program, "uColor");
+        this.uLineStyle = this.gl.getUniformLocation(this.program, "uLineStyle");
+        this.uMarkerShape = this.gl.getUniformLocation(this.program, "uMarkerShape");
         this.uDimensions = this.gl.getUniformLocation(this.program, "uDimensions");
         this.uOrigin = this.gl.getUniformLocation(this.program, "uOrigin");
         this.uPointSize = this.gl.getUniformLocation(this.program, "uPointSize");
+        this.uPointCount = this.gl.getUniformLocation(this.program, "uPointCount");
 
         this.gl.enableVertexAttribArray(this.aVertexPosition);
+        this.gl.enableVertexAttribArray(this.aLengthSoFar);
 
         // Create a buffer to holds points which will be drawn
         this.buffer = this.gl.createBuffer();
 
-        // Use a line width of 2.0 for legibility
-        this.gl.lineWidth(2.0);
-
         // Enable blending, for smoothness
         this.gl.enable(this.gl.BLEND);
         this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
@@ -138,14 +169,62 @@ define([
             ((v - this.origin[1]) / this.dimensions[1]) * this.height;
     };
 
-    DrawWebGL.prototype.doDraw = function (drawType, buf, color, points) {
+    DrawWebGL.prototype.doDraw = function (drawType, buf, color, points, shape) {
         if (this.isContextLost) {
             return;
         }
+        const lineStyle = LINE_STYLES[shape] ? LINE_STYLES[shape].drawWebGL : 0;
+        const shapeCode = MARKER_SHAPES[shape] ? MARKER_SHAPES[shape].drawWebGL : 0;
+
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
         this.gl.bufferData(this.gl.ARRAY_BUFFER, buf, this.gl.DYNAMIC_DRAW);
         this.gl.vertexAttribPointer(this.aVertexPosition, 2, this.gl.FLOAT, false, 0, 0);
         this.gl.uniform4fv(this.uColor, color);
+        this.gl.uniform1i(this.uLineStyle, lineStyle);
+        this.gl.uniform1i(this.uMarkerShape, shapeCode);
+        this.gl.uniform1f(this.uPointCount, points);
+
+
+        const lengthSoFar = [0];
+        for (let i = 1; i < points; i++) {
+            const lastX = (i - 1) * 2;
+            const currentX = i * 2;
+            const xDelta = this.x(buf[lastX]) - this.x(buf[currentX]);
+            const yDelta = this.y(buf[lastX + 1]) - this.y(buf[currentX + 1]);
+            const distance = Math.sqrt(
+                Math.pow(xDelta, 2)
+                + Math.pow(yDelta, 2)
+            );
+
+            lengthSoFar.push(lengthSoFar[i - 1] + distance);
+        }
+
+        let lineBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, lineBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(lengthSoFar), this.gl.DYNAMIC_DRAW);
+        this.gl.vertexAttribPointer(this.aLengthSoFar, 1, this.gl.FLOAT, false, 0, 0);
+
+        const mappedColor = color.map(function (c, i) {
+            return Math.floor(c * 255);
+        });
+
+        const dots = [
+            ...mappedColor,
+            0,0,0,0,
+            0,0,0,0,
+            0,0,0,0,
+        ];
+
+        var texture = this.gl.createTexture();
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+        this.gl.texImage2D(
+            this.gl.TEXTURE_2D, 0, this.gl.RGBA, dots.length / 4, 1, 0,
+            this.gl.RGBA, this.gl.UNSIGNED_BYTE, new Uint8Array(dots));
+        this.gl.texParameteri(
+            this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+        this.gl.texParameteri(
+            this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+
         this.gl.drawArrays(drawType, 0, points);
     };
 
@@ -198,24 +277,26 @@ define([
      *        the line, as an RGBA color where each element
      *        is in the range of 0.0-1.0
      * @param {number} points the number of points to draw
+     * @param {string} style the line style
      */
-    DrawWebGL.prototype.drawLine = function (buf, color, points) {
+    DrawWebGL.prototype.drawLine = function (buf, color, points, style) {
         if (this.isContextLost) {
             return;
         }
-        this.doDraw(this.gl.LINE_STRIP, buf, color, points);
+
+        this.doDraw(this.gl.LINE_STRIP, buf, color, points, style);
     };
 
     /**
      * Draw the buffer as points.
      *
      */
-    DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize) {
+    DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize, shape) {
         if (this.isContextLost) {
             return;
         }
         this.gl.uniform1f(this.uPointSize, pointSize);
-        this.doDraw(this.gl.POINTS, buf, color, points);
+        this.doDraw(this.gl.POINTS, buf, color, points, shape);
     };
 
     /**

src/plugins/plot/src/draw/LineStyles.js

@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([], function () {
+    /**
+     * @label string (required) display name of shape
+     * @drawWebGL integer (unique, required) index provided to WebGL Fragment Shader
+     * @pattern array
+     */
+    const LINE_STYLES = {
+        solid: {
+            label: 'Solid',
+            drawWebGL: 1,
+            drawC2D: []
+        },
+        dot: {
+            label: 'Dot',
+            drawWebGL: 2,
+            drawC2D: [2, 2]
+        }
+        // dash: {
+        //     label: 'Dash',
+        //     drawWebGL: 3,
+        //     drawC2D: [5, 2]
+        // }
+        // dotDashDot: {
+        //     label: 'Dot Dash Dot',
+        //     drawWebGL: 4,
+        //     drawC2D: [5, 2, 2]
+        // }
+    };
+
+    return LINE_STYLES;
+});

src/plugins/plot/src/draw/MarkerShapes.js

@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([], function () {
+    /**
+     * @label string (required) display name of shape
+     * @drawWebGL integer (unique, required) index provided to WebGL Fragment Shader
+     * @drawC2D function (required) canvas2d draw function
+     */
+    const MARKER_SHAPES = {
+        point: {
+            label: 'Point',
+            drawWebGL: 1,
+            drawC2D: function (x, y, size) {
+                const offset = size / 2;
+                this.c2d.fillRect(x - offset, y - offset, size, size);
+            }
+        },
+        circle: {
+            label: 'Circle',
+            drawWebGL: 2,
+            drawC2D: function (x, y, size) {
+                const radius = size / 2;
+
+                this.c2d.beginPath();
+                this.c2d.arc(x, y, radius, 0, 2 * Math.PI, false);
+                this.c2d.closePath();
+                this.c2d.fill();
+            }
+        }
+    };
+
+    return MARKER_SHAPES;
+});

src/plugins/plot/src/inspector/PlotSeriesFormController.js

@@ -22,9 +22,13 @@
 
 define([
     './PlotModelFormController',
+    '../draw/LineStyles',
+    '../draw/MarkerShapes',
     'lodash'
 ], function (
     PlotModelFormController,
+    LINE_STYLES,
+    MARKER_SHAPES,
     _
 ) {
 
@@ -93,6 +97,20 @@ define([
                         value: o.key
                     };
                 });
+            this.$scope.lineStyleOptions = Object.entries(LINE_STYLES)
+                .map(([key, obj]) => {
+                    return {
+                        name: obj.label,
+                        value: key
+                    };
+                });
+            this.$scope.markerShapeOptions = Object.entries(MARKER_SHAPES)
+                .map(([key, obj]) => {
+                    return {
+                        name: obj.label,
+                        value: key
+                    };
+                });
         },
 
         fields: [
@@ -104,10 +122,18 @@ define([
                 modelProp: 'interpolate',
                 objectPath: dynamicPathForKey('interpolate')
             },
+            {
+                modelProp: 'lineStyle',
+                objectPath: dynamicPathForKey('lineStyle')
+            },
             {
                 modelProp: 'markers',
                 objectPath: dynamicPathForKey('markers')
             },
+            {
+                modelProp: 'markerShape',
+                objectPath: dynamicPathForKey('markerShape')
+            },
             {
                 modelProp: 'markerSize',
                 coerce: Number,