✨ Add experiments directory.

2025-05-10 13:46:38 +02:00 · 2020-06-18 20:08:22 +02:00 · 2020-06-18 20:08:22 +02:00 · 96d4c1e2fd
commit 96d4c1e2fd
parent dff038f4d7
22 changed files with 1838 additions and 56 deletions
--- a/docker/devenv/files/nginx.conf
+++ b/docker/devenv/files/nginx.conf
@ -57,10 +57,11 @@ http {
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

-        root /home/uxbox/uxbox/frontend/resources/public;
-        # root /home/uxbox/uxbox/frontend/target/dist;
        etag off;

+        location / {
+            root /home/uxbox/uxbox/frontend/resources/public;
+            try_files $uri /index.html;

            location ~* \.(js|css).*$ {
                add_header Cache-Control "max-age=86400" always; # 24 hours
@ -69,15 +70,18 @@ http {
            location = /index.html {
                add_header Cache-Control "no-cache, max-age=0";
            }
-
-        location / {
-            try_files $uri /index.html;
        }

        location /api {
            proxy_pass http://127.0.0.1:6060/api;
        }

+        location /playground {
+            alias /home/uxbox/uxbox/experiments/;
+            add_header Cache-Control "no-cache, max-age=0";
+            autoindex on;
+        }
+
        location /ws/notifications {
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
@ -87,9 +91,5 @@ http {
        location /media {
            alias  /home/uxbox/uxbox/backend/resources/public/media;
        }
-
-        location /static {
-            alias  /home/uxbox/uxbox/backend/resources/public/static;
-        }
    }
 }
--- a/experiments/js/html2canvas.js
+++ b/experiments/js/html2canvas.js
--- a/experiments/js/imagetracer.js
+++ b/experiments/js/imagetracer.js
--- a/experiments/js/main.js
+++ b/experiments/js/main.js
@ -0,0 +1,29 @@
+function svgDataURL(svg) {
+  var svgAsXML = new XMLSerializer().serializeToString(svg);
+  return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
+}
+
+window.addEventListener("DOMContentLoaded", event => {
+  html2canvas(document.querySelector("foreignObject"), {
+    logging: false,
+    scale: 4
+  }).then((canvas) => {
+
+
+    let dataURL = canvas.toDataURL();
+    let image = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    image.setAttribute("href", dataURL);
+    image.setAttribute("width", "400");
+    image.setAttribute("height", "200");
+    image.width = 400;
+    image.height = 200;
+
+    document.querySelector("foreignObject").replaceWith(image);
+    document.body.appendChild(canvas);
+
+    // html2canvas(document.querySelector("svg")).then(canvas => {
+    //   document.body.appendChild(canvas);
+    // });
+  });
+  //console.log(svgDataURL(svg));
+});
--- a/experiments/play.html
+++ b/experiments/play.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+    <script src="js/main.js"></script>
+    <title>Static Template</title>
+    <style>
+     svg {
+       width: 400px;
+       height: 200px;
+     }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Akronim"
+          rel="stylesheet"
+          type="text/css" />
+  </head>
+  <body>
+    <svg width="400" height="200" viewBox="0 0 400 200">
+      <rect x="1"
+            y="1"
+            width="398"
+            height="198"
+            fill="transparent"
+            stroke="blue" >
+      </rect>
+      <foreignObject x="0"
+                     y="0"
+                     id="09b1f590-b063-11ea-8678-7de6e9a67cb9"
+                     width="400"
+                     height="200">
+        <div class="root rich-text" style="height: 100%; width: 100%; display: flex; align-items: center">
+          <div class="paragraphs" style="display: inline-block; width: 100%">
+            <p style="font-size: 14px; margin: inherit; line-height: 1.2; text-align: center">
+              <span style="font-size: 36px; font-family: Roboto; font-style: normal; font-weight: 400; color: #66462C">
+                Explore the different configuration options available for
+              </span>
+              <span style="font-size: 36px; font-family: Akronim; font-style: normal; color: #184d47 ">
+                html2canvas
+              </span>
+            </p>
+          </div>
+        </div>
+      </foreignObject>
+    </svg>
+  </body>
+</html>
--- a/experiments/scripts/animate-output-template.svg
+++ b/experiments/scripts/animate-output-template.svg
@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<svg onload="animate(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="451pt" height="339pt" viewBox="0 0 451 339" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css"
+     xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+     a3:scriptImplementation="Adobe">
+    <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
+        var x = 0;
+        var speed = 83;
+	var length = 21;
+
+        function animate(evt) {
+            if ( window.svgDocument == null )
+                svgDocument = evt.target.ownerDocument;
+
+
+            setTimeout("advance()", speed);
+        }
+
+        function advance() {
+            frame = svgDocument.getElementById("frame_id_" + x);
+	    frame.setAttributeNS(null, "display", null);
+          
+            prev_frame = svgDocument.getElementById("frame_id_" + ((x+length)-1)%length);
+   	    prev_frame.setAttributeNS(null, "display", "none");
+
+            if ( ++x >= length ) {
+		this.x  = 0;
+	    }
+
+            setTimeout("advance()", speed);
+        }
+    ]]></script>
+</svg>
--- a/experiments/scripts/black_1600x800.ppm
+++ b/experiments/scripts/black_1600x800.ppm
--- a/experiments/scripts/black_3600x2700.ppm
+++ b/experiments/scripts/black_3600x2700.ppm
--- a/experiments/scripts/combine.xslt
+++ b/experiments/scripts/combine.xslt
@ -0,0 +1,27 @@
+<?xml version="1.0" ?> 
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:lxslt="http://xml.apache.org/xslt" 
+ xmlns:svg="http://www.w3.org/2000/svg"> 
+<xsl:param name="prepend">default</xsl:param>
+<xsl:variable name="testvar"><xsl:value-of select="$prepend"/></xsl:variable>
+
+<xsl:output method="xml" indent="yes"/> 
+
+<xsl:template match="*|@*|text()">
+<xsl:copy>
+<xsl:apply-templates select="*|@*|text()"/>
+</xsl:copy>
+</xsl:template>
+
+<xsl:template match="svg:svg">
+<xsl:copy>
+<xsl:apply-templates select="@*"/>
+<!--<xsl:value-of select="$testvar"/>-->
+<xsl:apply-templates select="document($prepend)/svg:svg/svg:g"/>
+<xsl:apply-templates select="svg:g"/>
+</xsl:copy>
+</xsl:template>
+
+
+</xsl:stylesheet>
+
+ 
--- a/experiments/scripts/combine_frames.xslt
+++ b/experiments/scripts/combine_frames.xslt
@ -0,0 +1,31 @@
+<?xml version="1.0" ?> 
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:lxslt="http://xml.apache.org/xslt" 
+ xmlns:svg="http://www.w3.org/2000/svg"> 
+<xsl:param name="append_file">default</xsl:param>
+<xsl:param name="append_id">-1</xsl:param>
+
+<xsl:output method="xml" indent="yes"/> 
+
+<xsl:template match="*|@*|text()">
+<xsl:copy>
+<xsl:apply-templates select="*|@*|text()"/>
+</xsl:copy>
+</xsl:template>
+
+<xsl:template match="svg:svg">
+<xsl:copy>
+<xsl:apply-templates select="@*"/>
+<xsl:apply-templates select="*"/>
+<xsl:apply-templates select="document($append_file)/svg:svg" mode="append"/>
+</xsl:copy>
+</xsl:template>
+
+<xsl:template match="svg:svg" mode="append">
+<svg:g id="{$append_id}" display="none">
+<xsl:apply-templates select="svg:g"/>
+</svg:g>
+</xsl:template>
+
+</xsl:stylesheet>
+
+ 
--- a/experiments/scripts/images/download.bmp
+++ b/experiments/scripts/images/download.bmp
--- a/experiments/scripts/palette.ppm
+++ b/experiments/scripts/palette.ppm
--- a/experiments/scripts/process.sh
+++ b/experiments/scripts/process.sh
@ -0,0 +1,15 @@
+#!/usr/bin/env sh
+
+set -ex
+
+SCALE_FACTOR=0.18
+OUTPUT=output
+for image in $1/*
+do
+./quantize.sh $image
+INPUT_BASE=`basename $image .bmp`
+#pamscale ${SCALE_FACTOR} -nomix tmp/${INPUT_BASE}-quant.ppm > tmp/${INPUT_BASE}-quant-scale_${SCALE_FACTOR}.ppm
+./trace.sh tmp/${INPUT_BASE}-quant-scale_${SCALE_FACTOR}.ppm
+gzip trace-output.svg
+mv trace-output.svg.gz ${OUTPUT}/trace-${INPUT_BASE}-${SCALE_FACTOR}.svgz
+done
--- a/experiments/scripts/quantize.sh
+++ b/experiments/scripts/quantize.sh
@ -0,0 +1,9 @@
+EDGE_THRESHOLD=0.1
+INPUT=`basename $1 .bmp`
+bmptoppm $1 > tmp/$INPUT.ppm
+ppmtopgm tmp/$INPUT.ppm > tmp/$INPUT.pgm
+pgmedge tmp/${INPUT}.pgm > tmp/$INPUT-edge.pgm
+pgmtopbm -threshold -value ${EDGE_THRESHOLD} tmp/$INPUT-edge.pgm > tmp/${INPUT}-${EDGE_THRESHOLD}.pbm
+pnmcomp -alpha tmp/${INPUT}-${EDGE_THRESHOLD}.pbm black_1600x800.ppm tmp/$INPUT.ppm > tmp/$INPUT-aliased.ppm
+ppmquant -map palette.ppm tmp/$INPUT-aliased.ppm > tmp/$INPUT-quant.ppm
+
--- a/experiments/scripts/readme.txt
+++ b/experiments/scripts/readme.txt
@ -0,0 +1,14 @@
+These scripts assume the images will be at 3600x2700, if you want a different size then you need to make an all black image of the appropriate size.  Then replace the black_3600x2700.ppm with it. 
+
+Copy a folder into the directory with the images in it.  It assumes the images are bmps.
+
+make a tmp and output folder in the directory
+
+copy a palette.ppm into the folder.  This palette file should include only the colors in the color model of the image.  It should also include the background or transparent color.
+
+Then the trace.sh script needs to be updated so it includes the hex colors of the palette except for black.  Do not include the background or transparent color in this list of colors.
+
+If the size of the images is not 3600x2700 you might also have to update the animate-output-template.svg file.  
+
+To process the images run the process.sh script with the name of the directory as an argument.
+
--- a/experiments/scripts/trace-output.svg
+++ b/experiments/scripts/trace-output.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="288.000000pt" height="144.000000pt" viewBox="0 0 288.000000 144.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.16, written by Peter Selinger 2001-2019
+</metadata>
+<g transform="translate(0.000000,144.000000) scale(0.100000,-0.100000)"
+fill="#6a0909" stroke="none">
+</g>
+</svg>
--- a/experiments/scripts/trace-output.svg.gz
+++ b/experiments/scripts/trace-output.svg.gz
--- a/experiments/scripts/trace.sh
+++ b/experiments/scripts/trace.sh
@ -0,0 +1,58 @@
+#!/usr/bin/env sh
+
+set -ex
+
+combine(){
+pnmpaste -or tmp/cmask-invert-${1}.pbm 0 0 tmp/cmask-invert-${2}.pbm >  tmp/combine-tmp.pbm
+mv tmp/combine-tmp.pbm tmp/cmask-invert-${2}.pbm
+}
+
+invert() {
+pnminvert tmp/cmask-${1}.pbm > tmp/cmask-invert-${1}.pbm
+}
+
+invert2() {
+pnminvert tmp/cmask-invert-${1}.pbm > tmp/cmask-${1}.pbm
+}
+
+mask() {
+ppmcolormask "#${1}" $INPUT_FILE > tmp/cmask-${1}.pbm
+}
+
+trace() {
+#potrace --svg --opttolerance 5 --alphamax 1.334 tmp/cmask000.pbm
+potrace --svg --color "#${1}" tmp/cmask-${1}.pbm
+}
+
+svg_prepend(){
+xsltproc --stringparam prepend tmp/cmask-${1}.svg combine.xslt trace-output.svg > tmp/combine-tmp.svg
+mv tmp/combine-tmp.svg trace-output.svg
+}
+
+#COLORS=ffffff c5eeff ddd9d4 fdb696 c9463b 736026 af1a1a 3c3b39 6e0c00
+COLORS="6a0909 302621 22323f af1a1a 43551e 60492d 3f515f 8f3131 7a543b 677a88 e17070 e99282 b3adad f6b18f ffd86f d5dfe1 f2f2f2 ffffff"
+INPUT_FILE=$1
+
+mask 000000
+invert 000000
+
+previous=
+
+for color in $COLORS
+do
+  mask ${color}
+  trace ${color}
+  invert ${color}  
+  combine ${color} 000000
+  if [ -n "$previous" ] 
+  then
+    svg_prepend ${color} 
+  else 
+    cp tmp/cmask-${color}.svg trace-output.svg
+  fi
+  previous=${color}
+done
+
+invert2 000000
+trace 000000
+svg_prepend 000000
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -33,12 +33,32 @@
      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.152.tgz",
      "integrity": "sha512-Vwf9YF2x1GE3WNeUMjT5bTHa2DqgUo87ocdgTScupY2JclZ5Nn7W2RLM/N0+oreexUk8uaVugR81NnTY/jNNXg=="
    },
+    "@types/node": {
+      "version": "14.0.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
+      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA==",
+      "optional": true
+    },
    "@types/q": {
      "version": "1.5.4",
      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
      "dev": true
    },
+    "@types/yauzl": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",
+      "integrity": "sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==",
+      "optional": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "agent-base": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+      "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g=="
+    },
    "ajv": {
      "version": "6.12.2",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
@ -406,8 +426,7 @@
    "balanced-match": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
    },
    "base": {
      "version": "0.11.2",
@ -470,11 +489,15 @@
        }
      }
    },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+    },
    "base64-js": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
-      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==",
-      "dev": true
+      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
    },
    "bcrypt-pbkdf": {
      "version": "1.0.2",
@ -506,6 +529,37 @@
      "resolved": "https://registry.npmjs.org/bintrees/-/bintrees-1.0.1.tgz",
      "integrity": "sha1-DmVcm5wkNeqraL9AJyJtK1WjRSQ="
    },
+    "bl": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
+      "integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==",
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
+          "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
    "bn.js": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.1.tgz",
@ -522,7 +576,6 @@
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
      "requires": {
        "balanced-match": "^1.0.0",
        "concat-map": "0.0.1"
@ -701,8 +754,7 @@
    "buffer-crc32": {
      "version": "0.2.13",
      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
-      "dev": true
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
    },
    "buffer-equal": {
      "version": "1.0.0",
@ -815,6 +867,11 @@
        }
      }
    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+    },
    "cipher-base": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
@ -1033,8 +1090,7 @@
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
    "concat-stream": {
      "version": "1.6.2",
@ -1190,6 +1246,14 @@
        "randomfill": "^1.0.3"
      }
    },
+    "css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
    "css-select": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@ -1593,7 +1657,6 @@
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
      "requires": {
        "once": "^1.4.0"
      }
@ -1978,7 +2041,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-      "dev": true,
      "requires": {
        "pend": "~1.2.0"
      }
@ -2133,6 +2195,11 @@
        "map-cache": "^0.2.2"
      }
    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
    "fs-extra": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
@ -2157,8 +2224,7 @@
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
    "fsevents": {
      "version": "1.2.13",
@ -2223,7 +2289,6 @@
      "version": "7.1.6",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
      "requires": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
@ -2637,6 +2702,14 @@
      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
      "dev": true
    },
+    "html2canvas": {
+      "version": "1.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz",
+      "integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==",
+      "requires": {
+        "css-line-break": "1.1.1"
+      }
+    },
    "http-signature": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@ -2654,11 +2727,34 @@
      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
      "dev": true
    },
+    "https-proxy-agent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
+      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
+      "requires": {
+        "agent-base": "5",
+        "debug": "4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
    "ieee754": {
      "version": "1.1.13",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
-      "dev": true
+      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
    },
    "immer": {
      "version": "5.3.6",
@ -2669,7 +2765,6 @@
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
      "requires": {
        "once": "^1.3.0",
        "wrappy": "1"
@ -2678,8 +2773,7 @@
    "inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "ini": {
      "version": "1.3.5",
@ -3467,6 +3561,11 @@
        }
      }
    },
+    "mime": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+      "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
+    },
    "mime-db": {
      "version": "1.44.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
@ -3504,7 +3603,6 @@
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
      "requires": {
        "brace-expansion": "^1.1.7"
      }
@ -3515,6 +3613,11 @@
      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
      "dev": true
    },
+    "mitt": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.0.1.tgz",
+      "integrity": "sha512-FhuJY+tYHLnPcBHQhbUFzscD5512HumCPE4URXZUgPi3IvOJi4Xva5IIgy3xX56GqCmw++MAm5UURG6kDBYTdg=="
+    },
    "mixin-deep": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@ -3557,6 +3660,11 @@
      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
      "dev": true
    },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
+    },
    "mocha": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/mocha/-/mocha-5.2.0.tgz",
@ -3963,7 +4071,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
      "requires": {
        "wrappy": "1"
      }
@ -4119,8 +4226,7 @@
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
    },
    "path-key": {
      "version": "2.0.1",
@ -4176,8 +4282,7 @@
    "pend": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-      "dev": true
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
    },
    "performance-now": {
      "version": "2.1.0",
@ -4318,6 +4423,11 @@
        "react-is": "^16.8.1"
      }
    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "psl": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@ -4373,6 +4483,77 @@
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
      "dev": true
    },
+    "puppeteer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-4.0.0.tgz",
+      "integrity": "sha512-yNshT0M5DWfZ8DQoduZuGYpcwqXxKOZdgt5G0IF5VEKbydaDbWP/f5pQRfzQ4e+a4w0Rge3uzcogHeUPQM8nCA==",
+      "requires": {
+        "debug": "^4.1.0",
+        "extract-zip": "^2.0.0",
+        "https-proxy-agent": "^4.0.0",
+        "mime": "^2.0.3",
+        "mitt": "^2.0.1",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.0.0",
+        "rimraf": "^3.0.2",
+        "tar-fs": "^2.0.0",
+        "unbzip2-stream": "^1.3.3",
+        "ws": "^7.2.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "extract-zip": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+          "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+          "requires": {
+            "@types/yauzl": "^2.9.1",
+            "debug": "^4.1.1",
+            "get-stream": "^5.1.0",
+            "yauzl": "^2.10.0"
+          }
+        },
+        "get-stream": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
+          "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "progress": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+          "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
+        "ws": {
+          "version": "7.3.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
+          "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w=="
+        }
+      }
+    },
    "q": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@ -4715,7 +4896,6 @@
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
      "requires": {
        "glob": "^7.1.3"
      }
@ -4741,8 +4921,7 @@
    "safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
    "safe-regex": {
      "version": "1.1.0",
@ -5377,7 +5556,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
      "requires": {
        "safe-buffer": "~5.1.0"
      }
@ -5656,6 +5834,52 @@
        }
      }
    },
+    "tar-fs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.0.tgz",
+      "integrity": "sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg==",
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "tar-stream": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.2.tgz",
+      "integrity": "sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==",
+      "requires": {
+        "bl": "^4.0.1",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
    "tdigest": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/tdigest/-/tdigest-0.1.1.tgz",
@ -5722,6 +5946,11 @@
      "integrity": "sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=",
      "dev": true
    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
    "through2": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@ -5894,6 +6123,26 @@
      "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==",
      "dev": true
    },
+    "unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "requires": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
+          "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4"
+          }
+        }
+      }
+    },
    "unc-path-regex": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
@ -6062,8 +6311,7 @@
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
    },
    "util.promisify": {
      "version": "1.0.1",
@ -6247,8 +6495,7 @@
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
    },
    "ws": {
      "version": "3.3.3",
@ -6327,7 +6574,6 @@
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
-      "dev": true,
      "requires": {
        "buffer-crc32": "~0.2.3",
        "fd-slicer": "~1.1.0"
--- a/frontend/package.json
+++ b/frontend/package.json
@ -29,8 +29,10 @@
  },
  "dependencies": {
    "date-fns": "^2.13.0",
+    "html2canvas": "^1.0.0-rc.5",
    "map-stream": "0.0.7",
    "mousetrap": "^1.6.5",
+    "puppeteer": "^4.0.0",
    "randomcolor": "^0.5.4",
    "react": "^16.13.1",
    "react-color": "^2.18.1",
--- a/tracebitmap.txt
+++ b/tracebitmap.txt
@ -0,0 +1,19 @@
+How to trace a bitmap to svg in multiple colors:
+
+Generate the PPM format from PNG:
+
+  convert download.png download.ppm
+
+Generate a mask file for each color of the file:
+
+  ppmcolormask "#184d47" download.ppm > download-mask1.pbm
+  ppmcolormask "#66462C" download.ppm > download-mask2.pbm
+
+Then trace the bitmap (bitmap -> svg):
+
+  potrace --flat -b svg download-mask1.pbm -o download1.svg
+  potrace --flat -b svg download-mask2.pbm -o download2.svg
+
+Extract a list of colors from an image:
+
+  convert download.png +dither -colors 10 -unique-colors txt: