From 4fe86f9de6f2d94c3a4758b3233a4a8abfe05ce3 Mon Sep 17 00:00:00 2001
From: Gary Keeble <garykeeble@garys-mbp.home>
Date: Mon, 18 Apr 2016 20:25:24 +0100
Subject: [PATCH] Add Smooth/Expo/Zoom to graph

Add controls to the graph setup dialog to allow the user to configure
the smoothing, expo and zoom factor for each graph field.
---
 css/main.css              |  55 ++++++
 js/graph_config_dialog.js |  35 +++-
 js/main.css               | 351 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 439 insertions(+), 2 deletions(-)
 create mode 100644 js/main.css

diff --git a/css/main.css b/css/main.css
index 5176662b..e1186431 100644
--- a/css/main.css
+++ b/css/main.css
@@ -157,10 +157,65 @@ html.has-log .log-graph-config {
 .config-graph-field select {
     margin-right:4px;
 }
+
+.config-graph-field input[name=smoothing] {
+    margin-right:4px;
+    max-width: 75px;
+}
+.config-graph-field input[name=power] {
+    margin-right:4px;
+    max-width: 65px;
+}
+.config-graph-field input[name=scale] {
+    margin-right:4px;
+    max-width: 65px;
+}
+
 .config-graph h4 button {
     margin-left:0.5em;
 }
 
+.config-graph table tr{
+    margin:0.5em 0;
+    width: 100%;    
+    line-height: 10px;
+}
+
+.config-graph th[name=field] {
+    margin-right:4px;
+    width: 265px;    
+}
+
+.config-graph th[name=smoothing] {
+    margin-right:4px;
+    width: 75px;    
+    text-align: center;
+}
+
+.config-graph th[name=expo] {
+    margin-right:4px;
+    width: 65px;    
+    text-align: center;
+}
+
+.config-graph th[name=zoom] {
+    margin-right:4px;
+    width: 65px;    
+    text-align: center;
+}
+
+
+.setup-parameters {
+    margin:0.5em 0;
+}
+
+.setup-parameters dd {
+    margin-top:0.5em;
+}
+
+.setup-parameter {
+    margin:0.5em 0;
+}
 
 #graphCanvas {
     position:absolute;
diff --git a/js/graph_config_dialog.js b/js/graph_config_dialog.js
index 3233ac25..f402dc0c 100644
--- a/js/graph_config_dialog.js
+++ b/js/graph_config_dialog.js
@@ -29,6 +29,9 @@ function GraphConfigurationDialog(dialog, onSave) {
             elem = $(
                 '<li class="config-graph-field">'
                     + '<select class="form-control"><option value="">(choose a field)</option></select>'
+                    + '<input name="smoothing" class="form-control" type="text"></input>'
+                    + '<input name="power" class="form-control" type="text"></input>'
+                    + '<input name="scale" class="form-control" type="text"></input>'
                     + '<button type="button" class="btn btn-default btn-sm">Remove</button>'
                 + '</li>'
             ),
@@ -40,6 +43,17 @@ function GraphConfigurationDialog(dialog, onSave) {
             select.append(renderFieldOption(offeredFieldNames[i], selectedFieldName));
         }
         
+        // the smoothing is in uS rather than %, scale the value somewhere between 0 and 10000uS
+        $('input[name=smoothing]',elem).val((field.smoothing!=null)?(field.smoothing/100)+'%':'30%');
+        if(field.curve!=null) {
+            $('input[name=power]',elem).val((field.curve.power!=null)?(field.curve.power*100)+'%':'100%');
+            $('input[name=scale]',elem).val((field.curve.outputRange!=null)?(field.curve.outputRange*100)+'%':'100%');
+        } else
+        {
+            $('input[name=power]',elem).val('100%');
+            $('input[name=scale]',elem).val('100%');
+        }
+
         return elem;
     }
     
@@ -57,6 +71,18 @@ function GraphConfigurationDialog(dialog, onSave) {
                                         + '<input class="form-control" type="text" placeholder="Axis label">'
                                     + '</div>'
                                 + '</div>'
+                                + '<div class="form-group form-group-sm">'
+                                    + '<div class="col-sm-10">'
+                                        + '<table>'
+                                            + '<tr>'
+                                                + '<th name="field"></th>'
+                                                + '<th name="smoothing">Smooth</th>'
+                                                + '<th name="expo">Expo</th>'
+                                                + '<th name="zoom">Zoom</th>'
+                                            + '</tr>'
+                                        + '</table>'
+                                    + '</div>'
+                                + '</div>'
                                 + '<div class="form-group form-group-sm">'
                                     + '<label class="col-sm-2 control-label">Fields</label>'
                                     + '<div class="col-sm-10">'
@@ -162,8 +188,13 @@ function GraphConfigurationDialog(dialog, onSave) {
             
             $(".config-graph-field", this).each(function() {
                 field = {
-                    name: $("select", this).val()
-                };
+                    name: $("select", this).val(),
+                    smoothing: parseInt($("input[name=smoothing]", this).val())*100,        // Value 0-100%    = 0-10000uS (higher values are more smooth, 30% is typical)
+                    curve: {
+                        power: parseInt($("input[name=power]", this).val())/100.0,          // Value 0-100%    = 0-1.0 (lower values exagerate center values - expo)
+                        outputRange: parseInt($("input[name=scale]", this).val())/100.0     // Value 0-100%    = 0-1.0 (higher values > 100% zoom in graph vertically)
+                    }
+                }
                 
                 if (field.name.length > 0) {
                     graph.fields.push(field);
diff --git a/js/main.css b/js/main.css
new file mode 100644
index 00000000..063c31ef
--- /dev/null
+++ b/js/main.css
@@ -0,0 +1,351 @@
+body {
+    padding-bottom:2em;
+}
+
+html, body {
+    overflow-y: visible; /* Show page scrollbar when packaged as a Chrome app */
+}
+
+/* Add an extended wide size to the page container for large monitors */
+@media (min-width: 1400px) {
+    .container.main-pane {
+        width:1280px;
+    }
+}
+
+@media (min-width: 768px) {
+    .welcome-pane .panel-body {
+        min-height:320px;
+    }
+}
+
+.log-info {
+    max-width: 30em;
+}
+.log-info .form-group {
+    margin-bottom:10px;
+}
+
+/* Bootstrap-styled file inputs by abeautifulsite http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ */
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    outline: none;
+    background: white;
+    cursor: inherit;
+    display: block;
+}
+
+.log-seek-bar canvas {
+    width:100%;
+    height:50px;
+    margin-top:0.5em;
+}
+
+.graph-row {
+    margin-top:1em;
+    display:none;
+}
+
+/* Phone */
+.graph-row {
+    height:300px;
+}
+
+/* Desktop */
+@media (min-height:580px) {
+    .graph-row {
+        height:460px;
+    }
+}
+
+@media (min-height:720px) {
+    .graph-row {
+        height:630px;
+    }
+}
+
+.log-graph,
+.log-graph-config {
+    height:100%;
+}
+
+.log-close-legend-dialog {
+    float: right;
+    font-size: 14px;
+    color: #bbb;
+    position: relative;
+    top: -10px;
+    cursor: pointer;
+}
+
+.log-open-legend-dialog {
+    float: right;
+    color: #bbb;
+    padding-right: 14px;
+    padding-top: 8px;
+    font-size: 14px;
+    display: none;
+    cursor: pointer;
+}
+
+.log-graph-legend {
+    font-size:85%;
+    -webkit-flex-grow:1;
+    flex-grow:1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom:1em;
+}
+
+.log-graph {
+    position:relative;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    background-color: black;
+}
+
+.log-graph-config {
+    background-color:#222;
+    color:#bbb;
+    padding:1em;
+    
+    min-width: 135px;
+    
+    -webkit-flex-grow: 0.02;
+    flex-grow: 0.02;
+    
+    -webkit-flex-direction:column;
+    flex-direction:column;
+    
+    display:none;
+}
+.log-graph-config h2 {
+    font-size:160%;
+    margin-top:5px;
+}
+.log-graph-config h3 {
+    font-size:125%;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+}
+html.has-log .log-graph-config {
+    display:-webkit-flex;
+    display:flex;
+}
+
+.config-graph {
+    margin:0.5em 0;
+}
+.config-graph dd {
+    margin-top:0.5em;
+}
+.config-graph-field {
+    margin:0.5em 0;
+}
+.config-graph-field select {
+    margin-right:4px;
+}
+.config-graph h4 button {
+    margin-left:0.5em;
+}
+
+.setup-parameters {
+    margin:0.5em 0;
+}
+
+.setup-parameters dd {
+    margin-top:0.5em;
+}
+
+.setup-parameter {
+    margin:0.5em 0;
+}
+
+
+#graphCanvas {
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background-color: black;
+}
+
+#craftCanvas {
+    position:absolute;
+    top:0;
+    left:0;
+    pointer-events:none; /* Allow the user to drag the graph lines instead of hitting the craft */
+}
+
+.log-graph video {
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    display:block;
+}
+
+/* Prevent field value columns from jumping as their contents change */
+.log-field-values th,
+.log-field-values td {
+    width:15%;
+}
+.log-field-values td {
+    font-family: monospace;
+}
+
+.log-field-values .raw-value {
+    max-width:5em;
+}
+
+.graph-legend-field {
+    padding-bottom:0.1em;
+    margin-bottom:0.3em;
+    cursor:pointer;
+}
+
+html.has-video .graph-row,
+html.has-log .graph-row {
+    display:-webkit-flex;
+    display:flex;
+}
+
+html.has-video .log-graph {
+    height:auto;
+}
+html.has-video .log-graph video {
+    width:100%;
+    height:100%;
+}
+html.has-video #graphCanvas {
+    background-color:rgba(0,0,0,0.25);
+}
+
+.video-top-controls > li {
+    display:inline-block;
+    margin-right: 17px;
+    vertical-align: top;
+}
+
+.video-top-controls > .log-sync-panel {
+    display:none;
+}
+html.has-video.has-log .video-top-controls > .log-sync-panel {
+    display:inline-block;
+}
+html .video-jump-start,
+html .video-jump-end,
+html .log-jump-start,
+html .log-jump-end {
+    display:none;
+}
+html.has-video .video-jump-start,
+html.has-video .video-jump-end {
+    display:block;
+}
+html.has-log .log-jump-start,
+html.has-log .log-jump-end {
+    display:block;
+}
+
+.log-seek-bar {
+    display:none;
+}
+html.has-video .log-seek-bar,
+html.has-log .log-seek-bar {
+    display:block;
+}
+
+.log-metadata, .log-field-values {
+    display:none;
+}
+html.has-log .log-metadata,
+html.has-log .log-field-values {
+    display:block;
+}
+
+.video-top-controls,
+.log-graph {
+    display:none;
+}
+
+html.has-video .video-top-controls,
+html.has-log .video-top-controls,
+html.has-video .log-graph,
+html.has-log .log-graph {
+    display:block;
+}
+
+.playback-rate-control {
+    width: 100px;
+    margin-right: 13px;
+}
+
+.graph-zoom-control {
+    width: 100px;
+    margin-right: 13px;
+}
+
+.main-pane {
+    display:none;
+}
+
+html.has-log .main-pane,
+html.has-video .main-pane {
+    display:block;
+}
+html.has-log .welcome-pane,
+html.has-video .welcome-pane {
+    display:none;
+}
+
+.btn-video-export.disabled {
+    pointer-events:all !important;
+}
+.btn-video-export {
+    display:none;
+}
+html.has-log .btn-video-export {
+    display:inline-block;
+}
+
+.pane-video-settings, .pane-video-progress, .pane-video-complete {
+    display:none;
+}
+.video-export-mode-settings .pane-video-settings,
+.video-export-mode-progress .pane-video-progress,
+.video-export-mode-complete .pane-video-complete {
+    display:block;
+}
+
+.video-dim-section {
+    display:none;
+}
+html.has-video .video-dim-section {
+    display:block;
+}
+
+progress {
+    width:100%;
+    height:20px;
+}
+.jumbotron {
+    padding: 15px;
+}
+.navbar-inverse .navbar-brand {
+    color: #EAEAEA;
+}