Initial implementation of screenshot feature

Author: atomgomba

gulpfile.js

@@ -270,6 +270,7 @@ function dist() {
         './js/vendor/three.js',
         './js/vendor/three.min.js',
         './js/vendor/webm-writer-0.1.1.js',
+        './js/screenshot.js',
 
         // everything else
         './package.json', // For NW.js

index.html

@@ -441,7 +441,7 @@ <h4>Workspace</h4>
                 <div class="log-workspace-selection"></div>
             </li>
         </ul>
-        <div class="graph-row">
+        <div id="screenshot-frame" class="graph-row">
             <div class="log-graph">
                 <video></video>
                 <canvas width="200" height="100" id="graphCanvas"></canvas>
@@ -2200,6 +2200,13 @@ <h4 class="modal-title">Shortcut Keys</h4>
                                             </span>
                                             <div class="description">Special Case, clear all bookmarks</div>
                                         </li>
+                                        <li>
+                                            <span class="keys">
+                                                <div class="key">Alt</div>
+                                                <div class="key">S</div>
+                                            </span>
+                                            <div class="description">Save current graph to PNG file</div>
+                                        </li>
                                     </ul>
                                 </div>
                             </div>
@@ -2730,6 +2737,8 @@ <h4 class="modal-title">Advanced User Settings</h4>
         </div>
     </div>
     <!-- Scripts -->
+    <script src="node_modules/html2canvas/dist/html2canvas.min.js"></script>
+    <script src="js/screenshot.js"></script>
     <script src="js/complex.js"></script>
     <script src="js/real.js"></script>
     <script src="js/vendor/jquery-1.11.3.min.js"></script>

js/main.js

@@ -1896,6 +1896,8 @@ function BlackboxLogViewer() {
                             if(!(shifted)) {
                                 toggleOverrideStatus('graphSmoothOverride', 'has-smoothing-override' );
                                 e.preventDefault();
+                            } else if (e.altKey) {
+                                makeScreenshot();
                             }
                         } catch(e) {
                             console.log('Smoothing override toggle feature not functioning');

js/screenshot.js

@@ -0,0 +1,20 @@
+"use strict";
+
+function makeScreenshot() {
+    let el = document.querySelector("#screenshot-frame"),
+        elStyle = getComputedStyle(el),
+        options = {
+            /*
+            The element that contains the graph has `position: fixed` set with `top: 60px`.
+            This option ensures, that the image content won't overflow to the bottom.
+            */
+            scrollY: -1 * parseInt(elStyle.top),
+        };
+    html2canvas(el, options).then(canvas => {
+        window.canv = canvas;
+        let anchor = document.createElement("a");
+        anchor.download = "graph-screenshot.png";
+        anchor.href = canvas.toDataURL();
+        anchor.click();
+    });
+}

package.json

@@ -23,6 +23,7 @@
   "author": "The Betaflight open source project.",
   "license": "GPL-3.0",
   "dependencies": {
+    "html2canvas": "^1.0.0-rc.5",
     "lodash": "^4.17.13"
   },
   "devDependencies": {

yarn.lock

@@ -365,6 +365,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-arraybuffer@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
+  integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==
+
 base64-js@^1.0.2, base64-js@^1.2.3:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -812,6 +817,13 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
+css-line-break@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef"
+  integrity sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==
+  dependencies:
+    base64-arraybuffer "^0.2.0"
+
 d@1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -1754,6 +1766,13 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.3.tgz#622638609162d788c6c7cc8c491442e7bbdff03e"
   integrity sha512-gSxJXCMa4wZSq9YqCxcVWWtXw63FNFSx9XmDfet4IJg0vuiwxAdiLqbgxZty2/X5gHHd9F36v4VmEcAlZMgnGw==
 
+html2canvas@^1.0.0-rc.5:
+  version "1.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-rc.5.tgz#4ee3cac9f6e20a0fa0c2f35a6f99c960ae7ec4c1"
+  integrity sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==
+  dependencies:
+    css-line-break "1.1.1"
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"