8.35.0

Fix reading QR codes with transparent backgrounds

.eslintignore

@@ -1 +1,2 @@
 src/core/vendor/**
+src/web/static/clippy_assets/**

.github/ISSUE_TEMPLATE.md

@@ -1,14 +1 @@
-<!-- Prefix the title above with one of the following: -->
-<!-- Bug report: -->
-<!-- Operation request: -->
-<!-- Feature request: -->
-<!-- Misc: -->
-
-### Summary
-
-
-### Example
-<!-- If describing a bug, tell us what happens instead of the expected behavior -->
-<!-- Include a link that triggers the bug if possible -->
-<!-- If you are requesting a new operation, include example input and output -->
-
+<!-- Prefix the title above with 'Misc:' -->

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: 'Bug report: <Insert title here>'
+labels: bug
+assignees: ''
+
+---
+
+<!-- Prefix the title above with 'Bug report:' -->
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior or a link to the recipe / input used to cause the bug:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (if relevant, please complete the following information):**
+ - OS: [e.g. Windows] 
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for the project
+title: 'Feature request: <Insert title here>'
+labels: feature
+assignees: ''
+
+---
+<!-- Prefix the title above with 'Feature request:' -->
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/operation-request.md

@@ -0,0 +1,16 @@
+---
+name: Operation request
+about: Suggest a new operation
+title: 'Operation request: <Insert title here>'
+labels: operation
+assignees: ''
+
+---
+
+<!-- Prefix the title above with 'Operation request:' -->
+
+## Summary
+
+### Example Input
+
+### Example Output

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - node
+  - lts/*
 addons:
   chrome: stable
 install: npm install
@@ -30,8 +30,9 @@ deploy:
     skip_cleanup: true
     api_key:
       secure: "HV1WSKv4l/0Y2bKKs1iBJocBcmLj08PCRUeEM/jTwA4jqJ8EiLHWiXtER/D5sEg2iibRVKd2OQjfrmS6bo4AiwdeVgAKmv0FtS2Jw+391N8Nd5AkEANHa5Om/IpHLTL2YRAjpJTsDpY72bMUTJIwjQA3TFJkgrpOw6KYfohOcgbxLpZ4XuNJRU3VL4Hsxdv5V9aOVmfFOmMOVPQlakXy7NgtW5POp1f2WJwgcZxylkR1CjwaqMyXmSoVl46pyH3tr5+dptsQoKSGdi6sIHGA60oDotFPcm+0ifa47wZw+vapuuDi4tdNxhrHGaDMG8xiE0WFDHwQUDlk2/+W7j9SEX0H3Em7us371JXRp56EDwEcDa34VpVkC6i8HGcHK55hnxVbMZXGf3qhOFD8wY7qMbjMRvIpucrMHBi86OfkDfv0vDj2LyvIl5APj/AX50BrE0tfH1MZbH26Jkx4NdlkcxQ14GumarmUqfmVvbX/fsoA6oUuAAE9ZgRRi3KHO4wci6KUcRfdm+XOeUkaBFsL86G3EEYIvrtBTuaypdz+Cx7nd1iPZyWMx5Y1gXnVzha4nBdV4+7l9JIsFggD8QVpw2uHXQiS1KXFjOeqA3DBD8tjMB7q26Fl2fD3jkOo4BTbQ2NrRIZUu/iL+fOmMPsyMt2qulB0yaSBCfkbEq8xrUA="
+    file_glob: true
     file:
-      - build/prod/cyberchef.htm
+      - build/prod/*.zip
       - build/node/CyberChef.js
     on:
       repo: gchq/CyberChef

CHANGELOG.md

@@ -2,6 +2,31 @@
 All major and minor version changes will be documented in this file. Details of patch-level version changes can be found in [commit messages](https://github.com/gchq/CyberChef/commits/master).
 
 
+### [8.35.0] - 2019-07-03
+- 'Sharpen Image', 'Convert Image Format' and 'Add Text To Image' operations added [@j433866] | [#515]
+
+### [8.34.0] - 2019-06-28
+- Various new visualisations added to the 'Entropy' operation [@MShwed] | [#535]
+- Efficiency improvements made to the 'Entropy' operation for large file support [@n1474335]
+
+### [8.33.0] - 2019-06-27
+- 'Bzip2 Compress' operation added and 'Bzip2 Decompress' operation greatly improved [@artemisbot] | [#531]
+
+### [8.32.0] - 2019-06-27
+- 'Indec of Coincidence' operation added [@Ge0rg3] | [#571]
+
+### [8.31.0] - 2019-04-12
+- The downloadable version of CyberChef is now a .zip file containing separate modules rather than a single .htm file. It is still completely standalone and will not make any external network requests. This change reduces the complexity of the build process significantly. [@n1474335]
+
+### [8.30.0] - 2019-04-12
+- 'Decode Protobuf' operation added [@n1474335] | [#533]
+
+### [8.29.0] - 2019-03-31
+- 'BLAKE2s' and 'BLAKE2b' hashing operations added [@h345983745] | [#525]
+
+### [8.28.0] - 2019-03-31
+- 'Heatmap Chart', 'Hex Density Chart', 'Scatter Chart' and 'Series Chart' operation added [@artemisbot] [@tlwr] | [#496] [#143]
+
 ### [8.27.0] - 2019-03-14
 - 'Enigma', 'Typex', 'Bombe' and 'Multiple Bombe' operations added [@s2224834] | [#516]
 - See [this wiki article](https://github.com/gchq/CyberChef/wiki/Enigma,-the-Bombe,-and-Typex) for a full explanation of these operations.
@@ -118,6 +143,15 @@ All major and minor version changes will be documented in this file. Details of
 
 
 
+[8.35.0]: https://github.com/gchq/CyberChef/releases/tag/v8.35.0
+[8.34.0]: https://github.com/gchq/CyberChef/releases/tag/v8.34.0
+[8.33.0]: https://github.com/gchq/CyberChef/releases/tag/v8.33.0
+[8.32.0]: https://github.com/gchq/CyberChef/releases/tag/v8.32.0
+[8.31.0]: https://github.com/gchq/CyberChef/releases/tag/v8.31.0
+[8.30.0]: https://github.com/gchq/CyberChef/releases/tag/v8.30.0
+[8.29.0]: https://github.com/gchq/CyberChef/releases/tag/v8.29.0
+[8.28.0]: https://github.com/gchq/CyberChef/releases/tag/v8.28.0
+[8.27.0]: https://github.com/gchq/CyberChef/releases/tag/v8.27.0
 [8.26.0]: https://github.com/gchq/CyberChef/releases/tag/v8.26.0
 [8.25.0]: https://github.com/gchq/CyberChef/releases/tag/v8.25.0
 [8.24.0]: https://github.com/gchq/CyberChef/releases/tag/v8.24.0
@@ -156,7 +190,9 @@ All major and minor version changes will be documented in this file. Details of
 [@j433866]: https://github.com/j433866
 [@GCHQ77703]: https://github.com/GCHQ77703
 [@h345983745]: https://github.com/h345983745
+[@s2224834]: https://github.com/s2224834
 [@artemisbot]: https://github.com/artemisbot
+[@tlwr]: https://github.com/tlwr
 [@picapi]: https://github.com/picapi
 [@Dachande663]: https://github.com/Dachande663
 [@JustAnotherMark]: https://github.com/JustAnotherMark
@@ -170,9 +206,12 @@ All major and minor version changes will be documented in this file. Details of
 [@Cynser]: https://github.com/Cynser
 [@anthony-arnold]: https://github.com/anthony-arnold
 [@masq]: https://github.com/masq
+[@Ge0rg3]: https://github.com/Ge0rg3
+[@MShwed]: https://github.com/MShwed
 
 [#95]: https://github.com/gchq/CyberChef/pull/299
 [#173]: https://github.com/gchq/CyberChef/pull/173
+[#143]: https://github.com/gchq/CyberChef/pull/143
 [#224]: https://github.com/gchq/CyberChef/pull/224
 [#239]: https://github.com/gchq/CyberChef/pull/239
 [#248]: https://github.com/gchq/CyberChef/pull/248
@@ -207,4 +246,12 @@ All major and minor version changes will be documented in this file. Details of
 [#468]: https://github.com/gchq/CyberChef/pull/468
 [#476]: https://github.com/gchq/CyberChef/pull/476
 [#489]: https://github.com/gchq/CyberChef/pull/489
+[#496]: https://github.com/gchq/CyberChef/pull/496
 [#506]: https://github.com/gchq/CyberChef/pull/506
+[#515]: https://github.com/gchq/CyberChef/pull/515
+[#516]: https://github.com/gchq/CyberChef/pull/516
+[#525]: https://github.com/gchq/CyberChef/pull/525
+[#531]: https://github.com/gchq/CyberChef/pull/531
+[#533]: https://github.com/gchq/CyberChef/pull/533
+[#535]: https://github.com/gchq/CyberChef/pull/535
+[#571]: https://github.com/gchq/CyberChef/pull/571

Gruntfile.js

@@ -4,7 +4,6 @@ const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const NodeExternals = require("webpack-node-externals");
-const Inliner = require("web-resource-inliner");
 const glob = require("glob");
 const path = require("path");
 
@@ -43,18 +42,16 @@ module.exports = function (grunt) {
 
     grunt.registerTask("prod",
         "Creates a production-ready build. Use the --msg flag to add a compile message.",
-        ["eslint", "clean:prod", "clean:config", "exec:generateConfig", "webpack:web", "inline", "chmod"]);
+        [
+            "eslint", "clean:prod", "clean:config", "exec:generateConfig", "webpack:web",
+            "copy:standalone", "zip:standalone", "clean:standalone", "chmod"
+        ]);
 
     grunt.registerTask("default",
         "Lints the code base",
         ["eslint", "exec:repoSize"]);
 
-    grunt.registerTask("inline",
-        "Compiles a production build of CyberChef into a single, portable web page.",
-        ["exec:generateConfig", "webpack:webInline", "runInliner", "clean:inlineScripts"]);
 
-
-    grunt.registerTask("runInliner", runInliner);
     grunt.registerTask("doc", "docs");
     grunt.registerTask("tests", "test");
     grunt.registerTask("lint", "eslint");
@@ -72,6 +69,7 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks("grunt-accessibility");
     grunt.loadNpmTasks("grunt-concurrent");
     grunt.loadNpmTasks("grunt-contrib-connect");
+    grunt.loadNpmTasks("grunt-zip");
 
 
     // Project configuration
@@ -94,32 +92,6 @@ module.exports = function (grunt) {
         },
         moduleEntryPoints = listEntryModules();
 
-    /**
-     * Compiles a production build of CyberChef into a single, portable web page.
-     */
-    function runInliner() {
-        const done = this.async();
-        Inliner.html({
-            relativeTo: "build/prod/",
-            fileContent: grunt.file.read("build/prod/cyberchef.htm"),
-            images: true,
-            svgs: true,
-            scripts: true,
-            links: true,
-            strict: true
-        }, function(error, result) {
-            if (error) {
-                if (error instanceof Error) {
-                    done(error);
-                } else {
-                    done(new Error(error));
-                }
-            } else {
-                grunt.file.write("build/prod/cyberchef.htm", result);
-                done(true);
-            }
-        });
-    }
 
     /**
      * Generates an entry list for all the modules.
@@ -130,7 +102,7 @@ module.exports = function (grunt) {
         glob.sync("./src/core/config/modules/*.mjs").forEach(file => {
             const basename = path.basename(file);
             if (basename !== "Default.mjs" && basename !== "OpModules.mjs")
-                entryModules[basename.split(".mjs")[0]] = path.resolve(file);
+                entryModules["modules/" + basename.split(".mjs")[0]] = path.resolve(file);
         });
 
         return entryModules;
@@ -143,7 +115,7 @@ module.exports = function (grunt) {
             node: ["build/node/*"],
             config: ["src/core/config/OperationConfig.json", "src/core/config/modules/*", "src/code/operations/index.mjs"],
             docs: ["docs/*", "!docs/*.conf.json", "!docs/*.ico", "!docs/*.png"],
-            inlineScripts: ["build/prod/scripts.js"],
+            standalone: ["build/prod/CyberChef*.html"]
         },
         eslint: {
             options: {
@@ -151,7 +123,7 @@ module.exports = function (grunt) {
             },
             configs: ["*.{js,mjs}"],
             core: ["src/core/**/*.{js,mjs}", "!src/core/vendor/**/*", "!src/core/operations/legacy/**/*"],
-            web: ["src/web/**/*.{js,mjs}"],
+            web: ["src/web/**/*.{js,mjs}", "!src/web/static/**/*"],
             node: ["src/node/**/*.{js,mjs}"],
             tests: ["tests/**/*.{js,mjs}"],
         },
@@ -195,6 +167,9 @@ module.exports = function (grunt) {
                     }, moduleEntryPoints),
                     output: {
                         path: __dirname + "/build/prod",
+                        filename: chunkData => {
+                            return chunkData.chunk.name === "main" ? "assets/[name].js": "[name].js";
+                        },
                         globalObject: "this"
                     },
                     resolve: {
@@ -225,33 +200,6 @@ module.exports = function (grunt) {
                     ]
                 };
             },
-            webInline: {
-                mode: "production",
-                target: "web",
-                entry: "./src/web/index.js",
-                output: {
-                    filename: "scripts.js",
-                    path: __dirname + "/build/prod"
-                },
-                plugins: [
-                    new webpack.DefinePlugin(Object.assign({}, BUILD_CONSTANTS, {
-                        INLINE: "true"
-                    })),
-                    new HtmlWebpackPlugin({
-                        filename: "cyberchef.htm",
-                        template: "./src/web/html/index.html",
-                        compileTime: compileTime,
-                        version: pkg.version + "s",
-                        inline: true,
-                        minify: {
-                            removeComments: true,
-                            collapseWhitespace: true,
-                            minifyJS: true,
-                            minifyCSS: true
-                        }
-                    }),
-                ]
-            },
             node: {
                 mode: "production",
                 target: "node",
@@ -284,7 +232,8 @@ module.exports = function (grunt) {
                     warningsFilter: [
                         /source-map/,
                         /dependency is an expression/,
-                        /export 'default'/
+                        /export 'default'/,
+                        /Can't resolve 'sodium'/
                     ],
                 }
             },
@@ -316,6 +265,18 @@ module.exports = function (grunt) {
                 }
             }
         },
+        zip: {
+            standalone: {
+                cwd: "build/prod/",
+                src: [
+                    "build/prod/**/*",
+                    "!build/prod/index.html",
+                    "!build/prod/BundleAnalyzerReport.html",
+                    "!build/prod/sitemap.js"
+                ],
+                dest: `build/prod/CyberChef_v${pkg.version}.zip`
+            }
+        },
         connect: {
             prod: {
                 options: {
@@ -328,10 +289,16 @@ module.exports = function (grunt) {
             ghPages: {
                 options: {
                     process: function (content, srcpath) {
-                        // Add Google Analytics code to index.html
                         if (srcpath.indexOf("index.html") >= 0) {
+                            // Add Google Analytics code to index.html
                             content = content.replace("</body></html>",
                                 grunt.file.read("src/web/static/ga.html") + "</body></html>");
+
+                            // Add Structured Data for SEO
+                            content = content.replace("</head>",
+                                "<script type='application/ld+json'>" +
+                                JSON.stringify(JSON.parse(grunt.file.read("src/web/static/structuredData.json"))) +
+                                "</script></head>");
                             return grunt.template.process(content, srcpath);
                         } else {
                             return content;
@@ -350,6 +317,28 @@ module.exports = function (grunt) {
                         dest: "build/prod/"
                     },
                 ]
+            },
+            standalone: {
+                options: {
+                    process: function (content, srcpath) {
+                        if (srcpath.indexOf("index.html") >= 0) {
+                            // Replace download link with version number
+                            content = content.replace(/<a [^>]+>Download CyberChef.+?<\/a>/,
+                                `<span>Version ${pkg.version}</span>`);
+
+                            return grunt.template.process(content, srcpath);
+                        } else {
+                            return content;
+                        }
+                    },
+                    noProcess: ["**", "!**/*.html"]
+                },
+                files: [
+                    {
+                        src: "build/prod/index.html",
+                        dest: `build/prod/CyberChef_v${pkg.version}.html`
+                    }
+                ]
             }
         },
         chmod: {
@@ -405,7 +394,7 @@ module.exports = function (grunt) {
                 command: "node --experimental-modules --no-warnings --no-deprecation tests/operations/index.mjs"
             },
             browserTests: {
-                command: "./node_modules/.bin/nightwatch --env prod,inline"
+                command: "./node_modules/.bin/nightwatch --env prod"
             }
         },
     });

babel.config.js

@@ -4,21 +4,23 @@ module.exports = function(api) {
     return {
         "presets": [
             ["@babel/preset-env", {
-                "targets": {
-                    "chrome": 40,
-                    "firefox": 35,
-                    "edge": 14,
-                    "node": "6.5"
-                },
                 "modules": false,
-                "useBuiltIns": "entry"
+                "useBuiltIns": "entry",
+                "corejs": 3
             }]
         ],
         "plugins": [
             "babel-plugin-syntax-dynamic-import",
-            ["babel-plugin-transform-builtin-extend", {
-                "globals": ["Error"]
-            }]
+            [
+                "babel-plugin-transform-builtin-extend", {
+                    "globals": ["Error"]
+                }
+            ],
+            [
+                "@babel/plugin-transform-runtime", {
+                    "regenerator": true
+                }
+            ]
         ]
     };
 };

nightwatch.json

@@ -23,10 +23,6 @@
 
     "prod": {
       "launch_url": "http://localhost:8000/index.html"
-    },
-
-    "inline": {
-      "launch_url": "http://localhost:8000/cyberchef.htm"
     }
 
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyberchef",
-  "version": "8.27.0",
+  "version": "8.35.0",
   "description": "The Cyber Swiss Army Knife for encryption, encoding, compression and data analysis.",
   "author": "n1474335 <n1474335@gmail.com>",
   "homepage": "https://gchq.github.io/CyberChef",
@@ -29,107 +29,122 @@
   },
   "main": "build/node/CyberChef.js",
   "bugs": "https://github.com/gchq/CyberChef/issues",
+  "browserslist": [
+    "Chrome >= 40",
+    "Firefox >= 35",
+    "Edge >= 14",
+    "node >= 6.5"
+  ],
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
-    "autoprefixer": "^9.4.3",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "autoprefixer": "^9.6.0",
+    "babel-eslint": "^10.0.2",
+    "babel-loader": "^8.0.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bootstrap": "^4.2.1",
-    "chromedriver": "^2.45.0",
+    "chromedriver": "^75.0.0",
     "colors": "^1.3.3",
-    "css-loader": "^2.1.0",
-    "eslint": "^5.12.1",
+    "css-loader": "^3.0.0",
+    "eslint": "^6.0.1",
     "exports-loader": "^0.7.0",
-    "file-loader": "^3.0.1",
-    "grunt": "^1.0.3",
+    "file-loader": "^4.0.0",
+    "grunt": "^1.0.4",
     "grunt-accessibility": "~6.0.0",
     "grunt-chmod": "~1.1.1",
-    "grunt-concurrent": "^2.3.1",
+    "grunt-concurrent": "^3.0.0",
     "grunt-contrib-clean": "~2.0.0",
     "grunt-contrib-connect": "^2.0.0",
     "grunt-contrib-copy": "~1.0.0",
     "grunt-contrib-watch": "^1.1.0",
-    "grunt-eslint": "^21.0.0",
+    "grunt-eslint": "^21.1.0",
     "grunt-exec": "~3.0.0",
-    "grunt-jsdoc": "^2.3.0",
+    "grunt-jsdoc": "^2.4.0",
     "grunt-webpack": "^3.1.3",
+    "grunt-zip": "^0.18.2",
     "html-webpack-plugin": "^3.2.0",
     "imports-loader": "^0.8.0",
     "ink-docstrap": "^1.3.2",
     "jsdoc-babel": "^0.5.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "nightwatch": "^1.0.18",
-    "node-sass": "^4.11.0",
-    "postcss-css-variables": "^0.11.0",
+    "mini-css-extract-plugin": "^0.7.0",
+    "nightwatch": "^1.1.12",
+    "node-sass": "^4.12.0",
+    "postcss-css-variables": "^0.13.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "prompt": "^1.0.0",
     "sass-loader": "^7.1.0",
-    "sitemap": "^2.1.0",
+    "sitemap": "^2.2.0",
     "style-loader": "^0.23.1",
-    "svg-url-loader": "^2.3.2",
-    "url-loader": "^1.1.2",
-    "web-resource-inliner": "^4.2.1",
-    "webpack": "^4.28.3",
-    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-dev-server": "^3.1.14",
+    "svg-url-loader": "^2.3.3",
+    "url-loader": "^2.0.1",
+    "webpack": "^4.35.0",
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-dev-server": "^3.7.2",
     "webpack-node-externals": "^1.7.2",
     "worker-loader": "^2.0.0"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.4.4",
+    "@babel/runtime": "^7.4.5",
     "arrive": "^2.4.1",
     "babel-plugin-transform-builtin-extend": "1.1.2",
-    "babel-polyfill": "^6.26.0",
     "bcryptjs": "^2.4.3",
-    "bignumber.js": "^8.0.2",
+    "bignumber.js": "^9.0.0",
+    "blakejs": "^1.1.0",
+    "bootstrap": "4.3.1",
     "bootstrap-colorpicker": "^2.5.3",
-    "bootstrap-material-design": "^4.1.1",
-    "bson": "^4.0.1",
+    "bootstrap-material-design": "^4.1.2",
+    "bson": "^4.0.2",
     "chi-squared": "^1.1.0",
+    "clippyjs": "0.0.3",
+    "core-js": "^3.1.4",
     "crypto-api": "^0.8.3",
     "crypto-js": "^3.1.9-1",
     "ctph.js": "0.0.5",
-    "diff": "^3.5.0",
+    "d3": "^5.9.4",
+    "d3-hexbin": "^0.2.2",
+    "diff": "^4.0.1",
     "es6-promisify": "^6.0.1",
-    "escodegen": "^1.11.0",
+    "escodegen": "^1.11.1",
     "esmangle": "^1.0.1",
     "esprima": "^4.0.1",
     "exif-parser": "^0.1.12",
-    "file-saver": "^2.0.0",
+    "file-saver": "^2.0.2",
     "geodesy": "^1.1.3",
-    "highlight.js": "^9.13.1",
-    "jimp": "^0.6.0",
-    "jquery": "^3.3.1",
+    "highlight.js": "^9.15.8",
+    "jimp": "^0.6.4",
+    "jquery": "3.4.1",
     "js-crc": "^0.2.0",
     "js-sha3": "^0.8.0",
     "jsesc": "^2.5.2",
-    "jsonpath": "^1.0.0",
-    "jsonwebtoken": "^8.4.0",
-    "jsqr": "^1.1.1",
+    "jsonpath": "^1.0.2",
+    "jsonwebtoken": "^8.5.1",
+    "jsqr": "^1.2.0",
     "jsrsasign": "8.0.12",
-    "kbpgp": "^2.0.82",
+    "kbpgp": "2.1.2",
+    "libbzip2-wasm": "0.0.4",
     "libyara-wasm": "0.0.12",
     "lodash": "^4.17.11",
-    "loglevel": "^1.6.1",
+    "loglevel": "^1.6.3",
     "loglevel-message-prefix": "^3.0.0",
-    "moment": "^2.23.0",
-    "moment-timezone": "^0.5.23",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.25",
     "ngeohash": "^0.6.3",
-    "node-forge": "^0.7.6",
+    "node-forge": "^0.8.5",
     "node-md6": "^0.1.0",
+    "nodom": "^2.2.0",
     "notepack.io": "^2.2.0",
     "nwmatcher": "^1.4.4",
     "otp": "^0.1.3",
-    "popper.js": "^1.14.6",
+    "popper.js": "^1.15.0",
     "qr-image": "^3.2.0",
-    "scryptsy": "^2.0.0",
+    "scryptsy": "^2.1.0",
     "snackbarjs": "^1.1.0",
-    "sortablejs": "^1.8.0-rc1",
-    "split.js": "^1.5.10",
+    "sortablejs": "^1.9.0",
+    "split.js": "^1.5.11",
     "ssdeep.js": "0.0.2",
-    "ua-parser-js": "^0.7.19",
+    "ua-parser-js": "^0.7.20",
     "utf8": "^3.0.0",
     "vkbeautify": "^0.99.3",
     "xmldom": "^0.1.27",

postcss.config.js

@@ -1,13 +1,7 @@
 module.exports = {
     plugins: [
         require("postcss-import"),
-        require("autoprefixer")({
-            browsers: [
-                "Chrome >= 40",
-                "Firefox >= 35",
-                "Edge >= 14"
-            ]
-        }),
+        require("autoprefixer"),
         require("postcss-css-variables")({
             preserve: true
         }),

src/core/ChefWorker.js

@@ -6,7 +6,6 @@
  * @license Apache-2.0
  */
 
-import "babel-polyfill";
 import Chef from "./Chef";
 import OperationConfig from "./config/OperationConfig.json";
 import OpModules from "./config/modules/OpModules";
@@ -179,7 +178,7 @@ self.loadRequiredModules = function(recipeConfig) {
         if (!OpModules.hasOwnProperty(module)) {
             log.info(`Loading ${module} module`);
             self.sendStatusMessage(`Loading ${module} module`);
-            self.importScripts(`${self.docURL}/${module}.js`);
+            self.importScripts(`${self.docURL}/modules/${module}.js`);
             self.sendStatusMessage("");
         }
     });

src/core/Dish.mjs

@@ -21,8 +21,8 @@ class Dish {
      * @param {Dish} [dish=null] - A dish to clone
      */
     constructor(dish=null) {
-        this.value = [];
-        this.type = Dish.BYTE_ARRAY;
+        this.value = new ArrayBuffer(0);
+        this.type = Dish.ARRAY_BUFFER;
 
         if (dish &&
             dish.hasOwnProperty("value") &&
@@ -149,78 +149,75 @@ class Dish {
      */
     async _translate(toType, notUTF8=false) {
         log.debug(`Translating Dish from ${Dish.enumLookup(this.type)} to ${Dish.enumLookup(toType)}`);
-        const byteArrayToStr = notUTF8 ? Utils.byteArrayToChars : Utils.byteArrayToUtf8;
 
-        // Convert data to intermediate byteArray type
+        // Convert data to intermediate ArrayBuffer type
         try {
             switch (this.type) {
                 case Dish.STRING:
-                    this.value = this.value ? Utils.strToByteArray(this.value) : [];
+                    this.value = this.value ? Utils.strToArrayBuffer(this.value) : new ArrayBuffer;
                     break;
                 case Dish.NUMBER:
-                    this.value = typeof this.value === "number" ? Utils.strToByteArray(this.value.toString()) : [];
+                    this.value = typeof this.value === "number" ? Utils.strToArrayBuffer(this.value.toString()) : new ArrayBuffer;
                     break;
                 case Dish.HTML:
-                    this.value = this.value ? Utils.strToByteArray(Utils.unescapeHtml(Utils.stripHtmlTags(this.value, true))) : [];
+                    this.value = this.value ? Utils.strToArrayBuffer(Utils.unescapeHtml(Utils.stripHtmlTags(this.value, true))) : new ArrayBuffer;
                     break;
-                case Dish.ARRAY_BUFFER:
-                    // Array.from() would be nicer here, but it's slightly slower
-                    this.value = Array.prototype.slice.call(new Uint8Array(this.value));
+                case Dish.BYTE_ARRAY:
+                    this.value = new Uint8Array(this.value).buffer;
                     break;
                 case Dish.BIG_NUMBER:
-                    this.value = BigNumber.isBigNumber(this.value) ? Utils.strToByteArray(this.value.toFixed()) : [];
+                    this.value = BigNumber.isBigNumber(this.value) ? Utils.strToArrayBuffer(this.value.toFixed()) : new ArrayBuffer;
                     break;
                 case Dish.JSON:
-                    this.value = this.value ? Utils.strToByteArray(JSON.stringify(this.value, null, 4)) : [];
+                    this.value = this.value ? Utils.strToArrayBuffer(JSON.stringify(this.value, null, 4)) : new ArrayBuffer;
                     break;
                 case Dish.FILE:
-                    this.value = await Utils.readFile(this.value);
-                    this.value = Array.prototype.slice.call(this.value);
+                    this.value = (await Utils.readFile(this.value)).buffer;
                     break;
                 case Dish.LIST_FILE:
                     this.value = await Promise.all(this.value.map(async f => Utils.readFile(f)));
-                    this.value = this.value.map(b => Array.prototype.slice.call(b));
-                    this.value = [].concat.apply([], this.value);
+                    this.value = concatenateTypedArrays(...this.value).buffer;
                     break;
                 default:
                     break;
             }
         } catch (err) {
-            throw new DishError(`Error translating from ${Dish.enumLookup(this.type)} to byteArray: ${err}`);
+            throw new DishError(`Error translating from ${Dish.enumLookup(this.type)} to ArrayBuffer: ${err}`);
         }
 
-        this.type = Dish.BYTE_ARRAY;
+        this.type = Dish.ARRAY_BUFFER;
 
-        // Convert from byteArray to toType
+        // Convert from ArrayBuffer to toType
         try {
             switch (toType) {
                 case Dish.STRING:
                 case Dish.HTML:
-                    this.value = this.value ? byteArrayToStr(this.value) : "";
+                    this.value = this.value ? Utils.arrayBufferToStr(this.value, !notUTF8) : "";
                     this.type = Dish.STRING;
                     break;
                 case Dish.NUMBER:
-                    this.value = this.value ? parseFloat(byteArrayToStr(this.value)) : 0;
+                    this.value = this.value ? parseFloat(Utils.arrayBufferToStr(this.value, !notUTF8)) : 0;
                     this.type = Dish.NUMBER;
                     break;
-                case Dish.ARRAY_BUFFER:
-                    this.value = new Uint8Array(this.value).buffer;
+                case Dish.BYTE_ARRAY:
+                    this.value = Array.prototype.slice.call(new Uint8Array(this.value));
                     this.type = Dish.ARRAY_BUFFER;
                     break;
                 case Dish.BIG_NUMBER:
                     try {
-                        this.value = new BigNumber(byteArrayToStr(this.value));
+                        this.value = new BigNumber(Utils.arrayBufferToStr(this.value, !notUTF8));
                     } catch (err) {
                         this.value = new BigNumber(NaN);
                     }
                     this.type = Dish.BIG_NUMBER;
                     break;
                 case Dish.JSON:
-                    this.value = JSON.parse(byteArrayToStr(this.value));
+                    this.value = JSON.parse(Utils.arrayBufferToStr(this.value, !notUTF8));
                     this.type = Dish.JSON;
                     break;
                 case Dish.FILE:
                     this.value = new File(this.value, "unknown");
+                    this.type = Dish.FILE;
                     break;
                 case Dish.LIST_FILE:
                     this.value = [new File(this.value, "unknown")];
@@ -230,7 +227,7 @@ class Dish {
                     break;
             }
         } catch (err) {
-            throw new DishError(`Error translating from byteArray to ${Dish.enumLookup(toType)}: ${err}`);
+            throw new DishError(`Error translating from ArrayBuffer to ${Dish.enumLookup(toType)}: ${err}`);
         }
     }
 
@@ -374,6 +371,26 @@ class Dish {
 
 }
 
+/**
+ * Concatenates a list of Uint8Arrays together
+ *
+ * @param {Uint8Array[]} arrays
+ * @returns {Uint8Array}
+ */
+function concatenateTypedArrays(...arrays) {
+    let totalLength = 0;
+    for (const arr of arrays) {
+        totalLength += arr.length;
+    }
+    const result = new Uint8Array(totalLength);
+    let offset = 0;
+    for (const arr of arrays) {
+        result.set(arr, offset);
+        offset += arr.length;
+    }
+    return result;
+}
+
 
 /**
  * Dish data type enum for byte arrays.

src/core/Utils.mjs

@@ -201,11 +201,20 @@ class Utils {
      * Utils.parseEscapedChars("\\n");
      */
     static parseEscapedChars(str) {
-        return str.replace(/(\\)?\\([bfnrtv0'"]|x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]{1,6}\})/g, function(m, a, b) {
+        return str.replace(/(\\)?\\([bfnrtv'"]|[0-3][0-7]{2}|[0-7]{1,2}|x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]{1,6}\}|\\)/g, function(m, a, b) {
             if (a === "\\") return "\\"+b;
             switch (b[0]) {
+                case "\\":
+                    return "\\";
                 case "0":
-                    return "\0";
+                case "1":
+                case "2":
+                case "3":
+                case "4":
+                case "5":
+                case "6":
+                case "7":
+                    return String.fromCharCode(parseInt(b, 8));
                 case "b":
                     return "\b";
                 case "t":
@@ -367,6 +376,61 @@ class Utils {
     }
 
 
+    /**
+     * Converts a string to an ArrayBuffer.
+     * Treats the string as UTF-8 if any values are over 255.
+     *
+     * @param {string} str
+     * @returns {ArrayBuffer}
+     *
+     * @example
+     * // returns [72,101,108,108,111]
+     * Utils.strToArrayBuffer("Hello");
+     *
+     * // returns [228,189,160,229,165,189]
+     * Utils.strToArrayBuffer("你好");
+     */
+    static strToArrayBuffer(str) {
+        const arr = new Uint8Array(str.length);
+        let i = str.length, b;
+        while (i--) {
+            b = str.charCodeAt(i);
+            arr[i] = b;
+            // If any of the bytes are over 255, read as UTF-8
+            if (b > 255) return Utils.strToUtf8ArrayBuffer(str);
+        }
+        return arr.buffer;
+    }
+
+
+    /**
+     * Converts a string to a UTF-8 ArrayBuffer.
+     *
+     * @param {string} str
+     * @returns {ArrayBuffer}
+     *
+     * @example
+     * // returns [72,101,108,108,111]
+     * Utils.strToUtf8ArrayBuffer("Hello");
+     *
+     * // returns [228,189,160,229,165,189]
+     * Utils.strToUtf8ArrayBuffer("你好");
+     */
+    static strToUtf8ArrayBuffer(str) {
+        const utf8Str = utf8.encode(str);
+
+        if (str.length !== utf8Str.length) {
+            if (ENVIRONMENT_IS_WORKER()) {
+                self.setOption("attemptHighlight", false);
+            } else if (ENVIRONMENT_IS_WEB()) {
+                window.app.options.attemptHighlight = false;
+            }
+        }
+
+        return Utils.strToArrayBuffer(utf8Str);
+    }
+
+
     /**
      * Converts a string to a byte array.
      * Treats the string as UTF-8 if any values are over 255.
@@ -459,7 +523,7 @@ class Utils {
     /**
      * Attempts to convert a byte array to a UTF-8 string.
      *
-     * @param {byteArray} byteArray
+     * @param {byteArray|Uint8Array} byteArray
      * @returns {string}
      *
      * @example
@@ -505,6 +569,7 @@ class Utils {
     static byteArrayToChars(byteArray) {
         if (!byteArray) return "";
         let str = "";
+        // String concatenation appears to be faster than an array join
         for (let i = 0; i < byteArray.length;) {
             str += String.fromCharCode(byteArray[i++]);
         }
@@ -524,8 +589,8 @@ class Utils {
      * Utils.arrayBufferToStr(Uint8Array.from([104,101,108,108,111]).buffer);
      */
     static arrayBufferToStr(arrayBuffer, utf8=true) {
-        const byteArray = Array.prototype.slice.call(new Uint8Array(arrayBuffer));
-        return utf8 ? Utils.byteArrayToUtf8(byteArray) : Utils.byteArrayToChars(byteArray);
+        const arr = new Uint8Array(arrayBuffer);
+        return utf8 ? Utils.byteArrayToUtf8(arr) : Utils.byteArrayToChars(arr);
     }
 
 
@@ -780,7 +845,7 @@ class Utils {
             args = m[2]
                 .replace(/"/g, '\\"') // Escape double quotes
                 .replace(/(^|,|{|:)'/g, '$1"') // Replace opening ' with "
-                .replace(/([^\\]|[^\\]\\\\)'(,|:|}|$)/g, '$1"$2') // Replace closing ' with "
+                .replace(/([^\\]|(?:\\\\)+)'(,|:|}|$)/g, '$1"$2') // Replace closing ' with "
                 .replace(/\\'/g, "'"); // Unescape single quotes
             args = "[" + args + "]";
 
@@ -1023,9 +1088,11 @@ class Utils {
     static charRep(token) {
         return {
             "Space":         " ",
+            "Percent":       "%",
             "Comma":         ",",
             "Semi-colon":    ";",
             "Colon":         ":",
+            "Tab":           "\t",
             "Line feed":     "\n",
             "CRLF":          "\r\n",
             "Forward slash": "/",
@@ -1047,6 +1114,7 @@ class Utils {
     static regexRep(token) {
         return {
             "Space":         /\s+/g,
+            "Percent":       /%/g,
             "Comma":         /,/g,
             "Semi-colon":    /;/g,
             "Colon":         /:/g,

src/core/config/Categories.json

@@ -169,6 +169,9 @@
             "Parse URI",
             "URL Encode",
             "URL Decode",
+            "Protobuf Decode",
+            "VarInt Encode",
+            "VarInt Decode",
             "Format MAC addresses",
             "Change IP format",
             "Group IP addresses",
@@ -297,6 +300,8 @@
             "HAS-160",
             "Whirlpool",
             "Snefru",
+            "BLAKE2b",
+            "BLAKE2s",
             "SSDEEP",
             "CTPH",
             "Compare SSDEEP hashes",
@@ -378,7 +383,14 @@
             "Image Filter",
             "Contain Image",
             "Cover Image",
-            "Image Hue/Saturation/Lightness"
+            "Image Hue/Saturation/Lightness",
+            "Sharpen Image",
+            "Convert Image Format",
+            "Add Text To Image",
+            "Hex Density chart",
+            "Scatter chart",
+            "Series chart",
+            "Heatmap chart"
         ]
     },
     {
@@ -386,6 +398,7 @@
         "ops": [
             "Entropy",
             "Frequency distribution",
+            "Index of Coincidence",
             "Chi Square",
             "Disassemble x86",
             "Pseudo-Random Number Generator",
@@ -395,6 +408,7 @@
             "Generate QR Code",
             "Parse QR Code",
             "Haversine distance",
+            "HTML To Text",
             "Generate Lorem Ipsum",
             "Numberwang",
             "XKCD Random Number"

src/core/lib/Charts.mjs

@@ -0,0 +1,178 @@
+/**
+ * @author tlwr [toby@toby.codes]
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import OperationError from "../errors/OperationError";
+
+/**
+ * @constant
+ * @default
+ */
+export const RECORD_DELIMITER_OPTIONS = ["Line feed", "CRLF"];
+
+
+/**
+ * @constant
+ * @default
+ */
+export const FIELD_DELIMITER_OPTIONS = ["Space", "Comma", "Semi-colon", "Colon", "Tab"];
+
+
+/**
+ * Default from colour
+ *
+ * @constant
+ * @default
+ */
+export const COLOURS = {
+    min: "white",
+    max: "black"
+};
+
+
+/**
+ * Gets values from input for a plot.
+ *
+ * @param {string} input
+ * @param {string} recordDelimiter
+ * @param {string} fieldDelimiter
+ * @param {boolean} columnHeadingsAreIncluded - whether we should skip the first record
+ * @param {number} length
+ * @returns {Object[]}
+ */
+export function getValues(input, recordDelimiter, fieldDelimiter, columnHeadingsAreIncluded, length) {
+    let headings;
+    const values = [];
+
+    input
+        .split(recordDelimiter)
+        .forEach((row, rowIndex) => {
+            const split = row.split(fieldDelimiter);
+            if (split.length !== length) throw new OperationError(`Each row must have length ${length}.`);
+
+            if (columnHeadingsAreIncluded && rowIndex === 0) {
+                headings = split;
+            } else {
+                values.push(split);
+            }
+        });
+    return { headings, values };
+}
+
+
+/**
+ * Gets values from input for a scatter plot.
+ *
+ * @param {string} input
+ * @param {string} recordDelimiter
+ * @param {string} fieldDelimiter
+ * @param {boolean} columnHeadingsAreIncluded - whether we should skip the first record
+ * @returns {Object[]}
+ */
+export function getScatterValues(input, recordDelimiter, fieldDelimiter, columnHeadingsAreIncluded) {
+    let { headings, values } = getValues(
+        input,
+        recordDelimiter,
+        fieldDelimiter,
+        columnHeadingsAreIncluded,
+        2
+    );
+
+    if (headings) {
+        headings = {x: headings[0], y: headings[1]};
+    }
+
+    values = values.map(row => {
+        const x = parseFloat(row[0], 10),
+            y = parseFloat(row[1], 10);
+
+        if (Number.isNaN(x)) throw new OperationError("Values must be numbers in base 10.");
+        if (Number.isNaN(y)) throw new OperationError("Values must be numbers in base 10.");
+
+        return [x, y];
+    });
+
+    return { headings, values };
+}
+
+
+/**
+ * Gets values from input for a scatter plot with colour from the third column.
+ *
+ * @param {string} input
+ * @param {string} recordDelimiter
+ * @param {string} fieldDelimiter
+ * @param {boolean} columnHeadingsAreIncluded - whether we should skip the first record
+ * @returns {Object[]}
+ */
+export function getScatterValuesWithColour(input, recordDelimiter, fieldDelimiter, columnHeadingsAreIncluded) {
+    let { headings, values } = getValues(
+        input,
+        recordDelimiter, fieldDelimiter,
+        columnHeadingsAreIncluded,
+        3
+    );
+
+    if (headings) {
+        headings = {x: headings[0], y: headings[1]};
+    }
+
+    values = values.map(row => {
+        const x = parseFloat(row[0], 10),
+            y = parseFloat(row[1], 10),
+            colour = row[2];
+
+        if (Number.isNaN(x)) throw new OperationError("Values must be numbers in base 10.");
+        if (Number.isNaN(y)) throw new OperationError("Values must be numbers in base 10.");
+
+        return [x, y, colour];
+    });
+
+    return { headings, values };
+}
+
+/**
+ * Gets values from input for a time series plot.
+ *
+ * @param {string} input
+ * @param {string} recordDelimiter
+ * @param {string} fieldDelimiter
+ * @param {boolean} columnHeadingsAreIncluded - whether we should skip the first record
+ * @returns {Object[]}
+ */
+export function getSeriesValues(input, recordDelimiter, fieldDelimiter, columnHeadingsAreIncluded) {
+    const { values } = getValues(
+        input,
+        recordDelimiter, fieldDelimiter,
+        false,
+        3
+    );
+
+    let xValues = new Set();
+    const series = {};
+
+    values.forEach(row => {
+        const serie = row[0],
+            xVal = row[1],
+            val = parseFloat(row[2], 10);
+
+        if (Number.isNaN(val)) throw new OperationError("Values must be numbers in base 10.");
+
+        xValues.add(xVal);
+        if (typeof series[serie] === "undefined") series[serie] = {};
+        series[serie][xVal] = val;
+    });
+
+    xValues = new Array(...xValues);
+
+    const seriesList = [];
+    for (const seriesName in series) {
+        const serie = series[seriesName];
+        seriesList.push({name: seriesName, data: serie});
+    }
+
+    return { xValues, series: seriesList };
+}

src/core/lib/Hex.mjs

@@ -100,7 +100,7 @@ export function fromHex(data, delim="Auto", byteLen=2) {
 /**
  * To Hexadecimal delimiters.
  */
-export const TO_HEX_DELIM_OPTIONS = ["Space", "Comma", "Semi-colon", "Colon", "Line feed", "CRLF", "0x", "\\x", "None"];
+export const TO_HEX_DELIM_OPTIONS = ["Space", "Percent", "Comma", "Semi-colon", "Colon", "Line feed", "CRLF", "0x", "\\x", "None"];
 
 
 /**

src/core/lib/ImageManipulation.mjs

@@ -0,0 +1,251 @@
+/**
+ * Image manipulation resources
+ *
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import OperationError from "../errors/OperationError";
+
+/**
+ * Gaussian blurs an image.
+ *
+ * @param {jimp} input
+ * @param {number} radius
+ * @param {boolean} fast
+ * @returns {jimp}
+ */
+export function gaussianBlur (input, radius) {
+    try {
+        // From http://blog.ivank.net/fastest-gaussian-blur.html
+        const boxes = boxesForGauss(radius, 3);
+        for (let i = 0; i < 3; i++) {
+            input = boxBlur(input, (boxes[i] - 1) / 2);
+        }
+    } catch (err) {
+        throw new OperationError(`Error blurring image. (${err})`);
+    }
+
+    return input;
+}
+
+/**
+ *
+ * @param {number} radius
+ * @param {number} numBoxes
+ * @returns {Array}
+ */
+function boxesForGauss(radius, numBoxes) {
+    const idealWidth = Math.sqrt((12 * radius * radius / numBoxes) + 1);
+
+    let wl = Math.floor(idealWidth);
+
+    if (wl % 2 === 0) {
+        wl--;
+    }
+
+    const wu = wl + 2;
+
+    const mIdeal = (12 * radius * radius - numBoxes * wl * wl - 4 * numBoxes * wl - 3 * numBoxes) / (-4 * wl - 4);
+    const m = Math.round(mIdeal);
+
+    const sizes = [];
+    for (let i = 0; i < numBoxes; i++) {
+        sizes.push(i < m ? wl : wu);
+    }
+    return sizes;
+}
+
+/**
+ * Applies a box blur effect to the image
+ *
+ * @param {jimp} source
+ * @param {number} radius
+ * @returns {jimp}
+ */
+function boxBlur (source, radius) {
+    const width = source.bitmap.width;
+    const height = source.bitmap.height;
+    let output = source.clone();
+    output = boxBlurH(source, output, width, height, radius);
+    source = boxBlurV(output, source, width, height, radius);
+
+    return source;
+}
+
+/**
+ * Applies the horizontal blur
+ *
+ * @param {jimp} source
+ * @param {jimp} output
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius
+ * @returns {jimp}
+ */
+function boxBlurH (source, output, width, height, radius) {
+    const iarr = 1 / (radius + radius + 1);
+    for (let i = 0; i < height; i++) {
+        let ti = 0,
+            li = ti,
+            ri = ti + radius;
+        const idx = source.getPixelIndex(ti, i);
+        const firstValRed = source.bitmap.data[idx],
+            firstValGreen = source.bitmap.data[idx + 1],
+            firstValBlue = source.bitmap.data[idx + 2],
+            firstValAlpha = source.bitmap.data[idx + 3];
+
+        const lastIdx = source.getPixelIndex(width - 1, i),
+            lastValRed = source.bitmap.data[lastIdx],
+            lastValGreen = source.bitmap.data[lastIdx + 1],
+            lastValBlue = source.bitmap.data[lastIdx + 2],
+            lastValAlpha = source.bitmap.data[lastIdx + 3];
+
+        let red = (radius + 1) * firstValRed;
+        let green = (radius + 1) * firstValGreen;
+        let blue = (radius + 1) * firstValBlue;
+        let alpha = (radius + 1) * firstValAlpha;
+
+        for (let j = 0; j < radius; j++) {
+            const jIdx = source.getPixelIndex(ti + j, i);
+            red += source.bitmap.data[jIdx];
+            green += source.bitmap.data[jIdx + 1];
+            blue += source.bitmap.data[jIdx + 2];
+            alpha += source.bitmap.data[jIdx + 3];
+        }
+
+        for (let j = 0; j <= radius; j++) {
+            const jIdx = source.getPixelIndex(ri++, i);
+            red += source.bitmap.data[jIdx] - firstValRed;
+            green += source.bitmap.data[jIdx + 1] - firstValGreen;
+            blue += source.bitmap.data[jIdx + 2] - firstValBlue;
+            alpha += source.bitmap.data[jIdx + 3] - firstValAlpha;
+
+            const tiIdx = source.getPixelIndex(ti++, i);
+            output.bitmap.data[tiIdx] = Math.round(red * iarr);
+            output.bitmap.data[tiIdx + 1] = Math.round(green * iarr);
+            output.bitmap.data[tiIdx + 2] = Math.round(blue * iarr);
+            output.bitmap.data[tiIdx + 3] = Math.round(alpha * iarr);
+        }
+
+        for (let j = radius + 1; j < width - radius; j++) {
+            const riIdx = source.getPixelIndex(ri++, i);
+            const liIdx = source.getPixelIndex(li++, i);
+            red += source.bitmap.data[riIdx] - source.bitmap.data[liIdx];
+            green += source.bitmap.data[riIdx + 1] - source.bitmap.data[liIdx + 1];
+            blue += source.bitmap.data[riIdx + 2] - source.bitmap.data[liIdx + 2];
+            alpha += source.bitmap.data[riIdx + 3] - source.bitmap.data[liIdx + 3];
+
+            const tiIdx = source.getPixelIndex(ti++, i);
+            output.bitmap.data[tiIdx] = Math.round(red * iarr);
+            output.bitmap.data[tiIdx + 1] = Math.round(green * iarr);
+            output.bitmap.data[tiIdx + 2] = Math.round(blue * iarr);
+            output.bitmap.data[tiIdx + 3] = Math.round(alpha * iarr);
+        }
+
+        for (let j = width - radius; j < width; j++) {
+            const liIdx = source.getPixelIndex(li++, i);
+            red += lastValRed - source.bitmap.data[liIdx];
+            green += lastValGreen - source.bitmap.data[liIdx + 1];
+            blue += lastValBlue - source.bitmap.data[liIdx + 2];
+            alpha += lastValAlpha - source.bitmap.data[liIdx + 3];
+
+            const tiIdx = source.getPixelIndex(ti++, i);
+            output.bitmap.data[tiIdx] = Math.round(red * iarr);
+            output.bitmap.data[tiIdx + 1] = Math.round(green * iarr);
+            output.bitmap.data[tiIdx + 2] = Math.round(blue * iarr);
+            output.bitmap.data[tiIdx + 3] = Math.round(alpha * iarr);
+        }
+    }
+    return output;
+}
+
+/**
+ * Applies the vertical blur
+ *
+ * @param {jimp} source
+ * @param {jimp} output
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius
+ * @returns {jimp}
+ */
+function boxBlurV (source, output, width, height, radius) {
+    const iarr = 1 / (radius + radius + 1);
+    for (let i = 0; i < width; i++) {
+        let ti = 0,
+            li = ti,
+            ri = ti + radius;
+
+        const idx = source.getPixelIndex(i, ti);
+
+        const firstValRed = source.bitmap.data[idx],
+            firstValGreen = source.bitmap.data[idx + 1],
+            firstValBlue = source.bitmap.data[idx + 2],
+            firstValAlpha = source.bitmap.data[idx + 3];
+
+        const lastIdx = source.getPixelIndex(i, height - 1),
+            lastValRed = source.bitmap.data[lastIdx],
+            lastValGreen = source.bitmap.data[lastIdx + 1],
+            lastValBlue = source.bitmap.data[lastIdx + 2],
+            lastValAlpha = source.bitmap.data[lastIdx + 3];
+
+        let red = (radius + 1) * firstValRed;
+        let green = (radius + 1) * firstValGreen;
+        let blue = (radius + 1) * firstValBlue;
+        let alpha = (radius + 1) * firstValAlpha;
+
+        for (let j = 0; j < radius; j++) {
+            const jIdx = source.getPixelIndex(i, ti + j);
+            red += source.bitmap.data[jIdx];
+            green += source.bitmap.data[jIdx + 1];
+            blue += source.bitmap.data[jIdx + 2];
+            alpha += source.bitmap.data[jIdx + 3];
+        }
+
+        for (let j = 0; j <= radius; j++) {
+            const riIdx = source.getPixelIndex(i, ri++);
+            red += source.bitmap.data[riIdx] - firstValRed;
+            green += source.bitmap.data[riIdx + 1] - firstValGreen;
+            blue += source.bitmap.data[riIdx + 2] - firstValBlue;
+            alpha += source.bitmap.data[riIdx + 3] - firstValAlpha;
+
+            const tiIdx = source.getPixelIndex(i, ti++);
+            output.bitmap.data[tiIdx] = Math.round(red * iarr);
+            output.bitmap.data[tiIdx + 1] = Math.round(green * iarr);
+            output.bitmap.data[tiIdx + 2] = Math.round(blue * iarr);
+            output.bitmap.data[tiIdx + 3] = Math.round(alpha * iarr);
+        }
+
+        for (let j = radius + 1; j < height - radius; j++) {
+            const riIdx = source.getPixelIndex(i, ri++);
+            const liIdx = source.getPixelIndex(i, li++);
+            red += source.bitmap.data[riIdx] - source.bitmap.data[liIdx];
+            green += source.bitmap.data[riIdx + 1] - source.bitmap.data[liIdx + 1];
+            blue += source.bitmap.data[riIdx + 2] - source.bitmap.data[liIdx + 2];
+            alpha += source.bitmap.data[riIdx + 3] - source.bitmap.data[liIdx + 3];
+
+            const tiIdx = source.getPixelIndex(i, ti++);
+            output.bitmap.data[tiIdx] = Math.round(red * iarr);
+            output.bitmap.data[tiIdx + 1] = Math.round(green * iarr);
+            output.bitmap.data[tiIdx + 2] = Math.round(blue * iarr);
+            output.bitmap.data[tiIdx + 3] = Math.round(alpha * iarr);
+        }
+
+        for (let j = height - radius; j < height; j++) {
+            const liIdx = source.getPixelIndex(i, li++);
+            red += lastValRed - source.bitmap.data[liIdx];
+            green += lastValGreen - source.bitmap.data[liIdx + 1];
+            blue += lastValBlue - source.bitmap.data[liIdx + 2];
+            alpha += lastValAlpha - source.bitmap.data[liIdx + 3];
+
+            const tiIdx = source.getPixelIndex(i, ti++);
+            output.bitmap.data[tiIdx] = Math.round(red * iarr);
+            output.bitmap.data[tiIdx + 1] = Math.round(green * iarr);
+            output.bitmap.data[tiIdx + 2] = Math.round(blue * iarr);
+            output.bitmap.data[tiIdx + 3] = Math.round(alpha * iarr);
+        }
+    }
+    return output;
+}

src/core/lib/Magic.mjs

@@ -312,6 +312,11 @@ class Magic {
                 return;
             }
 
+            // If the recipe returned an empty buffer, do not continue
+            if (_buffersEqual(output, new ArrayBuffer())) {
+                return;
+            }
+
             const magic = new Magic(output, this.opPatterns),
                 speculativeResults = await magic.speculativeExecution(
                     depth-1, extLang, intensive, [...recipeConfig, opConfig], op.useful, crib);
@@ -395,7 +400,12 @@ class Magic {
         const recipe = new Recipe(recipeConfig);
         try {
             await recipe.execute(dish);
-            return dish.get(Dish.ARRAY_BUFFER);
+            // Return an empty buffer if the recipe did not run to completion
+            if (recipe.lastRunOp === recipe.opList[recipe.opList.length - 1]) {
+                return dish.get(Dish.ARRAY_BUFFER);
+            } else {
+                return new ArrayBuffer();
+            }
         } catch (err) {
             // If there are errors, return an empty buffer
             return new ArrayBuffer();

src/core/lib/Protobuf.mjs

@@ -0,0 +1,285 @@
+import Utils from "../Utils";
+
+/**
+ * Protobuf lib. Contains functions to decode protobuf serialised
+ * data without a schema or .proto file.
+ *
+ * Provides utility functions to encode and decode variable length
+ * integers (varint).
+ *
+ * @author GCHQ Contributor [3]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+class Protobuf {
+
+    /**
+     * Protobuf constructor
+     *
+     * @param {byteArray} data
+     */
+    constructor(data) {
+        // Check we have a byteArray
+        if (data instanceof Array) {
+            this.data = data;
+        } else {
+            throw new Error("Protobuf input must be a byteArray");
+        }
+
+        // Set up masks
+        this.TYPE = 0x07;
+        this.NUMBER = 0x78;
+        this.MSB = 0x80;
+        this.VALUE = 0x7f;
+
+        // Declare offset and length
+        this.offset = 0;
+        this.LENGTH = data.length;
+    }
+
+    // Public Functions
+
+    /**
+     * Encode a varint from a number
+     *
+     * @param {number} number
+     * @returns {byteArray}
+     */
+    static varIntEncode(number) {
+        const MSB = 0x80,
+            VALUE = 0x7f,
+            MSBALL = ~VALUE,
+            INT = Math.pow(2, 31);
+        const out = [];
+        let offset = 0;
+
+        while (number >= INT) {
+            out[offset++] = (number & 0xff) | MSB;
+            number /= 128;
+        }
+        while (number & MSBALL) {
+            out[offset++] = (number & 0xff) | MSB;
+            number >>>= 7;
+        }
+        out[offset] = number | 0;
+        return out;
+    }
+
+    /**
+     * Decode a varint from the byteArray
+     *
+     * @param {byteArray} input
+     * @returns {number}
+     */
+    static varIntDecode(input) {
+        const pb = new Protobuf(input);
+        return pb._varInt();
+    }
+
+    /**
+     * Parse Protobuf data
+     *
+     * @param {byteArray} input
+     * @returns {Object}
+     */
+    static decode(input) {
+        const pb = new Protobuf(input);
+        return pb._parse();
+    }
+
+    // Private Class Functions
+
+    /**
+     * Main private parsing function
+     *
+     * @private
+     * @returns {Object}
+     */
+    _parse() {
+        let object = {};
+        // Continue reading whilst we still have data
+        while (this.offset < this.LENGTH) {
+            const field = this._parseField();
+            object = this._addField(field, object);
+        }
+        // Throw an error if we have gone beyond the end of the data
+        if (this.offset > this.LENGTH) {
+            throw new Error("Exhausted Buffer");
+        }
+        return object;
+    }
+
+    /**
+     * Add a field read from the protobuf data into the Object. As
+     * protobuf fields can appear multiple times, if the field already
+     * exists we need to add the new field into an array of fields
+     * for that key.
+     *
+     * @private
+     * @param {Object} field
+     * @param {Object} object
+     * @returns {Object}
+     */
+    _addField(field, object) {
+        // Get the field key/values
+        const key = field.key;
+        const value = field.value;
+        object[key] = object.hasOwnProperty(key) ?
+            object[key] instanceof Array ?
+                object[key].concat([value]) :
+                [object[key], value] :
+            value;
+        return object;
+    }
+
+    /**
+     * Parse a field and return the Object read from the record
+     *
+     * @private
+     * @returns {Object}
+     */
+    _parseField() {
+        // Get the field headers
+        const header = this._fieldHeader();
+        const type = header.type;
+        const key = header.key;
+        switch (type) {
+            // varint
+            case 0:
+                return { "key": key, "value": this._varInt() };
+            // fixed 64
+            case 1:
+                return { "key": key, "value": this._uint64() };
+            // length delimited
+            case 2:
+                return { "key": key, "value": this._lenDelim() };
+            // fixed 32
+            case 5:
+                return { "key": key, "value": this._uint32() };
+            // unknown type
+            default:
+                throw new Error("Unknown type 0x" + type.toString(16));
+        }
+    }
+
+    /**
+     * Parse the field header and return the type and key
+     *
+     * @private
+     * @returns {Object}
+     */
+    _fieldHeader() {
+        // Make sure we call type then number to preserve offset
+        return { "type": this._fieldType(), "key": this._fieldNumber() };
+    }
+
+    /**
+     * Parse the field type from the field header. Type is stored in the
+     * lower 3 bits of the tag byte. This does not move the offset on as
+     * we need to read the field number from the tag byte too.
+     *
+     * @private
+     * @returns {number}
+     */
+    _fieldType() {
+        // Field type stored in lower 3 bits of tag byte
+        return this.data[this.offset] & this.TYPE;
+    }
+
+    /**
+     * Parse the field number (i.e. the key) from the field header. The
+     * field number is stored in the upper 5 bits of the tag byte - but
+     * is also varint encoded so the follow on bytes may need to be read
+     * when field numbers are > 15.
+     *
+     * @private
+     * @returns {number}
+     */
+    _fieldNumber() {
+        let shift = -3;
+        let fieldNumber = 0;
+        do {
+            fieldNumber += shift < 28 ?
+                shift === -3 ?
+                    (this.data[this.offset] & this.NUMBER) >> -shift :
+                    (this.data[this.offset] & this.VALUE) << shift :
+                (this.data[this.offset] & this.VALUE) * Math.pow(2, shift);
+            shift += 7;
+        } while ((this.data[this.offset++] & this.MSD) === this.MSB);
+        return fieldNumber;
+    }
+
+    // Field Parsing Functions
+
+    /**
+     * Read off a varint from the data
+     *
+     * @private
+     * @returns {number}
+     */
+    _varInt() {
+        let value = 0;
+        let shift = 0;
+        // Keep reading while upper bit set
+        do {
+            value += shift < 28 ?
+                (this.data[this.offset] & this.VALUE) << shift :
+                (this.data[this.offset] & this.VALUE) * Math.pow(2, shift);
+            shift += 7;
+        } while ((this.data[this.offset++] & this.MSB) === this.MSB);
+        return value;
+    }
+
+    /**
+     * Read off a 64 bit unsigned integer from the data
+     *
+     * @private
+     * @returns {number}
+     */
+    _uint64() {
+        // Read off a Uint64
+        let num = this.data[this.offset++] * 0x1000000 + (this.data[this.offset++] << 16) + (this.data[this.offset++] << 8) + this.data[this.offset++];
+        num = num * 0x100000000 + this.data[this.offset++] * 0x1000000 + (this.data[this.offset++] << 16) + (this.data[this.offset++] << 8) + this.data[this.offset++];
+        return num;
+    }
+
+    /**
+     * Read off a length delimited field from the data
+     *
+     * @private
+     * @returns {Object|string}
+     */
+    _lenDelim() {
+        // Read off the field length
+        const length = this._varInt();
+        const fieldBytes = this.data.slice(this.offset, this.offset + length);
+        let field;
+        try {
+            // Attempt to parse as a new Protobuf Object
+            const pbObject = new Protobuf(fieldBytes);
+            field = pbObject._parse();
+        } catch (err) {
+            // Otherwise treat as bytes
+            field = Utils.byteArrayToChars(fieldBytes);
+        }
+        // Move the offset and return the field
+        this.offset += length;
+        return field;
+    }
+
+    /**
+     * Read a 32 bit unsigned integer from the data
+     *
+     * @private
+     * @returns {number}
+     */
+    _uint32() {
+        // Use a dataview to read off the integer
+        const dataview = new DataView(new Uint8Array(this.data.slice(this.offset, this.offset + 4)).buffer);
+        const value = dataview.getUint32(0);
+        this.offset += 4;
+        return value;
+    }
+}
+
+export default Protobuf;

src/core/lib/QRCode.mjs

@@ -0,0 +1,93 @@
+/**
+ * QR code resources
+ *
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import OperationError from "../errors/OperationError";
+import jsQR from "jsqr";
+import qr from "qr-image";
+import jimp from "jimp";
+import Utils from "../Utils";
+
+/**
+ * Parses a QR code image from an image
+ *
+ * @param {ArrayBuffer} input
+ * @param {boolean} normalise
+ * @returns {string}
+ */
+export async function parseQrCode(input, normalise) {
+    let image;
+    try {
+        image = await jimp.read(input);
+    } catch (err) {
+        throw new OperationError(`Error opening image. (${err})`);
+    }
+
+    try {
+        if (normalise) {
+            image.rgba(false);
+            image.background(0xFFFFFFFF);
+            image.normalize();
+            image.greyscale();
+            image = await image.getBufferAsync(jimp.MIME_JPEG);
+            image = await jimp.read(image);
+        }
+    } catch (err) {
+        throw new OperationError(`Error normalising iamge. (${err})`);
+    }
+
+    const qrData = jsQR(image.bitmap.data, image.getWidth(), image.getHeight());
+    if (qrData) {
+        return qrData.data;
+    } else {
+        throw new OperationError("Could not read a QR code from the image.");
+    }
+}
+
+/**
+ * Generates a QR code from the input string
+ *
+ * @param {string} input
+ * @param {string} format
+ * @param {number} moduleSize
+ * @param {number} margin
+ * @param {string} errorCorrection
+ * @returns {ArrayBuffer}
+ */
+export function generateQrCode(input, format, moduleSize, margin, errorCorrection) {
+    const formats = ["SVG", "EPS", "PDF", "PNG"];
+    if (!formats.includes(format.toUpperCase())) {
+        throw new OperationError("Unsupported QR code format.");
+    }
+
+    let qrImage;
+    try {
+        qrImage = qr.imageSync(input, {
+            type: format,
+            size: moduleSize,
+            margin: margin,
+            "ec_level": errorCorrection.charAt(0).toUpperCase()
+        });
+    } catch (err) {
+        throw new OperationError(`Error generating QR code. (${err})`);
+    }
+
+    if (!qrImage) {
+        throw new OperationError("Error generating QR code.");
+    }
+
+    switch (format) {
+        case "SVG":
+        case "EPS":
+        case "PDF":
+            return Utils.strToArrayBuffer(qrImage);
+        case "PNG":
+            return qrImage.buffer;
+        default:
+            throw new OperationError("Unsupported QR code format.");
+    }
+}

src/core/operations/AESEncrypt.mjs

@@ -65,8 +65,8 @@ class AESEncrypt extends Operation {
      * @throws {OperationError} if invalid key length
      */
     run(input, args) {
-        const key = Utils.convertToByteArray(args[0].string, args[0].option),
-            iv = Utils.convertToByteArray(args[1].string, args[1].option),
+        const key = Utils.convertToByteString(args[0].string, args[0].option),
+            iv = Utils.convertToByteString(args[1].string, args[1].option),
             mode = args[2],
             inputType = args[3],
             outputType = args[4];

src/core/operations/AddTextToImage.mjs

@@ -0,0 +1,266 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import { isImage } from "../lib/FileType";
+import { toBase64 } from "../lib/Base64";
+import jimp from "jimp";
+
+/**
+ * Add Text To Image operation
+ */
+class AddTextToImage extends Operation {
+
+    /**
+     * AddTextToImage constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Add Text To Image";
+        this.module = "Image";
+        this.description = "Adds text onto an image.<br><br>Text can be horizontally or vertically aligned, or the position can be manually specified.<br>Variants of the Roboto font face are available in any size or colour.";
+        this.infoURL = "";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Text",
+                type: "string",
+                value: ""
+            },
+            {
+                name: "Horizontal align",
+                type: "option",
+                value: ["None", "Left", "Center", "Right"]
+            },
+            {
+                name: "Vertical align",
+                type: "option",
+                value: ["None", "Top", "Middle", "Bottom"]
+            },
+            {
+                name: "X position",
+                type: "number",
+                value: 0
+            },
+            {
+                name: "Y position",
+                type: "number",
+                value: 0
+            },
+            {
+                name: "Size",
+                type: "number",
+                value: 32,
+                min: 8
+            },
+            {
+                name: "Font face",
+                type: "option",
+                value: [
+                    "Roboto",
+                    "Roboto Black",
+                    "Roboto Mono",
+                    "Roboto Slab"
+                ]
+            },
+            {
+                name: "Red",
+                type: "number",
+                value: 255,
+                min: 0,
+                max: 255
+            },
+            {
+                name: "Green",
+                type: "number",
+                value: 255,
+                min: 0,
+                max: 255
+            },
+            {
+                name: "Blue",
+                type: "number",
+                value: 255,
+                min: 0,
+                max: 255
+            },
+            {
+                name: "Alpha",
+                type: "number",
+                value: 255,
+                min: 0,
+                max: 255
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    async run(input, args) {
+        const text = args[0],
+            hAlign = args[1],
+            vAlign = args[2],
+            size = args[5],
+            fontFace = args[6],
+            red = args[7],
+            green = args[8],
+            blue = args[9],
+            alpha = args[10];
+
+        let xPos = args[3],
+            yPos = args[4];
+
+        if (!isImage(new Uint8Array(input))) {
+            throw new OperationError("Invalid file type.");
+        }
+
+        let image;
+        try {
+            image = await jimp.read(input);
+        } catch (err) {
+            throw new OperationError(`Error loading image. (${err})`);
+        }
+        try {
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Adding text to image...");
+
+            const fontsMap = {};
+            const fonts = [
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/Roboto72White.fnt"),
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoBlack72White.fnt"),
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoMono72White.fnt"),
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoSlab72White.fnt")
+            ];
+
+            await Promise.all(fonts)
+                .then(fonts => {
+                    fontsMap.Roboto = fonts[0];
+                    fontsMap["Roboto Black"] = fonts[1];
+                    fontsMap["Roboto Mono"] = fonts[2];
+                    fontsMap["Roboto Slab"] = fonts[3];
+                });
+
+
+            // Make Webpack load the png font images
+            await Promise.all([
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/Roboto72White.png"),
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoSlab72White.png"),
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoMono72White.png"),
+                import(/* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoBlack72White.png")
+            ]);
+
+            const font = fontsMap[fontFace];
+
+            // LoadFont needs an absolute url, so append the font name to self.docURL
+            const jimpFont = await jimp.loadFont(self.docURL + "/" + font.default);
+
+            jimpFont.pages.forEach(function(page) {
+                if (page.bitmap) {
+                    // Adjust the RGB values of the image pages to change the font colour.
+                    const pageWidth = page.bitmap.width;
+                    const pageHeight = page.bitmap.height;
+                    for (let ix = 0; ix < pageWidth; ix++) {
+                        for (let iy = 0; iy < pageHeight; iy++) {
+                            const idx = (iy * pageWidth + ix) << 2;
+
+                            const newRed = page.bitmap.data[idx] - (255 - red);
+                            const newGreen = page.bitmap.data[idx + 1] - (255 - green);
+                            const newBlue = page.bitmap.data[idx + 2] - (255 - blue);
+                            const newAlpha = page.bitmap.data[idx + 3] - (255 - alpha);
+
+                            // Make sure the bitmap values don't go below 0 as that makes jimp very unhappy
+                            page.bitmap.data[idx] = (newRed > 0) ? newRed : 0;
+                            page.bitmap.data[idx + 1] = (newGreen > 0) ? newGreen : 0;
+                            page.bitmap.data[idx + 2] = (newBlue > 0) ? newBlue : 0;
+                            page.bitmap.data[idx + 3] = (newAlpha > 0) ? newAlpha : 0;
+                        }
+                    }
+                }
+            });
+
+            // Create a temporary image to hold the rendered text
+            const textImage = new jimp(jimp.measureText(jimpFont, text), jimp.measureTextHeight(jimpFont, text));
+            textImage.print(jimpFont, 0, 0, text);
+
+            // Scale the rendered text image to the correct size
+            const scaleFactor = size / 72;
+            if (size !== 1) {
+                // Use bicubic for decreasing size
+                if (size > 1) {
+                    textImage.scale(scaleFactor, jimp.RESIZE_BICUBIC);
+                } else {
+                    textImage.scale(scaleFactor, jimp.RESIZE_BILINEAR);
+                }
+            }
+
+            // If using the alignment options, calculate the pixel values AFTER the image has been scaled
+            switch (hAlign) {
+                case "Left":
+                    xPos = 0;
+                    break;
+                case "Center":
+                    xPos = (image.getWidth() / 2) - (textImage.getWidth() / 2);
+                    break;
+                case "Right":
+                    xPos = image.getWidth() - textImage.getWidth();
+                    break;
+            }
+
+            switch (vAlign) {
+                case "Top":
+                    yPos = 0;
+                    break;
+                case "Middle":
+                    yPos = (image.getHeight() / 2) - (textImage.getHeight() / 2);
+                    break;
+                case "Bottom":
+                    yPos = image.getHeight() - textImage.getHeight();
+                    break;
+            }
+
+            // Blit the rendered text image onto the original source image
+            image.blit(textImage, xPos, yPos);
+
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
+        } catch (err) {
+            throw new OperationError(`Error adding text to image. (${err})`);
+        }
+    }
+
+    /**
+     * Displays the blurred image using HTML for web apps
+     *
+     * @param {ArrayBuffer} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
+
+        const type = isImage(dataArray);
+        if (!type) {
+            throw new OperationError("Invalid file type.");
+        }
+
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
+    }
+
+}
+
+export default AddTextToImage;

src/core/operations/BLAKE2b.mjs

@@ -0,0 +1,79 @@
+/**
+ * @author h345983745
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import blakejs from "blakejs";
+import OperationError from "../errors/OperationError";
+import Utils from "../Utils";
+import { toBase64 } from "../lib/Base64";
+
+/**
+ * BLAKE2b operation
+ */
+class BLAKE2b extends Operation {
+
+    /**
+     * BLAKE2b constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "BLAKE2b";
+        this.module = "Hashing";
+        this.description = `Performs BLAKE2b hashing on the input.  
+        <br><br> BLAKE2b is a flavour of the BLAKE cryptographic hash function that is optimized for 64-bit platforms and produces digests of any size between 1 and 64 bytes.
+        <br><br> Supports the use of an optional key.`;
+        this.infoURL = "https://wikipedia.org/wiki/BLAKE_(hash_function)#BLAKE2b_algorithm";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "string";
+        this.args = [
+            {
+                "name": "Size",
+                "type": "option",
+                "value": ["512", "384", "256", "160", "128"]
+            }, {
+                "name": "Output Encoding",
+                "type": "option",
+                "value": ["Hex", "Base64", "Raw"]
+            }, {
+                "name": "Key",
+                "type": "toggleString",
+                "value": "",
+                "toggleValues": ["UTF8", "Decimal", "Base64", "Hex", "Latin1"]
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {string} The input having been hashed with BLAKE2b in the encoding format speicifed.
+     */
+    run(input, args) {
+        const [outSize, outFormat] = args;
+        let key = Utils.convertToByteArray(args[2].string || "", args[2].option);
+        if (key.length === 0) {
+            key = null;
+        } else if (key.length > 64) {
+            throw new OperationError(["Key cannot be greater than 64 bytes", "It is currently " + key.length + " bytes."].join("\n"));
+        }
+
+        input = new Uint8Array(input);
+        switch (outFormat) {
+            case "Hex":
+                return blakejs.blake2bHex(input, key, outSize / 8);
+            case "Base64":
+                return toBase64(blakejs.blake2b(input, key, outSize / 8));
+            case "Raw":
+                return Utils.arrayBufferToStr(blakejs.blake2b(input, key, outSize / 8).buffer);
+            default:
+                return new OperationError("Unsupported Output Type");
+        }
+    }
+
+}
+
+export default BLAKE2b;

src/core/operations/BLAKE2s.mjs

@@ -0,0 +1,80 @@
+/**
+ * @author h345983745
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import blakejs from "blakejs";
+import OperationError from "../errors/OperationError";
+import Utils from "../Utils";
+import { toBase64 } from "../lib/Base64";
+
+/**
+ * BLAKE2s Operation
+ */
+class BLAKE2s extends Operation {
+
+    /**
+     * BLAKE2s constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "BLAKE2s";
+        this.module = "Hashing";
+        this.description = `Performs BLAKE2s hashing on the input.  
+        <br><br>BLAKE2s is a flavour of the BLAKE cryptographic hash function that is optimized for 8- to 32-bit platforms and produces digests of any size between 1 and 32 bytes.
+        <br><br>Supports the use of an optional key.`;
+        this.infoURL = "https://wikipedia.org/wiki/BLAKE_(hash_function)#BLAKE2";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "string";
+        this.args = [
+            {
+                "name": "Size",
+                "type": "option",
+                "value": ["256", "160", "128"]
+            }, {
+                "name": "Output Encoding",
+                "type": "option",
+                "value": ["Hex", "Base64", "Raw"]
+            },
+            {
+                "name": "Key",
+                "type": "toggleString",
+                "value": "",
+                "toggleValues": ["UTF8", "Decimal", "Base64", "Hex", "Latin1"]
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {string} The input having been hashed with BLAKE2s in the encoding format speicifed.
+     */
+    run(input, args) {
+        const [outSize, outFormat] = args;
+        let key = Utils.convertToByteArray(args[2].string || "", args[2].option);
+        if (key.length === 0) {
+            key = null;
+        } else if (key.length > 32) {
+            throw new OperationError(["Key cannot be greater than 32 bytes", "It is currently " + key.length + " bytes."].join("\n"));
+        }
+
+        input = new Uint8Array(input);
+        switch (outFormat) {
+            case "Hex":
+                return blakejs.blake2sHex(input, key, outSize / 8);
+            case "Base64":
+                return toBase64(blakejs.blake2s(input, key, outSize / 8));
+            case "Raw":
+                return Utils.arrayBufferToStr(blakejs.blake2s(input, key, outSize / 8).buffer);
+            default:
+                return new OperationError("Unsupported Output Type");
+        }
+    }
+
+}
+
+export default BLAKE2s;

src/core/operations/BlurImage.mjs

@@ -9,6 +9,7 @@ import OperationError from "../errors/OperationError";
 import { isImage } from "../lib/FileType";
 import { toBase64 } from "../lib/Base64";
 import jimp from "jimp";
+import { gaussianBlur } from "../lib/ImageManipulation";
 
 /**
  * Blur Image operation
@@ -25,8 +26,8 @@ class BlurImage extends Operation {
         this.module = "Image";
         this.description = "Applies a blur effect to the image.<br><br>Gaussian blur is much slower than fast blur, but produces better results.";
         this.infoURL = "https://wikipedia.org/wiki/Gaussian_blur";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -44,37 +45,44 @@ class BlurImage extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [blurAmount, blurType] = args;
 
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
         try {
             switch (blurType){
                 case "Fast":
+                    if (ENVIRONMENT_IS_WORKER())
+                        self.sendStatusMessage("Fast blurring image...");
                     image.blur(blurAmount);
                     break;
                 case "Gaussian":
                     if (ENVIRONMENT_IS_WORKER())
-                        self.sendStatusMessage("Gaussian blurring image. This may take a while...");
-                    image.gaussian(blurAmount);
+                        self.sendStatusMessage("Gaussian blurring image...");
+                    image = gaussianBlur(image, blurAmount);
                     break;
             }
 
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error blurring image. (${err})`);
         }
@@ -83,18 +91,19 @@ class BlurImage extends Operation {
     /**
      * Displays the blurred image using HTML for web apps
      *
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/Bzip2Compress.mjs

@@ -0,0 +1,72 @@
+/**
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Bzip2 from "libbzip2-wasm";
+
+/**
+ * Bzip2 Compress operation
+ */
+class Bzip2Compress extends Operation {
+
+    /**
+     * Bzip2Compress constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Bzip2 Compress";
+        this.module = "Compression";
+        this.description = "Bzip2 is a compression library developed by Julian Seward (of GHC fame) that uses the Burrows-Wheeler algorithm. It only supports compressing single files and its compression is slow, however is more effective than Deflate (.gz & .zip).";
+        this.infoURL = "https://wikipedia.org/wiki/Bzip2";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
+        this.args = [
+            {
+                name: "Block size (100s of kb)",
+                type: "number",
+                value: 9,
+                min: 1,
+                max: 9
+            },
+            {
+                name: "Work factor",
+                type: "number",
+                value: 30
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {File}
+     */
+    run(input, args) {
+        const [blockSize, workFactor] = args;
+        if (input.byteLength <= 0) {
+            throw new OperationError("Please provide an input.");
+        }
+        if (ENVIRONMENT_IS_WORKER()) self.sendStatusMessage("Loading Bzip2...");
+        return new Promise((resolve, reject) => {
+            Bzip2().then(bzip2 => {
+                if (ENVIRONMENT_IS_WORKER()) self.sendStatusMessage("Compressing data...");
+                const inpArray = new Uint8Array(input);
+                const bzip2cc = bzip2.compressBZ2(inpArray, blockSize, workFactor);
+                if (bzip2cc.error !== 0) {
+                    reject(new OperationError(bzip2cc.error_msg));
+                } else {
+                    const output = bzip2cc.output;
+                    resolve(output.buffer.slice(output.byteOffset, output.byteLength + output.byteOffset));
+                }
+            });
+        });
+    }
+
+}
+
+export default Bzip2Compress;

src/core/operations/Bzip2Decompress.mjs

@@ -1,12 +1,12 @@
 /**
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2016
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
  * @license Apache-2.0
  */
 
 import Operation from "../Operation";
-import bzip2 from "../vendor/bzip2";
 import OperationError from "../errors/OperationError";
+import Bzip2 from "libbzip2-wasm";
 
 /**
  * Bzip2 Decompress operation
@@ -23,9 +23,15 @@ class Bzip2Decompress extends Operation {
         this.module = "Compression";
         this.description = "Decompresses data using the Bzip2 algorithm.";
         this.infoURL = "https://wikipedia.org/wiki/Bzip2";
-        this.inputType = "byteArray";
-        this.outputType = "string";
-        this.args = [];
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
+        this.args = [
+            {
+                name: "Use low-memory, slower decompression algorithm",
+                type: "boolean",
+                value: false
+            }
+        ];
         this.patterns = [
             {
                 "match": "^\\x42\\x5a\\x68",
@@ -41,14 +47,24 @@ class Bzip2Decompress extends Operation {
      * @returns {string}
      */
     run(input, args) {
-        const compressed = new Uint8Array(input);
-
-        try {
-            const bzip2Reader = bzip2.array(compressed);
-            return bzip2.simple(bzip2Reader);
-        } catch (err) {
-            throw new OperationError(err);
+        const [small] = args;
+        if (input.byteLength <= 0) {
+            throw new OperationError("Please provide an input.");
         }
+        if (ENVIRONMENT_IS_WORKER()) self.sendStatusMessage("Loading Bzip2...");
+        return new Promise((resolve, reject) => {
+            Bzip2().then(bzip2 => {
+                if (ENVIRONMENT_IS_WORKER()) self.sendStatusMessage("Decompressing data...");
+                const inpArray = new Uint8Array(input);
+                const bzip2cc = bzip2.decompressBZ2(inpArray, small ? 1 : 0);
+                if (bzip2cc.error !== 0) {
+                    reject(new OperationError(bzip2cc.error_msg));
+                } else {
+                    const output = bzip2cc.output;
+                    resolve(output.buffer.slice(output.byteOffset, output.byteLength + output.byteOffset));
+                }
+            });
+        });
     }
 
 }

src/core/operations/ContainImage.mjs

@@ -25,8 +25,8 @@ class ContainImage extends Operation {
         this.module = "Image";
         this.description = "Scales an image to the specified width and height, maintaining the aspect ratio. The image may be letterboxed.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -72,17 +72,22 @@ class ContainImage extends Operation {
                     "Bezier"
                 ],
                 defaultIndex: 1
+            },
+            {
+                name: "Opaque background",
+                type: "boolean",
+                value: true
             }
         ];
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
-        const [width, height, hAlign, vAlign, alg] = args;
+        const [width, height, hAlign, vAlign, alg, opaqueBg] = args;
 
         const resizeMap = {
             "Nearest Neighbour": jimp.RESIZE_NEAREST_NEIGHBOR,
@@ -101,13 +106,13 @@ class ContainImage extends Operation {
             "Bottom": jimp.VERTICAL_ALIGN_BOTTOM
         };
 
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -115,8 +120,20 @@ class ContainImage extends Operation {
             if (ENVIRONMENT_IS_WORKER())
                 self.sendStatusMessage("Containing image...");
             image.contain(width, height, alignMap[hAlign] | alignMap[vAlign], resizeMap[alg]);
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+
+            if (opaqueBg) {
+                const newImage = await jimp.read(width, height, 0x000000FF);
+                newImage.blit(image, 0, 0);
+                image = newImage;
+            }
+
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error containing image. (${err})`);
         }
@@ -124,18 +141,19 @@ class ContainImage extends Operation {
 
     /**
      * Displays the contained image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/ConvertImageFormat.mjs

@@ -0,0 +1,143 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import { isImage } from "../lib/FileType";
+import { toBase64 } from "../lib/Base64";
+import jimp from "jimp";
+
+/**
+ * Convert Image Format operation
+ */
+class ConvertImageFormat extends Operation {
+
+    /**
+     * ConvertImageFormat constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Convert Image Format";
+        this.module = "Image";
+        this.description = "Converts an image between different formats. Supported formats:<br><ul><li>Joint Photographic Experts Group (JPEG)</li><li>Portable Network Graphics (PNG)</li><li>Bitmap (BMP)</li><li>Tagged Image File Format (TIFF)</li></ul><br>Note: GIF files are supported for input, but cannot be outputted.";
+        this.infoURL = "https://wikipedia.org/wiki/Image_file_formats";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Output Format",
+                type: "option",
+                value: [
+                    "JPEG",
+                    "PNG",
+                    "BMP",
+                    "TIFF"
+                ]
+            },
+            {
+                name: "JPEG Quality",
+                type: "number",
+                value: 80,
+                min: 1,
+                max: 100
+            },
+            {
+                name: "PNG Filter Type",
+                type: "option",
+                value: [
+                    "Auto",
+                    "None",
+                    "Sub",
+                    "Up",
+                    "Average",
+                    "Paeth"
+                ]
+            },
+            {
+                name: "PNG Deflate Level",
+                type: "number",
+                value: 9,
+                min: 0,
+                max: 9
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    async run(input, args) {
+        const [format, jpegQuality, pngFilterType, pngDeflateLevel] = args;
+        const formatMap = {
+            "JPEG": jimp.MIME_JPEG,
+            "PNG": jimp.MIME_PNG,
+            "BMP": jimp.MIME_BMP,
+            "TIFF": jimp.MIME_TIFF
+        };
+
+        const pngFilterMap = {
+            "Auto": jimp.PNG_FILTER_AUTO,
+            "None": jimp.PNG_FILTER_NONE,
+            "Sub": jimp.PNG_FILTER_SUB,
+            "Up": jimp.PNG_FILTER_UP,
+            "Average": jimp.PNG_FILTER_AVERAGE,
+            "Paeth": jimp.PNG_FILTER_PATH // Incorrect spelling in Jimp library
+        };
+
+        const mime = formatMap[format];
+
+        if (!isImage(new Uint8Array(input))) {
+            throw new OperationError("Invalid file format.");
+        }
+        let image;
+        try {
+            image = await jimp.read(input);
+        } catch (err) {
+            throw new OperationError(`Error opening image file. (${err})`);
+        }
+        try {
+            switch (format) {
+                case "JPEG":
+                    image.quality(jpegQuality);
+                    break;
+                case "PNG":
+                    image.filterType(pngFilterMap[pngFilterType]);
+                    image.deflateLevel(pngDeflateLevel);
+                    break;
+            }
+
+            const imageBuffer = await image.getBufferAsync(mime);
+            return imageBuffer.buffer;
+        } catch (err) {
+            throw new OperationError(`Error converting image format. (${err})`);
+        }
+    }
+
+    /**
+     * Displays the converted image using HTML for web apps
+     *
+     * @param {ArrayBuffer} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
+
+        const type = isImage(dataArray);
+        if (!type) {
+            throw new OperationError("Invalid file type.");
+        }
+
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
+    }
+
+}
+
+export default ConvertImageFormat;

src/core/operations/CoverImage.mjs

@@ -25,8 +25,8 @@ class CoverImage extends Operation {
         this.module = "Image";
         this.description = "Scales the image to the given width and height, keeping the aspect ratio. The image may be clipped.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -77,7 +77,7 @@ class CoverImage extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
@@ -101,13 +101,13 @@ class CoverImage extends Operation {
             "Bottom": jimp.VERTICAL_ALIGN_BOTTOM
         };
 
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -115,8 +115,13 @@ class CoverImage extends Operation {
             if (ENVIRONMENT_IS_WORKER())
                 self.sendStatusMessage("Covering image...");
             image.cover(width, height, alignMap[hAlign] | alignMap[vAlign], resizeMap[alg]);
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error covering image. (${err})`);
         }
@@ -124,18 +129,19 @@ class CoverImage extends Operation {
 
     /**
      * Displays the covered image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/CropImage.mjs

@@ -25,8 +25,8 @@ class CropImage extends Operation {
         this.module = "Image";
         this.description = "Crops an image to the specified region, or automatically crops edges.<br><br><b><u>Autocrop</u></b><br>Automatically crops same-colour borders from the image.<br><br><u>Autocrop tolerance</u><br>A percentage value for the tolerance of colour difference between pixels.<br><br><u>Only autocrop frames</u><br>Only crop real frames (all sides must have the same border)<br><br><u>Symmetric autocrop</u><br>Force autocrop to be symmetric (top/bottom and left/right are cropped by the same amount)<br><br><u>Autocrop keep border</u><br>The number of pixels of border to leave around the image.";
         this.infoURL = "https://wikipedia.org/wiki/Cropping_(image)";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -86,19 +86,19 @@ class CropImage extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [xPos, yPos, width, height, autocrop, autoTolerance, autoFrames, autoSymmetric, autoBorder] = args;
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -116,8 +116,13 @@ class CropImage extends Operation {
                 image.crop(xPos, yPos, width, height);
             }
 
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error cropping image. (${err})`);
         }
@@ -125,18 +130,19 @@ class CropImage extends Operation {
 
     /**
      * Displays the cropped image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/DitherImage.mjs

@@ -25,25 +25,25 @@ class DitherImage extends Operation {
         this.module = "Image";
         this.description = "Apply a dither effect to an image.";
         this.infoURL = "https://wikipedia.org/wiki/Dither";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [];
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -51,8 +51,14 @@ class DitherImage extends Operation {
             if (ENVIRONMENT_IS_WORKER())
                 self.sendStatusMessage("Applying dither to image...");
             image.dither565();
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error applying dither to image. (${err})`);
         }
@@ -60,18 +66,19 @@ class DitherImage extends Operation {
 
     /**
      * Displays the dithered image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/Entropy.mjs

@@ -4,8 +4,13 @@
  * @license Apache-2.0
  */
 
+import * as d3temp from "d3";
+import * as nodomtemp from "nodom";
+
 import Operation from "../Operation";
-import Utils from "../Utils";
+
+const d3 = d3temp.default ? d3temp.default : d3temp;
+const nodom = nodomtemp.default ? nodomtemp.default: nodomtemp;
 
 /**
  * Entropy operation
@@ -19,30 +24,45 @@ class Entropy extends Operation {
         super();
 
         this.name = "Entropy";
-        this.module = "Default";
+        this.module = "Charts";
         this.description = "Shannon Entropy, in the context of information theory, is a measure of the rate at which information is produced by a source of data. It can be used, in a broad sense, to detect whether data is likely to be structured or unstructured. 8 is the maximum, representing highly unstructured, 'random' data. English language text usually falls somewhere between 3.5 and 5. Properly encrypted or compressed data should have an entropy of over 7.5.";
         this.infoURL = "https://wikipedia.org/wiki/Entropy_(information_theory)";
-        this.inputType = "byteArray";
-        this.outputType = "number";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "json";
         this.presentType = "html";
-        this.args = [];
+        this.args = [
+            {
+                "name": "Visualisation",
+                "type": "option",
+                "value": ["Shannon scale", "Histogram (Bar)", "Histogram (Line)", "Curve", "Image"]
+            }
+        ];
     }
 
     /**
-     * @param {byteArray} input
-     * @param {Object[]} args
+     * Calculates the frequency of bytes in the input.
+     *
+     * @param {Uint8Array} input
      * @returns {number}
      */
-    run(input, args) {
+    calculateShannonEntropy(input) {
         const prob = [],
-            uniques = input.unique(),
-            str = Utils.byteArrayToChars(input);
-        let i;
+            occurrences = new Array(256).fill(0);
 
-        for (i = 0; i < uniques.length; i++) {
-            prob.push(str.count(Utils.chr(uniques[i])) / input.length);
+        // Count occurrences of each byte in the input
+        let i;
+        for (i = 0; i < input.length; i++) {
+            occurrences[input[i]]++;
         }
 
+        // Store probability list
+        for (i = 0; i < occurrences.length; i++) {
+            if (occurrences[i] > 0) {
+                prob.push(occurrences[i] / input.length);
+            }
+        }
+
+        // Calculate Shannon entropy
         let entropy = 0,
             p;
 
@@ -54,44 +74,357 @@ class Entropy extends Operation {
         return -entropy;
     }
 
+    /**
+     * Calculates the scanning entropy of the input
+     *
+     * @param {Uint8Array} inputBytes
+     * @returns {Object}
+     */
+    calculateScanningEntropy(inputBytes) {
+        const entropyData = [];
+        const binWidth = inputBytes.length < 256 ? 8 : 256;
+
+        for (let bytePos = 0; bytePos < inputBytes.length; bytePos += binWidth) {
+            const block = inputBytes.slice(bytePos, bytePos+binWidth);
+            entropyData.push(this.calculateShannonEntropy(block));
+        }
+
+        return { entropyData, binWidth };
+    }
+
+    /**
+     * Calculates the frequency of bytes in the input.
+     *
+     * @param {object} svg
+     * @param {function} xScale
+     * @param {function} yScale
+     * @param {integer} svgHeight
+     * @param {integer} svgWidth
+     * @param {object} margins
+     * @param {string} xTitle
+     * @param {string} yTitle
+     */
+    createAxes(svg, xScale, yScale, svgHeight, svgWidth, margins, title, xTitle, yTitle) {
+        // Axes
+        const yAxis = d3.axisLeft()
+            .scale(yScale);
+
+        const xAxis = d3.axisBottom()
+            .scale(xScale);
+
+        svg.append("g")
+            .attr("transform", `translate(0, ${svgHeight - margins.bottom})`)
+            .call(xAxis);
+
+        svg.append("g")
+            .attr("transform", `translate(${margins.left},0)`)
+            .call(yAxis);
+
+        // Axes labels
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("y", 0 - margins.left)
+            .attr("x", 0 - (svgHeight / 2))
+            .attr("dy", "1em")
+            .style("text-anchor", "middle")
+            .text(yTitle);
+
+        svg.append("text")
+            .attr("transform", `translate(${svgWidth / 2}, ${svgHeight - margins.bottom + 40})`)
+            .style("text-anchor", "middle")
+            .text(xTitle);
+
+        // Add title
+        svg.append("text")
+            .attr("transform", `translate(${svgWidth / 2}, ${margins.top - 10})`)
+            .style("text-anchor", "middle")
+            .text(title);
+    }
+
+    /**
+     * Calculates the frequency of bytes in the input.
+     *
+     * @param {Uint8Array} inputBytes
+     * @returns {number[]}
+     */
+    calculateByteFrequency(inputBytes) {
+        const freq = new Array(256).fill(0);
+        if (inputBytes.length === 0) return freq;
+
+        // Count occurrences of each byte in the input
+        let i;
+        for (i = 0; i < inputBytes.length; i++) {
+            freq[inputBytes[i]]++;
+        }
+
+        for (i = 0; i < freq.length; i++) {
+            freq[i] = freq[i] / inputBytes.length;
+        }
+
+        return freq;
+    }
+
+    /**
+     * Calculates the frequency of bytes in the input.
+     *
+     * @param {number[]} byteFrequency
+     * @returns {HTML}
+     */
+    createByteFrequencyLineHistogram(byteFrequency) {
+        const margins = { top: 30, right: 20, bottom: 50, left: 30 };
+
+        const svgWidth = 500,
+            svgHeight = 500;
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+
+        const yScale = d3.scaleLinear()
+            .domain([0, d3.max(byteFrequency, d => d)])
+            .range([svgHeight - margins.bottom, margins.top]);
+
+        const xScale = d3.scaleLinear()
+            .domain([0, byteFrequency.length - 1])
+            .range([margins.left, svgWidth - margins.right]);
+
+        const line = d3.line()
+            .x((_, i) => xScale(i))
+            .y(d => yScale(d))
+            .curve(d3.curveMonotoneX);
+
+        svg.append("path")
+            .datum(byteFrequency)
+            .attr("fill", "none")
+            .attr("stroke", "steelblue")
+            .attr("d", line);
+
+        this.createAxes(svg, xScale, yScale, svgHeight, svgWidth, margins, "", "Byte", "Byte Frequency");
+
+        return svg._groups[0][0].outerHTML;
+    }
+
+    /**
+     * Creates a byte frequency histogram
+     *
+     * @param {number[]} byteFrequency
+     * @returns {HTML}
+     */
+    createByteFrequencyBarHistogram(byteFrequency) {
+        const margins = { top: 30, right: 20, bottom: 50, left: 30 };
+
+        const svgWidth = 500,
+            svgHeight = 500,
+            binWidth = 1;
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+
+        const yExtent = d3.extent(byteFrequency, d => d);
+        const yScale = d3.scaleLinear()
+            .domain(yExtent)
+            .range([svgHeight - margins.bottom, margins.top]);
+
+        const xScale = d3.scaleLinear()
+            .domain([0, byteFrequency.length - 1])
+            .range([margins.left - binWidth, svgWidth - margins.right]);
+
+        svg.selectAll("rect")
+            .data(byteFrequency)
+            .enter().append("rect")
+            .attr("x", (_, i) => xScale(i) + binWidth)
+            .attr("y", dataPoint => yScale(dataPoint))
+            .attr("width", binWidth)
+            .attr("height", dataPoint => yScale(yExtent[0]) - yScale(dataPoint))
+            .attr("fill", "blue");
+
+        this.createAxes(svg, xScale, yScale, svgHeight, svgWidth, margins, "", "Byte", "Byte Frequency");
+
+        return svg._groups[0][0].outerHTML;
+    }
+
+    /**
+     * Creates a byte frequency histogram
+     *
+     * @param {number[]} entropyData
+     * @returns {HTML}
+     */
+    createEntropyCurve(entropyData) {
+        const margins = { top: 30, right: 20, bottom: 50, left: 30 };
+
+        const svgWidth = 500,
+            svgHeight = 500;
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+
+        const yScale = d3.scaleLinear()
+            .domain([0, d3.max(entropyData, d => d)])
+            .range([svgHeight - margins.bottom, margins.top]);
+
+        const xScale = d3.scaleLinear()
+            .domain([0, entropyData.length])
+            .range([margins.left, svgWidth - margins.right]);
+
+        const line = d3.line()
+            .x((_, i) => xScale(i))
+            .y(d => yScale(d))
+            .curve(d3.curveMonotoneX);
+
+        if (entropyData.length > 0) {
+            svg.append("path")
+                .datum(entropyData)
+                .attr("d", line);
+
+            svg.selectAll("path").attr("fill", "none").attr("stroke", "steelblue");
+        }
+
+        this.createAxes(svg, xScale, yScale, svgHeight, svgWidth, margins, "Scanning Entropy", "Block", "Entropy");
+
+        return svg._groups[0][0].outerHTML;
+    }
+
+    /**
+     * Creates an image representation of the entropy
+     *
+     * @param {number[]} entropyData
+     * @returns {HTML}
+     */
+    createEntropyImage(entropyData) {
+        const svgHeight = 100,
+            svgWidth = 100,
+            cellSize = 1,
+            nodes = [];
+
+        for (let i = 0; i < entropyData.length; i++) {
+            nodes.push({
+                x: i % svgWidth,
+                y: Math.floor(i / svgWidth),
+                entropy: entropyData[i]
+            });
+        }
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+
+        const greyScale = d3.scaleLinear()
+            .domain([0, d3.max(entropyData, d => d)])
+            .range(["#000000", "#FFFFFF"])
+            .interpolate(d3.interpolateRgb);
+
+        svg
+            .selectAll("rect")
+            .data(nodes)
+            .enter().append("rect")
+            .attr("x", d => d.x * cellSize)
+            .attr("y", d => d.y * cellSize)
+            .attr("width", cellSize)
+            .attr("height", cellSize)
+            .style("fill", d => greyScale(d.entropy));
+
+        return svg._groups[0][0].outerHTML;
+    }
+
     /**
      * Displays the entropy as a scale bar for web apps.
      *
      * @param {number} entropy
-     * @returns {html}
+     * @returns {HTML}
      */
-    present(entropy) {
+    createShannonEntropyVisualization(entropy) {
         return `Shannon entropy: ${entropy}
-<br><canvas id='chart-area'></canvas><br>
-- 0 represents no randomness (i.e. all the bytes in the data have the same value) whereas 8, the maximum, represents a completely random string.
-- Standard English text usually falls somewhere between 3.5 and 5.
-- Properly encrypted or compressed data of a reasonable length should have an entropy of over 7.5.
+        <br><canvas id='chart-area'></canvas><br>
+        - 0 represents no randomness (i.e. all the bytes in the data have the same value) whereas 8, the maximum, represents a completely random string.
+        - Standard English text usually falls somewhere between 3.5 and 5.
+        - Properly encrypted or compressed data of a reasonable length should have an entropy of over 7.5.
 
-The following results show the entropy of chunks of the input data. Chunks with particularly high entropy could suggest encrypted or compressed sections.
+        The following results show the entropy of chunks of the input data. Chunks with particularly high entropy could suggest encrypted or compressed sections.
 
-<br><script>
-    var canvas = document.getElementById("chart-area"),
-        parentRect = canvas.parentNode.getBoundingClientRect(),
-        entropy = ${entropy},
-        height = parentRect.height * 0.25;
+        <br><script>
+            var canvas = document.getElementById("chart-area"),
+                parentRect = canvas.parentNode.getBoundingClientRect(),
+                entropy = ${entropy},
+                height = parentRect.height * 0.25;
 
-    canvas.width = parentRect.width * 0.95;
-    canvas.height = height > 150 ? 150 : height;
+            canvas.width = parentRect.width * 0.95;
+            canvas.height = height > 150 ? 150 : height;
 
-    CanvasComponents.drawScaleBar(canvas, entropy, 8, [
-        {
-            label: "English text",
-            min: 3.5,
-            max: 5
-        },{
-            label: "Encrypted/compressed",
-            min: 7.5,
-            max: 8
-        }
-    ]);
-</script>`;
+            CanvasComponents.drawScaleBar(canvas, entropy, 8, [
+                {
+                    label: "English text",
+                    min: 3.5,
+                    max: 5
+                },{
+                    label: "Encrypted/compressed",
+                    min: 7.5,
+                    max: 8
+                }
+            ]);
+        </script>`;
     }
 
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {json}
+     */
+    run(input, args) {
+        const visualizationType = args[0];
+        input = new Uint8Array(input);
+
+        switch (visualizationType) {
+            case "Histogram (Bar)":
+            case "Histogram (Line)":
+                return this.calculateByteFrequency(input);
+            case "Curve":
+            case "Image":
+                return this.calculateScanningEntropy(input).entropyData;
+            case "Shannon scale":
+            default:
+                return this.calculateShannonEntropy(input);
+        }
+    }
+
+    /**
+     * Displays the entropy in a visualisation for web apps.
+     *
+     * @param {json} entropyData
+     * @param {Object[]} args
+     * @returns {html}
+     */
+    present(entropyData, args) {
+        const visualizationType = args[0];
+
+        switch (visualizationType) {
+            case "Histogram (Bar)":
+                return this.createByteFrequencyBarHistogram(entropyData);
+            case "Histogram (Line)":
+                return this.createByteFrequencyLineHistogram(entropyData);
+            case "Curve":
+                return this.createEntropyCurve(entropyData);
+            case "Image":
+                return this.createEntropyImage(entropyData);
+            case "Shannon scale":
+            default:
+                return this.createShannonEntropyVisualization(entropyData);
+        }
+    }
 }
 
 export default Entropy;

src/core/operations/ExtractFiles.mjs

@@ -23,7 +23,7 @@ class ExtractFiles extends Operation {
 
         this.name = "Extract Files";
         this.module = "Default";
-        this.description = "TODO";
+        this.description = "Performs file carving to attempt to extract files from the input.<br><br>This operation is currently capable of carving out the following formats:<ul><li>JPG</li><li>EXE</li><li>ZIP</li><li>PDF</li><li>PNG</li><li>BMP</li><li>FLV</li><li>RTF</li><li>DOCX, PPTX, XLSX</li><li>EPUB</li><li>GZIP</li><li>ZLIB</li><li>ELF, BIN, AXF, O, PRX, SO</li></ul>";
         this.infoURL = "https://forensicswiki.org/wiki/File_Carving";
         this.inputType = "ArrayBuffer";
         this.outputType = "List<File>";

src/core/operations/FlipImage.mjs

@@ -25,8 +25,8 @@ class FlipImage extends Operation {
         this.module = "Image";
         this.description = "Flips an image along its X or Y axis.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -38,19 +38,19 @@ class FlipImage extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [flipAxis] = args;
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid input file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -66,8 +66,13 @@ class FlipImage extends Operation {
                     break;
             }
 
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error flipping image. (${err})`);
         }
@@ -75,18 +80,19 @@ class FlipImage extends Operation {
 
     /**
      * Displays the flipped image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/GenerateAllHashes.mjs

@@ -28,6 +28,8 @@ import Fletcher64Checksum from "./Fletcher64Checksum";
 import Adler32Checksum from "./Adler32Checksum";
 import CRC16Checksum from "./CRC16Checksum";
 import CRC32Checksum from "./CRC32Checksum";
+import BLAKE2b from "./BLAKE2b";
+import BLAKE2s from "./BLAKE2s";
 
 /**
  * Generate all hashes operation
@@ -86,6 +88,14 @@ class GenerateAllHashes extends Operation {
                 "\nWhirlpool-0: " + (new Whirlpool()).run(arrayBuffer, ["Whirlpool-0"]) +
                 "\nWhirlpool-T: " + (new Whirlpool()).run(arrayBuffer, ["Whirlpool-T"]) +
                 "\nWhirlpool:   " + (new Whirlpool()).run(arrayBuffer, ["Whirlpool"]) +
+                "\nBLAKE2b-128: " + (new BLAKE2b).run(arrayBuffer, ["128", "Hex", {string: "", option: "UTF8"}]) +
+                "\nBLAKE2b-160: " + (new BLAKE2b).run(arrayBuffer, ["160", "Hex", {string: "", option: "UTF8"}]) +
+                "\nBLAKE2b-256: " + (new BLAKE2b).run(arrayBuffer, ["256", "Hex", {string: "", option: "UTF8"}]) +
+                "\nBLAKE2b-384: " + (new BLAKE2b).run(arrayBuffer, ["384", "Hex", {string: "", option: "UTF8"}]) +
+                "\nBLAKE2b-512: " + (new BLAKE2b).run(arrayBuffer, ["512", "Hex", {string: "", option: "UTF8"}]) +
+                "\nBLAKE2s-128: " + (new BLAKE2s).run(arrayBuffer, ["128", "Hex", {string: "", option: "UTF8"}]) +
+                "\nBLAKE2s-160: " + (new BLAKE2s).run(arrayBuffer, ["160", "Hex", {string: "", option: "UTF8"}]) +
+                "\nBLAKE2s-256: " + (new BLAKE2s).run(arrayBuffer, ["256", "Hex", {string: "", option: "UTF8"}]) +
                 "\nSSDEEP:      " + (new SSDEEP()).run(str) +
                 "\nCTPH:        " + (new CTPH()).run(str) +
                 "\n\nChecksums:" +

src/core/operations/GenerateQRCode.mjs

@@ -6,7 +6,7 @@
 
 import Operation from "../Operation";
 import OperationError from "../errors/OperationError";
-import qr from "qr-image";
+import { generateQrCode } from "../lib/QRCode";
 import { toBase64 } from "../lib/Base64";
 import { isImage } from "../lib/FileType";
 import Utils from "../Utils";
@@ -27,7 +27,7 @@ class GenerateQRCode extends Operation {
         this.description = "Generates a Quick Response (QR) code from the input text.<br><br>A QR code is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached.";
         this.infoURL = "https://wikipedia.org/wiki/QR_code";
         this.inputType = "string";
-        this.outputType = "byteArray";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -38,12 +38,14 @@ class GenerateQRCode extends Operation {
             {
                 "name": "Module size (px)",
                 "type": "number",
-                "value": 5
+                "value": 5,
+                "min": 1
             },
             {
                 "name": "Margin (num modules)",
                 "type": "number",
-                "value": 2
+                "value": 2,
+                "min": 0
             },
             {
                 "name": "Error correction",
@@ -57,61 +59,34 @@ class GenerateQRCode extends Operation {
     /**
      * @param {string} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {ArrayBuffer}
      */
     run(input, args) {
         const [format, size, margin, errorCorrection] = args;
 
-        // Create new QR image from the input data, and convert it to a buffer
-        const qrImage = qr.imageSync(input, {
-            type: format,
-            size: size,
-            margin: margin,
-            "ec_level": errorCorrection.charAt(0).toUpperCase()
-        });
-
-        if (qrImage == null) {
-            throw new OperationError("Error generating QR code.");
-        }
-
-        switch (format) {
-            case "SVG":
-            case "EPS":
-            case "PDF":
-                return [...Buffer.from(qrImage)];
-            case "PNG":
-                // Return the QR image buffer as a byte array
-                return [...qrImage];
-            default:
-                throw new OperationError("Unsupported QR code format.");
-        }
+        return generateQrCode(input, format, size, margin, errorCorrection);
     }
 
     /**
      * Displays the QR image using HTML for web apps
      *
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data, args) {
-        if (!data.length) return "";
-
-        const [format] = args;
-
+        if (!data.byteLength && !data.length) return "";
+        const dataArray = new Uint8Array(data),
+            [format] = args;
         if (format === "PNG") {
-            let dataURI = "data:";
-            const mime = isImage(data);
-            if (mime){
-                dataURI += mime + ";";
-            } else {
-                throw new OperationError("Invalid PNG file generated by QR image");
+            const type = isImage(dataArray);
+            if (!type) {
+                throw new OperationError("Invalid file type.");
             }
-            dataURI += "base64," + toBase64(data);
 
-            return `<img src="${dataURI}">`;
+            return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
         }
 
-        return Utils.byteArrayToChars(data);
+        return Utils.arrayBufferToStr(data);
     }
 
 }

src/core/operations/HTMLToText.mjs

@@ -0,0 +1,41 @@
+/**
+ * @author tlwr [toby@toby.codes]
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+
+/**
+ * HTML To Text operation
+ */
+class HTMLToText extends Operation {
+
+    /**
+     * HTMLToText constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "HTML To Text";
+        this.module = "Default";
+        this.description = "Converts an HTML output from an operation to a readable string instead of being rendered in the DOM.";
+        this.infoURL = "";
+        this.inputType = "html";
+        this.outputType = "string";
+        this.args = [];
+    }
+
+    /**
+     * @param {html} input
+     * @param {Object[]} args
+     * @returns {string}
+     */
+    run(input, args) {
+        return input;
+    }
+
+}
+
+export default HTMLToText;

src/core/operations/HeatmapChart.mjs

@@ -0,0 +1,266 @@
+/**
+ * @author tlwr [toby@toby.codes]
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import * as d3temp from "d3";
+import * as nodomtemp from "nodom";
+import { getScatterValues, RECORD_DELIMITER_OPTIONS, COLOURS, FIELD_DELIMITER_OPTIONS } from "../lib/Charts";
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Utils from "../Utils";
+
+const d3 = d3temp.default ? d3temp.default : d3temp;
+const nodom = nodomtemp.default ? nodomtemp.default: nodomtemp;
+
+/**
+ * Heatmap chart operation
+ */
+class HeatmapChart extends Operation {
+
+    /**
+     * HeatmapChart constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Heatmap chart";
+        this.module = "Charts";
+        this.description = "A heatmap is a graphical representation of data where the individual values contained in a matrix are represented as colors.";
+        this.infoURL = "https://wikipedia.org/wiki/Heat_map";
+        this.inputType = "string";
+        this.outputType = "html";
+        this.args = [
+            {
+                name: "Record delimiter",
+                type: "option",
+                value: RECORD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "Field delimiter",
+                type: "option",
+                value: FIELD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "Number of vertical bins",
+                type: "number",
+                value: 25,
+            },
+            {
+                name: "Number of horizontal bins",
+                type: "number",
+                value: 25,
+            },
+            {
+                name: "Use column headers as labels",
+                type: "boolean",
+                value: true,
+            },
+            {
+                name: "X label",
+                type: "string",
+                value: "",
+            },
+            {
+                name: "Y label",
+                type: "string",
+                value: "",
+            },
+            {
+                name: "Draw bin edges",
+                type: "boolean",
+                value: false,
+            },
+            {
+                name: "Min colour value",
+                type: "string",
+                value: COLOURS.min,
+            },
+            {
+                name: "Max colour value",
+                type: "string",
+                value: COLOURS.max,
+            },
+        ];
+    }
+
+    /**
+     * Heatmap chart operation.
+     *
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {html}
+     */
+    run(input, args) {
+        const recordDelimiter = Utils.charRep(args[0]),
+            fieldDelimiter = Utils.charRep(args[1]),
+            vBins = args[2],
+            hBins = args[3],
+            columnHeadingsAreIncluded = args[4],
+            drawEdges = args[7],
+            minColour = args[8],
+            maxColour = args[9],
+            dimension = 500;
+        if (vBins <= 0) throw new OperationError("Number of vertical bins must be greater than 0");
+        if (hBins <= 0) throw new OperationError("Number of horizontal bins must be greater than 0");
+
+        let xLabel = args[5],
+            yLabel = args[6];
+        const { headings, values } = getScatterValues(
+            input,
+            recordDelimiter,
+            fieldDelimiter,
+            columnHeadingsAreIncluded
+        );
+
+        if (headings) {
+            xLabel = headings.x;
+            yLabel = headings.y;
+        }
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${dimension} ${dimension}`);
+
+        const margin = {
+                top: 10,
+                right: 0,
+                bottom: 40,
+                left: 30,
+            },
+            width = dimension - margin.left - margin.right,
+            height = dimension - margin.top - margin.bottom,
+            binWidth = width / hBins,
+            binHeight = height/ vBins,
+            marginedSpace = svg.append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+        const bins = this.getHeatmapPacking(values, vBins, hBins),
+            maxCount = Math.max(...bins.map(row => {
+                const lengths = row.map(cell => cell.length);
+                return Math.max(...lengths);
+            }));
+
+        const xExtent = d3.extent(values, d => d[0]),
+            yExtent = d3.extent(values, d => d[1]);
+
+        const xAxis = d3.scaleLinear()
+            .domain(xExtent)
+            .range([0, width]);
+        const yAxis = d3.scaleLinear()
+            .domain(yExtent)
+            .range([height, 0]);
+
+        const colour = d3.scaleSequential(d3.interpolateLab(minColour, maxColour))
+            .domain([0, maxCount]);
+
+        marginedSpace.append("clipPath")
+            .attr("id", "clip")
+            .append("rect")
+            .attr("width", width)
+            .attr("height", height);
+
+        marginedSpace.append("g")
+            .attr("class", "bins")
+            .attr("clip-path", "url(#clip)")
+            .selectAll("g")
+            .data(bins)
+            .enter()
+            .append("g")
+            .selectAll("rect")
+            .data(d => d)
+            .enter()
+            .append("rect")
+            .attr("x", (d) => binWidth * d.x)
+            .attr("y", (d) => (height - binHeight * (d.y + 1)))
+            .attr("width", binWidth)
+            .attr("height", binHeight)
+            .attr("fill", (d) => colour(d.length))
+            .attr("stroke", drawEdges ? "rgba(0, 0, 0, 0.5)" : "none")
+            .attr("stroke-width", drawEdges ? "0.5" : "none")
+            .append("title")
+            .text(d => {
+                const count = d.length,
+                    perc = 100.0 * d.length / values.length,
+                    tooltip = `Count: ${count}\n
+                               Percentage: ${perc.toFixed(2)}%\n
+                    `.replace(/\s{2,}/g, "\n");
+                return tooltip;
+            });
+
+        marginedSpace.append("g")
+            .attr("class", "axis axis--y")
+            .call(d3.axisLeft(yAxis).tickSizeOuter(-width));
+
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("y", -margin.left)
+            .attr("x", -(height / 2))
+            .attr("dy", "1em")
+            .style("text-anchor", "middle")
+            .text(yLabel);
+
+        marginedSpace.append("g")
+            .attr("class", "axis axis--x")
+            .attr("transform", "translate(0," + height + ")")
+            .call(d3.axisBottom(xAxis).tickSizeOuter(-height));
+
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", dimension)
+            .style("text-anchor", "middle")
+            .text(xLabel);
+
+        return svg._groups[0][0].outerHTML;
+    }
+
+    /**
+     * Packs a list of x, y coordinates into a number of bins for use in a heatmap.
+     *
+     * @param {Object[]} points
+     * @param {number} number of vertical bins
+     * @param {number} number of horizontal bins
+     * @returns {Object[]} a list of bins (each bin is an Array) with x y coordinates, filled with the points
+     */
+    getHeatmapPacking(values, vBins, hBins) {
+        const xBounds = d3.extent(values, d => d[0]),
+            yBounds = d3.extent(values, d => d[1]),
+            bins = [];
+
+        if (xBounds[0] === xBounds[1]) throw "Cannot pack points. There is no difference between the minimum and maximum X coordinate.";
+        if (yBounds[0] === yBounds[1]) throw "Cannot pack points. There is no difference between the minimum and maximum Y coordinate.";
+
+        for (let y = 0; y < vBins; y++) {
+            bins.push([]);
+            for (let x = 0; x < hBins; x++) {
+                const item = [];
+                item.y = y;
+                item.x = x;
+
+                bins[y].push(item);
+            } // x
+        } // y
+
+        const epsilon = 0.000000001; // This is to clamp values that are exactly the maximum;
+
+        values.forEach(v => {
+            const fractionOfY = (v[1] - yBounds[0]) / ((yBounds[1] + epsilon) - yBounds[0]),
+                fractionOfX = (v[0] - xBounds[0]) / ((xBounds[1] + epsilon) - xBounds[0]),
+                y = Math.floor(vBins * fractionOfY),
+                x = Math.floor(hBins * fractionOfX);
+
+            bins[y][x].push({x: v[0], y: v[1]});
+        });
+
+        return bins;
+    }
+
+}
+
+export default HeatmapChart;

src/core/operations/HexDensityChart.mjs

@@ -0,0 +1,296 @@
+/**
+ * @author tlwr [toby@toby.codes]
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import * as d3temp from "d3";
+import * as d3hexbintemp from "d3-hexbin";
+import * as nodomtemp from "nodom";
+import { getScatterValues, RECORD_DELIMITER_OPTIONS, COLOURS, FIELD_DELIMITER_OPTIONS } from "../lib/Charts";
+
+import Operation from "../Operation";
+import Utils from "../Utils";
+
+const d3 = d3temp.default ? d3temp.default : d3temp;
+const d3hexbin = d3hexbintemp.default ? d3hexbintemp.default : d3hexbintemp;
+const nodom = nodomtemp.default ? nodomtemp.default: nodomtemp;
+
+
+/**
+ * Hex Density chart operation
+ */
+class HexDensityChart extends Operation {
+
+    /**
+     * HexDensityChart constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Hex Density chart";
+        this.module = "Charts";
+        this.description = "Hex density charts are used in a similar way to scatter charts, however rather than rendering tens of thousands of points, it groups the points into a few hundred hexagons to show the distribution.";
+        this.inputType = "string";
+        this.outputType = "html";
+        this.args = [
+            {
+                name: "Record delimiter",
+                type: "option",
+                value: RECORD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "Field delimiter",
+                type: "option",
+                value: FIELD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "Pack radius",
+                type: "number",
+                value: 25,
+            },
+            {
+                name: "Draw radius",
+                type: "number",
+                value: 15,
+            },
+            {
+                name: "Use column headers as labels",
+                type: "boolean",
+                value: true,
+            },
+            {
+                name: "X label",
+                type: "string",
+                value: "",
+            },
+            {
+                name: "Y label",
+                type: "string",
+                value: "",
+            },
+            {
+                name: "Draw hexagon edges",
+                type: "boolean",
+                value: false,
+            },
+            {
+                name: "Min colour value",
+                type: "string",
+                value: COLOURS.min,
+            },
+            {
+                name: "Max colour value",
+                type: "string",
+                value: COLOURS.max,
+            },
+            {
+                name: "Draw empty hexagons within data boundaries",
+                type: "boolean",
+                value: false,
+            }
+        ];
+    }
+
+
+    /**
+     * Hex Bin chart operation.
+     *
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {html}
+     */
+    run(input, args) {
+        const recordDelimiter = Utils.charRep(args[0]),
+            fieldDelimiter = Utils.charRep(args[1]),
+            packRadius = args[2],
+            drawRadius = args[3],
+            columnHeadingsAreIncluded = args[4],
+            drawEdges = args[7],
+            minColour = args[8],
+            maxColour = args[9],
+            drawEmptyHexagons = args[10],
+            dimension = 500;
+
+        let xLabel = args[5],
+            yLabel = args[6];
+        const { headings, values } = getScatterValues(
+            input,
+            recordDelimiter,
+            fieldDelimiter,
+            columnHeadingsAreIncluded
+        );
+
+        if (headings) {
+            xLabel = headings.x;
+            yLabel = headings.y;
+        }
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${dimension} ${dimension}`);
+
+        const margin = {
+                top: 10,
+                right: 0,
+                bottom: 40,
+                left: 30,
+            },
+            width = dimension - margin.left - margin.right,
+            height = dimension - margin.top - margin.bottom,
+            marginedSpace = svg.append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+        const hexbin = d3hexbin.hexbin()
+            .radius(packRadius)
+            .extent([0, 0], [width, height]);
+
+        const hexPoints = hexbin(values),
+            maxCount = Math.max(...hexPoints.map(b => b.length));
+
+        const xExtent = d3.extent(hexPoints, d => d.x),
+            yExtent = d3.extent(hexPoints, d => d.y);
+        xExtent[0] -= 2 * packRadius;
+        xExtent[1] += 3 * packRadius;
+        yExtent[0] -= 2 * packRadius;
+        yExtent[1] += 2 * packRadius;
+
+        const xAxis = d3.scaleLinear()
+            .domain(xExtent)
+            .range([0, width]);
+        const yAxis = d3.scaleLinear()
+            .domain(yExtent)
+            .range([height, 0]);
+
+        const colour = d3.scaleSequential(d3.interpolateLab(minColour, maxColour))
+            .domain([0, maxCount]);
+
+        marginedSpace.append("clipPath")
+            .attr("id", "clip")
+            .append("rect")
+            .attr("width", width)
+            .attr("height", height);
+
+        if (drawEmptyHexagons) {
+            marginedSpace.append("g")
+                .attr("class", "empty-hexagon")
+                .selectAll("path")
+                .data(this.getEmptyHexagons(hexPoints, packRadius))
+                .enter()
+                .append("path")
+                .attr("d", d => {
+                    return `M${xAxis(d.x)},${yAxis(d.y)} ${hexbin.hexagon(drawRadius)}`;
+                })
+                .attr("fill", (d) => colour(0))
+                .attr("stroke", drawEdges ? "black" : "none")
+                .attr("stroke-width", drawEdges ? "0.5" : "none")
+                .append("title")
+                .text(d => {
+                    const count = 0,
+                        perc = 0,
+                        tooltip = `Count: ${count}\n
+                                Percentage: ${perc.toFixed(2)}%\n
+                                Center: ${d.x.toFixed(2)}, ${d.y.toFixed(2)}\n
+                        `.replace(/\s{2,}/g, "\n");
+                    return tooltip;
+                });
+        }
+
+        marginedSpace.append("g")
+            .attr("class", "hexagon")
+            .attr("clip-path", "url(#clip)")
+            .selectAll("path")
+            .data(hexPoints)
+            .enter()
+            .append("path")
+            .attr("d", d => {
+                return `M${xAxis(d.x)},${yAxis(d.y)} ${hexbin.hexagon(drawRadius)}`;
+            })
+            .attr("fill", (d) => colour(d.length))
+            .attr("stroke", drawEdges ? "black" : "none")
+            .attr("stroke-width", drawEdges ? "0.5" : "none")
+            .append("title")
+            .text(d => {
+                const count = d.length,
+                    perc = 100.0 * d.length / values.length,
+                    CX = d.x,
+                    CY = d.y,
+                    xMin = Math.min(...d.map(d => d[0])),
+                    xMax = Math.max(...d.map(d => d[0])),
+                    yMin = Math.min(...d.map(d => d[1])),
+                    yMax = Math.max(...d.map(d => d[1])),
+                    tooltip = `Count: ${count}\n
+                               Percentage: ${perc.toFixed(2)}%\n
+                               Center: ${CX.toFixed(2)}, ${CY.toFixed(2)}\n
+                               Min X: ${xMin.toFixed(2)}\n
+                               Max X: ${xMax.toFixed(2)}\n
+                               Min Y: ${yMin.toFixed(2)}\n
+                               Max Y: ${yMax.toFixed(2)}
+                    `.replace(/\s{2,}/g, "\n");
+                return tooltip;
+            });
+
+        marginedSpace.append("g")
+            .attr("class", "axis axis--y")
+            .call(d3.axisLeft(yAxis).tickSizeOuter(-width));
+
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("y", -margin.left)
+            .attr("x", -(height / 2))
+            .attr("dy", "1em")
+            .style("text-anchor", "middle")
+            .text(yLabel);
+
+        marginedSpace.append("g")
+            .attr("class", "axis axis--x")
+            .attr("transform", "translate(0," + height + ")")
+            .call(d3.axisBottom(xAxis).tickSizeOuter(-height));
+
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", dimension)
+            .style("text-anchor", "middle")
+            .text(xLabel);
+
+        return svg._groups[0][0].outerHTML;
+    }
+
+
+    /**
+     * Hex Bin chart operation.
+     *
+     * @param {Object[]} - centres
+     * @param {number} - radius
+     * @returns {Object[]}
+     */
+    getEmptyHexagons(centres, radius) {
+        const emptyCentres = [],
+            boundingRect = [d3.extent(centres, d => d.x), d3.extent(centres, d => d.y)],
+            hexagonCenterToEdge = Math.cos(2 * Math.PI / 12) * radius,
+            hexagonEdgeLength = Math.sin(2 * Math.PI / 12) * radius;
+        let indent = false;
+
+        for (let y = boundingRect[1][0]; y <= boundingRect[1][1] + radius; y += hexagonEdgeLength + radius) {
+            for (let x = boundingRect[0][0]; x <= boundingRect[0][1] + radius; x += 2 * hexagonCenterToEdge) {
+                let cx = x;
+                const cy = y;
+
+                if (indent && x >= boundingRect[0][1]) break;
+                if (indent) cx += hexagonCenterToEdge;
+
+                emptyCentres.push({x: cx, y: cy});
+            }
+            indent = !indent;
+        }
+
+        return emptyCentres;
+    }
+
+}
+
+export default HexDensityChart;

src/core/operations/ImageBrightnessContrast.mjs

@@ -25,8 +25,8 @@ class ImageBrightnessContrast extends Operation {
         this.module = "Image";
         this.description = "Adjust the brightness or contrast of an image.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -47,19 +47,19 @@ class ImageBrightnessContrast extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [brightness, contrast] = args;
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -75,8 +75,13 @@ class ImageBrightnessContrast extends Operation {
                 image.contrast(contrast / 100);
             }
 
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error adjusting image brightness or contrast. (${err})`);
         }
@@ -84,18 +89,19 @@ class ImageBrightnessContrast extends Operation {
 
     /**
      * Displays the image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/ImageFilter.mjs

@@ -25,8 +25,8 @@ class ImageFilter extends Operation {
         this.module = "Image";
         this.description = "Applies a greyscale or sepia filter to an image.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -41,19 +41,19 @@ class ImageFilter extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [filterType] = args;
-        if (!isImage(input)){
+        if (!isImage(new Uint8Array(input))){
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -66,8 +66,13 @@ class ImageFilter extends Operation {
                 image.sepia();
             }
 
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error applying filter to image. (${err})`);
         }
@@ -75,18 +80,19 @@ class ImageFilter extends Operation {
 
     /**
      * Displays the blurred image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/ImageHueSaturationLightness.mjs

@@ -25,8 +25,8 @@ class ImageHueSaturationLightness extends Operation {
         this.module = "Image";
         this.description = "Adjusts the hue / saturation / lightness (HSL) values of an image.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -54,20 +54,20 @@ class ImageHueSaturationLightness extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [hue, saturation, lightness] = args;
 
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -102,8 +102,14 @@ class ImageHueSaturationLightness extends Operation {
                     }
                 ]);
             }
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error adjusting image hue / saturation / lightness. (${err})`);
         }
@@ -111,18 +117,19 @@ class ImageHueSaturationLightness extends Operation {
 
     /**
      * Displays the image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 }
 

src/core/operations/ImageOpacity.mjs

@@ -25,8 +25,8 @@ class ImageOpacity extends Operation {
         this.module = "Image";
         this.description = "Adjust the opacity of an image.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -40,19 +40,19 @@ class ImageOpacity extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [opacity] = args;
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -61,8 +61,13 @@ class ImageOpacity extends Operation {
                 self.sendStatusMessage("Changing image opacity...");
             image.opacity(opacity / 100);
 
-            const imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error changing image opacity. (${err})`);
         }
@@ -70,18 +75,19 @@ class ImageOpacity extends Operation {
 
     /**
      * Displays the image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/IndexOfCoincidence.mjs

@@ -0,0 +1,107 @@
+/**
+ * @author George O [georgeomnet+cyberchef@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import Utils from "../Utils";
+
+/**
+ * Index of Coincidence operation
+ */
+class IndexOfCoincidence extends Operation {
+
+    /**
+     * IndexOfCoincidence constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Index of Coincidence";
+        this.module = "Default";
+        this.description = "Index of Coincidence (IC) is the probability of two randomly selected characters being the same. This can be used to determine whether text is readable or random, with English text having an IC of around 0.066. IC can therefore be a sound method to automate frequency analysis.";
+        this.infoURL = "https://wikipedia.org/wiki/Index_of_coincidence";
+        this.inputType = "string";
+        this.outputType = "number";
+        this.presentType = "html";
+        this.args = [];
+    }
+
+    /**
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {number}
+     */
+    run(input, args) {
+        const text = input.toLowerCase().replace(/[^a-z]/g, ""),
+            frequencies = new Array(26).fill(0),
+            alphabet = Utils.expandAlphRange("a-z");
+        let coincidence = 0.00,
+            density = 0.00,
+            result = 0.00,
+            i;
+
+        for (i=0; i < alphabet.length; i++) {
+            frequencies[i] = text.count(alphabet[i]);
+        }
+
+        for (i=0; i < frequencies.length; i++) {
+            coincidence += frequencies[i] * (frequencies[i] - 1);
+        }
+
+        density = frequencies.sum();
+
+        // Ensure that we don't divide by 0
+        if (density < 2) density = 2;
+
+        result = coincidence / (density * (density - 1));
+
+        return result;
+    }
+
+    /**
+     * Displays the IC as a scale bar for web apps.
+     *
+     * @param {number} ic
+     * @returns {html}
+     */
+    present(ic) {
+        return `Index of Coincidence: ${ic}
+Normalized: ${ic * 26}
+<br><canvas id='chart-area'></canvas><br>
+- 0 represents complete randomness (all characters are unique), whereas 1 represents no randomness (all characters are identical).
+- English text generally has an IC of between 0.67 to 0.78.
+- 'Random' text is determined by the probability that each letter occurs the same number of times as another.
+
+The graph shows the IC of the input data. A low IC generally means that the text is random, compressed or encrypted.
+
+<script type='application/javascript'>
+  var canvas = document.getElementById("chart-area"),
+      parentRect = canvas.parentNode.getBoundingClientRect(),
+      ic = ${ic};
+
+  canvas.width = parentRect.width * 0.95;
+  canvas.height = parentRect.height * 0.25;
+
+  ic = ic > 0.25 ? 0.25 : ic;
+
+  CanvasComponents.drawScaleBar(canvas, ic, 0.25, [
+    {
+      label: "English text",
+      min: 0.05,
+      max: 0.08
+    },
+    {
+      label: "> 0.25",
+      min: 0.24,
+      max: 0.25
+    }
+  ]);
+</script>
+     `;
+    }
+
+}
+
+export default IndexOfCoincidence;

src/core/operations/InvertImage.mjs

@@ -25,25 +25,25 @@ class InvertImage extends Operation {
         this.module = "Image";
         this.description = "Invert the colours of an image.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [];
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid input file format.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -51,8 +51,14 @@ class InvertImage extends Operation {
             if (ENVIRONMENT_IS_WORKER())
                 self.sendStatusMessage("Inverting image...");
             image.invert();
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error inverting image. (${err})`);
         }
@@ -60,18 +66,19 @@ class InvertImage extends Operation {
 
     /**
      * Displays the inverted image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/JSONToCSV.mjs

@@ -51,6 +51,10 @@ class JSONToCSV extends Operation {
         this.rowDelim = rowDelim;
         const self = this;
 
+        if (!(input instanceof Array)) {
+            input = [input];
+        }
+
         try {
             // If the JSON is an array of arrays, this is easy
             if (input[0] instanceof Array) {
@@ -89,6 +93,8 @@ class JSONToCSV extends Operation {
      * @returns {string}
      */
     escapeCellContents(data) {
+        if (typeof data === "number") data = data.toString();
+
         // Double quotes should be doubled up
         data = data.replace(/"/g, '""');
 

src/core/operations/JavaScriptParser.mjs

@@ -21,7 +21,7 @@ class JavaScriptParser extends Operation {
         this.name = "JavaScript Parser";
         this.module = "Code";
         this.description = "Returns an Abstract Syntax Tree for valid JavaScript code.";
-        this.infoURL = "https://en.wikipedia.org/wiki/Abstract_syntax_tree";
+        this.infoURL = "https://wikipedia.org/wiki/Abstract_syntax_tree";
         this.inputType = "string";
         this.outputType = "string";
         this.args = [

src/core/operations/NormaliseImage.mjs

@@ -25,44 +25,59 @@ class NormaliseImage extends Operation {
         this.module = "Image";
         this.description = "Normalise the image colours.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType=  "html";
         this.args = [];
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
-        const image = await jimp.read(Buffer.from(input));
+        let image;
+        try {
+            image = await jimp.read(input);
+        } catch (err) {
+            throw new OperationError(`Error opening image file. (${err})`);
+        }
 
-        image.normalize();
+        try {
+            image.normalize();
 
-        const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-        return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
+        } catch (err) {
+            throw new OperationError(`Error normalising image. (${err})`);
+        }
     }
 
     /**
      * Displays the normalised image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/PEMToHex.mjs

@@ -21,7 +21,7 @@ class PEMToHex extends Operation {
         this.name = "PEM to Hex";
         this.module = "PublicKey";
         this.description = "Converts PEM (Privacy Enhanced Mail) format to a hexadecimal DER (Distinguished Encoding Rules) string.";
-        this.infoURL = "https://en.wikipedia.org/wiki/X.690#DER_encoding";
+        this.infoURL = "https://wikipedia.org/wiki/X.690#DER_encoding";
         this.inputType = "string";
         this.outputType = "string";
         this.args = [];

src/core/operations/ParseQRCode.mjs

@@ -6,9 +6,8 @@
 
 import Operation from "../Operation";
 import OperationError from "../errors/OperationError";
-import { isImage } from "../lib/FileType";
-import jsqr from "jsqr";
-import jimp from "jimp";
+import { isImage } from "../lib/FileType.mjs";
+import { parseQrCode } from "../lib/QRCode";
 
 /**
  * Parse QR Code operation
@@ -25,7 +24,7 @@ class ParseQRCode extends Operation {
         this.module = "Image";
         this.description = "Reads an image file and attempts to detect and read a Quick Response (QR) code from the image.<br><br><u>Normalise Image</u><br>Attempts to normalise the image before parsing it to improve detection of a QR code.";
         this.infoURL = "https://wikipedia.org/wiki/QR_code";
-        this.inputType = "byteArray";
+        this.inputType = "ArrayBuffer";
         this.outputType = "string";
         this.args = [
             {
@@ -34,69 +33,28 @@ class ParseQRCode extends Operation {
                 "value": false
             }
         ];
+        this.patterns = [
+            {
+                "match": "^(?:\\xff\\xd8\\xff|\\x89\\x50\\x4e\\x47|\\x47\\x49\\x46|.{8}\\x57\\x45\\x42\\x50|\\x42\\x4d)",
+                "flags": "",
+                "args": [false],
+                "useful": true
+            }
+        ];
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {string}
      */
     async run(input, args) {
         const [normalise] = args;
 
-        // Make sure that the input is an image
-        if (!isImage(input)) throw new OperationError("Invalid file type.");
-
-        let image = input;
-
-        if (normalise) {
-            // Process the image to be easier to read by jsqr
-            // Disables the alpha channel
-            // Sets the image default background to white
-            // Normalises the image colours
-            // Makes the image greyscale
-            // Converts image to a JPEG
-            image = await new Promise((resolve, reject) => {
-                jimp.read(Buffer.from(input))
-                    .then(image => {
-                        image
-                            .rgba(false)
-                            .background(0xFFFFFFFF)
-                            .normalize()
-                            .greyscale()
-                            .getBuffer(jimp.MIME_JPEG, (error, result) => {
-                                resolve(result);
-                            });
-                    })
-                    .catch(err => {
-                        reject(new OperationError("Error reading the image file."));
-                    });
-            });
+        if (!isImage(new Uint8Array(input))) {
+            throw new OperationError("Invalid file type.");
         }
-
-        if (image instanceof OperationError) {
-            throw image;
-        }
-
-        return new Promise((resolve, reject) => {
-            jimp.read(Buffer.from(image))
-                .then(image => {
-                    if (image.bitmap != null) {
-                        const qrData = jsqr(image.bitmap.data, image.getWidth(), image.getHeight());
-                        if (qrData != null) {
-                            resolve(qrData.data);
-                        } else {
-                            reject(new OperationError("Couldn't read a QR code from the image."));
-                        }
-                    } else {
-                        reject(new OperationError("Error reading the image file."));
-                    }
-                })
-                .catch(err => {
-                    reject(new OperationError("Error reading the image file."));
-                });
-        });
-
+        return await parseQrCode(input, normalise);
     }
 
 }

src/core/operations/ProtobufDecode.mjs

@@ -0,0 +1,46 @@
+/**
+ * @author GCHQ Contributor [3]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Protobuf from "../lib/Protobuf";
+
+/**
+ * Protobuf Decode operation
+ */
+class ProtobufDecode extends Operation {
+
+    /**
+     * ProtobufDecode constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Protobuf Decode";
+        this.module = "Default";
+        this.description = "Decodes any Protobuf encoded data to a JSON representation of the data using the field number as the field key.";
+        this.infoURL = "https://wikipedia.org/wiki/Protocol_Buffers";
+        this.inputType = "byteArray";
+        this.outputType = "JSON";
+        this.args = [];
+    }
+
+    /**
+     * @param {byteArray} input
+     * @param {Object[]} args
+     * @returns {JSON}
+     */
+    run(input, args) {
+        try {
+            return Protobuf.decode(input);
+        } catch (err) {
+            throw new OperationError(err);
+        }
+    }
+
+}
+
+export default ProtobufDecode;

src/core/operations/RegularExpression.mjs

@@ -230,6 +230,7 @@ function regexHighlight (input, regex, displayTotal) {
         title = "",
         hl = 1,
         total = 0;
+    const captureGroups = [];
 
     output = input.replace(regex, (match, ...args) => {
         args.pop(); // Throw away full string
@@ -247,9 +248,15 @@ function regexHighlight (input, regex, displayTotal) {
         // Switch highlight
         hl = hl === 1 ? 2 : 1;
 
-        total++;
+        // Store highlighted match and replace with a placeholder
+        captureGroups.push(`<span class='hl${hl}' title='${title}'>${Utils.escapeHtml(match)}</span>`);
+        return `[cc_capture_group_${total++}]`;
+    });
 
-        return `<span class='hl${hl}' title='${title}'>${Utils.escapeHtml(match)}</span>`;
+    // Safely escape all remaining text, then replace placeholders
+    output = Utils.escapeHtml(output);
+    output = output.replace(/\[cc_capture_group_(\d+)\]/g, (_, i) => {
+        return captureGroups[i];
     });
 
     if (displayTotal)

src/core/operations/ResizeImage.mjs

@@ -25,8 +25,8 @@ class ResizeImage extends Operation {
         this.module = "Image";
         this.description = "Resizes an image to the specified width and height values.";
         this.infoURL = "https://wikipedia.org/wiki/Image_scaling";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -67,7 +67,7 @@ class ResizeImage extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
@@ -86,13 +86,13 @@ class ResizeImage extends Operation {
             "Bezier": jimp.RESIZE_BEZIER
         };
 
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -110,8 +110,13 @@ class ResizeImage extends Operation {
                 image.resize(width, height, resizeMap[resizeAlg]);
             }
 
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error resizing image. (${err})`);
         }
@@ -119,18 +124,19 @@ class ResizeImage extends Operation {
 
     /**
      * Displays the resized image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/RotateImage.mjs

@@ -25,8 +25,8 @@ class RotateImage extends Operation {
         this.module = "Image";
         this.description = "Rotates an image by the specified number of degrees.";
         this.infoURL = "";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.presentType = "html";
         this.args = [
             {
@@ -38,20 +38,20 @@ class RotateImage extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {byteArray}
      */
     async run(input, args) {
         const [degrees] = args;
 
-        if (!isImage(input)) {
+        if (!isImage(new Uint8Array(input))) {
             throw new OperationError("Invalid file type.");
         }
 
         let image;
         try {
-            image = await jimp.read(Buffer.from(input));
+            image = await jimp.read(input);
         } catch (err) {
             throw new OperationError(`Error loading image. (${err})`);
         }
@@ -59,8 +59,14 @@ class RotateImage extends Operation {
             if (ENVIRONMENT_IS_WORKER())
                 self.sendStatusMessage("Rotating image...");
             image.rotate(degrees);
-            const imageBuffer = await image.getBufferAsync(jimp.AUTO);
-            return [...imageBuffer];
+
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
         } catch (err) {
             throw new OperationError(`Error rotating image. (${err})`);
         }
@@ -68,18 +74,19 @@ class RotateImage extends Operation {
 
     /**
      * Displays the rotated image using HTML for web apps
-     * @param {byteArray} data
+     * @param {ArrayBuffer} data
      * @returns {html}
      */
     present(data) {
-        if (!data.length) return "";
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
 
-        const type = isImage(data);
+        const type = isImage(dataArray);
         if (!type) {
             throw new OperationError("Invalid file type.");
         }
 
-        return `<img src="data:${type};base64,${toBase64(data)}">`;
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
     }
 
 }

src/core/operations/ScatterChart.mjs

@@ -0,0 +1,199 @@
+/**
+ * @author tlwr [toby@toby.codes]
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import * as d3temp from "d3";
+import * as nodomtemp from "nodom";
+import { getScatterValues, getScatterValuesWithColour, RECORD_DELIMITER_OPTIONS, COLOURS, FIELD_DELIMITER_OPTIONS } from "../lib/Charts";
+
+import Operation from "../Operation";
+import Utils from "../Utils";
+
+const d3 = d3temp.default ? d3temp.default : d3temp;
+const nodom = nodomtemp.default ? nodomtemp.default: nodomtemp;
+
+/**
+ * Scatter chart operation
+ */
+class ScatterChart extends Operation {
+
+    /**
+     * ScatterChart constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Scatter chart";
+        this.module = "Charts";
+        this.description = "Plots two-variable data as single points on a graph.";
+        this.infoURL = "https://wikipedia.org/wiki/Scatter_plot";
+        this.inputType = "string";
+        this.outputType = "html";
+        this.args = [
+            {
+                name: "Record delimiter",
+                type: "option",
+                value: RECORD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "Field delimiter",
+                type: "option",
+                value: FIELD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "Use column headers as labels",
+                type: "boolean",
+                value: true,
+            },
+            {
+                name: "X label",
+                type: "string",
+                value: "",
+            },
+            {
+                name: "Y label",
+                type: "string",
+                value: "",
+            },
+            {
+                name: "Colour",
+                type: "string",
+                value: COLOURS.max,
+            },
+            {
+                name: "Point radius",
+                type: "number",
+                value: 10,
+            },
+            {
+                name: "Use colour from third column",
+                type: "boolean",
+                value: false,
+            }
+        ];
+    }
+
+    /**
+     * Scatter chart operation.
+     *
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {html}
+     */
+    run(input, args) {
+        const recordDelimiter = Utils.charRep(args[0]),
+            fieldDelimiter = Utils.charRep(args[1]),
+            columnHeadingsAreIncluded = args[2],
+            fillColour = args[5],
+            radius = args[6],
+            colourInInput = args[7],
+            dimension = 500;
+
+        let xLabel = args[3],
+            yLabel = args[4];
+
+        const dataFunction = colourInInput ? getScatterValuesWithColour : getScatterValues;
+        const { headings, values } = dataFunction(
+            input,
+            recordDelimiter,
+            fieldDelimiter,
+            columnHeadingsAreIncluded
+        );
+
+        if (headings) {
+            xLabel = headings.x;
+            yLabel = headings.y;
+        }
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${dimension} ${dimension}`);
+
+        const margin = {
+                top: 10,
+                right: 0,
+                bottom: 40,
+                left: 30,
+            },
+            width = dimension - margin.left - margin.right,
+            height = dimension - margin.top - margin.bottom,
+            marginedSpace = svg.append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+        const xExtent = d3.extent(values, d => d[0]),
+            xDelta = xExtent[1] - xExtent[0],
+            yExtent = d3.extent(values, d => d[1]),
+            yDelta = yExtent[1] - yExtent[0],
+            xAxis = d3.scaleLinear()
+                .domain([xExtent[0] - (0.1 * xDelta), xExtent[1] + (0.1 * xDelta)])
+                .range([0, width]),
+            yAxis = d3.scaleLinear()
+                .domain([yExtent[0] - (0.1 * yDelta), yExtent[1] + (0.1 * yDelta)])
+                .range([height, 0]);
+
+        marginedSpace.append("clipPath")
+            .attr("id", "clip")
+            .append("rect")
+            .attr("width", width)
+            .attr("height", height);
+
+        marginedSpace.append("g")
+            .attr("class", "points")
+            .attr("clip-path", "url(#clip)")
+            .selectAll("circle")
+            .data(values)
+            .enter()
+            .append("circle")
+            .attr("cx", (d) => xAxis(d[0]))
+            .attr("cy", (d) => yAxis(d[1]))
+            .attr("r", d => radius)
+            .attr("fill", d => {
+                return colourInInput ? d[2] : fillColour;
+            })
+            .attr("stroke", "rgba(0, 0, 0, 0.5)")
+            .attr("stroke-width", "0.5")
+            .append("title")
+            .text(d => {
+                const x = d[0],
+                    y = d[1],
+                    tooltip = `X: ${x}\n
+                               Y: ${y}\n
+                    `.replace(/\s{2,}/g, "\n");
+                return tooltip;
+            });
+
+        marginedSpace.append("g")
+            .attr("class", "axis axis--y")
+            .call(d3.axisLeft(yAxis).tickSizeOuter(-width));
+
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("y", -margin.left)
+            .attr("x", -(height / 2))
+            .attr("dy", "1em")
+            .style("text-anchor", "middle")
+            .text(yLabel);
+
+        marginedSpace.append("g")
+            .attr("class", "axis axis--x")
+            .attr("transform", "translate(0," + height + ")")
+            .call(d3.axisBottom(xAxis).tickSizeOuter(-height));
+
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", dimension)
+            .style("text-anchor", "middle")
+            .text(xLabel);
+
+        return svg._groups[0][0].outerHTML;
+    }
+
+}
+
+export default ScatterChart;

src/core/operations/SeriesChart.mjs

@@ -0,0 +1,227 @@
+/**
+ * @author tlwr [toby@toby.codes]
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import * as d3temp from "d3";
+import * as nodomtemp from "nodom";
+import { getSeriesValues, RECORD_DELIMITER_OPTIONS, FIELD_DELIMITER_OPTIONS } from "../lib/Charts";
+
+import Operation from "../Operation";
+import Utils from "../Utils";
+
+const d3 = d3temp.default ? d3temp.default : d3temp;
+const nodom = nodomtemp.default ? nodomtemp.default: nodomtemp;
+
+/**
+ * Series chart operation
+ */
+class SeriesChart extends Operation {
+
+    /**
+     * SeriesChart constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Series chart";
+        this.module = "Charts";
+        this.description = "A time series graph is a line graph of repeated measurements taken over regular time intervals.";
+        this.inputType = "string";
+        this.outputType = "html";
+        this.args = [
+            {
+                name: "Record delimiter",
+                type: "option",
+                value: RECORD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "Field delimiter",
+                type: "option",
+                value: FIELD_DELIMITER_OPTIONS,
+            },
+            {
+                name: "X label",
+                type: "string",
+                value: "",
+            },
+            {
+                name: "Point radius",
+                type: "number",
+                value: 1,
+            },
+            {
+                name: "Series colours",
+                type: "string",
+                value: "mediumseagreen, dodgerblue, tomato",
+            },
+        ];
+    }
+
+    /**
+     * Series chart operation.
+     *
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {html}
+     */
+    run(input, args) {
+        const recordDelimiter = Utils.charRep(args[0]),
+            fieldDelimiter = Utils.charRep(args[1]),
+            xLabel = args[2],
+            pipRadius = args[3],
+            seriesColours = args[4].split(","),
+            svgWidth = 500,
+            interSeriesPadding = 20,
+            xAxisHeight = 50,
+            seriesLabelWidth = 50,
+            seriesHeight = 100,
+            seriesWidth = svgWidth - seriesLabelWidth - interSeriesPadding;
+
+        const { xValues, series } = getSeriesValues(input, recordDelimiter, fieldDelimiter),
+            allSeriesHeight = Object.keys(series).length * (interSeriesPadding + seriesHeight),
+            svgHeight = allSeriesHeight + xAxisHeight + interSeriesPadding;
+
+        const document = new nodom.Document();
+        let svg = document.createElement("svg");
+        svg = d3.select(svg)
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+
+        const xAxis = d3.scalePoint()
+            .domain(xValues)
+            .range([0, seriesWidth]);
+
+        svg.append("g")
+            .attr("class", "axis axis--x")
+            .attr("transform", `translate(${seriesLabelWidth}, ${xAxisHeight})`)
+            .call(
+                d3.axisTop(xAxis).tickValues(xValues.filter((x, i) => {
+                    return [0, Math.round(xValues.length / 2), xValues.length -1].indexOf(i) >= 0;
+                }))
+            );
+
+        svg.append("text")
+            .attr("x", svgWidth / 2)
+            .attr("y", xAxisHeight / 2)
+            .style("text-anchor", "middle")
+            .text(xLabel);
+
+        const tooltipText = {},
+            tooltipAreaWidth = seriesWidth / xValues.length;
+
+        xValues.forEach(x => {
+            const tooltip = [];
+
+            series.forEach(serie => {
+                const y = serie.data[x];
+                if (typeof y === "undefined") return;
+
+                tooltip.push(`${serie.name}: ${y}`);
+            });
+
+            tooltipText[x] = tooltip.join("\n");
+        });
+
+        const chartArea = svg.append("g")
+            .attr("transform", `translate(${seriesLabelWidth}, ${xAxisHeight})`);
+
+        chartArea
+            .append("g")
+            .selectAll("rect")
+            .data(xValues)
+            .enter()
+            .append("rect")
+            .attr("x", x => {
+                return xAxis(x) - (tooltipAreaWidth / 2);
+            })
+            .attr("y", 0)
+            .attr("width", tooltipAreaWidth)
+            .attr("height", allSeriesHeight)
+            .attr("stroke", "none")
+            .attr("fill", "transparent")
+            .append("title")
+            .text(x => {
+                return `${x}\n
+                    --\n
+                    ${tooltipText[x]}\n
+                `.replace(/\s{2,}/g, "\n");
+            });
+
+        const yAxesArea = svg.append("g")
+            .attr("transform", `translate(0, ${xAxisHeight})`);
+
+        series.forEach((serie, seriesIndex) => {
+            const yExtent = d3.extent(Object.values(serie.data)),
+                yAxis = d3.scaleLinear()
+                    .domain(yExtent)
+                    .range([seriesHeight, 0]);
+
+            const seriesGroup = chartArea
+                .append("g")
+                .attr("transform", `translate(0, ${seriesHeight * seriesIndex + interSeriesPadding * (seriesIndex + 1)})`);
+
+            let path = "";
+            xValues.forEach((x, xIndex) => {
+                let nextX = xValues[xIndex + 1],
+                    y = serie.data[x],
+                    nextY= serie.data[nextX];
+
+                if (typeof y === "undefined" || typeof nextY === "undefined") return;
+
+                x = xAxis(x); nextX = xAxis(nextX);
+                y = yAxis(y); nextY = yAxis(nextY);
+
+                path += `M ${x} ${y} L ${nextX} ${nextY} z `;
+            });
+
+            seriesGroup
+                .append("path")
+                .attr("d", path)
+                .attr("fill", "none")
+                .attr("stroke", seriesColours[seriesIndex % seriesColours.length])
+                .attr("stroke-width", "1");
+
+            xValues.forEach(x => {
+                const y = serie.data[x];
+                if (typeof y === "undefined") return;
+
+                seriesGroup
+                    .append("circle")
+                    .attr("cx", xAxis(x))
+                    .attr("cy", yAxis(y))
+                    .attr("r", pipRadius)
+                    .attr("fill", seriesColours[seriesIndex % seriesColours.length])
+                    .append("title")
+                    .text(d => {
+                        return `${x}\n
+                            --\n
+                            ${tooltipText[x]}\n
+                        `.replace(/\s{2,}/g, "\n");
+                    });
+            });
+
+            yAxesArea
+                .append("g")
+                .attr("transform", `translate(${seriesLabelWidth - interSeriesPadding}, ${seriesHeight * seriesIndex + interSeriesPadding * (seriesIndex + 1)})`)
+                .attr("class", "axis axis--y")
+                .call(d3.axisLeft(yAxis).ticks(5));
+
+            yAxesArea
+                .append("g")
+                .attr("transform", `translate(0, ${seriesHeight / 2 + seriesHeight * seriesIndex + interSeriesPadding * (seriesIndex + 1)})`)
+                .append("text")
+                .style("text-anchor", "middle")
+                .attr("transform", "rotate(-90)")
+                .text(serie.name);
+        });
+
+        return svg._groups[0][0].outerHTML;
+    }
+
+}
+
+export default SeriesChart;

src/core/operations/SharpenImage.mjs

@@ -0,0 +1,168 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import { isImage } from "../lib/FileType";
+import { toBase64 } from "../lib/Base64";
+import { gaussianBlur } from "../lib/ImageManipulation";
+import jimp from "jimp";
+
+/**
+ * Sharpen Image operation
+ */
+class SharpenImage extends Operation {
+
+    /**
+     * SharpenImage constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Sharpen Image";
+        this.module = "Image";
+        this.description = "Sharpens an image (Unsharp mask)";
+        this.infoURL = "https://wikipedia.org/wiki/Unsharp_masking";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Radius",
+                type: "number",
+                value: 2,
+                min: 1
+            },
+            {
+                name: "Amount",
+                type: "number",
+                value: 1,
+                min: 0,
+                step: 0.1
+            },
+            {
+                name: "Threshold",
+                type: "number",
+                value: 10,
+                min: 0,
+                max: 100
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    async run(input, args) {
+        const [radius, amount, threshold] = args;
+
+        if (!isImage(new Uint8Array(input))){
+            throw new OperationError("Invalid file type.");
+        }
+
+        let image;
+        try {
+            image = await jimp.read(input);
+        } catch (err) {
+            throw new OperationError(`Error loading image. (${err})`);
+        }
+
+        try {
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Sharpening image... (Cloning image)");
+            const blurMask = image.clone();
+
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Sharpening image... (Blurring cloned image)");
+            const blurImage = gaussianBlur(image.clone(), radius, 3);
+
+
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Sharpening image... (Creating unsharp mask)");
+            blurMask.scan(0, 0, blurMask.bitmap.width, blurMask.bitmap.height, function(x, y, idx) {
+                const blurRed = blurImage.bitmap.data[idx];
+                const blurGreen = blurImage.bitmap.data[idx + 1];
+                const blurBlue = blurImage.bitmap.data[idx + 2];
+
+                const normalRed = this.bitmap.data[idx];
+                const normalGreen = this.bitmap.data[idx + 1];
+                const normalBlue = this.bitmap.data[idx + 2];
+
+                // Subtract blurred pixel value from normal image
+                this.bitmap.data[idx] = (normalRed > blurRed) ? normalRed - blurRed : 0;
+                this.bitmap.data[idx + 1] = (normalGreen > blurGreen) ? normalGreen - blurGreen : 0;
+                this.bitmap.data[idx + 2] = (normalBlue > blurBlue) ? normalBlue - blurBlue : 0;
+            });
+
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Sharpening image... (Merging with unsharp mask)");
+            image.scan(0, 0, image.bitmap.width, image.bitmap.height, function(x, y, idx) {
+                let maskRed = blurMask.bitmap.data[idx];
+                let maskGreen = blurMask.bitmap.data[idx + 1];
+                let maskBlue = blurMask.bitmap.data[idx + 2];
+
+                const normalRed = this.bitmap.data[idx];
+                const normalGreen = this.bitmap.data[idx + 1];
+                const normalBlue = this.bitmap.data[idx + 2];
+
+                // Calculate luminance
+                const maskLuminance = (0.2126 * maskRed + 0.7152 * maskGreen + 0.0722 * maskBlue);
+                const normalLuminance = (0.2126 * normalRed + 0.7152 * normalGreen + 0.0722 * normalBlue);
+
+                let luminanceDiff;
+                if (maskLuminance > normalLuminance) {
+                    luminanceDiff = maskLuminance - normalLuminance;
+                } else {
+                    luminanceDiff = normalLuminance - maskLuminance;
+                }
+
+                // Scale mask colours by amount
+                maskRed = maskRed * amount;
+                maskGreen = maskGreen * amount;
+                maskBlue = maskBlue * amount;
+
+                // Only change pixel value if the difference is higher than threshold
+                if ((luminanceDiff / 255) * 100 >= threshold) {
+                    this.bitmap.data[idx] = (normalRed + maskRed) <= 255 ? normalRed + maskRed : 255;
+                    this.bitmap.data[idx + 1] = (normalGreen + maskGreen) <= 255 ? normalGreen + maskGreen : 255;
+                    this.bitmap.data[idx + 2] = (normalBlue + maskBlue) <= 255 ? normalBlue + maskBlue : 255;
+                }
+            });
+
+            let imageBuffer;
+            if (image.getMIME() === "image/gif") {
+                imageBuffer = await image.getBufferAsync(jimp.MIME_PNG);
+            } else {
+                imageBuffer = await image.getBufferAsync(jimp.AUTO);
+            }
+            return imageBuffer.buffer;
+        } catch (err) {
+            throw new OperationError(`Error sharpening image. (${err})`);
+        }
+    }
+
+    /**
+     * Displays the sharpened image using HTML for web apps
+     * @param {ArrayBuffer} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.byteLength) return "";
+        const dataArray = new Uint8Array(data);
+
+        const type = isImage(dataArray);
+        if (!type) {
+            throw new OperationError("Invalid file type.");
+        }
+
+        return `<img src="data:${type};base64,${toBase64(dataArray)}">`;
+    }
+
+}
+
+export default SharpenImage;

src/core/operations/TextEncodingBruteForce.mjs

@@ -79,7 +79,7 @@ class TextEncodingBruteForce extends Operation {
         let table = "<table class='table table-hover table-sm table-bordered table-nonfluid'><tr><th>Encoding</th><th>Value</th></tr>";
 
         for (const enc in encodings) {
-            const value = Utils.printable(encodings[enc], true);
+            const value = Utils.escapeHtml(Utils.printable(encodings[enc], true));
             table += `<tr><td>${enc}</td><td>${value}</td></tr>`;
         }
 

src/core/operations/UnescapeString.mjs

@@ -20,7 +20,7 @@ class UnescapeString extends Operation {
 
         this.name = "Unescape string";
         this.module = "Default";
-        this.description = "Unescapes characters in a string that have been escaped. For example, <code>Don\\'t stop me now</code> becomes <code>Don't stop me now</code>.<br><br>Supports the following escape sequences:<ul><li><code>\\n</code> (Line feed/newline)</li><li><code>\\r</code> (Carriage return)</li><li><code>\\t</code> (Horizontal tab)</li><li><code>\\b</code> (Backspace)</li><li><code>\\f</code> (Form feed)</li><li><code>\\xnn</code> (Hex, where n is 0-f)</li><li><code>\\\\</code> (Backslash)</li><li><code>\\'</code> (Single quote)</li><li><code>\\&quot;</code> (Double quote)</li><li><code>\\unnnn</code> (Unicode character)</li><li><code>\\u{nnnnnn}</code> (Unicode code point)</li></ul>";
+        this.description = "Unescapes characters in a string that have been escaped. For example, <code>Don\\'t stop me now</code> becomes <code>Don't stop me now</code>.<br><br>Supports the following escape sequences:<ul><li><code>\\n</code> (Line feed/newline)</li><li><code>\\r</code> (Carriage return)</li><li><code>\\t</code> (Horizontal tab)</li><li><code>\\b</code> (Backspace)</li><li><code>\\f</code> (Form feed)</li><li><code>\\nnn</code> (Octal, where n is 0-7)</li><li><code>\\xnn</code> (Hex, where n is 0-f)</li><li><code>\\\\</code> (Backslash)</li><li><code>\\'</code> (Single quote)</li><li><code>\\&quot;</code> (Double quote)</li><li><code>\\unnnn</code> (Unicode character)</li><li><code>\\u{nnnnnn}</code> (Unicode code point)</li></ul>";
         this.infoURL = "https://wikipedia.org/wiki/Escape_sequence";
         this.inputType = "string";
         this.outputType = "string";

src/core/operations/VarIntDecode.mjs

@@ -0,0 +1,46 @@
+/**
+ * @author GCHQ Contributor [3]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Protobuf from "../lib/Protobuf";
+
+/**
+ * VarInt Decode operation
+ */
+class VarIntDecode extends Operation {
+
+    /**
+     * VarIntDecode constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "VarInt Decode";
+        this.module = "Default";
+        this.description = "Decodes a VarInt encoded integer. VarInt is an efficient way of encoding variable length integers and is commonly used with Protobuf.";
+        this.infoURL = "https://developers.google.com/protocol-buffers/docs/encoding#varints";
+        this.inputType = "byteArray";
+        this.outputType = "number";
+        this.args = [];
+    }
+
+    /**
+     * @param {byteArray} input
+     * @param {Object[]} args
+     * @returns {number}
+     */
+    run(input, args) {
+        try {
+            return Protobuf.varIntDecode(input);
+        } catch (err) {
+            throw new OperationError(err);
+        }
+    }
+
+}
+
+export default VarIntDecode;

src/core/operations/VarIntEncode.mjs

@@ -0,0 +1,46 @@
+/**
+ * @author GCHQ Contributor [3]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Protobuf from "../lib/Protobuf";
+
+/**
+ * VarInt Encode operation
+ */
+class VarIntEncode extends Operation {
+
+    /**
+     * VarIntEncode constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "VarInt Encode";
+        this.module = "Default";
+        this.description = "Encodes a Vn integer as a VarInt. VarInt is an efficient way of encoding variable length integers and is commonly used with Protobuf.";
+        this.infoURL = "https://developers.google.com/protocol-buffers/docs/encoding#varints";
+        this.inputType = "number";
+        this.outputType = "byteArray";
+        this.args = [];
+    }
+
+    /**
+     * @param {number} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    run(input, args) {
+        try {
+            return Protobuf.varIntEncode(input);
+        } catch (err) {
+            throw new OperationError(err);
+        }
+    }
+
+}
+
+export default VarIntEncode;

src/core/vendor/bzip2.mjs

@@ -1,265 +0,0 @@
-/** @license
-========================================================================
-  bzip2.js - a small bzip2 decompression implementation
-  
-  Copyright 2011 by antimatter15 (antimatter15@gmail.com)
-  
-  Based on micro-bunzip by Rob Landley (rob@landley.net).
-
-  Copyright (c) 2011 by antimatter15 (antimatter15@gmail.com).
-
-  Permission is hereby granted, free of charge, to any person obtaining a
-  copy of this software and associated documentation files (the "Software"),
-  to deal in the Software without restriction, including without limitation
-  the rights to use, copy, modify, merge, publish, distribute, sublicense,
-  and/or sell copies of the Software, and to permit persons to whom the
-  Software is furnished to do so, subject to the following conditions:
-  
-  The above copyright notice and this permission notice shall be included
-  in all copies or substantial portions of the Software.
-  
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-  IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-  DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-  TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
-  THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-"use strict";
-
-var bzip2 = {};
-
-bzip2.array = function(bytes){
-  var bit = 0, byte = 0;
-  var BITMASK = [0, 0x01, 0x03, 0x07, 0x0F, 0x1F, 0x3F, 0x7F, 0xFF ];
-  return function(n){
-    var result = 0;
-    while(n > 0){
-      var left = 8 - bit;
-      if(n >= left){
-        result <<= left;
-        result |= (BITMASK[left] & bytes[byte++]);
-        bit = 0;
-        n -= left;
-      }else{
-        result <<= n;
-        result |= ((bytes[byte] & (BITMASK[n] << (8 - n - bit))) >> (8 - n - bit));
-        bit += n;
-        n = 0;
-      }
-    }
-    return result
-  }
-}
-
-bzip2.simple = function(bits){
-  var size = bzip2.header(bits);
-  var all = '', chunk = '';
-  do{
-    all += chunk;
-    chunk = bzip2.decompress(bits, size);
-  }while(chunk != -1);
-  return all;
-}
-
-bzip2.header = function(bits){
-  if(bits(8*3) != 4348520) throw "No magic number found";
-  var i = bits(8) - 48;
-  if(i < 1 || i > 9) throw "Not a BZIP archive";
-  return i;
-};
-
-
-//takes a function for reading the block data (starting with 0x314159265359)
-//a block size (0-9) (optional, defaults to 9)
-//a length at which to stop decompressing and return the output
-bzip2.decompress = function(bits, size, len){
-  var MAX_HUFCODE_BITS = 20;
-  var MAX_SYMBOLS = 258;
-  var SYMBOL_RUNA = 0;
-  var SYMBOL_RUNB = 1;
-  var GROUP_SIZE = 50;
-  
-  var bufsize = 100000 * size;
-  for(var h = '', i = 0; i < 6; i++) h += bits(8).toString(16);
-  if(h == "177245385090") return -1; //last block
-  if(h != "314159265359") throw "Not valid bzip data";
-  bits(32); //ignore CRC codes
-  if(bits(1)) throw "Unsupported obsolete version";
-  var origPtr = bits(24);
-  if(origPtr > bufsize) throw "Initial position larger than buffer size";
-  var t = bits(16);
-  var symToByte = new Uint8Array(256), 
-      symTotal = 0;
-  for (i = 0; i < 16; i++) {
-    if(t & (1 << (15 - i))) {
-      var k = bits(16);
-      for(j = 0; j < 16; j++){
-        if(k & (1 << (15 - j))){
-          symToByte[symTotal++] = (16 * i) + j;
-        }
-      }
-    }
-  }
-
-  var groupCount = bits(3);
-  if(groupCount < 2 || groupCount > 6) throw "Error 1";
-  var nSelectors = bits(15);
-  if(nSelectors == 0) throw "Error";
-  var mtfSymbol = []; //TODO: possibly replace JS array with typed arrays
-  for(var i = 0; i < groupCount; i++) mtfSymbol[i] = i;
-  var selectors = new Uint8Array(32768);
-  
-  for(var i = 0; i < nSelectors; i++){
-    for(var j = 0; bits(1); j++) if(j >= groupCount) throw "Error 2"; 
-    var uc = mtfSymbol[j];
-    mtfSymbol.splice(j, 1); //this is a probably inefficient MTF transform
-    mtfSymbol.splice(0, 0, uc);
-    selectors[i] = uc;
-  }
-  
-  var symCount = symTotal + 2;
-  var groups = [];
-  for(var j = 0; j < groupCount; j++){
-    var length = new Uint8Array(MAX_SYMBOLS), 
-        temp = new Uint8Array(MAX_HUFCODE_BITS+1);
-    t = bits(5); //lengths
-    for(var i = 0; i < symCount; i++){
-      while(true){
-        if (t < 1 || t > MAX_HUFCODE_BITS) throw "Error 3";
-        if(!bits(1)) break;
-        if(!bits(1)) t++;
-        else t--;
-      }
-      length[i] = t;
-    }
-    var  minLen,  maxLen;
-    minLen = maxLen = length[0];
-    for(var i = 1; i < symCount; i++){
-      if(length[i] > maxLen) maxLen = length[i];
-      else if(length[i] < minLen) minLen = length[i];
-    }
-    var hufGroup;
-    hufGroup = groups[j] = {};
-    hufGroup.permute = new Uint32Array(MAX_SYMBOLS);
-    hufGroup.limit = new Uint32Array(MAX_HUFCODE_BITS + 1);
-    hufGroup.base = new Uint32Array(MAX_HUFCODE_BITS + 1);
-    hufGroup.minLen = minLen;
-    hufGroup.maxLen = maxLen;
-    var base = hufGroup.base.subarray(1);
-    var limit = hufGroup.limit.subarray(1);
-    var pp = 0;
-    for(var i = minLen; i <= maxLen; i++)
-      for(var t = 0; t < symCount; t++) 
-      if(length[t] == i) hufGroup.permute[pp++] = t;
-      for(i = minLen; i <= maxLen; i++) temp[i] = limit[i] = 0;
-      for(i = 0; i < symCount; i++) temp[length[i]]++;
-      pp = t = 0;
-      for(i = minLen; i < maxLen; i++) {
-        pp += temp[i];
-        limit[i] = pp - 1;
-        pp <<= 1;
-        base[i+1] = pp - (t += temp[i]);
-      }
-      limit[maxLen]=pp+temp[maxLen]-1;
-      base[minLen]=0;
-  }
-  var byteCount = new Uint32Array(256);
-  for(var i = 0; i < 256; i++) mtfSymbol[i] = i;
-  var runPos, count, symCount, selector;
-  runPos = count = symCount = selector = 0;
-  var buf = new Uint32Array(bufsize);
-  while(true){
-    if(!(symCount--)){
-      symCount = GROUP_SIZE - 1;
-      if(selector >= nSelectors) throw "Error 4";
-      hufGroup = groups[selectors[selector++]];
-      base = hufGroup.base.subarray(1);
-      limit = hufGroup.limit.subarray(1);
-    }
-    i = hufGroup.minLen;
-    j = bits(i);
-    while(true){
-      if(i > hufGroup.maxLen) throw "Error 5";
-      if(j <= limit[i]) break;
-      i++;
-      j = (j << 1) | bits(1);
-    }
-    j -= base[i];
-    if(j < 0 || j >= MAX_SYMBOLS) throw "Error 6";
-    var nextSym = hufGroup.permute[j];
-    if (nextSym == SYMBOL_RUNA || nextSym == SYMBOL_RUNB) {
-      if(!runPos){
-        runPos = 1;
-        t = 0;
-      }
-      if(nextSym == SYMBOL_RUNA) t += runPos;
-      else t += 2 * runPos;
-      runPos <<= 1;
-      continue;
-    }
-    if(runPos){
-      runPos = 0;
-      if(count + t >= bufsize) throw "Error 7";
-      uc = symToByte[mtfSymbol[0]];
-      byteCount[uc] += t;
-      while(t--) buf[count++] = uc;
-    }
-    if(nextSym > symTotal) break;
-    if(count >= bufsize) throw "Error 8";
-    i = nextSym -1;
-    uc = mtfSymbol[i];
-    mtfSymbol.splice(i, 1);
-    mtfSymbol.splice(0, 0, uc);
-    uc = symToByte[uc];
-    byteCount[uc]++;
-    buf[count++] = uc;
-  }
-  if(origPtr < 0 || origPtr >= count) throw "Error 9";
-  var j = 0;
-  for(var i = 0; i < 256; i++){
-    k = j + byteCount[i];
-    byteCount[i] = j;
-    j = k;
-  }
-  for(var i = 0; i < count; i++){
-    uc = buf[i] & 0xff;
-    buf[byteCount[uc]] |= (i << 8);
-    byteCount[uc]++;
-  }
-  var pos = 0, current = 0, run = 0;
-  if(count) {
-    pos = buf[origPtr];
-    current = (pos & 0xff);
-    pos >>= 8;
-    run = -1;
-  }
-  count = count;
-  var output = '';
-  var copies, previous, outbyte;
-  if(!len) len = Infinity;
-  while(count){
-    count--;
-    previous = current;
-    pos = buf[pos];
-    current = pos & 0xff;
-    pos >>= 8;
-    if(run++ == 3){
-      copies = current;
-      outbyte = previous;
-      current = -1;
-    }else{
-      copies = 1;
-      outbyte = current;
-    }
-    while(copies--){
-      output += (String.fromCharCode(outbyte));
-      if(!--len) return output;
-    }
-    if(current != previous) run = 0;
-  }
-  return output;
-}
-
-export default bzip2;

src/node/index.mjs

@@ -5,7 +5,6 @@
  * @copyright Crown Copyright 2017
  * @license Apache-2.0
  */
-import "babel-polyfill";
 
 // Define global environment functions
 global.ENVIRONMENT_IS_WORKER = function() {

src/web/App.mjs

@@ -108,7 +108,7 @@ class App {
     handleError(err, logToConsole) {
         if (logToConsole) log.error(err);
         const msg = err.displayStr || err.toString();
-        this.alert(msg, this.options.errorTimeout, !this.options.showErrors);
+        this.alert(Utils.escapeHtml(msg), this.options.errorTimeout, !this.options.showErrors);
     }
 
 
@@ -244,7 +244,7 @@ class App {
     /**
      * Sets up the adjustable splitter to allow the user to resize areas of the page.
      *
-     * @param {boolean} [minimise=false] - Set this flag if attempting to minimuse frames to 0 width
+     * @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width
      */
     initialiseSplitter(minimise=false) {
         if (this.columnSplitter) this.columnSplitter.destroy();
@@ -252,9 +252,9 @@ class App {
 
         this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
             sizes: [20, 30, 50],
-            minSize: minimise ? [0, 0, 0] : [240, 370, 450],
+            minSize: minimise ? [0, 0, 0] : [240, 310, 450],
             gutterSize: 4,
-            expandToMin: false,
+            expandToMin: true,
             onDrag: function() {
                 this.manager.recipe.adjustWidth();
             }.bind(this)

src/web/ControlsWaiter.mjs

@@ -338,7 +338,7 @@ class ControlsWaiter {
         const saveLink = this.generateStateUrl(true, true, null, "https://gchq.github.io/CyberChef/");
 
         if (reportBugInfo) {
-            reportBugInfo.innerHTML = `* Version: ${PKG_VERSION + (typeof INLINE === "undefined" ? "" : "s")}
+            reportBugInfo.innerHTML = `* Version: ${PKG_VERSION}
 * Compile time: ${COMPILE_TIME}
 * User-Agent:
 ${navigator.userAgent}

src/web/HTMLIngredient.mjs

@@ -293,7 +293,9 @@ class HTMLIngredient {
         const op = el.parentNode.parentNode;
         const target = op.querySelectorAll(".arg")[this.target];
 
-        target.value = el.childNodes[el.selectedIndex].getAttribute("populate-value");
+        const popVal = el.childNodes[el.selectedIndex].getAttribute("populate-value");
+        if (popVal !== "") target.value = popVal;
+
         const evt = new Event("change");
         target.dispatchEvent(evt);
 

src/web/RecipeWaiter.mjs

@@ -124,16 +124,21 @@ class RecipeWaiter {
      * @param {event} evt
      */
     opSortEnd(evt) {
-        if (this.removeIntent) {
-            if (evt.item.parentNode.id === "rec-list") {
-                evt.item.remove();
-            }
+        if (this.removeIntent && evt.item.parentNode.id === "rec-list") {
+            evt.item.remove();
             return;
         }
 
         // Reinitialise the popover on the original element in the ops list because for some reason it
-        // gets destroyed and recreated.
-        this.manager.ops.enableOpsListPopovers(evt.clone);
+        // gets destroyed and recreated. If the clone isn't in the ops list, we use the original item instead.
+        let enableOpsElement;
+        if (evt.clone.parentNode && evt.clone.parentNode.classList.contains("op-list")) {
+            enableOpsElement = evt.clone;
+        } else {
+            enableOpsElement = evt.item;
+            $(evt.item).attr("data-toggle", "popover");
+        }
+        this.manager.ops.enableOpsListPopovers(enableOpsElement);
 
         if (evt.item.parentNode.id !== "rec-list") {
             return;
@@ -612,6 +617,23 @@ class RecipeWaiter {
             ingredientRule.style.gridTemplateColumns = "auto auto auto auto";
             ingredientChildRule.style.gridColumn = "1 / span 4";
         }
+
+        // Hide Chef icon on Bake button if the page is compressed
+        const bakeIcon = document.querySelector("#bake img");
+
+        if (recList.clientWidth < 370) {
+            // Hide Chef icon on Bake button
+            bakeIcon.style.display = "none";
+        } else {
+            bakeIcon.style.display = "inline-block";
+        }
+
+        // Scale controls to fit pane width
+        const controls = document.getElementById("controls");
+        const controlsContent = document.getElementById("controls-content");
+        const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth;
+
+        controlsContent.style.transform = `translate(-50%, -50%) scale(${scale})`;
     }
 
 }

src/web/SeasonalWaiter.mjs

@@ -4,6 +4,10 @@
  * @license Apache-2.0
  */
 
+import clippy from "clippyjs";
+import "./static/clippy_assets/agents/Clippy/agent.js";
+import clippyMap from "./static/clippy_assets/agents/Clippy/map.png";
+
 /**
  * Waiter to handle seasonal events and easter eggs.
  */
@@ -18,6 +22,8 @@ class SeasonalWaiter {
     constructor(app, manager) {
         this.app = app;
         this.manager = manager;
+
+        this.clippyAgent = null;
     }
 
 
@@ -28,6 +34,14 @@ class SeasonalWaiter {
         // Konami code
         this.kkeys = [];
         window.addEventListener("keydown", this.konamiCodeListener.bind(this));
+
+        // Clippy
+        const now = new Date();
+        if (now.getMonth() === 3 && now.getDate() === 1) {
+            this.addClippyOption();
+            this.manager.addDynamicListener(".option-item #clippy", "change", this.setupClippy, this);
+            this.setupClippy();
+        }
     }
 
 
@@ -51,6 +65,285 @@ class SeasonalWaiter {
         }
     }
 
+    /**
+     * Creates an option in the Options menu for turning Clippy on or off
+     */
+    addClippyOption() {
+        const optionsBody = document.getElementById("options-body"),
+            optionItem = document.createElement("span");
+
+        optionItem.className = "bmd-form-group is-filled";
+        optionItem.innerHTML = `<div class="checkbox option-item">
+            <label for="clippy">
+                <input type="checkbox" option="clippy" id="clippy" checked="">
+                Use the Clippy helper
+            </label>
+        </div>`;
+        optionsBody.appendChild(optionItem);
+
+        if (!this.app.options.hasOwnProperty("clippy")) {
+            this.app.options.clippy = true;
+        }
+
+        this.manager.options.load();
+    }
+
+    /**
+     * Sets up Clippy for April Fools Day
+     */
+    setupClippy() {
+        // Destroy any previous agents
+        if (this.clippyAgent) {
+            this.clippyAgent.closeBalloonImmediately();
+            this.clippyAgent.hide();
+        }
+
+        if (!this.app.options.clippy) {
+            if (this.clippyTimeouts) this.clippyTimeouts.forEach(t => clearTimeout(t));
+            return;
+        }
+
+        // Set base path to # to prevent external network requests
+        const clippyAssets = "#";
+        // Shim the library to prevent external network requests
+        shimClippy(clippy);
+
+        const self = this;
+        clippy.load("Clippy", (agent) => {
+            shimClippyAgent(agent);
+            self.clippyAgent = agent;
+            agent.show();
+            agent.speak("Hello, I'm Clippy, your personal cyber assistant!");
+        }, undefined, clippyAssets);
+
+        // Watch for the Auto Magic button appearing
+        const magic = document.getElementById("magic");
+        const observer = new MutationObserver((mutationsList, observer) => {
+            // Read in message and recipe
+            let msg, recipe;
+            for (const mutation of mutationsList) {
+                if (mutation.attributeName === "data-original-title") {
+                    msg = magic.getAttribute("data-original-title");
+                }
+                if (mutation.attributeName === "data-recipe") {
+                    recipe = magic.getAttribute("data-recipe");
+                }
+            }
+
+            // Close balloon if it is currently showing a magic hint
+            const balloon = self.clippyAgent._balloon._balloon;
+            if (balloon.is(":visible") && balloon.text().indexOf("That looks like encoded data") >= 0) {
+                self.clippyAgent._balloon.hide(true);
+                this.clippyAgent._balloon._hidden = true;
+            }
+
+            // If a recipe was found, get Clippy to tell the user
+            if (recipe) {
+                recipe = this.manager.controls.generateStateUrl(true, true, JSON.parse(recipe));
+                msg = `That looks like encoded data!<br><br>${msg}<br><br>Click <a class="clippyMagicRecipe" href="${recipe}">here</a> to load this recipe.`;
+
+                // Stop current balloon activity immediately and trigger speak again
+                this.clippyAgent.closeBalloonImmediately();
+                self.clippyAgent.speak(msg, true);
+                // self.clippyAgent._queue.next();
+            }
+        });
+        observer.observe(document.getElementById("magic"), {attributes: true});
+
+        // Play animations for various things
+        this.manager.addListeners("#search", "click", () => {
+            this.clippyAgent.play("Searching");
+        }, this);
+        this.manager.addListeners("#save,#save-to-file", "click", () => {
+            this.clippyAgent.play("Save");
+        }, this);
+        this.manager.addListeners("#clr-recipe,#clr-io", "click", () => {
+            this.clippyAgent.play("EmptyTrash");
+        }, this);
+        this.manager.addListeners("#bake", "click", e => {
+            if (e.target.closest("button").textContent.toLowerCase().indexOf("bake") >= 0) {
+                this.clippyAgent.play("Thinking");
+            } else {
+                this.clippyAgent.play("EmptyTrash");
+            }
+            this.clippyAgent._queue.clear();
+        }, this);
+        this.manager.addListeners("#input-text", "keydown", () => {
+            this.clippyAgent.play("Writing");
+            this.clippyAgent._queue.clear();
+        }, this);
+        this.manager.addDynamicListener("a.clippyMagicRecipe", "click", (e) => {
+            this.clippyAgent.play("Congratulate");
+        }, this);
+
+        this.clippyTimeouts = [];
+        // Show challenge after timeout
+        this.clippyTimeouts.push(setTimeout(() => {
+            const hex = "1f 8b 08 00 ae a1 9b 5c 00 ff 05 40 a1 12 00 10 0c fd 26 61 5b 76 aa 9d 26 a8 02 02 37 84 f7 fb bb c5 a4 5f 22 c6 09 e5 6e c5 4c 2d 3f e9 30 a6 ea 41 a2 f2 ac 1c 00 00 00";
+            self.clippyAgent.speak(`How about a fun challenge?<br><br>Try decoding this (click to load):<br><a href="#recipe=[]&input=${encodeURIComponent(btoa(hex))}">${hex}</a>`, true);
+            self.clippyAgent.play("GetAttention");
+        }, 1 * 60 * 1000));
+
+        this.clippyTimeouts.push(setTimeout(() => {
+            self.clippyAgent.speak("<i>Did you know?</i><br><br>You can load files into CyberChef up to around 500MB using drag and drop or the load file button.", 15000);
+            self.clippyAgent.play("Wave");
+        }, 2 * 60 * 1000));
+
+        this.clippyTimeouts.push(setTimeout(() => {
+            self.clippyAgent.speak("<i>Did you know?</i><br><br>You can use the 'Fork' operation to split up your input and run the recipe over each branch separately.<br><br><a class='clippyMagicRecipe' href=\"#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&amp;input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA\">Here's an example</a>.", 15000);
+            self.clippyAgent.play("Print");
+        }, 3 * 60 * 1000));
+
+        this.clippyTimeouts.push(setTimeout(() => {
+            self.clippyAgent.speak("<i>Did you know?</i><br><br>The 'Magic' operation uses a number of methods to detect encoded data and the operations which can be used to make sense of it. A technical description of these methods can be found <a href=\"https://github.com/gchq/CyberChef/wiki/Automatic-detection-of-encoded-data-using-CyberChef-Magic\">here</a>.", 15000);
+            self.clippyAgent.play("Alert");
+        }, 4 * 60 * 1000));
+
+        this.clippyTimeouts.push(setTimeout(() => {
+            self.clippyAgent.speak("<i>Did you know?</i><br><br>You can use parts of the input as arguments to operations.<br><br><a class='clippyMagicRecipe' href=\"#recipe=Register('key%3D(%5B%5C%5Cda-f%5D*)',true,false)Find_/_Replace(%7B'option':'Regex','string':'.*data%3D(.*)'%7D,'$1',true,false,true)RC4(%7B'option':'Hex','string':'$R0'%7D,'Hex','Latin1')&amp;input=aHR0cDovL21hbHdhcmV6LmJpei9iZWFjb24ucGhwP2tleT0wZTkzMmE1YyZkYXRhPThkYjdkNWViZTM4NjYzYTU0ZWNiYjMzNGUzZGIxMQ\">Click here for an example</a>.", 15000);
+            self.clippyAgent.play("CheckingSomething");
+        }, 5 * 60 * 1000));
+    }
+
+}
+
+
+/**
+ * Shims various ClippyJS functions to modify behaviour.
+ *
+ * @param {Clippy} clippy - The Clippy library
+ */
+function shimClippy(clippy) {
+    // Shim _loadSounds so that it doesn't actually try to load any sounds
+    clippy.load._loadSounds = function _loadSounds (name, path) {
+        let dfd = clippy.load._sounds[name];
+        if (dfd) return dfd;
+
+        // set dfd if not defined
+        dfd = clippy.load._sounds[name] = $.Deferred();
+
+        // Resolve immediately without loading
+        dfd.resolve({});
+
+        return dfd.promise();
+    };
+
+    // Shim _loadMap so that it uses the local copy
+    clippy.load._loadMap = function _loadMap (path) {
+        let dfd = clippy.load._maps[path];
+        if (dfd) return dfd;
+
+        // set dfd if not defined
+        dfd = clippy.load._maps[path] = $.Deferred();
+
+        const src = clippyMap;
+        const img = new Image();
+
+        img.onload = dfd.resolve;
+        img.onerror = dfd.reject;
+
+        // start loading the map;
+        img.setAttribute("src", src);
+
+        return dfd.promise();
+    };
+
+    // Make sure we don't request the remote map
+    clippy.Animator.prototype._setupElement = function _setupElement (el) {
+        const frameSize = this._data.framesize;
+        el.css("display", "none");
+        el.css({ width: frameSize[0], height: frameSize[1] });
+        el.css("background", "url('" + clippyMap + "') no-repeat");
+
+        return el;
+    };
+}
+
+/**
+ * Shims various ClippyJS Agent functions to modify behaviour.
+ *
+ * @param {Agent} agent - The Clippy Agent
+ */
+function shimClippyAgent(agent) {
+    // Turn off all sounds
+    agent._animator._playSound = () => {};
+
+    // Improve speak function to support HTML markup
+    const self = agent._balloon;
+    agent._balloon.speak = (complete, text, hold) => {
+        self._hidden = false;
+        self.show();
+        const c = self._content;
+        // set height to auto
+        c.height("auto");
+        c.width("auto");
+        // add the text
+        c.html(text);
+        // set height
+        c.height(c.height());
+        c.width(c.width());
+        c.text("");
+        self.reposition();
+
+        self._complete = complete;
+        self._sayWords(text, hold, complete);
+        if (hold) agent._queue.next();
+    };
+
+    // Improve the _sayWords function to allow HTML and support timeouts
+    agent._balloon.WORD_SPEAK_TIME = 60;
+    agent._balloon._sayWords = (text, hold, complete) => {
+        self._active = true;
+        self._hold = hold;
+        const words = text.split(/[^\S-]/);
+        const time = self.WORD_SPEAK_TIME;
+        const el = self._content;
+        let idx = 1;
+        clearTimeout(self.holdTimeout);
+
+        self._addWord = $.proxy(function () {
+            if (!self._active) return;
+            if (idx > words.length) {
+                delete self._addWord;
+                self._active = false;
+                if (!self._hold) {
+                    complete();
+                    self.hide();
+                } else if (typeof hold === "number") {
+                    self.holdTimeout = setTimeout(() => {
+                        self._hold = false;
+                        complete();
+                        self.hide();
+                    }, hold);
+                }
+            } else {
+                el.html(words.slice(0, idx).join(" "));
+                idx++;
+                self._loop = window.setTimeout($.proxy(self._addWord, self), time);
+            }
+        }, self);
+
+        self._addWord();
+    };
+
+    // Add break-word to balloon CSS
+    agent._balloon._balloon.css("word-break", "break-word");
+
+    // Close the balloon on click (unless it was a link)
+    agent._balloon._balloon.click(e => {
+        if (e.target.nodeName !== "A") {
+            agent._balloon.hide(true);
+            agent._balloon._hidden = true;
+        }
+    });
+
+    // Add function to immediately close the balloon even if it is currently doing something
+    agent.closeBalloonImmediately = () => {
+        agent._queue.clear();
+        agent._balloon.hide(true);
+        agent._balloon._hidden = true;
+        agent._queue.next();
+    };
 }
 
 export default SeasonalWaiter;

src/web/html/index.html

@@ -131,13 +131,6 @@
             };
             window.addEventListener("error", loadingErrorHandler);
         </script>
-        <% if (htmlWebpackPlugin.options.inline) { %>
-            <meta name="robots" content="noindex" />
-        <% } else { %>
-            <script type="application/ld+json">
-                <% print(JSON.stringify(require("../static/structuredData.json"))); %>
-            </script>
-        <% } %>
     </head>
     <body>
         <!-- Preloader overlay -->
@@ -153,11 +146,7 @@
         <div id="content-wrapper">
             <div id="banner" class="row">
                 <div class="col" style="text-align: left; padding-left: 10px;">
-                    <% if (htmlWebpackPlugin.options.inline) { %>
-                        <span>Version <%= htmlWebpackPlugin.options.version %></span>
-                    <% } else { %>
-                        <a href="cyberchef.htm" download>Download CyberChef <i class="material-icons">file_download</i></a>
-                    <% } %>
+                    <a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download>Download CyberChef <i class="material-icons">file_download</i></a>
                 </div>
                 <div class="col-md-6" id="notice-wrapper">
                     <span id="notice">
@@ -202,7 +191,7 @@
                     <ul id="rec-list" class="list-area no-select"></ul>
 
                     <div id="controls" class="no-select">
-                        <div class="d-flex align-items-center">
+                        <div id="controls-content" class="d-flex align-items-center">
                             <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
                                 Step
                             </button>
@@ -591,7 +580,7 @@
                                     What sort of things can I do with CyberChef?
                                 </a>
                                 <div class="collapse" id="faq-examples">
-                                    <p>There are around 200 operations in CyberChef allowing you to carry out simple and complex tasks easily. Here are some examples:</p>
+                                    <p>There are around 300 operations in CyberChef allowing you to carry out simple and complex tasks easily. Here are some examples:</p>
                                     <ul>
                                         <li><a href="#recipe=From_Base64('A-Za-z0-9%2B/%3D',true)&input=VTI4Z2JHOXVaeUJoYm1RZ2RHaGhibXR6SUdadmNpQmhiR3dnZEdobElHWnBjMmd1">Decode a Base64-encoded string</a></li>
                                         <li><a href="#recipe=Translate_DateTime_Format('Standard%20date%20and%20time','DD/MM/YYYY%20HH:mm:ss','UTC','dddd%20Do%20MMMM%20YYYY%20HH:mm:ss%20Z%20z','Australia/Queensland')&input=MTUvMDYvMjAxNSAyMDo0NTowMA">Convert a date and time to a different time zone</a></li>

src/web/index.js

@@ -8,10 +8,9 @@
 import "./stylesheets/index.js";
 
 // Libs
-import "babel-polyfill";
 import "arrive";
 import "snackbarjs";
-import "bootstrap-material-design";
+import "bootstrap-material-design/js/index";
 import "bootstrap-colorpicker";
 import moment from "moment-timezone";
 import * as CanvasComponents from "../core/lib/CanvasComponents";

src/web/static/clippy_assets/clippy.css

@@ -0,0 +1,62 @@
+.clippy, .clippy-balloon {
+    position: fixed;
+    z-index: 1000;
+    cursor: pointer;
+}
+
+.clippy-balloon {
+
+    background: #FFC;
+    color: black;
+    padding: 8px;
+    border: 1px solid black;
+    border-radius: 5px;
+
+}
+
+.clippy-content {
+    max-width: 200px;
+    min-width: 120px;
+    font-family: "Microsoft Sans", sans-serif;
+    font-size: 10pt;
+}
+
+.clippy-tip {
+    width: 10px;
+    height: 16px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAMAAAAlvKiEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF///MAAAA////52QwgAAAAAN0Uk5T//8A18oNQQAAAGxJREFUeNqs0kEOwCAIRFHn3//QTUU6xMyyxii+jQosrTPkyPEM6IN3FtzIRk1U4dFeKWQiH6pRRowMVKEmvronEynkwj0uZJgR22+YLopPSo9P34wJSamLSU7lSIWLJU7NkNomNlhqxUeAAQC+TQLZyEuJBwAAAABJRU5ErkJggg==) no-repeat;
+    position: absolute;
+}
+
+.clippy-top-left .clippy-tip {
+    top: 100%;
+    margin-top: 0px;
+    left: 100%;
+    margin-left: -50px;
+}
+
+.clippy-top-right .clippy-tip {
+    top: 100%;
+    margin-top: 0px;
+    left: 0;
+    margin-left: 50px;
+    background-position: -10px 0;
+
+}
+
+.clippy-bottom-right .clippy-tip {
+    top: 0;
+    margin-top: -16px;
+    left: 0;
+    margin-left: 50px;
+    background-position: -10px -16px;
+}
+
+.clippy-bottom-left .clippy-tip {
+    top: 0;
+    margin-top: -16px;
+    left: 100%;
+    margin-left: -50px;
+    background-position: 0px -16px;
+}
+

src/web/static/fonts/bmfonts/Roboto72White.fnt

@@ -0,0 +1,485 @@
+info face="Roboto" size=72 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=-2,-2
+common lineHeight=85 base=67 scaleW=512 scaleH=512 pages=1 packed=0
+page id=0 file="Roboto72White.png"
+chars count=98
+char id=0       x=0    y=0    width=0    height=0    xoffset=-1   yoffset=66   xadvance=0    page=0    chnl=0 
+char id=10      x=0    y=0    width=70   height=99   xoffset=2    yoffset=-11  xadvance=74   page=0    chnl=0 
+char id=32      x=0    y=0    width=0    height=0    xoffset=-1   yoffset=66   xadvance=18   page=0    chnl=0 
+char id=33      x=493  y=99   width=10   height=55   xoffset=5    yoffset=14   xadvance=19   page=0    chnl=0 
+char id=34      x=446  y=319  width=16   height=19   xoffset=4    yoffset=12   xadvance=23   page=0    chnl=0 
+char id=35      x=204  y=265  width=41   height=54   xoffset=3    yoffset=14   xadvance=44   page=0    chnl=0 
+char id=36      x=269  y=0    width=35   height=69   xoffset=3    yoffset=6    xadvance=40   page=0    chnl=0 
+char id=37      x=31   y=155  width=48   height=56   xoffset=3    yoffset=13   xadvance=53   page=0    chnl=0 
+char id=38      x=79   y=155  width=43   height=56   xoffset=3    yoffset=13   xadvance=45   page=0    chnl=0 
+char id=39      x=503  y=99   width=7    height=19   xoffset=3    yoffset=12   xadvance=13   page=0    chnl=0 
+char id=40      x=70   y=0    width=21   height=78   xoffset=4    yoffset=7    xadvance=25   page=0    chnl=0 
+char id=41      x=91   y=0    width=22   height=78   xoffset=-1   yoffset=7    xadvance=25   page=0    chnl=0 
+char id=42      x=342  y=319  width=32   height=32   xoffset=-1   yoffset=14   xadvance=31   page=0    chnl=0 
+char id=43      x=242  y=319  width=37   height=40   xoffset=2    yoffset=23   xadvance=41   page=0    chnl=0 
+char id=44      x=433  y=319  width=13   height=21   xoffset=-1   yoffset=58   xadvance=14   page=0    chnl=0 
+char id=45      x=27   y=360  width=19   height=8    xoffset=0    yoffset=41   xadvance=19   page=0    chnl=0 
+char id=46      x=17   y=360  width=10   height=11   xoffset=4    yoffset=58   xadvance=19   page=0    chnl=0 
+char id=47      x=355  y=0    width=30   height=58   xoffset=-1   yoffset=14   xadvance=30   page=0    chnl=0 
+char id=48      x=449  y=99   width=34   height=56   xoffset=3    yoffset=13   xadvance=40   page=0    chnl=0 
+char id=49      x=474  y=211  width=22   height=54   xoffset=5    yoffset=14   xadvance=40   page=0    chnl=0 
+char id=50      x=195  y=155  width=37   height=55   xoffset=2    yoffset=13   xadvance=41   page=0    chnl=0 
+char id=51      x=379  y=99   width=35   height=56   xoffset=2    yoffset=13   xadvance=40   page=0    chnl=0 
+char id=52      x=128  y=265  width=39   height=54   xoffset=1    yoffset=14   xadvance=41   page=0    chnl=0 
+char id=53      x=232  y=155  width=35   height=55   xoffset=4    yoffset=14   xadvance=40   page=0    chnl=0 
+char id=54      x=267  y=155  width=35   height=55   xoffset=4    yoffset=14   xadvance=41   page=0    chnl=0 
+char id=55      x=167  y=265  width=37   height=54   xoffset=2    yoffset=14   xadvance=41   page=0    chnl=0 
+char id=56      x=414  y=99   width=35   height=56   xoffset=3    yoffset=13   xadvance=40   page=0    chnl=0 
+char id=57      x=302  y=155  width=34   height=55   xoffset=3    yoffset=13   xadvance=41   page=0    chnl=0 
+char id=58      x=495  y=265  width=10   height=41   xoffset=4    yoffset=28   xadvance=18   page=0    chnl=0 
+char id=59      x=496  y=211  width=13   height=52   xoffset=0    yoffset=28   xadvance=15   page=0    chnl=0 
+char id=60      x=279  y=319  width=31   height=35   xoffset=2    yoffset=27   xadvance=37   page=0    chnl=0 
+char id=61      x=402  y=319  width=31   height=23   xoffset=4    yoffset=31   xadvance=39   page=0    chnl=0 
+char id=62      x=310  y=319  width=32   height=35   xoffset=4    yoffset=27   xadvance=38   page=0    chnl=0 
+char id=63      x=0    y=155  width=31   height=56   xoffset=2    yoffset=13   xadvance=34   page=0    chnl=0 
+char id=64      x=210  y=0    width=59   height=69   xoffset=3    yoffset=15   xadvance=65   page=0    chnl=0 
+char id=65      x=336  y=155  width=49   height=54   xoffset=-1   yoffset=14   xadvance=47   page=0    chnl=0 
+char id=66      x=385  y=155  width=37   height=54   xoffset=5    yoffset=14   xadvance=45   page=0    chnl=0 
+char id=67      x=0    y=99   width=42   height=56   xoffset=3    yoffset=13   xadvance=46   page=0    chnl=0 
+char id=68      x=422  y=155  width=39   height=54   xoffset=5    yoffset=14   xadvance=47   page=0    chnl=0 
+char id=69      x=461  y=155  width=35   height=54   xoffset=5    yoffset=14   xadvance=41   page=0    chnl=0 
+char id=70      x=0    y=211  width=34   height=54   xoffset=5    yoffset=14   xadvance=40   page=0    chnl=0 
+char id=71      x=42   y=99   width=42   height=56   xoffset=3    yoffset=13   xadvance=49   page=0    chnl=0 
+char id=72      x=34   y=211  width=41   height=54   xoffset=5    yoffset=14   xadvance=51   page=0    chnl=0 
+char id=73      x=496  y=155  width=9    height=54   xoffset=5    yoffset=14   xadvance=19   page=0    chnl=0 
+char id=74      x=122  y=155  width=34   height=55   xoffset=1    yoffset=14   xadvance=40   page=0    chnl=0 
+char id=75      x=75   y=211  width=41   height=54   xoffset=5    yoffset=14   xadvance=45   page=0    chnl=0 
+char id=76      x=116  y=211  width=33   height=54   xoffset=5    yoffset=14   xadvance=39   page=0    chnl=0 
+char id=77      x=149  y=211  width=53   height=54   xoffset=5    yoffset=14   xadvance=63   page=0    chnl=0 
+char id=78      x=202  y=211  width=41   height=54   xoffset=5    yoffset=14   xadvance=51   page=0    chnl=0 
+char id=79      x=84   y=99   width=43   height=56   xoffset=3    yoffset=13   xadvance=49   page=0    chnl=0 
+char id=80      x=243  y=211  width=39   height=54   xoffset=5    yoffset=14   xadvance=45   page=0    chnl=0 
+char id=81      x=304  y=0    width=44   height=64   xoffset=3    yoffset=13   xadvance=49   page=0    chnl=0 
+char id=82      x=282  y=211  width=40   height=54   xoffset=5    yoffset=14   xadvance=45   page=0    chnl=0 
+char id=83      x=127  y=99   width=39   height=56   xoffset=2    yoffset=13   xadvance=43   page=0    chnl=0 
+char id=84      x=322  y=211  width=42   height=54   xoffset=1    yoffset=14   xadvance=44   page=0    chnl=0 
+char id=85      x=156  y=155  width=39   height=55   xoffset=4    yoffset=14   xadvance=47   page=0    chnl=0 
+char id=86      x=364  y=211  width=47   height=54   xoffset=-1   yoffset=14   xadvance=46   page=0    chnl=0 
+char id=87      x=411  y=211  width=63   height=54   xoffset=1    yoffset=14   xadvance=64   page=0    chnl=0 
+char id=88      x=0    y=265  width=44   height=54   xoffset=1    yoffset=14   xadvance=45   page=0    chnl=0 
+char id=89      x=44   y=265  width=45   height=54   xoffset=-1   yoffset=14   xadvance=43   page=0    chnl=0 
+char id=90      x=89   y=265  width=39   height=54   xoffset=2    yoffset=14   xadvance=43   page=0    chnl=0 
+char id=91      x=161  y=0    width=16   height=72   xoffset=4    yoffset=7    xadvance=19   page=0    chnl=0 
+char id=92      x=385  y=0    width=30   height=58   xoffset=0    yoffset=14   xadvance=30   page=0    chnl=0 
+char id=93      x=177  y=0    width=16   height=72   xoffset=0    yoffset=7    xadvance=20   page=0    chnl=0 
+char id=94      x=374  y=319  width=28   height=28   xoffset=1    yoffset=14   xadvance=30   page=0    chnl=0 
+char id=95      x=46   y=360  width=34   height=8    xoffset=0    yoffset=65   xadvance=34   page=0    chnl=0 
+char id=96      x=0    y=360  width=17   height=13   xoffset=1    yoffset=11   xadvance=22   page=0    chnl=0 
+char id=97      x=268  y=265  width=34   height=42   xoffset=3    yoffset=27   xadvance=39   page=0    chnl=0 
+char id=98      x=415  y=0    width=34   height=57   xoffset=4    yoffset=12   xadvance=40   page=0    chnl=0 
+char id=99      x=302  y=265  width=34   height=42   xoffset=2    yoffset=27   xadvance=38   page=0    chnl=0 
+char id=100     x=449  y=0    width=34   height=57   xoffset=2    yoffset=12   xadvance=40   page=0    chnl=0 
+char id=101     x=336  y=265  width=34   height=42   xoffset=2    yoffset=27   xadvance=38   page=0    chnl=0 
+char id=102     x=483  y=0    width=25   height=57   xoffset=1    yoffset=11   xadvance=26   page=0    chnl=0 
+char id=103     x=166  y=99   width=34   height=56   xoffset=2    yoffset=27   xadvance=40   page=0    chnl=0 
+char id=104     x=200  y=99   width=32   height=56   xoffset=4    yoffset=12   xadvance=40   page=0    chnl=0 
+char id=105     x=483  y=99   width=10   height=55   xoffset=4    yoffset=13   xadvance=18   page=0    chnl=0 
+char id=106     x=193  y=0    width=17   height=71   xoffset=-4   yoffset=13   xadvance=17   page=0    chnl=0 
+char id=107     x=232  y=99   width=34   height=56   xoffset=4    yoffset=12   xadvance=37   page=0    chnl=0 
+char id=108     x=266  y=99   width=9    height=56   xoffset=4    yoffset=12   xadvance=17   page=0    chnl=0 
+char id=109     x=439  y=265  width=56   height=41   xoffset=4    yoffset=27   xadvance=64   page=0    chnl=0 
+char id=110     x=0    y=319  width=32   height=41   xoffset=4    yoffset=27   xadvance=40   page=0    chnl=0 
+char id=111     x=370  y=265  width=37   height=42   xoffset=2    yoffset=27   xadvance=41   page=0    chnl=0 
+char id=112     x=275  y=99   width=34   height=56   xoffset=4    yoffset=27   xadvance=40   page=0    chnl=0 
+char id=113     x=309  y=99   width=34   height=56   xoffset=2    yoffset=27   xadvance=41   page=0    chnl=0 
+char id=114     x=32   y=319  width=21   height=41   xoffset=4    yoffset=27   xadvance=25   page=0    chnl=0 
+char id=115     x=407  y=265  width=32   height=42   xoffset=2    yoffset=27   xadvance=37   page=0    chnl=0 
+char id=116     x=245  y=265  width=23   height=51   xoffset=0    yoffset=18   xadvance=25   page=0    chnl=0 
+char id=117     x=53   y=319  width=32   height=41   xoffset=4    yoffset=28   xadvance=40   page=0    chnl=0 
+char id=118     x=85   y=319  width=35   height=40   xoffset=0    yoffset=28   xadvance=35   page=0    chnl=0 
+char id=119     x=120  y=319  width=54   height=40   xoffset=0    yoffset=28   xadvance=54   page=0    chnl=0 
+char id=120     x=174  y=319  width=36   height=40   xoffset=0    yoffset=28   xadvance=36   page=0    chnl=0 
+char id=121     x=343  y=99   width=36   height=56   xoffset=-1   yoffset=28   xadvance=34   page=0    chnl=0 
+char id=122     x=210  y=319  width=32   height=40   xoffset=2    yoffset=28   xadvance=35   page=0    chnl=0 
+char id=123     x=113  y=0    width=24   height=73   xoffset=1    yoffset=9    xadvance=25   page=0    chnl=0 
+char id=124     x=348  y=0    width=7    height=63   xoffset=5    yoffset=14   xadvance=17   page=0    chnl=0 
+char id=125     x=137  y=0    width=24   height=73   xoffset=-1   yoffset=9    xadvance=24   page=0    chnl=0 
+char id=126     x=462  y=319  width=42   height=16   xoffset=4    yoffset=38   xadvance=50   page=0    chnl=0 
+char id=127     x=0    y=0    width=70   height=99   xoffset=2    yoffset=-11  xadvance=74   page=0    chnl=0 
+kernings count=382
+kerning first=70 second=74 amount=-9
+kerning first=34 second=97 amount=-2
+kerning first=34 second=101 amount=-2
+kerning first=34 second=113 amount=-2
+kerning first=34 second=99 amount=-2
+kerning first=70 second=99 amount=-1
+kerning first=88 second=113 amount=-1
+kerning first=84 second=46 amount=-8
+kerning first=84 second=119 amount=-2
+kerning first=87 second=97 amount=-1
+kerning first=90 second=117 amount=-1
+kerning first=39 second=97 amount=-2
+kerning first=69 second=111 amount=-1
+kerning first=87 second=41 amount=1
+kerning first=76 second=86 amount=-6
+kerning first=121 second=34 amount=1
+kerning first=40 second=86 amount=1
+kerning first=85 second=65 amount=-1
+kerning first=89 second=89 amount=1
+kerning first=72 second=65 amount=1
+kerning first=104 second=39 amount=-4
+kerning first=114 second=102 amount=1
+kerning first=89 second=42 amount=-2
+kerning first=114 second=34 amount=1
+kerning first=84 second=115 amount=-4
+kerning first=84 second=71 amount=-1
+kerning first=89 second=101 amount=-2
+kerning first=89 second=45 amount=-2
+kerning first=122 second=99 amount=-1
+kerning first=78 second=88 amount=1
+kerning first=68 second=89 amount=-2
+kerning first=122 second=103 amount=-1
+kerning first=78 second=84 amount=-1
+kerning first=86 second=103 amount=-2
+kerning first=89 second=67 amount=-1
+kerning first=89 second=79 amount=-1
+kerning first=75 second=111 amount=-1
+kerning first=111 second=120 amount=-1
+kerning first=87 second=44 amount=-4
+kerning first=91 second=74 amount=-1
+kerning first=120 second=111 amount=-1
+kerning first=84 second=111 amount=-3
+kerning first=102 second=113 amount=-1
+kerning first=80 second=88 amount=-1
+kerning first=66 second=84 amount=-1
+kerning first=65 second=87 amount=-2
+kerning first=86 second=100 amount=-2
+kerning first=122 second=100 amount=-1
+kerning first=75 second=118 amount=-1
+kerning first=70 second=118 amount=-1
+kerning first=73 second=88 amount=1
+kerning first=70 second=121 amount=-1
+kerning first=65 second=34 amount=-4
+kerning first=39 second=101 amount=-2
+kerning first=75 second=101 amount=-1
+kerning first=84 second=99 amount=-3
+kerning first=84 second=65 amount=-3
+kerning first=112 second=39 amount=-1
+kerning first=76 second=39 amount=-12
+kerning first=78 second=65 amount=1
+kerning first=88 second=45 amount=-2
+kerning first=65 second=121 amount=-2
+kerning first=34 second=111 amount=-2
+kerning first=89 second=85 amount=-3
+kerning first=114 second=99 amount=-1
+kerning first=86 second=125 amount=1
+kerning first=70 second=111 amount=-1
+kerning first=89 second=120 amount=-1
+kerning first=90 second=119 amount=-1
+kerning first=120 second=99 amount=-1
+kerning first=89 second=117 amount=-1
+kerning first=82 second=89 amount=-2
+kerning first=75 second=117 amount=-1
+kerning first=34 second=34 amount=-4
+kerning first=89 second=110 amount=-1
+kerning first=88 second=101 amount=-1
+kerning first=107 second=103 amount=-1
+kerning first=34 second=115 amount=-3
+kerning first=98 second=39 amount=-1
+kerning first=70 second=65 amount=-6
+kerning first=70 second=46 amount=-8
+kerning first=98 second=34 amount=-1
+kerning first=70 second=84 amount=1
+kerning first=114 second=100 amount=-1
+kerning first=88 second=79 amount=-1
+kerning first=39 second=113 amount=-2
+kerning first=114 second=103 amount=-1
+kerning first=77 second=65 amount=1
+kerning first=120 second=103 amount=-1
+kerning first=114 second=121 amount=1
+kerning first=89 second=100 amount=-2
+kerning first=80 second=65 amount=-5
+kerning first=121 second=111 amount=-1
+kerning first=84 second=74 amount=-8
+kerning first=122 second=111 amount=-1
+kerning first=114 second=118 amount=1
+kerning first=102 second=41 amount=1
+kerning first=122 second=113 amount=-1
+kerning first=89 second=122 amount=-1
+kerning first=89 second=38 amount=-1
+kerning first=81 second=89 amount=-1
+kerning first=114 second=111 amount=-1
+kerning first=46 second=34 amount=-6
+kerning first=84 second=112 amount=-4
+kerning first=112 second=34 amount=-1
+kerning first=76 second=34 amount=-12
+kerning first=102 second=125 amount=1
+kerning first=39 second=115 amount=-3
+kerning first=76 second=118 amount=-5
+kerning first=86 second=99 amount=-2
+kerning first=84 second=84 amount=1
+kerning first=86 second=65 amount=-3
+kerning first=87 second=101 amount=-1
+kerning first=67 second=125 amount=-1
+kerning first=120 second=113 amount=-1
+kerning first=118 second=46 amount=-4
+kerning first=88 second=103 amount=-1
+kerning first=111 second=122 amount=-1
+kerning first=77 second=84 amount=-1
+kerning first=114 second=46 amount=-4
+kerning first=34 second=39 amount=-4
+kerning first=114 second=44 amount=-4
+kerning first=69 second=84 amount=1
+kerning first=89 second=46 amount=-7
+kerning first=97 second=39 amount=-2
+kerning first=34 second=100 amount=-2
+kerning first=70 second=100 amount=-1
+kerning first=84 second=120 amount=-3
+kerning first=90 second=118 amount=-1
+kerning first=70 second=114 amount=-1
+kerning first=34 second=112 amount=-1
+kerning first=109 second=34 amount=-4
+kerning first=86 second=113 amount=-2
+kerning first=88 second=71 amount=-1
+kerning first=66 second=89 amount=-2
+kerning first=102 second=103 amount=-1
+kerning first=88 second=67 amount=-1
+kerning first=39 second=110 amount=-1
+kerning first=75 second=110 amount=-1
+kerning first=88 second=117 amount=-1
+kerning first=89 second=118 amount=-1
+kerning first=97 second=118 amount=-1
+kerning first=87 second=65 amount=-2
+kerning first=73 second=89 amount=-1
+kerning first=89 second=74 amount=-3
+kerning first=102 second=101 amount=-1
+kerning first=86 second=111 amount=-2
+kerning first=65 second=119 amount=-1
+kerning first=84 second=100 amount=-3
+kerning first=104 second=34 amount=-4
+kerning first=86 second=41 amount=1
+kerning first=111 second=34 amount=-5
+kerning first=40 second=89 amount=1
+kerning first=121 second=39 amount=1
+kerning first=68 second=90 amount=-1
+kerning first=114 second=113 amount=-1
+kerning first=68 second=88 amount=-1
+kerning first=98 second=120 amount=-1
+kerning first=110 second=34 amount=-4
+kerning first=119 second=44 amount=-4
+kerning first=119 second=46 amount=-4
+kerning first=118 second=44 amount=-4
+kerning first=84 second=114 amount=-3
+kerning first=86 second=97 amount=-2
+kerning first=68 second=86 amount=-1
+kerning first=86 second=93 amount=1
+kerning first=97 second=34 amount=-2
+kerning first=34 second=65 amount=-4
+kerning first=84 second=118 amount=-3
+kerning first=76 second=84 amount=-10
+kerning first=107 second=99 amount=-1
+kerning first=121 second=46 amount=-4
+kerning first=123 second=85 amount=-1
+kerning first=65 second=63 amount=-2
+kerning first=89 second=44 amount=-7
+kerning first=80 second=118 amount=1
+kerning first=112 second=122 amount=-1
+kerning first=79 second=65 amount=-1
+kerning first=80 second=121 amount=1
+kerning first=118 second=34 amount=1
+kerning first=87 second=45 amount=-2
+kerning first=69 second=100 amount=-1
+kerning first=87 second=103 amount=-1
+kerning first=112 second=120 amount=-1
+kerning first=68 second=44 amount=-4
+kerning first=86 second=45 amount=-1
+kerning first=39 second=34 amount=-4
+kerning first=68 second=46 amount=-4
+kerning first=65 second=89 amount=-3
+kerning first=69 second=118 amount=-1
+kerning first=88 second=99 amount=-1
+kerning first=87 second=46 amount=-4
+kerning first=47 second=47 amount=-8
+kerning first=73 second=65 amount=1
+kerning first=123 second=74 amount=-1
+kerning first=69 second=102 amount=-1
+kerning first=87 second=111 amount=-1
+kerning first=39 second=112 amount=-1
+kerning first=89 second=116 amount=-1
+kerning first=70 second=113 amount=-1
+kerning first=77 second=88 amount=1
+kerning first=84 second=32 amount=-1
+kerning first=90 second=103 amount=-1
+kerning first=65 second=86 amount=-3
+kerning first=75 second=112 amount=-1
+kerning first=39 second=109 amount=-1
+kerning first=75 second=81 amount=-1
+kerning first=89 second=115 amount=-2
+kerning first=84 second=83 amount=-1
+kerning first=89 second=87 amount=1
+kerning first=114 second=101 amount=-1
+kerning first=116 second=111 amount=-1
+kerning first=90 second=100 amount=-1
+kerning first=84 second=122 amount=-2
+kerning first=68 second=84 amount=-1
+kerning first=32 second=84 amount=-1
+kerning first=84 second=117 amount=-3
+kerning first=74 second=65 amount=-1
+kerning first=107 second=101 amount=-1
+kerning first=75 second=109 amount=-1
+kerning first=80 second=46 amount=-11
+kerning first=89 second=93 amount=1
+kerning first=89 second=65 amount=-3
+kerning first=87 second=117 amount=-1
+kerning first=89 second=81 amount=-1
+kerning first=39 second=103 amount=-2
+kerning first=86 second=101 amount=-2
+kerning first=86 second=117 amount=-1
+kerning first=84 second=113 amount=-3
+kerning first=34 second=110 amount=-1
+kerning first=89 second=84 amount=1
+kerning first=84 second=110 amount=-4
+kerning first=39 second=99 amount=-2
+kerning first=88 second=121 amount=-1
+kerning first=65 second=39 amount=-4
+kerning first=110 second=39 amount=-4
+kerning first=75 second=67 amount=-1
+kerning first=88 second=118 amount=-1
+kerning first=86 second=114 amount=-1
+kerning first=80 second=74 amount=-7
+kerning first=84 second=97 amount=-4
+kerning first=82 second=84 amount=-3
+kerning first=91 second=85 amount=-1
+kerning first=102 second=99 amount=-1
+kerning first=66 second=86 amount=-1
+kerning first=120 second=101 amount=-1
+kerning first=102 second=93 amount=1
+kerning first=75 second=100 amount=-1
+kerning first=84 second=79 amount=-1
+kerning first=111 second=121 amount=-1
+kerning first=75 second=121 amount=-1
+kerning first=81 second=87 amount=-1
+kerning first=107 second=113 amount=-1
+kerning first=120 second=100 amount=-1
+kerning first=90 second=79 amount=-1
+kerning first=89 second=114 amount=-1
+kerning first=122 second=101 amount=-1
+kerning first=111 second=118 amount=-1
+kerning first=82 second=86 amount=-1
+kerning first=67 second=84 amount=-1
+kerning first=70 second=101 amount=-1
+kerning first=89 second=83 amount=-1
+kerning first=114 second=97 amount=-1
+kerning first=70 second=97 amount=-1
+kerning first=89 second=102 amount=-1
+kerning first=78 second=89 amount=-1
+kerning first=70 second=44 amount=-8
+kerning first=44 second=39 amount=-6
+kerning first=84 second=45 amount=-8
+kerning first=89 second=121 amount=-1
+kerning first=84 second=86 amount=1
+kerning first=87 second=99 amount=-1
+kerning first=98 second=122 amount=-1
+kerning first=89 second=112 amount=-1
+kerning first=89 second=103 amount=-2
+kerning first=88 second=81 amount=-1
+kerning first=102 second=34 amount=1
+kerning first=109 second=39 amount=-4
+kerning first=81 second=84 amount=-2
+kerning first=121 second=97 amount=-1
+kerning first=89 second=99 amount=-2
+kerning first=89 second=125 amount=1
+kerning first=81 second=86 amount=-1
+kerning first=114 second=116 amount=2
+kerning first=114 second=119 amount=1
+kerning first=84 second=44 amount=-8
+kerning first=102 second=39 amount=1
+kerning first=44 second=34 amount=-6
+kerning first=34 second=109 amount=-1
+kerning first=75 second=119 amount=-2
+kerning first=76 second=65 amount=1
+kerning first=84 second=81 amount=-1
+kerning first=76 second=121 amount=-5
+kerning first=69 second=101 amount=-1
+kerning first=89 second=111 amount=-2
+kerning first=80 second=90 amount=-1
+kerning first=89 second=97 amount=-3
+kerning first=89 second=109 amount=-1
+kerning first=90 second=99 amount=-1
+kerning first=89 second=86 amount=1
+kerning first=79 second=88 amount=-1
+kerning first=70 second=103 amount=-1
+kerning first=34 second=103 amount=-2
+kerning first=84 second=67 amount=-1
+kerning first=76 second=79 amount=-2
+kerning first=89 second=41 amount=1
+kerning first=65 second=118 amount=-2
+kerning first=75 second=71 amount=-1
+kerning first=76 second=87 amount=-5
+kerning first=77 second=89 amount=-1
+kerning first=90 second=113 amount=-1
+kerning first=79 second=89 amount=-2
+kerning first=118 second=111 amount=-1
+kerning first=118 second=97 amount=-1
+kerning first=88 second=100 amount=-1
+kerning first=90 second=121 amount=-1
+kerning first=89 second=113 amount=-2
+kerning first=84 second=87 amount=1
+kerning first=39 second=111 amount=-2
+kerning first=80 second=44 amount=-11
+kerning first=39 second=100 amount=-2
+kerning first=75 second=113 amount=-1
+kerning first=88 second=111 amount=-1
+kerning first=84 second=89 amount=1
+kerning first=84 second=103 amount=-3
+kerning first=70 second=117 amount=-1
+kerning first=67 second=41 amount=-1
+kerning first=89 second=71 amount=-1
+kerning first=121 second=44 amount=-4
+kerning first=97 second=121 amount=-1
+kerning first=87 second=113 amount=-1
+kerning first=73 second=84 amount=-1
+kerning first=84 second=101 amount=-3
+kerning first=75 second=99 amount=-1
+kerning first=65 second=85 amount=-1
+kerning first=76 second=67 amount=-2
+kerning first=76 second=81 amount=-2
+kerning first=75 second=79 amount=-1
+kerning first=39 second=65 amount=-4
+kerning first=76 second=117 amount=-2
+kerning first=65 second=84 amount=-5
+kerning first=90 second=101 amount=-1
+kerning first=84 second=121 amount=-3
+kerning first=69 second=99 amount=-1
+kerning first=114 second=39 amount=1
+kerning first=84 second=109 amount=-4
+kerning first=76 second=119 amount=-3
+kerning first=76 second=85 amount=-2
+kerning first=65 second=116 amount=-1
+kerning first=76 second=71 amount=-2
+kerning first=79 second=90 amount=-1
+kerning first=107 second=100 amount=-1
+kerning first=90 second=111 amount=-1
+kerning first=79 second=44 amount=-4
+kerning first=75 second=45 amount=-2
+kerning first=40 second=87 amount=1
+kerning first=79 second=86 amount=-1
+kerning first=102 second=100 amount=-1
+kerning first=72 second=89 amount=-1
+kerning first=72 second=88 amount=1
+kerning first=79 second=46 amount=-4
+kerning first=76 second=89 amount=-8
+kerning first=68 second=65 amount=-1
+kerning first=79 second=84 amount=-1
+kerning first=87 second=100 amount=-1
+kerning first=75 second=103 amount=-1
+kerning first=90 second=67 amount=-1
+kerning first=69 second=103 amount=-1
+kerning first=90 second=71 amount=-1
+kerning first=86 second=44 amount=-8
+kerning first=69 second=121 amount=-1
+kerning first=87 second=114 amount=-1
+kerning first=118 second=39 amount=1
+kerning first=46 second=39 amount=-6
+kerning first=72 second=84 amount=-1
+kerning first=86 second=46 amount=-8
+kerning first=69 second=113 amount=-1
+kerning first=69 second=119 amount=-1
+kerning first=39 second=39 amount=-4
+kerning first=69 second=117 amount=-1
+kerning first=111 second=39 amount=-5
+kerning first=90 second=81 amount=-1

src/web/static/fonts/bmfonts/RobotoBlack72White.fnt

@@ -0,0 +1,488 @@
+info face="Roboto Black" size=72 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=-2,-2
+common lineHeight=85 base=67 scaleW=512 scaleH=512 pages=1 packed=0
+page id=0 file="RobotoBlack72White.png"
+chars count=98
+char id=0       x=0    y=0    width=0    height=0    xoffset=-1   yoffset=66   xadvance=0    page=0    chnl=0 
+char id=10      x=0    y=0    width=70   height=99   xoffset=2    yoffset=-11  xadvance=74   page=0    chnl=0 
+char id=32      x=0    y=0    width=0    height=0    xoffset=-1   yoffset=66   xadvance=18   page=0    chnl=0 
+char id=33      x=460  y=156  width=15   height=55   xoffset=3    yoffset=14   xadvance=20   page=0    chnl=0 
+char id=34      x=207  y=362  width=22   height=22   xoffset=0    yoffset=12   xadvance=23   page=0    chnl=0 
+char id=35      x=404  y=266  width=41   height=54   xoffset=0    yoffset=14   xadvance=42   page=0    chnl=0 
+char id=36      x=220  y=0    width=38   height=69   xoffset=2    yoffset=7    xadvance=42   page=0    chnl=0 
+char id=37      x=167  y=156  width=49   height=56   xoffset=2    yoffset=13   xadvance=53   page=0    chnl=0 
+char id=38      x=216  y=156  width=48   height=56   xoffset=1    yoffset=13   xadvance=48   page=0    chnl=0 
+char id=39      x=499  y=320  width=10   height=22   xoffset=1    yoffset=12   xadvance=11   page=0    chnl=0 
+char id=40      x=70   y=0    width=22   height=75   xoffset=3    yoffset=9    xadvance=25   page=0    chnl=0 
+char id=41      x=92   y=0    width=23   height=75   xoffset=0    yoffset=9    xadvance=25   page=0    chnl=0 
+char id=42      x=103  y=362  width=36   height=34   xoffset=-1   yoffset=14   xadvance=33   page=0    chnl=0 
+char id=43      x=0    y=362  width=37   height=40   xoffset=1    yoffset=23   xadvance=39   page=0    chnl=0 
+char id=44      x=483  y=320  width=16   height=25   xoffset=0    yoffset=57   xadvance=20   page=0    chnl=0 
+char id=45      x=308  y=362  width=23   height=12   xoffset=4    yoffset=38   xadvance=32   page=0    chnl=0 
+char id=46      x=270  y=362  width=15   height=15   xoffset=3    yoffset=54   xadvance=22   page=0    chnl=0 
+char id=47      x=374  y=0    width=29   height=58   xoffset=-3   yoffset=14   xadvance=25   page=0    chnl=0 
+char id=48      x=77   y=156  width=38   height=56   xoffset=2    yoffset=13   xadvance=42   page=0    chnl=0 
+char id=49      x=299  y=266  width=26   height=54   xoffset=4    yoffset=14   xadvance=41   page=0    chnl=0 
+char id=50      x=383  y=156  width=39   height=55   xoffset=1    yoffset=13   xadvance=42   page=0    chnl=0 
+char id=51      x=434  y=99   width=39   height=56   xoffset=1    yoffset=13   xadvance=42   page=0    chnl=0 
+char id=52      x=325  y=266  width=40   height=54   xoffset=1    yoffset=14   xadvance=42   page=0    chnl=0 
+char id=53      x=422  y=156  width=38   height=55   xoffset=2    yoffset=14   xadvance=42   page=0    chnl=0 
+char id=54      x=0    y=156  width=39   height=56   xoffset=2    yoffset=13   xadvance=42   page=0    chnl=0 
+char id=55      x=365  y=266  width=39   height=54   xoffset=1    yoffset=14   xadvance=42   page=0    chnl=0 
+char id=56      x=473  y=99   width=38   height=56   xoffset=2    yoffset=13   xadvance=42   page=0    chnl=0 
+char id=57      x=39   y=156  width=38   height=56   xoffset=2    yoffset=13   xadvance=42   page=0    chnl=0 
+char id=58      x=471  y=266  width=15   height=43   xoffset=3    yoffset=26   xadvance=21   page=0    chnl=0 
+char id=59      x=150  y=156  width=17   height=56   xoffset=1    yoffset=26   xadvance=21   page=0    chnl=0 
+char id=60      x=37   y=362  width=33   height=38   xoffset=1    yoffset=26   xadvance=37   page=0    chnl=0 
+char id=61      x=172  y=362  width=35   height=27   xoffset=3    yoffset=31   xadvance=42   page=0    chnl=0 
+char id=62      x=70   y=362  width=33   height=38   xoffset=3    yoffset=26   xadvance=37   page=0    chnl=0 
+char id=63      x=115  y=156  width=35   height=56   xoffset=0    yoffset=13   xadvance=36   page=0    chnl=0 
+char id=64      x=258  y=0    width=61   height=68   xoffset=1    yoffset=16   xadvance=64   page=0    chnl=0 
+char id=65      x=0    y=212  width=53   height=54   xoffset=-2   yoffset=14   xadvance=49   page=0    chnl=0 
+char id=66      x=53   y=212  width=42   height=54   xoffset=3    yoffset=14   xadvance=47   page=0    chnl=0 
+char id=67      x=37   y=99   width=46   height=56   xoffset=1    yoffset=13   xadvance=47   page=0    chnl=0 
+char id=68      x=95   y=212  width=42   height=54   xoffset=3    yoffset=14   xadvance=47   page=0    chnl=0 
+char id=69      x=137  y=212  width=38   height=54   xoffset=3    yoffset=14   xadvance=41   page=0    chnl=0 
+char id=70      x=475  y=156  width=36   height=54   xoffset=3    yoffset=14   xadvance=39   page=0    chnl=0 
+char id=71      x=83   y=99   width=45   height=56   xoffset=2    yoffset=13   xadvance=49   page=0    chnl=0 
+char id=72      x=175  y=212  width=45   height=54   xoffset=3    yoffset=14   xadvance=51   page=0    chnl=0 
+char id=73      x=220  y=212  width=14   height=54   xoffset=4    yoffset=14   xadvance=22   page=0    chnl=0 
+char id=74      x=264  y=156  width=37   height=55   xoffset=0    yoffset=14   xadvance=40   page=0    chnl=0 
+char id=75      x=234  y=212  width=45   height=54   xoffset=3    yoffset=14   xadvance=46   page=0    chnl=0 
+char id=76      x=279  y=212  width=36   height=54   xoffset=3    yoffset=14   xadvance=39   page=0    chnl=0 
+char id=77      x=315  y=212  width=58   height=54   xoffset=3    yoffset=14   xadvance=63   page=0    chnl=0 
+char id=78      x=373  y=212  width=45   height=54   xoffset=3    yoffset=14   xadvance=51   page=0    chnl=0 
+char id=79      x=128  y=99   width=47   height=56   xoffset=1    yoffset=13   xadvance=50   page=0    chnl=0 
+char id=80      x=418  y=212  width=43   height=54   xoffset=3    yoffset=14   xadvance=48   page=0    chnl=0 
+char id=81      x=319  y=0    width=47   height=65   xoffset=2    yoffset=13   xadvance=50   page=0    chnl=0 
+char id=82      x=461  y=212  width=43   height=54   xoffset=3    yoffset=14   xadvance=46   page=0    chnl=0 
+char id=83      x=175  y=99   width=42   height=56   xoffset=1    yoffset=13   xadvance=44   page=0    chnl=0 
+char id=84      x=0    y=266  width=45   height=54   xoffset=0    yoffset=14   xadvance=45   page=0    chnl=0 
+char id=85      x=301  y=156  width=42   height=55   xoffset=3    yoffset=14   xadvance=48   page=0    chnl=0 
+char id=86      x=45   y=266  width=51   height=54   xoffset=-2   yoffset=14   xadvance=48   page=0    chnl=0 
+char id=87      x=96   y=266  width=64   height=54   xoffset=-1   yoffset=14   xadvance=63   page=0    chnl=0 
+char id=88      x=160  y=266  width=48   height=54   xoffset=-1   yoffset=14   xadvance=46   page=0    chnl=0 
+char id=89      x=208  y=266  width=49   height=54   xoffset=-2   yoffset=14   xadvance=45   page=0    chnl=0 
+char id=90      x=257  y=266  width=42   height=54   xoffset=1    yoffset=14   xadvance=44   page=0    chnl=0 
+char id=91      x=115  y=0    width=18   height=75   xoffset=3    yoffset=5    xadvance=21   page=0    chnl=0 
+char id=92      x=403  y=0    width=37   height=58   xoffset=-2   yoffset=14   xadvance=31   page=0    chnl=0 
+char id=93      x=133  y=0    width=18   height=75   xoffset=0    yoffset=5    xadvance=21   page=0    chnl=0 
+char id=94      x=139  y=362  width=33   height=28   xoffset=0    yoffset=14   xadvance=32   page=0    chnl=0 
+char id=95      x=331  y=362  width=34   height=12   xoffset=-1   yoffset=65   xadvance=33   page=0    chnl=0 
+char id=96      x=285  y=362  width=23   height=13   xoffset=0    yoffset=12   xadvance=24   page=0    chnl=0 
+char id=97      x=0    y=320  width=37   height=42   xoffset=1    yoffset=27   xadvance=38   page=0    chnl=0 
+char id=98      x=440  y=0    width=37   height=57   xoffset=2    yoffset=12   xadvance=40   page=0    chnl=0 
+char id=99      x=37   y=320  width=36   height=42   xoffset=1    yoffset=27   xadvance=38   page=0    chnl=0 
+char id=100     x=0    y=99   width=37   height=57   xoffset=1    yoffset=12   xadvance=40   page=0    chnl=0 
+char id=101     x=73   y=320  width=38   height=42   xoffset=1    yoffset=27   xadvance=39   page=0    chnl=0 
+char id=102     x=477  y=0    width=28   height=57   xoffset=0    yoffset=11   xadvance=27   page=0    chnl=0 
+char id=103     x=217  y=99   width=38   height=56   xoffset=1    yoffset=27   xadvance=41   page=0    chnl=0 
+char id=104     x=255  y=99   width=36   height=56   xoffset=2    yoffset=12   xadvance=40   page=0    chnl=0 
+char id=105     x=291  y=99   width=15   height=56   xoffset=2    yoffset=12   xadvance=19   page=0    chnl=0 
+char id=106     x=197  y=0    width=23   height=71   xoffset=-5   yoffset=12   xadvance=20   page=0    chnl=0 
+char id=107     x=306  y=99   width=40   height=56   xoffset=2    yoffset=12   xadvance=39   page=0    chnl=0 
+char id=108     x=346  y=99   width=14   height=56   xoffset=3    yoffset=12   xadvance=20   page=0    chnl=0 
+char id=109     x=186  y=320  width=58   height=41   xoffset=2    yoffset=27   xadvance=63   page=0    chnl=0 
+char id=110     x=244  y=320  width=36   height=41   xoffset=2    yoffset=27   xadvance=40   page=0    chnl=0 
+char id=111     x=111  y=320  width=39   height=42   xoffset=1    yoffset=27   xadvance=41   page=0    chnl=0 
+char id=112     x=360  y=99   width=37   height=56   xoffset=2    yoffset=27   xadvance=40   page=0    chnl=0 
+char id=113     x=397  y=99   width=37   height=56   xoffset=1    yoffset=27   xadvance=40   page=0    chnl=0 
+char id=114     x=486  y=266  width=25   height=41   xoffset=2    yoffset=27   xadvance=27   page=0    chnl=0 
+char id=115     x=150  y=320  width=36   height=42   xoffset=0    yoffset=27   xadvance=37   page=0    chnl=0 
+char id=116     x=445  y=266  width=26   height=51   xoffset=0    yoffset=18   xadvance=25   page=0    chnl=0 
+char id=117     x=280  y=320  width=36   height=41   xoffset=2    yoffset=28   xadvance=40   page=0    chnl=0 
+char id=118     x=316  y=320  width=39   height=40   xoffset=-1   yoffset=28   xadvance=37   page=0    chnl=0 
+char id=119     x=355  y=320  width=54   height=40   xoffset=-1   yoffset=28   xadvance=52   page=0    chnl=0 
+char id=120     x=409  y=320  width=40   height=40   xoffset=-1   yoffset=28   xadvance=37   page=0    chnl=0 
+char id=121     x=343  y=156  width=40   height=55   xoffset=-1   yoffset=28   xadvance=37   page=0    chnl=0 
+char id=122     x=449  y=320  width=34   height=40   xoffset=1    yoffset=28   xadvance=36   page=0    chnl=0 
+char id=123     x=151  y=0    width=23   height=72   xoffset=0    yoffset=9    xadvance=23   page=0    chnl=0 
+char id=124     x=366  y=0    width=8    height=63   xoffset=5    yoffset=14   xadvance=18   page=0    chnl=0 
+char id=125     x=174  y=0    width=23   height=72   xoffset=0    yoffset=9    xadvance=23   page=0    chnl=0 
+char id=126     x=229  y=362  width=41   height=19   xoffset=2    yoffset=36   xadvance=45   page=0    chnl=0 
+char id=127     x=0    y=0    width=70   height=99   xoffset=2    yoffset=-11  xadvance=74   page=0    chnl=0 
+kernings count=385
+kerning first=84 second=74 amount=-8
+kerning first=86 second=100 amount=-2
+kerning first=114 second=113 amount=-1
+kerning first=70 second=121 amount=-1
+kerning first=34 second=99 amount=-2
+kerning first=70 second=99 amount=-1
+kerning first=69 second=99 amount=-1
+kerning first=88 second=113 amount=-1
+kerning first=84 second=46 amount=-9
+kerning first=87 second=97 amount=-1
+kerning first=90 second=117 amount=-1
+kerning first=39 second=97 amount=-2
+kerning first=69 second=111 amount=-1
+kerning first=87 second=41 amount=1
+kerning first=121 second=34 amount=1
+kerning first=40 second=86 amount=1
+kerning first=85 second=65 amount=-1
+kerning first=72 second=65 amount=1
+kerning first=114 second=102 amount=1
+kerning first=89 second=42 amount=-2
+kerning first=114 second=34 amount=1
+kerning first=75 second=67 amount=-1
+kerning first=89 second=85 amount=-3
+kerning first=77 second=88 amount=1
+kerning first=84 second=115 amount=-3
+kerning first=84 second=71 amount=-1
+kerning first=89 second=101 amount=-2
+kerning first=89 second=45 amount=-5
+kerning first=78 second=88 amount=1
+kerning first=68 second=89 amount=-2
+kerning first=122 second=103 amount=-1
+kerning first=78 second=84 amount=-1
+kerning first=86 second=103 amount=-2
+kerning first=89 second=79 amount=-1
+kerning first=75 second=111 amount=-1
+kerning first=111 second=120 amount=-1
+kerning first=87 second=44 amount=-5
+kerning first=67 second=84 amount=-1
+kerning first=84 second=111 amount=-7
+kerning first=84 second=83 amount=-1
+kerning first=102 second=113 amount=-1
+kerning first=39 second=101 amount=-2
+kerning first=80 second=88 amount=-2
+kerning first=66 second=84 amount=-1
+kerning first=65 second=87 amount=-1
+kerning first=122 second=100 amount=-1
+kerning first=75 second=118 amount=-1
+kerning first=73 second=65 amount=1
+kerning first=70 second=118 amount=-1
+kerning first=73 second=88 amount=1
+kerning first=82 second=89 amount=-2
+kerning first=65 second=34 amount=-4
+kerning first=120 second=99 amount=-1
+kerning first=84 second=99 amount=-3
+kerning first=84 second=65 amount=-4
+kerning first=112 second=39 amount=-1
+kerning first=76 second=39 amount=-10
+kerning first=78 second=65 amount=1
+kerning first=88 second=45 amount=-5
+kerning first=34 second=111 amount=-3
+kerning first=114 second=99 amount=-1
+kerning first=86 second=125 amount=1
+kerning first=70 second=111 amount=-1
+kerning first=89 second=120 amount=-1
+kerning first=90 second=119 amount=-1
+kerning first=89 second=89 amount=1
+kerning first=89 second=117 amount=-1
+kerning first=75 second=117 amount=-1
+kerning first=76 second=65 amount=1
+kerning first=34 second=34 amount=-1
+kerning first=89 second=110 amount=-1
+kerning first=88 second=101 amount=-1
+kerning first=107 second=103 amount=-1
+kerning first=34 second=115 amount=-3
+kerning first=80 second=44 amount=-14
+kerning first=98 second=39 amount=-1
+kerning first=70 second=65 amount=-7
+kerning first=89 second=116 amount=-1
+kerning first=70 second=46 amount=-10
+kerning first=98 second=34 amount=-1
+kerning first=70 second=84 amount=1
+kerning first=114 second=100 amount=-1
+kerning first=88 second=79 amount=-1
+kerning first=39 second=113 amount=-2
+kerning first=65 second=118 amount=-2
+kerning first=114 second=103 amount=-1
+kerning first=77 second=65 amount=1
+kerning first=120 second=103 amount=-1
+kerning first=65 second=110 amount=-2
+kerning first=114 second=121 amount=1
+kerning first=89 second=100 amount=-2
+kerning first=80 second=65 amount=-6
+kerning first=121 second=111 amount=-1
+kerning first=34 second=101 amount=-2
+kerning first=122 second=111 amount=-1
+kerning first=114 second=118 amount=1
+kerning first=102 second=41 amount=1
+kerning first=122 second=113 amount=-1
+kerning first=89 second=122 amount=-1
+kerning first=68 second=88 amount=-1
+kerning first=81 second=89 amount=-1
+kerning first=114 second=111 amount=-1
+kerning first=46 second=34 amount=-10
+kerning first=84 second=112 amount=-3
+kerning first=76 second=34 amount=-10
+kerning first=39 second=115 amount=-3
+kerning first=76 second=118 amount=-4
+kerning first=86 second=99 amount=-2
+kerning first=84 second=84 amount=1
+kerning first=120 second=111 amount=-1
+kerning first=65 second=79 amount=-1
+kerning first=87 second=101 amount=-1
+kerning first=67 second=125 amount=-1
+kerning first=120 second=113 amount=-1
+kerning first=118 second=46 amount=-6
+kerning first=88 second=103 amount=-1
+kerning first=111 second=122 amount=-1
+kerning first=77 second=84 amount=-1
+kerning first=114 second=46 amount=-6
+kerning first=34 second=39 amount=-1
+kerning first=65 second=121 amount=-2
+kerning first=114 second=44 amount=-6
+kerning first=69 second=84 amount=1
+kerning first=89 second=46 amount=-8
+kerning first=97 second=39 amount=-1
+kerning first=34 second=100 amount=-2
+kerning first=70 second=100 amount=-1
+kerning first=84 second=120 amount=-3
+kerning first=90 second=118 amount=-1
+kerning first=70 second=114 amount=-1
+kerning first=34 second=112 amount=-1
+kerning first=89 second=86 amount=1
+kerning first=86 second=113 amount=-2
+kerning first=88 second=71 amount=-1
+kerning first=122 second=99 amount=-1
+kerning first=66 second=89 amount=-2
+kerning first=102 second=103 amount=-1
+kerning first=88 second=67 amount=-1
+kerning first=39 second=110 amount=-1
+kerning first=88 second=117 amount=-1
+kerning first=89 second=118 amount=-1
+kerning first=97 second=118 amount=-1
+kerning first=87 second=65 amount=-2
+kerning first=89 second=67 amount=-1
+kerning first=89 second=74 amount=-3
+kerning first=102 second=101 amount=-1
+kerning first=86 second=111 amount=-2
+kerning first=65 second=119 amount=-1
+kerning first=84 second=100 amount=-3
+kerning first=120 second=100 amount=-1
+kerning first=104 second=34 amount=-3
+kerning first=86 second=41 amount=1
+kerning first=111 second=34 amount=-3
+kerning first=40 second=89 amount=1
+kerning first=121 second=39 amount=1
+kerning first=70 second=74 amount=-7
+kerning first=68 second=90 amount=-1
+kerning first=98 second=120 amount=-1
+kerning first=110 second=34 amount=-3
+kerning first=119 second=46 amount=-4
+kerning first=69 second=102 amount=-1
+kerning first=118 second=44 amount=-6
+kerning first=84 second=114 amount=-2
+kerning first=86 second=97 amount=-2
+kerning first=40 second=87 amount=1
+kerning first=65 second=109 amount=-2
+kerning first=68 second=86 amount=-1
+kerning first=86 second=93 amount=1
+kerning first=65 second=67 amount=-1
+kerning first=97 second=34 amount=-1
+kerning first=34 second=65 amount=-4
+kerning first=84 second=118 amount=-3
+kerning first=112 second=34 amount=-1
+kerning first=76 second=84 amount=-7
+kerning first=107 second=99 amount=-1
+kerning first=123 second=85 amount=-1
+kerning first=102 second=125 amount=1
+kerning first=65 second=63 amount=-3
+kerning first=89 second=44 amount=-8
+kerning first=80 second=118 amount=1
+kerning first=112 second=122 amount=-1
+kerning first=79 second=65 amount=-1
+kerning first=80 second=121 amount=1
+kerning first=118 second=34 amount=1
+kerning first=87 second=45 amount=-2
+kerning first=69 second=100 amount=-1
+kerning first=87 second=103 amount=-1
+kerning first=112 second=120 amount=-1
+kerning first=86 second=65 amount=-3
+kerning first=65 second=81 amount=-1
+kerning first=68 second=44 amount=-4
+kerning first=86 second=45 amount=-6
+kerning first=39 second=34 amount=-1
+kerning first=72 second=88 amount=1
+kerning first=68 second=46 amount=-4
+kerning first=65 second=89 amount=-5
+kerning first=69 second=118 amount=-1
+kerning first=89 second=38 amount=-1
+kerning first=88 second=99 amount=-1
+kerning first=65 second=71 amount=-1
+kerning first=91 second=74 amount=-1
+kerning first=75 second=101 amount=-1
+kerning first=39 second=112 amount=-1
+kerning first=70 second=113 amount=-1
+kerning first=119 second=44 amount=-4
+kerning first=72 second=89 amount=-1
+kerning first=90 second=103 amount=-1
+kerning first=65 second=86 amount=-3
+kerning first=84 second=119 amount=-2
+kerning first=34 second=110 amount=-1
+kerning first=39 second=109 amount=-1
+kerning first=75 second=81 amount=-1
+kerning first=89 second=115 amount=-2
+kerning first=89 second=87 amount=1
+kerning first=114 second=101 amount=-1
+kerning first=116 second=111 amount=-1
+kerning first=90 second=100 amount=-1
+kerning first=79 second=89 amount=-2
+kerning first=84 second=122 amount=-2
+kerning first=68 second=84 amount=-3
+kerning first=76 second=86 amount=-7
+kerning first=74 second=65 amount=-1
+kerning first=107 second=101 amount=-1
+kerning first=80 second=46 amount=-14
+kerning first=89 second=93 amount=1
+kerning first=89 second=65 amount=-5
+kerning first=87 second=117 amount=-1
+kerning first=89 second=81 amount=-1
+kerning first=39 second=103 amount=-2
+kerning first=86 second=101 amount=-2
+kerning first=86 second=117 amount=-1
+kerning first=84 second=113 amount=-3
+kerning first=87 second=46 amount=-5
+kerning first=47 second=47 amount=-9
+kerning first=75 second=103 amount=-1
+kerning first=89 second=84 amount=1
+kerning first=84 second=110 amount=-3
+kerning first=39 second=99 amount=-2
+kerning first=88 second=121 amount=-1
+kerning first=65 second=39 amount=-4
+kerning first=110 second=39 amount=-3
+kerning first=88 second=118 amount=-1
+kerning first=86 second=114 amount=-1
+kerning first=80 second=74 amount=-6
+kerning first=84 second=97 amount=-6
+kerning first=82 second=84 amount=-2
+kerning first=91 second=85 amount=-1
+kerning first=102 second=99 amount=-1
+kerning first=66 second=86 amount=-1
+kerning first=120 second=101 amount=-1
+kerning first=102 second=93 amount=1
+kerning first=75 second=100 amount=-1
+kerning first=84 second=79 amount=-1
+kerning first=44 second=39 amount=-10
+kerning first=111 second=121 amount=-1
+kerning first=75 second=121 amount=-1
+kerning first=81 second=87 amount=-1
+kerning first=107 second=113 amount=-1
+kerning first=90 second=79 amount=-1
+kerning first=89 second=114 amount=-1
+kerning first=122 second=101 amount=-1
+kerning first=111 second=118 amount=-1
+kerning first=82 second=86 amount=-1
+kerning first=70 second=101 amount=-1
+kerning first=114 second=97 amount=-1
+kerning first=70 second=97 amount=-1
+kerning first=34 second=97 amount=-2
+kerning first=89 second=102 amount=-1
+kerning first=78 second=89 amount=-1
+kerning first=70 second=44 amount=-10
+kerning first=104 second=39 amount=-3
+kerning first=84 second=45 amount=-10
+kerning first=89 second=121 amount=-1
+kerning first=109 second=34 amount=-3
+kerning first=84 second=86 amount=1
+kerning first=87 second=99 amount=-1
+kerning first=32 second=84 amount=-2
+kerning first=98 second=122 amount=-1
+kerning first=89 second=112 amount=-1
+kerning first=89 second=103 amount=-2
+kerning first=65 second=116 amount=-1
+kerning first=88 second=81 amount=-1
+kerning first=102 second=34 amount=1
+kerning first=109 second=39 amount=-3
+kerning first=81 second=84 amount=-1
+kerning first=121 second=97 amount=-1
+kerning first=89 second=99 amount=-2
+kerning first=89 second=125 amount=1
+kerning first=81 second=86 amount=-1
+kerning first=114 second=116 amount=2
+kerning first=114 second=119 amount=1
+kerning first=84 second=44 amount=-9
+kerning first=102 second=39 amount=1
+kerning first=44 second=34 amount=-10
+kerning first=34 second=109 amount=-1
+kerning first=84 second=101 amount=-3
+kerning first=75 second=119 amount=-2
+kerning first=84 second=81 amount=-1
+kerning first=76 second=121 amount=-4
+kerning first=69 second=101 amount=-1
+kerning first=80 second=90 amount=-1
+kerning first=89 second=97 amount=-2
+kerning first=89 second=109 amount=-1
+kerning first=90 second=99 amount=-1
+kerning first=79 second=88 amount=-1
+kerning first=70 second=103 amount=-1
+kerning first=34 second=103 amount=-2
+kerning first=84 second=67 amount=-1
+kerning first=76 second=79 amount=-2
+kerning first=34 second=113 amount=-2
+kerning first=89 second=41 amount=1
+kerning first=75 second=71 amount=-1
+kerning first=76 second=87 amount=-3
+kerning first=77 second=89 amount=-1
+kerning first=90 second=113 amount=-1
+kerning first=118 second=111 amount=-1
+kerning first=118 second=97 amount=-1
+kerning first=88 second=100 amount=-1
+kerning first=89 second=111 amount=-2
+kerning first=90 second=121 amount=-1
+kerning first=89 second=113 amount=-2
+kerning first=84 second=87 amount=1
+kerning first=39 second=111 amount=-3
+kerning first=39 second=100 amount=-2
+kerning first=75 second=113 amount=-1
+kerning first=88 second=111 amount=-1
+kerning first=87 second=111 amount=-1
+kerning first=89 second=83 amount=-1
+kerning first=84 second=89 amount=1
+kerning first=84 second=103 amount=-3
+kerning first=70 second=117 amount=-1
+kerning first=67 second=41 amount=-1
+kerning first=89 second=71 amount=-1
+kerning first=121 second=44 amount=-6
+kerning first=97 second=121 amount=-1
+kerning first=87 second=113 amount=-1
+kerning first=73 second=84 amount=-1
+kerning first=121 second=46 amount=-6
+kerning first=75 second=99 amount=-1
+kerning first=65 second=112 amount=-2
+kerning first=65 second=85 amount=-1
+kerning first=76 second=67 amount=-2
+kerning first=76 second=81 amount=-2
+kerning first=102 second=100 amount=-1
+kerning first=75 second=79 amount=-1
+kerning first=39 second=65 amount=-4
+kerning first=65 second=84 amount=-4
+kerning first=90 second=101 amount=-1
+kerning first=84 second=121 amount=-3
+kerning first=114 second=39 amount=1
+kerning first=84 second=109 amount=-3
+kerning first=123 second=74 amount=-1
+kerning first=76 second=119 amount=-2
+kerning first=84 second=117 amount=-2
+kerning first=76 second=85 amount=-1
+kerning first=76 second=71 amount=-2
+kerning first=79 second=90 amount=-1
+kerning first=107 second=100 amount=-1
+kerning first=90 second=111 amount=-1
+kerning first=79 second=44 amount=-4
+kerning first=75 second=45 amount=-6
+kerning first=79 second=86 amount=-1
+kerning first=79 second=46 amount=-4
+kerning first=76 second=89 amount=-10
+kerning first=68 second=65 amount=-1
+kerning first=79 second=84 amount=-3
+kerning first=87 second=100 amount=-1
+kerning first=84 second=32 amount=-2
+kerning first=90 second=67 amount=-1
+kerning first=69 second=103 amount=-1
+kerning first=90 second=71 amount=-1
+kerning first=86 second=44 amount=-8
+kerning first=69 second=121 amount=-1
+kerning first=87 second=114 amount=-1
+kerning first=118 second=39 amount=1
+kerning first=46 second=39 amount=-10
+kerning first=72 second=84 amount=-1
+kerning first=86 second=46 amount=-8
+kerning first=69 second=113 amount=-1
+kerning first=69 second=119 amount=-1
+kerning first=73 second=89 amount=-1
+kerning first=39 second=39 amount=-1
+kerning first=69 second=117 amount=-1
+kerning first=111 second=39 amount=-3
+kerning first=90 second=81 amount=-1

src/web/static/fonts/bmfonts/RobotoMono72White.fnt

@@ -0,0 +1,103 @@
+info face="Roboto Mono" size=72 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=-2,-2
+common lineHeight=96 base=76 scaleW=512 scaleH=512 pages=1 packed=0
+page id=0 file="RobotoMono72White.png"
+chars count=98
+char id=0       x=0    y=0    width=0    height=0    xoffset=-1   yoffset=75   xadvance=0    page=0    chnl=0 
+char id=10      x=0    y=0    width=45   height=99   xoffset=-1   yoffset=-2   xadvance=43   page=0    chnl=0 
+char id=32      x=0    y=0    width=0    height=0    xoffset=-1   yoffset=75   xadvance=43   page=0    chnl=0 
+char id=33      x=498  y=99   width=10   height=55   xoffset=16   yoffset=23   xadvance=43   page=0    chnl=0 
+char id=34      x=434  y=319  width=20   height=19   xoffset=11   yoffset=21   xadvance=43   page=0    chnl=0 
+char id=35      x=175  y=265  width=41   height=54   xoffset=1    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=36      x=200  y=0    width=35   height=69   xoffset=5    yoffset=15   xadvance=43   page=0    chnl=0 
+char id=37      x=0    y=155  width=42   height=56   xoffset=1    yoffset=22   xadvance=44   page=0    chnl=0 
+char id=38      x=42   y=155  width=41   height=56   xoffset=3    yoffset=22   xadvance=44   page=0    chnl=0 
+char id=39      x=502  y=211  width=7    height=19   xoffset=16   yoffset=21   xadvance=43   page=0    chnl=0 
+char id=40      x=45   y=0    width=21   height=78   xoffset=12   yoffset=16   xadvance=44   page=0    chnl=0 
+char id=41      x=66   y=0    width=22   height=78   xoffset=9    yoffset=16   xadvance=43   page=0    chnl=0 
+char id=42      x=256  y=319  width=37   height=37   xoffset=4    yoffset=32   xadvance=43   page=0    chnl=0 
+char id=43      x=219  y=319  width=37   height=40   xoffset=3    yoffset=32   xadvance=43   page=0    chnl=0 
+char id=44      x=421  y=319  width=13   height=22   xoffset=11   yoffset=67   xadvance=43   page=0    chnl=0 
+char id=45      x=17   y=360  width=29   height=8    xoffset=7    yoffset=49   xadvance=44   page=0    chnl=0 
+char id=46      x=496  y=319  width=12   height=13   xoffset=16   yoffset=65   xadvance=43   page=0    chnl=0 
+char id=47      x=319  y=0    width=31   height=58   xoffset=7    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=48      x=431  y=99   width=35   height=56   xoffset=4    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=49      x=36   y=265  width=23   height=54   xoffset=6    yoffset=23   xadvance=44   page=0    chnl=0 
+char id=50      x=189  y=155  width=37   height=55   xoffset=2    yoffset=22   xadvance=44   page=0    chnl=0 
+char id=51      x=361  y=99   width=35   height=56   xoffset=2    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=52      x=59   y=265  width=39   height=54   xoffset=2    yoffset=23   xadvance=44   page=0    chnl=0 
+char id=53      x=226  y=155  width=35   height=55   xoffset=5    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=54      x=261  y=155  width=35   height=55   xoffset=4    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=55      x=98   y=265  width=37   height=54   xoffset=3    yoffset=23   xadvance=44   page=0    chnl=0 
+char id=56      x=396  y=99   width=35   height=56   xoffset=5    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=57      x=296  y=155  width=34   height=55   xoffset=4    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=58      x=490  y=211  width=12   height=43   xoffset=18   yoffset=35   xadvance=43   page=0    chnl=0 
+char id=59      x=486  y=0    width=14   height=55   xoffset=16   yoffset=35   xadvance=43   page=0    chnl=0 
+char id=60      x=293  y=319  width=32   height=35   xoffset=5    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=61      x=388  y=319  width=33   height=23   xoffset=5    yoffset=41   xadvance=43   page=0    chnl=0 
+char id=62      x=325  y=319  width=33   height=35   xoffset=5    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=63      x=466  y=99   width=32   height=56   xoffset=6    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=64      x=135  y=265  width=40   height=54   xoffset=1    yoffset=23   xadvance=42   page=0    chnl=0 
+char id=65      x=330  y=155  width=42   height=54   xoffset=1    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=66      x=372  y=155  width=35   height=54   xoffset=5    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=67      x=448  y=0    width=38   height=56   xoffset=3    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=68      x=407  y=155  width=37   height=54   xoffset=4    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=69      x=444  y=155  width=34   height=54   xoffset=5    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=70      x=0    y=211  width=34   height=54   xoffset=6    yoffset=23   xadvance=44   page=0    chnl=0 
+char id=71      x=0    y=99   width=38   height=56   xoffset=3    yoffset=22   xadvance=44   page=0    chnl=0 
+char id=72      x=34   y=211  width=36   height=54   xoffset=4    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=73      x=478  y=155  width=33   height=54   xoffset=5    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=74      x=83   y=155  width=36   height=55   xoffset=2    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=75      x=70   y=211  width=38   height=54   xoffset=5    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=76      x=108  y=211  width=34   height=54   xoffset=6    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=77      x=142  y=211  width=36   height=54   xoffset=4    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=78      x=178  y=211  width=35   height=54   xoffset=4    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=79      x=38   y=99   width=38   height=56   xoffset=3    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=80      x=213  y=211  width=36   height=54   xoffset=6    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=81      x=242  y=0    width=40   height=64   xoffset=2    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=82      x=249  y=211  width=36   height=54   xoffset=5    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=83      x=76   y=99   width=38   height=56   xoffset=3    yoffset=22   xadvance=44   page=0    chnl=0 
+char id=84      x=285  y=211  width=40   height=54   xoffset=2    yoffset=23   xadvance=44   page=0    chnl=0 
+char id=85      x=119  y=155  width=36   height=55   xoffset=4    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=86      x=325  y=211  width=41   height=54   xoffset=1    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=87      x=366  y=211  width=42   height=54   xoffset=1    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=88      x=408  y=211  width=41   height=54   xoffset=2    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=89      x=449  y=211  width=41   height=54   xoffset=1    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=90      x=0    y=265  width=36   height=54   xoffset=3    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=91      x=88   y=0    width=16   height=72   xoffset=14   yoffset=16   xadvance=43   page=0    chnl=0 
+char id=92      x=350  y=0    width=30   height=58   xoffset=7    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=93      x=104  y=0    width=17   height=72   xoffset=13   yoffset=16   xadvance=44   page=0    chnl=0 
+char id=94      x=358  y=319  width=30   height=30   xoffset=7    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=95      x=46   y=360  width=34   height=8    xoffset=4    yoffset=74   xadvance=43   page=0    chnl=0 
+char id=96      x=0    y=360  width=17   height=12   xoffset=13   yoffset=22   xadvance=43   page=0    chnl=0 
+char id=97      x=251  y=265  width=35   height=42   xoffset=4    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=98      x=380  y=0    width=34   height=57   xoffset=5    yoffset=21   xadvance=43   page=0    chnl=0 
+char id=99      x=286  y=265  width=35   height=42   xoffset=4    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=100     x=414  y=0    width=34   height=57   xoffset=4    yoffset=21   xadvance=43   page=0    chnl=0 
+char id=101     x=321  y=265  width=36   height=42   xoffset=4    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=102     x=282  y=0    width=37   height=58   xoffset=4    yoffset=19   xadvance=43   page=0    chnl=0 
+char id=103     x=114  y=99   width=34   height=56   xoffset=4    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=104     x=148  y=99   width=34   height=56   xoffset=5    yoffset=21   xadvance=43   page=0    chnl=0 
+char id=105     x=155  y=155  width=34   height=55   xoffset=6    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=106     x=121  y=0    width=26   height=71   xoffset=6    yoffset=22   xadvance=44   page=0    chnl=0 
+char id=107     x=182  y=99   width=36   height=56   xoffset=5    yoffset=21   xadvance=43   page=0    chnl=0 
+char id=108     x=218  y=99   width=34   height=56   xoffset=6    yoffset=21   xadvance=43   page=0    chnl=0 
+char id=109     x=428  y=265  width=39   height=41   xoffset=2    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=110     x=467  y=265  width=34   height=41   xoffset=5    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=111     x=357  y=265  width=37   height=42   xoffset=3    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=112     x=252  y=99   width=34   height=56   xoffset=5    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=113     x=286  y=99   width=34   height=56   xoffset=4    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=114     x=0    y=319  width=29   height=41   xoffset=11   yoffset=36   xadvance=44   page=0    chnl=0 
+char id=115     x=394  y=265  width=34   height=42   xoffset=5    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=116     x=216  y=265  width=35   height=51   xoffset=4    yoffset=27   xadvance=43   page=0    chnl=0 
+char id=117     x=29   y=319  width=33   height=41   xoffset=5    yoffset=37   xadvance=43   page=0    chnl=0 
+char id=118     x=62   y=319  width=39   height=40   xoffset=2    yoffset=37   xadvance=43   page=0    chnl=0 
+char id=119     x=101  y=319  width=43   height=40   xoffset=0    yoffset=37   xadvance=43   page=0    chnl=0 
+char id=120     x=144  y=319  width=40   height=40   xoffset=2    yoffset=37   xadvance=43   page=0    chnl=0 
+char id=121     x=320  y=99   width=41   height=56   xoffset=1    yoffset=37   xadvance=43   page=0    chnl=0 
+char id=122     x=184  y=319  width=35   height=40   xoffset=5    yoffset=37   xadvance=44   page=0    chnl=0 
+char id=123     x=147  y=0    width=26   height=71   xoffset=10   yoffset=19   xadvance=43   page=0    chnl=0 
+char id=124     x=235  y=0    width=7    height=68   xoffset=18   yoffset=23   xadvance=43   page=0    chnl=0 
+char id=125     x=173  y=0    width=27   height=71   xoffset=10   yoffset=19   xadvance=44   page=0    chnl=0 
+char id=126     x=454  y=319  width=42   height=16   xoffset=1    yoffset=47   xadvance=44   page=0    chnl=0 
+char id=127     x=0    y=0    width=45   height=99   xoffset=-1   yoffset=-2   xadvance=43   page=0    chnl=0 
+kernings count=0

src/web/static/fonts/bmfonts/RobotoSlab72White.fnt

@@ -0,0 +1,492 @@
+info face="Roboto Slab Regular" size=72 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=-2,-2
+common lineHeight=96 base=76 scaleW=512 scaleH=512 pages=1 packed=0
+page id=0 file="RobotoSlab72White.png"
+chars count=98
+char id=0       x=0    y=0    width=0    height=0    xoffset=-1   yoffset=75   xadvance=0    page=0    chnl=0 
+char id=10      x=0    y=0    width=70   height=98   xoffset=0    yoffset=-1   xadvance=70   page=0    chnl=0 
+char id=32      x=0    y=0    width=0    height=0    xoffset=-1   yoffset=75   xadvance=18   page=0    chnl=0 
+char id=33      x=497  y=156  width=9    height=54   xoffset=4    yoffset=23   xadvance=17   page=0    chnl=0 
+char id=34      x=191  y=362  width=19   height=20   xoffset=5    yoffset=20   xadvance=28   page=0    chnl=0 
+char id=35      x=406  y=266  width=41   height=54   xoffset=1    yoffset=23   xadvance=43   page=0    chnl=0 
+char id=36      x=212  y=0    width=35   height=69   xoffset=2    yoffset=15   xadvance=39   page=0    chnl=0 
+char id=37      x=174  y=156  width=48   height=56   xoffset=2    yoffset=22   xadvance=52   page=0    chnl=0 
+char id=38      x=222  y=156  width=44   height=56   xoffset=2    yoffset=22   xadvance=46   page=0    chnl=0 
+char id=39      x=210  y=362  width=8    height=20   xoffset=5    yoffset=20   xadvance=17   page=0    chnl=0 
+char id=40      x=70   y=0    width=21   height=77   xoffset=3    yoffset=17   xadvance=23   page=0    chnl=0 
+char id=41      x=91   y=0    width=21   height=77   xoffset=-1   yoffset=17   xadvance=23   page=0    chnl=0 
+char id=42      x=100  y=362  width=31   height=33   xoffset=1    yoffset=23   xadvance=33   page=0    chnl=0 
+char id=43      x=0    y=362  width=37   height=40   xoffset=2    yoffset=32   xadvance=41   page=0    chnl=0 
+char id=44      x=492  y=320  width=13   height=21   xoffset=-1   yoffset=67   xadvance=14   page=0    chnl=0 
+char id=45      x=287  y=362  width=19   height=8    xoffset=4    yoffset=50   xadvance=27   page=0    chnl=0 
+char id=46      x=278  y=362  width=9    height=9    xoffset=4    yoffset=68   xadvance=17   page=0    chnl=0 
+char id=47      x=470  y=0    width=30   height=58   xoffset=-1   yoffset=23   xadvance=29   page=0    chnl=0 
+char id=48      x=139  y=156  width=35   height=56   xoffset=3    yoffset=22   xadvance=41   page=0    chnl=0 
+char id=49      x=305  y=266  width=25   height=54   xoffset=3    yoffset=23   xadvance=30   page=0    chnl=0 
+char id=50      x=357  y=156  width=36   height=55   xoffset=2    yoffset=22   xadvance=40   page=0    chnl=0 
+char id=51      x=0    y=156  width=34   height=56   xoffset=2    yoffset=22   xadvance=39   page=0    chnl=0 
+char id=52      x=330  y=266  width=39   height=54   xoffset=1    yoffset=23   xadvance=42   page=0    chnl=0 
+char id=53      x=393  y=156  width=33   height=55   xoffset=2    yoffset=23   xadvance=37   page=0    chnl=0 
+char id=54      x=34   y=156  width=35   height=56   xoffset=3    yoffset=22   xadvance=40   page=0    chnl=0 
+char id=55      x=369  y=266  width=37   height=54   xoffset=2    yoffset=23   xadvance=40   page=0    chnl=0 
+char id=56      x=69   y=156  width=35   height=56   xoffset=2    yoffset=22   xadvance=39   page=0    chnl=0 
+char id=57      x=104  y=156  width=35   height=56   xoffset=2    yoffset=22   xadvance=41   page=0    chnl=0 
+char id=58      x=500  y=0    width=9    height=40   xoffset=4    yoffset=37   xadvance=15   page=0    chnl=0 
+char id=59      x=447  y=266  width=13   height=52   xoffset=0    yoffset=37   xadvance=15   page=0    chnl=0 
+char id=60      x=37   y=362  width=31   height=35   xoffset=2    yoffset=39   xadvance=36   page=0    chnl=0 
+char id=61      x=160  y=362  width=31   height=23   xoffset=4    yoffset=40   xadvance=39   page=0    chnl=0 
+char id=62      x=68   y=362  width=32   height=35   xoffset=3    yoffset=39   xadvance=37   page=0    chnl=0 
+char id=63      x=480  y=98   width=31   height=55   xoffset=1    yoffset=22   xadvance=33   page=0    chnl=0 
+char id=64      x=247  y=0    width=60   height=68   xoffset=1    yoffset=25   xadvance=64   page=0    chnl=0 
+char id=65      x=426  y=156  width=51   height=54   xoffset=1    yoffset=23   xadvance=53   page=0    chnl=0 
+char id=66      x=0    y=212  width=44   height=54   xoffset=1    yoffset=23   xadvance=47   page=0    chnl=0 
+char id=67      x=191  y=98   width=42   height=56   xoffset=1    yoffset=22   xadvance=46   page=0    chnl=0 
+char id=68      x=44   y=212  width=46   height=54   xoffset=1    yoffset=23   xadvance=50   page=0    chnl=0 
+char id=69      x=90   y=212  width=42   height=54   xoffset=1    yoffset=23   xadvance=46   page=0    chnl=0 
+char id=70      x=132  y=212  width=42   height=54   xoffset=1    yoffset=23   xadvance=44   page=0    chnl=0 
+char id=71      x=233  y=98   width=43   height=56   xoffset=1    yoffset=22   xadvance=49   page=0    chnl=0 
+char id=72      x=174  y=212  width=52   height=54   xoffset=1    yoffset=23   xadvance=55   page=0    chnl=0 
+char id=73      x=477  y=156  width=20   height=54   xoffset=1    yoffset=23   xadvance=22   page=0    chnl=0 
+char id=74      x=266  y=156  width=39   height=55   xoffset=1    yoffset=23   xadvance=41   page=0    chnl=0 
+char id=75      x=226  y=212  width=48   height=54   xoffset=1    yoffset=23   xadvance=50   page=0    chnl=0 
+char id=76      x=274  y=212  width=39   height=54   xoffset=1    yoffset=23   xadvance=42   page=0    chnl=0 
+char id=77      x=313  y=212  width=64   height=54   xoffset=1    yoffset=23   xadvance=66   page=0    chnl=0 
+char id=78      x=377  y=212  width=52   height=54   xoffset=1    yoffset=23   xadvance=54   page=0    chnl=0 
+char id=79      x=276  y=98   width=47   height=56   xoffset=2    yoffset=22   xadvance=51   page=0    chnl=0 
+char id=80      x=429  y=212  width=43   height=54   xoffset=1    yoffset=23   xadvance=45   page=0    chnl=0 
+char id=81      x=307  y=0    width=48   height=64   xoffset=2    yoffset=22   xadvance=51   page=0    chnl=0 
+char id=82      x=0    y=266  width=46   height=54   xoffset=1    yoffset=23   xadvance=48   page=0    chnl=0 
+char id=83      x=323  y=98   width=38   height=56   xoffset=3    yoffset=22   xadvance=43   page=0    chnl=0 
+char id=84      x=46   y=266  width=45   height=54   xoffset=0    yoffset=23   xadvance=45   page=0    chnl=0 
+char id=85      x=305  y=156  width=52   height=55   xoffset=1    yoffset=23   xadvance=54   page=0    chnl=0 
+char id=86      x=91   y=266  width=50   height=54   xoffset=1    yoffset=23   xadvance=52   page=0    chnl=0 
+char id=87      x=141  y=266  width=67   height=54   xoffset=0    yoffset=23   xadvance=67   page=0    chnl=0 
+char id=88      x=208  y=266  width=49   height=54   xoffset=1    yoffset=23   xadvance=51   page=0    chnl=0 
+char id=89      x=257  y=266  width=48   height=54   xoffset=1    yoffset=23   xadvance=50   page=0    chnl=0 
+char id=90      x=472  y=212  width=38   height=54   xoffset=2    yoffset=23   xadvance=42   page=0    chnl=0 
+char id=91      x=180  y=0    width=16   height=72   xoffset=5    yoffset=16   xadvance=21   page=0    chnl=0 
+char id=92      x=0    y=98   width=31   height=58   xoffset=0    yoffset=23   xadvance=30   page=0    chnl=0 
+char id=93      x=196  y=0    width=16   height=72   xoffset=-1   yoffset=16   xadvance=19   page=0    chnl=0 
+char id=94      x=131  y=362  width=29   height=28   xoffset=1    yoffset=23   xadvance=30   page=0    chnl=0 
+char id=95      x=306  y=362  width=34   height=8    xoffset=3    yoffset=74   xadvance=40   page=0    chnl=0 
+char id=96      x=260  y=362  width=18   height=12   xoffset=1    yoffset=22   xadvance=20   page=0    chnl=0 
+char id=97      x=0    y=320  width=36   height=42   xoffset=3    yoffset=36   xadvance=41   page=0    chnl=0 
+char id=98      x=363  y=0    width=41   height=58   xoffset=-2   yoffset=20   xadvance=42   page=0    chnl=0 
+char id=99      x=36   y=320  width=34   height=42   xoffset=2    yoffset=36   xadvance=39   page=0    chnl=0 
+char id=100     x=404  y=0    width=40   height=58   xoffset=2    yoffset=20   xadvance=43   page=0    chnl=0 
+char id=101     x=70   y=320  width=34   height=42   xoffset=2    yoffset=36   xadvance=39   page=0    chnl=0 
+char id=102     x=444  y=0    width=26   height=58   xoffset=1    yoffset=19   xadvance=25   page=0    chnl=0 
+char id=103     x=31   y=98   width=34   height=57   xoffset=2    yoffset=36   xadvance=40   page=0    chnl=0 
+char id=104     x=65   y=98   width=44   height=57   xoffset=1    yoffset=20   xadvance=46   page=0    chnl=0 
+char id=105     x=109  y=98   width=20   height=57   xoffset=2    yoffset=20   xadvance=23   page=0    chnl=0 
+char id=106     x=112  y=0    width=18   height=73   xoffset=-2   yoffset=20   xadvance=20   page=0    chnl=0 
+char id=107     x=129  y=98   width=42   height=57   xoffset=1    yoffset=20   xadvance=44   page=0    chnl=0 
+char id=108     x=171  y=98   width=20   height=57   xoffset=1    yoffset=20   xadvance=22   page=0    chnl=0 
+char id=109     x=171  y=320  width=66   height=41   xoffset=1    yoffset=36   xadvance=68   page=0    chnl=0 
+char id=110     x=237  y=320  width=44   height=41   xoffset=1    yoffset=36   xadvance=46   page=0    chnl=0 
+char id=111     x=104  y=320  width=36   height=42   xoffset=2    yoffset=36   xadvance=40   page=0    chnl=0 
+char id=112     x=361  y=98   width=40   height=56   xoffset=1    yoffset=36   xadvance=43   page=0    chnl=0 
+char id=113     x=401  y=98   width=39   height=56   xoffset=2    yoffset=36   xadvance=40   page=0    chnl=0 
+char id=114     x=484  y=266  width=27   height=41   xoffset=2    yoffset=36   xadvance=30   page=0    chnl=0 
+char id=115     x=140  y=320  width=31   height=42   xoffset=3    yoffset=36   xadvance=36   page=0    chnl=0 
+char id=116     x=460  y=266  width=24   height=51   xoffset=1    yoffset=27   xadvance=26   page=0    chnl=0 
+char id=117     x=281  y=320  width=43   height=41   xoffset=0    yoffset=37   xadvance=44   page=0    chnl=0 
+char id=118     x=324  y=320  width=39   height=40   xoffset=0    yoffset=37   xadvance=40   page=0    chnl=0 
+char id=119     x=363  y=320  width=57   height=40   xoffset=1    yoffset=37   xadvance=59   page=0    chnl=0 
+char id=120     x=420  y=320  width=40   height=40   xoffset=1    yoffset=37   xadvance=42   page=0    chnl=0 
+char id=121     x=440  y=98   width=40   height=56   xoffset=0    yoffset=37   xadvance=41   page=0    chnl=0 
+char id=122     x=460  y=320  width=32   height=40   xoffset=3    yoffset=37   xadvance=38   page=0    chnl=0 
+char id=123     x=130  y=0    width=25   height=73   xoffset=1    yoffset=18   xadvance=25   page=0    chnl=0 
+char id=124     x=355  y=0    width=8    height=63   xoffset=4    yoffset=23   xadvance=16   page=0    chnl=0 
+char id=125     x=155  y=0    width=25   height=73   xoffset=-1   yoffset=18   xadvance=25   page=0    chnl=0 
+char id=126     x=218  y=362  width=42   height=16   xoffset=3    yoffset=47   xadvance=49   page=0    chnl=0 
+char id=127     x=0    y=0    width=70   height=98   xoffset=0    yoffset=-1   xadvance=70   page=0    chnl=0 
+kernings count=389
+kerning first=86 second=45 amount=-1
+kerning first=114 second=46 amount=-4
+kerning first=40 second=87 amount=1
+kerning first=70 second=99 amount=-1
+kerning first=84 second=110 amount=-3
+kerning first=114 second=116 amount=1
+kerning first=39 second=65 amount=-4
+kerning first=104 second=34 amount=-1
+kerning first=89 second=71 amount=-1
+kerning first=107 second=113 amount=-1
+kerning first=78 second=88 amount=1
+kerning first=109 second=39 amount=-1
+kerning first=120 second=100 amount=-1
+kerning first=84 second=100 amount=-3
+kerning first=68 second=90 amount=-1
+kerning first=68 second=44 amount=-4
+kerning first=84 second=103 amount=-3
+kerning first=34 second=97 amount=-2
+kerning first=70 second=97 amount=-1
+kerning first=76 second=81 amount=-2
+kerning first=73 second=89 amount=-1
+kerning first=84 second=44 amount=-8
+kerning first=68 second=65 amount=-3
+kerning first=97 second=34 amount=-2
+kerning first=111 second=121 amount=-1
+kerning first=79 second=90 amount=-1
+kerning first=75 second=121 amount=-1
+kerning first=75 second=118 amount=-1
+kerning first=111 second=118 amount=-1
+kerning first=89 second=65 amount=-9
+kerning first=75 second=71 amount=-4
+kerning first=39 second=99 amount=-2
+kerning first=75 second=99 amount=-1
+kerning first=90 second=121 amount=-1
+kerning first=44 second=39 amount=-6
+kerning first=89 second=46 amount=-7
+kerning first=89 second=74 amount=-7
+kerning first=34 second=103 amount=-2
+kerning first=70 second=103 amount=-1
+kerning first=112 second=39 amount=-1
+kerning first=122 second=113 amount=-1
+kerning first=86 second=113 amount=-2
+kerning first=68 second=84 amount=-1
+kerning first=89 second=110 amount=-1
+kerning first=34 second=100 amount=-2
+kerning first=68 second=86 amount=-1
+kerning first=87 second=45 amount=-2
+kerning first=39 second=34 amount=-4
+kerning first=114 second=100 amount=-1
+kerning first=84 second=81 amount=-1
+kerning first=70 second=101 amount=-1
+kerning first=68 second=89 amount=-2
+kerning first=88 second=117 amount=-1
+kerning first=112 second=34 amount=-1
+kerning first=76 second=67 amount=-2
+kerning first=76 second=34 amount=-5
+kerning first=88 second=111 amount=-1
+kerning first=66 second=86 amount=-1
+kerning first=66 second=89 amount=-2
+kerning first=122 second=101 amount=-1
+kerning first=86 second=101 amount=-2
+kerning first=76 second=121 amount=-5
+kerning first=84 second=119 amount=-2
+kerning first=84 second=112 amount=-3
+kerning first=87 second=111 amount=-1
+kerning first=69 second=118 amount=-1
+kerning first=65 second=117 amount=-2
+kerning first=65 second=89 amount=-9
+kerning first=72 second=89 amount=-1
+kerning first=119 second=44 amount=-4
+kerning first=69 second=121 amount=-1
+kerning first=84 second=109 amount=-3
+kerning first=84 second=122 amount=-2
+kerning first=89 second=99 amount=-2
+kerning first=76 second=118 amount=-5
+kerning first=90 second=99 amount=-1
+kerning first=90 second=103 amount=-1
+kerning first=79 second=89 amount=-2
+kerning first=90 second=79 amount=-1
+kerning first=84 second=115 amount=-4
+kerning first=76 second=65 amount=1
+kerning first=90 second=100 amount=-1
+kerning first=118 second=46 amount=-4
+kerning first=87 second=117 amount=-1
+kerning first=118 second=34 amount=1
+kerning first=69 second=103 amount=-1
+kerning first=97 second=121 amount=-1
+kerning first=39 second=111 amount=-2
+kerning first=72 second=88 amount=1
+kerning first=76 second=87 amount=-5
+kerning first=69 second=119 amount=-1
+kerning first=121 second=97 amount=-1
+kerning first=75 second=45 amount=-8
+kerning first=65 second=86 amount=-9
+kerning first=46 second=34 amount=-6
+kerning first=76 second=84 amount=-10
+kerning first=116 second=111 amount=-1
+kerning first=87 second=113 amount=-1
+kerning first=69 second=100 amount=-1
+kerning first=97 second=118 amount=-1
+kerning first=65 second=85 amount=-2
+kerning first=90 second=71 amount=-1
+kerning first=68 second=46 amount=-4
+kerning first=65 second=79 amount=-3
+kerning first=98 second=122 amount=-1
+kerning first=86 second=41 amount=1
+kerning first=84 second=118 amount=-3
+kerning first=70 second=118 amount=-1
+kerning first=121 second=111 amount=-1
+kerning first=81 second=87 amount=-1
+kerning first=70 second=100 amount=-1
+kerning first=102 second=93 amount=1
+kerning first=114 second=101 amount=-1
+kerning first=88 second=45 amount=-2
+kerning first=39 second=103 amount=-2
+kerning first=75 second=103 amount=-1
+kerning first=88 second=101 amount=-1
+kerning first=89 second=103 amount=-2
+kerning first=110 second=39 amount=-1
+kerning first=89 second=89 amount=1
+kerning first=87 second=65 amount=-2
+kerning first=119 second=46 amount=-4
+kerning first=34 second=34 amount=-4
+kerning first=88 second=79 amount=-2
+kerning first=79 second=86 amount=-1
+kerning first=76 second=119 amount=-3
+kerning first=75 second=111 amount=-1
+kerning first=65 second=116 amount=-4
+kerning first=86 second=65 amount=-9
+kerning first=70 second=84 amount=1
+kerning first=75 second=117 amount=-1
+kerning first=80 second=65 amount=-9
+kerning first=34 second=112 amount=-1
+kerning first=102 second=99 amount=-1
+kerning first=118 second=97 amount=-1
+kerning first=89 second=81 amount=-1
+kerning first=118 second=111 amount=-1
+kerning first=102 second=101 amount=-1
+kerning first=114 second=44 amount=-4
+kerning first=90 second=119 amount=-1
+kerning first=75 second=81 amount=-4
+kerning first=88 second=121 amount=-1
+kerning first=34 second=110 amount=-1
+kerning first=86 second=100 amount=-2
+kerning first=122 second=100 amount=-1
+kerning first=89 second=67 amount=-1
+kerning first=90 second=118 amount=-1
+kerning first=84 second=84 amount=1
+kerning first=121 second=34 amount=1
+kerning first=91 second=74 amount=-1
+kerning first=88 second=113 amount=-1
+kerning first=77 second=88 amount=1
+kerning first=75 second=119 amount=-2
+kerning first=114 second=104 amount=-1
+kerning first=68 second=88 amount=-2
+kerning first=121 second=44 amount=-4
+kerning first=81 second=89 amount=-1
+kerning first=102 second=39 amount=1
+kerning first=74 second=65 amount=-2
+kerning first=114 second=118 amount=1
+kerning first=84 second=46 amount=-8
+kerning first=111 second=34 amount=-1
+kerning first=88 second=71 amount=-2
+kerning first=88 second=99 amount=-1
+kerning first=84 second=74 amount=-8
+kerning first=39 second=109 amount=-1
+kerning first=98 second=34 amount=-1
+kerning first=86 second=114 amount=-1
+kerning first=88 second=81 amount=-2
+kerning first=70 second=74 amount=-11
+kerning first=89 second=83 amount=-1
+kerning first=87 second=41 amount=1
+kerning first=89 second=97 amount=-3
+kerning first=89 second=87 amount=1
+kerning first=67 second=125 amount=-1
+kerning first=89 second=93 amount=1
+kerning first=80 second=118 amount=1
+kerning first=107 second=100 amount=-1
+kerning first=114 second=34 amount=1
+kerning first=89 second=109 amount=-1
+kerning first=89 second=45 amount=-2
+kerning first=70 second=44 amount=-8
+kerning first=34 second=39 amount=-4
+kerning first=88 second=67 amount=-2
+kerning first=70 second=46 amount=-8
+kerning first=102 second=41 amount=1
+kerning first=89 second=117 amount=-1
+kerning first=89 second=111 amount=-4
+kerning first=89 second=115 amount=-4
+kerning first=114 second=102 amount=1
+kerning first=89 second=125 amount=1
+kerning first=89 second=121 amount=-1
+kerning first=114 second=108 amount=-1
+kerning first=47 second=47 amount=-8
+kerning first=65 second=63 amount=-2
+kerning first=75 second=67 amount=-4
+kerning first=87 second=100 amount=-1
+kerning first=111 second=104 amount=-1
+kerning first=111 second=107 amount=-1
+kerning first=75 second=109 amount=-1
+kerning first=87 second=114 amount=-1
+kerning first=111 second=120 amount=-1
+kerning first=69 second=99 amount=-1
+kerning first=65 second=84 amount=-6
+kerning first=39 second=97 amount=-2
+kerning first=121 second=46 amount=-4
+kerning first=89 second=85 amount=-3
+kerning first=75 second=79 amount=-4
+kerning first=107 second=99 amount=-1
+kerning first=102 second=100 amount=-1
+kerning first=102 second=103 amount=-1
+kerning first=75 second=110 amount=-1
+kerning first=39 second=110 amount=-1
+kerning first=69 second=84 amount=1
+kerning first=84 second=111 amount=-3
+kerning first=120 second=111 amount=-1
+kerning first=84 second=114 amount=-3
+kerning first=112 second=120 amount=-1
+kerning first=79 second=84 amount=-1
+kerning first=84 second=117 amount=-3
+kerning first=89 second=79 amount=-1
+kerning first=75 second=113 amount=-1
+kerning first=39 second=113 amount=-2
+kerning first=80 second=44 amount=-11
+kerning first=79 second=88 amount=-2
+kerning first=98 second=39 amount=-1
+kerning first=65 second=118 amount=-4
+kerning first=65 second=34 amount=-4
+kerning first=88 second=103 amount=-1
+kerning first=77 second=89 amount=-1
+kerning first=39 second=101 amount=-2
+kerning first=75 second=101 amount=-1
+kerning first=88 second=100 amount=-1
+kerning first=78 second=65 amount=-3
+kerning first=87 second=44 amount=-4
+kerning first=67 second=41 amount=-1
+kerning first=86 second=93 amount=1
+kerning first=84 second=83 amount=-1
+kerning first=102 second=113 amount=-1
+kerning first=34 second=111 amount=-2
+kerning first=70 second=111 amount=-1
+kerning first=86 second=99 amount=-2
+kerning first=84 second=86 amount=1
+kerning first=122 second=99 amount=-1
+kerning first=84 second=89 amount=1
+kerning first=70 second=114 amount=-1
+kerning first=86 second=74 amount=-8
+kerning first=89 second=38 amount=-1
+kerning first=87 second=97 amount=-1
+kerning first=76 second=86 amount=-9
+kerning first=40 second=86 amount=1
+kerning first=90 second=113 amount=-1
+kerning first=39 second=39 amount=-4
+kerning first=111 second=39 amount=-1
+kerning first=90 second=117 amount=-1
+kerning first=89 second=41 amount=1
+kerning first=65 second=121 amount=-4
+kerning first=89 second=100 amount=-2
+kerning first=89 second=42 amount=-2
+kerning first=76 second=117 amount=-2
+kerning first=69 second=111 amount=-1
+kerning first=46 second=39 amount=-6
+kerning first=118 second=39 amount=1
+kerning first=91 second=85 amount=-1
+kerning first=80 second=90 amount=-1
+kerning first=90 second=81 amount=-1
+kerning first=69 second=117 amount=-1
+kerning first=76 second=39 amount=-5
+kerning first=90 second=67 amount=-1
+kerning first=87 second=103 amount=-1
+kerning first=84 second=120 amount=-3
+kerning first=89 second=101 amount=-2
+kerning first=102 second=125 amount=1
+kerning first=76 second=85 amount=-2
+kerning first=79 second=65 amount=-3
+kerning first=65 second=71 amount=-3
+kerning first=79 second=44 amount=-4
+kerning first=97 second=39 amount=-2
+kerning first=90 second=101 amount=-1
+kerning first=65 second=87 amount=-5
+kerning first=79 second=46 amount=-4
+kerning first=87 second=99 amount=-1
+kerning first=34 second=101 amount=-2
+kerning first=40 second=89 amount=1
+kerning first=76 second=89 amount=-8
+kerning first=69 second=113 amount=-1
+kerning first=120 second=103 amount=-1
+kerning first=69 second=101 amount=-1
+kerning first=69 second=102 amount=-1
+kerning first=104 second=39 amount=-1
+kerning first=80 second=121 amount=1
+kerning first=86 second=46 amount=-8
+kerning first=65 second=81 amount=-3
+kerning first=86 second=44 amount=-8
+kerning first=120 second=99 amount=-1
+kerning first=98 second=120 amount=-1
+kerning first=39 second=115 amount=-3
+kerning first=121 second=39 amount=1
+kerning first=88 second=118 amount=-1
+kerning first=84 second=65 amount=-6
+kerning first=65 second=39 amount=-4
+kerning first=84 second=79 amount=-1
+kerning first=65 second=119 amount=-4
+kerning first=70 second=117 amount=-1
+kerning first=75 second=100 amount=-1
+kerning first=86 second=111 amount=-2
+kerning first=122 second=111 amount=-1
+kerning first=81 second=84 amount=-2
+kerning first=107 second=103 amount=-1
+kerning first=118 second=44 amount=-4
+kerning first=87 second=46 amount=-4
+kerning first=87 second=101 amount=-1
+kerning first=70 second=79 amount=-2
+kerning first=87 second=74 amount=-2
+kerning first=123 second=74 amount=-1
+kerning first=76 second=71 amount=-2
+kerning first=39 second=100 amount=-2
+kerning first=80 second=88 amount=-1
+kerning first=84 second=121 amount=-3
+kerning first=112 second=122 amount=-1
+kerning first=84 second=71 amount=-1
+kerning first=89 second=86 amount=1
+kerning first=84 second=113 amount=-3
+kerning first=120 second=113 amount=-1
+kerning first=89 second=44 amount=-7
+kerning first=84 second=99 amount=-3
+kerning first=34 second=113 amount=-2
+kerning first=80 second=46 amount=-11
+kerning first=86 second=117 amount=-1
+kerning first=110 second=34 amount=-1
+kerning first=80 second=74 amount=-7
+kerning first=120 second=101 amount=-1
+kerning first=73 second=88 amount=1
+kerning first=108 second=111 amount=-1
+kerning first=34 second=115 amount=-3
+kerning first=89 second=113 amount=-2
+kerning first=82 second=86 amount=-3
+kerning first=114 second=39 amount=1
+kerning first=34 second=109 amount=-1
+kerning first=84 second=101 amount=-3
+kerning first=70 second=121 amount=-1
+kerning first=123 second=85 amount=-1
+kerning first=122 second=103 amount=-1
+kerning first=86 second=97 amount=-2
+kerning first=82 second=89 amount=-4
+kerning first=66 second=84 amount=-1
+kerning first=84 second=97 amount=-4
+kerning first=86 second=103 amount=-2
+kerning first=70 second=113 amount=-1
+kerning first=84 second=87 amount=1
+kerning first=75 second=112 amount=-1
+kerning first=114 second=111 amount=-1
+kerning first=39 second=112 amount=-1
+kerning first=107 second=101 amount=-1
+kerning first=82 second=84 amount=-3
+kerning first=114 second=121 amount=1
+kerning first=34 second=99 amount=-2
+kerning first=70 second=81 amount=-2
+kerning first=111 second=122 amount=-1
+kerning first=84 second=67 amount=-1
+kerning first=111 second=108 amount=-1
+kerning first=89 second=84 amount=1
+kerning first=76 second=79 amount=-2
+kerning first=85 second=65 amount=-2
+kerning first=44 second=34 amount=-6
+kerning first=65 second=67 amount=-3
+kerning first=109 second=34 amount=-1
+kerning first=114 second=103 amount=-1
+kerning first=78 second=89 amount=-1
+kerning first=89 second=114 amount=-1
+kerning first=89 second=112 amount=-1
+kerning first=34 second=65 amount=-4
+kerning first=70 second=65 amount=-11
+kerning first=81 second=86 amount=-1
+kerning first=114 second=119 amount=1
+kerning first=89 second=102 amount=-1
+kerning first=84 second=45 amount=-8
+kerning first=86 second=125 amount=1
+kerning first=70 second=67 amount=-2
+kerning first=89 second=116 amount=-1
+kerning first=102 second=34 amount=1
+kerning first=114 second=99 amount=-1
+kerning first=67 second=84 amount=-1
+kerning first=114 second=113 amount=-1
+kerning first=89 second=122 amount=-1
+kerning first=89 second=118 amount=-1
+kerning first=70 second=71 amount=-2
+kerning first=114 second=107 amount=-1
+kerning first=89 second=120 amount=-1

src/web/stylesheets/components/_operation.css

@@ -86,7 +86,7 @@ div.toggle-string {
 }
 
 .operation .form-control {
-    padding: 20px 12px 6px 12px;
+    padding: 20px 12px 6px 12px !important;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     background-image: none;

src/web/stylesheets/index.js

@@ -8,6 +8,7 @@
 
 /* Libraries */
 import "highlight.js/styles/vs.css";
+import "../static/clippy_assets/clippy.css";
 
 /* Frameworks */
 import "./vendors/bootstrap.scss";

src/web/stylesheets/layout/_controls.css

@@ -21,6 +21,14 @@
     background-color: var(--secondary-background-colour);
 }
 
+#controls-content {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transform-origin: center left;
+}
+
 #auto-bake-label {
     display: inline-block;
     width: 100px;

tests/operations/index.mjs

@@ -10,7 +10,6 @@
  * @copyright Crown Copyright 2017
  * @license Apache-2.0
  */
-import "babel-polyfill";
 
 // Define global environment functions
 global.ENVIRONMENT_IS_WORKER = function() {
@@ -33,6 +32,7 @@ import "./tests/BitwiseOp";
 import "./tests/ByteRepr";
 import "./tests/CartesianProduct";
 import "./tests/CharEnc";
+import "./tests/Charts";
 import "./tests/Checksum";
 import "./tests/Ciphers";
 import "./tests/Code";
@@ -49,9 +49,11 @@ import "./tests/Hash";
 import "./tests/HaversineDistance";
 import "./tests/Hexdump";
 import "./tests/Image";
+import "./tests/IndexOfCoincidence";
 import "./tests/Jump";
 import "./tests/JSONBeautify";
 import "./tests/JSONMinify";
+import "./tests/JSONtoCSV";
 import "./tests/JWTDecode";
 import "./tests/JWTSign";
 import "./tests/JWTVerify";
@@ -87,6 +89,9 @@ import "./tests/Enigma";
 import "./tests/Bombe";
 import "./tests/MultipleBombe";
 import "./tests/Typex";
+import "./tests/BLAKE2b";
+import "./tests/BLAKE2s";
+import "./tests/Protobuf";
 
 // Cannot test operations that use the File type yet
 //import "./tests/SplitColourChannels";

tests/operations/tests/BLAKE2b.mjs

@@ -0,0 +1,56 @@
+/**
+ * BitwiseOp tests
+ *
+ * @author h345983745
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+import TestRegister from "../TestRegister";
+
+TestRegister.addTests([
+    {
+        name: "BLAKE2b: 512 - Hello World",
+        input: "Hello World",
+        expectedOutput: "4386a08a265111c9896f56456e2cb61a64239115c4784cf438e36cc851221972da3fb0115f73cd02486254001f878ab1fd126aac69844ef1c1ca152379d0a9bd",
+        recipeConfig: [
+            { "op": "BLAKE2b",
+                "args": ["512", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    },
+    {
+        name: "BLAKE2b: 384 - Hello World",
+        input: "Hello World",
+        expectedOutput: "4d388e82ca8f866e606b6f6f0be910abd62ad6e98c0adfc27cf35acf948986d5c5b9c18b6f47261e1e679eb98edf8e2d",
+        recipeConfig: [
+            { "op": "BLAKE2b",
+                "args": ["384", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    },
+    {
+        name: "BLAKE2b: 256 - Hello World",
+        input: "Hello World",
+        expectedOutput: "1dc01772ee0171f5f614c673e3c7fa1107a8cf727bdf5a6dadb379e93c0d1d00",
+        recipeConfig: [
+            { "op": "BLAKE2b",
+                "args": ["256", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    },
+    {
+        name: "BLAKE2b: 160 - Hello World",
+        input: "Hello World",
+        expectedOutput: "6a8489e6fd6e51fae12ab271ec7fc8134dd5d737",
+        recipeConfig: [
+            { "op": "BLAKE2b",
+                "args": ["160", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    },
+    {
+        name: "BLAKE2b: Key Test",
+        input: "message data",
+        expectedOutput: "3d363ff7401e02026f4a4687d4863ced",
+        recipeConfig: [
+            { "op": "BLAKE2b",
+                "args": ["128", "Hex", {string: "pseudorandom key", option: "UTF8"}] }
+        ]
+    }
+]);

tests/operations/tests/BLAKE2s.mjs

@@ -0,0 +1,47 @@
+/**
+ * BitwiseOp tests
+ *
+ * @author h345983745
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+import TestRegister from "../TestRegister";
+
+TestRegister.addTests([
+    {
+        name: "BLAKE2s: 256 - Hello World",
+        input: "Hello World",
+        expectedOutput: "7706af019148849e516f95ba630307a2018bb7bf03803eca5ed7ed2c3c013513",
+        recipeConfig: [
+            { "op": "BLAKE2s",
+                "args": ["256", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    },
+    {
+        name: "BLAKE2s: 160 - Hello World",
+        input: "Hello World",
+        expectedOutput: "0e4fcfc2ee0097ac1d72d70b595a39e09a3c7c7e",
+        recipeConfig: [
+            { "op": "BLAKE2s",
+                "args": ["160", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    },
+    {
+        name: "BLAKE2s: 128 - Hello World",
+        input: "Hello World",
+        expectedOutput: "9964ee6f36126626bf864363edfa96f6",
+        recipeConfig: [
+            { "op": "BLAKE2s",
+                "args": ["128", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    },
+    {
+        name: "BLAKE2s: Key Test",
+        input: "Hello World",
+        expectedOutput: "9964ee6f36126626bf864363edfa96f6",
+        recipeConfig: [
+            { "op": "BLAKE2s",
+                "args": ["128", "Hex", {string: "", option: "UTF8"}] }
+        ]
+    }
+]);

tests/operations/tests/Charts.mjs

@@ -0,0 +1,55 @@
+/**
+ * Chart tests.
+ *
+ * @author Matt C [me@mitt.dev]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+import TestRegister from "../TestRegister";
+
+TestRegister.addTests([
+    {
+        name: "Scatter chart",
+        input: "100 100\n200 200\n300 300\n400 400\n500 500",
+        expectedMatch: /^<svg width/,
+        recipeConfig: [
+            {
+                "op": "Scatter chart",
+                "args": ["Line feed", "Space", false, "time", "stress", "black", 5, false]
+            }
+        ],
+    },
+    {
+        name: "Hex density chart",
+        input: "100 100\n200 200\n300 300\n400 400\n500 500",
+        expectedMatch: /^<svg width/,
+        recipeConfig: [
+            {
+                "op": "Hex Density chart",
+                "args": ["Line feed", "Space", 25, 15, true, "", "", true, "white", "black", true]
+            }
+        ],
+    },
+    {
+        name: "Series chart",
+        input: "100 100 100\n200 200 200\n300 300 300\n400 400 400\n500 500 500",
+        expectedMatch: /^<svg width/,
+        recipeConfig: [
+            {
+                "op": "Series chart",
+                "args": ["Line feed", "Space", "", 1, "mediumseagreen, dodgerblue, tomato"]
+            }
+        ],
+    },
+    {
+        name: "Heatmap chart",
+        input: "100 100\n200 200\n300 300\n400 400\n500 500",
+        expectedMatch: /^<svg width/,
+        recipeConfig: [
+            {
+                "op": "Heatmap chart",
+                "args": ["Line feed", "Space", 25, 25, true, "", "", false, "white", "black"]
+            }
+        ],
+    },
+]);

tests/operations/tests/Crypt.mjs

@@ -209,9 +209,9 @@ Tag: 16a3e732a605cc9ca29108f742ca0743`,
     {
         name: "AES Encrypt: AES-128-GCM, Binary",
         input: "7a0e643132750e96d805d11e9e48e281fa39a41039286423cc1c045e5442b40bf1c3f2822bded3f9c8ef11cb25da64dda9c7ab87c246bd305385150c98f31465c2a6180fe81d31ea289b916504d5a12e1de26cb10adba84a0cb0c86f94bc14bc554f3018",
-        expectedOutput: `fa17fcbf5e8763322c1b0c8562e1512ed9d702ef70c1643572b9de3e34ae6b535e6c1b992432aa6d06fb6f80c861262aef66e7c26035afe77bd3861261e4e092b523f058f8ebef2143db21bc16d02f7a011efb07419300cb41c3b884d1d8d6a766b8963c
+        expectedOutput: `5a29debb5c5f38cdf8aee421bd94dbbf3399947faddf205f88b3ad8ecb0c51214ec0e28bf78942dfa212d7eb15259bbdcac677b4c05f473eeb9331d74f31d441d97d56eb5c73b586342d72128ca528813543dc0fc7eddb7477172cc9194c18b2e1383e4e
 
-Tag: fa6bbb34c8cde65a3d7b93fb094fc84f`,
+Tag: 70fad2ca19412c20f40fd06918736e56`,
         recipeConfig: [
             {
                 "op": "AES Encrypt",
@@ -301,9 +301,9 @@ Tag: fa6bbb34c8cde65a3d7b93fb094fc84f`,
     {
         name: "AES Encrypt: AES-192-GCM, Binary",
         input: "7a0e643132750e96d805d11e9e48e281fa39a41039286423cc1c045e5442b40bf1c3f2822bded3f9c8ef11cb25da64dda9c7ab87c246bd305385150c98f31465c2a6180fe81d31ea289b916504d5a12e1de26cb10adba84a0cb0c86f94bc14bc554f3018",
-        expectedOutput: `ed22946f96964d300b45f5ce2d9601ba87682da1a603c90e6d4f7738729b0602f613ee392c9bfc7792594474f1213fb99185851f02ece4df0e93995e49f97aa4d0a337d7a80d83e4219dae5a3d36658f8659cdd5ed7c32707f98656fab7fb43f7a61e37c
+        expectedOutput: `318b479d919d506f0cd904f2676fab263a7921b6d7e0514f36e03ae2333b77fa66ef5600babcb2ee9718aeb71fc357412343c1f2cb351d8715bb0aedae4a6468124f9c4aaf6a721b306beddbe63a978bec8baeeba4b663be33ee5bc982746bd4aed1c38b
 
-Tag: be17cb31edb77f648b9d1032b235b33d`,
+Tag: 86db597d5302595223cadbd990f1309b`,
         recipeConfig: [
             {
                 "op": "AES Encrypt",
@@ -393,9 +393,9 @@ Tag: be17cb31edb77f648b9d1032b235b33d`,
     {
         name: "AES Encrypt: AES-256-GCM, Binary",
         input: "7a0e643132750e96d805d11e9e48e281fa39a41039286423cc1c045e5442b40bf1c3f2822bded3f9c8ef11cb25da64dda9c7ab87c246bd305385150c98f31465c2a6180fe81d31ea289b916504d5a12e1de26cb10adba84a0cb0c86f94bc14bc554f3018",
-        expectedOutput: `e3f1b236eaf3b9df69df8133a1b417fa42b242d8ad49e4d2f3469aca7e2a41737e4f2c8a0d212143287088fad51743577dc6dfa8ed328ca90113cbeb9b137926b2168cc037bdc371777e6ee02b9d9c017b6054fd83d43b4885fbe9c044a8574f1491a893
+        expectedOutput: `1287f188ad4d7ab0d9ff69b3c29cb11f861389532d8cb9337181da2e8cfc74a84927e8c0dd7a28a32fd485afe694259a63c199b199b95edd87c7aa95329feac340f2b78b72956a85f367044d821766b1b7135815571df44900695f1518cf3ae38ecb650f
 
-Tag: 23ddbd3ee4de33f98a9ea9a170bdf268`,
+Tag: 821b1e5f32dad052e502775a523d957a`,
         recipeConfig: [
             {
                 "op": "AES Encrypt",

tests/operations/tests/IndexOfCoincidence.mjs

@@ -0,0 +1,22 @@
+/**
+ * Index of Coincidence tests.
+ *
+ * @author George O [georgeomnet+cyberchef@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+import TestRegister from "../TestRegister";
+
+TestRegister.addTests([
+    {
+        name: "Index of Coincidence",
+        input: "Hello world, this is a test to determine the correct IC value.",
+        expectedMatch: /^Index of Coincidence: 0\.07142857142857142\nNormalized: 1\.857142857142857/,
+        recipeConfig: [
+            {
+                "op": "Index of Coincidence",
+                "args": []
+            },
+        ],
+    },
+]);

tests/operations/tests/JSONtoCSV.mjs

@@ -0,0 +1,93 @@
+/**
+ * JSON to CSV tests.
+ *
+ * @author mshwed [m@ttshwed.com]
+ *
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+import TestRegister from "../TestRegister";
+
+const EXPECTED_CSV_SINGLE = "a,b,c\r\n1,2,3\r\n";
+const EXPECTED_CSV_MULTIPLE = "a,b,c\r\n1,2,3\r\n1,2,3\r\n";
+const EXPECTED_CSV_EMPTY = "\r\n\r\n";
+
+TestRegister.addTests([
+    {
+        name: "JSON to CSV: strings as values",
+        input: JSON.stringify({a: "1", b: "2", c: "3"}),
+        expectedOutput: EXPECTED_CSV_SINGLE,
+        recipeConfig: [
+            {
+                op: "JSON to CSV",
+                args: [",", "\\r\\n"]
+            },
+        ],
+    },
+    {
+        name: "JSON to CSV: numbers as values",
+        input: JSON.stringify({a: 1, b: 2, c: 3}),
+        expectedOutput: EXPECTED_CSV_SINGLE,
+        recipeConfig: [
+            {
+                op: "JSON to CSV",
+                args: [",", "\\r\\n"]
+            },
+        ],
+    },
+    {
+        name: "JSON to CSV: numbers and strings as values",
+        input: JSON.stringify({a: 1, b: "2", c: 3}),
+        expectedOutput: EXPECTED_CSV_SINGLE,
+        recipeConfig: [
+            {
+                op: "JSON to CSV",
+                args: [",", "\\r\\n"]
+            },
+        ],
+    },
+    {
+        name: "JSON to CSV: JSON as an array",
+        input: JSON.stringify([{a: 1, b: "2", c: 3}]),
+        expectedOutput: EXPECTED_CSV_SINGLE,
+        recipeConfig: [
+            {
+                op: "JSON to CSV",
+                args: [",", "\\r\\n"]
+            },
+        ],
+    },
+    {
+        name: "JSON to CSV: multiple JSON values in an array",
+        input: JSON.stringify([{a: 1, b: "2", c: 3}, {a: 1, b: "2", c: 3}]),
+        expectedOutput: EXPECTED_CSV_MULTIPLE,
+        recipeConfig: [
+            {
+                op: "JSON to CSV",
+                args: [",", "\\r\\n"]
+            },
+        ],
+    },
+    {
+        name: "JSON to CSV: empty JSON",
+        input: JSON.stringify({}),
+        expectedOutput: EXPECTED_CSV_EMPTY,
+        recipeConfig: [
+            {
+                op: "JSON to CSV",
+                args: [",", "\\r\\n"]
+            },
+        ],
+    },
+    {
+        name: "JSON to CSV: empty JSON in array",
+        input: JSON.stringify([{}]),
+        expectedOutput: EXPECTED_CSV_EMPTY,
+        recipeConfig: [
+            {
+                op: "JSON to CSV",
+                args: [",", "\\r\\n"]
+            },
+        ],
+    }
+]);

tests/operations/tests/Protobuf.mjs

@@ -0,0 +1,36 @@
+/**
+ * Protobuf tests.
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import TestRegister from "../TestRegister";
+
+TestRegister.addTests([
+    {
+        name: "Protobuf Decode",
+        input: "0d1c0000001203596f751a024d65202b2a0a0a066162633132331200",
+        expectedOutput: JSON.stringify({
+            "1": 469762048,
+            "2": "You",
+            "3": "Me",
+            "4": 43,
+            "5": {
+                "1": "abc123",
+                "2": {}
+            }
+        }, null, 4),
+        recipeConfig: [
+            {
+                "op": "From Hex",
+                "args": ["Auto"]
+            },
+            {
+                "op": "Protobuf Decode",
+                "args": []
+            }
+        ]
+    },
+]);

webpack.config.js

@@ -48,7 +48,7 @@ module.exports = {
             "process.browser": "true"
         }),
         new MiniCssExtractPlugin({
-            filename: "[name].css"
+            filename: "assets/[name].css"
         }),
     ],
     resolve: {
@@ -60,7 +60,7 @@ module.exports = {
         rules: [
             {
                 test: /\.m?js$/,
-                exclude: /node_modules\/(?!jsesc|crypto-api)/,
+                exclude: /node_modules\/(?!jsesc|crypto-api|bootstrap)/,
                 options: {
                     configFile: path.resolve(__dirname, "babel.config.js"),
                     cacheDirectory: true,
@@ -80,7 +80,12 @@ module.exports = {
             {
                 test: /\.css$/,
                 use: [
-                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            publicPath: "../"
+                        }
+                    },
                     "css-loader",
                     "postcss-loader",
                 ]
@@ -88,7 +93,12 @@ module.exports = {
             {
                 test: /\.scss$/,
                 use: [
-                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            publicPath: "../"
+                        }
+                    },
                     "css-loader",
                     "sass-loader",
                 ]
@@ -97,7 +107,9 @@ module.exports = {
                 test: /\.(ico|eot|ttf|woff|woff2)$/,
                 loader: "url-loader",
                 options: {
-                    limit: 10000
+                    limit: 10000,
+                    name: "[hash].[ext]",
+                    outputPath: "assets"
                 }
             },
             {
@@ -107,9 +119,17 @@ module.exports = {
                     encoding: "base64"
                 }
             },
+            { // Store font .fnt and .png files in a separate fonts folder
+                test: /(\.fnt$|bmfonts\/.+\.png$)/,
+                loader: "file-loader",
+                options: {
+                    name: "[name].[ext]",
+                    outputPath: "assets/fonts"
+                }
+            },
             { // First party images are saved as files to be cached
                 test: /\.(png|jpg|gif)$/,
-                exclude: /node_modules/,
+                exclude: /(node_modules|bmfonts)/,
                 loader: "file-loader",
                 options: {
                     name: "images/[name].[ext]"
@@ -120,7 +140,9 @@ module.exports = {
                 exclude: /web\/static/,
                 loader: "url-loader",
                 options: {
-                    limit: 10000
+                    limit: 10000,
+                    name: "[hash].[ext]",
+                    outputPath: "assets"
                 }
             },
         ]
@@ -133,11 +155,15 @@ module.exports = {
         warningsFilter: [
             /source-map/,
             /dependency is an expression/,
-            /export 'default'/
+            /export 'default'/,
+            /Can't resolve 'sodium'/
         ],
     },
     node: {
-        fs: "empty"
+        fs: "empty",
+        "child_process": "empty",
+        net: "empty",
+        tls: "empty"
     },
     performance: {
         hints: false