THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

Browse Source

Add experiments directory.

pull/265/head
Andrey Antukh 11 months ago
parent
commit
96d4c1e2fd
  1. 30
      docker/devenv/files/nginx.conf
  2. 20
      experiments/js/html2canvas.js
  3. 1217
      experiments/js/imagetracer.js
  4. 29
      experiments/js/main.js
  5. 50
      experiments/play.html
  6. 32
      experiments/scripts/animate-output-template.svg
  7. BIN
      experiments/scripts/black_1600x800.ppm
  8. BIN
      experiments/scripts/black_3600x2700.ppm
  9. 27
      experiments/scripts/combine.xslt
  10. 31
      experiments/scripts/combine_frames.xslt
  11. BIN
      experiments/scripts/images/download.bmp
  12. BIN
      experiments/scripts/palette.ppm
  13. 15
      experiments/scripts/process.sh
  14. 9
      experiments/scripts/quantize.sh
  15. 14
      experiments/scripts/readme.txt
  16. 13
      experiments/scripts/trace-output.svg
  17. BIN
      experiments/scripts/trace-output.svg.gz
  18. 58
      experiments/scripts/trace.sh
  19. 314
      frontend/package-lock.json
  20. 2
      frontend/package.json
  21. 14
      frontend/src/uxbox/main/exports.cljs
  22. 19
      tracebitmap.txt

30
docker/devenv/files/nginx.conf

@ -57,27 +57,31 @@ 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 ~* \.(js|css).*$ {
add_header Cache-Control "max-age=86400" always; # 24 hours
}
location = /index.html {
add_header Cache-Control "no-cache, max-age=0";
}
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
}
location = /index.html {
add_header Cache-Control "no-cache, max-age=0";
}
}
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;
}
}
}

20
experiments/js/html2canvas.js
File diff suppressed because one or more lines are too long
View File

1217
experiments/js/imagetracer.js
File diff suppressed because it is too large
View File

29
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));
});

50
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>

32
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>

BIN
experiments/scripts/black_1600x800.ppm

Binary file not shown.

BIN
experiments/scripts/black_3600x2700.ppm

Binary file not shown.

27
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>

31
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>

BIN
experiments/scripts/images/download.bmp

Binary file not shown.

BIN
experiments/scripts/palette.ppm

Binary file not shown.

15
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

9
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

14
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.

13
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>

BIN
experiments/scripts/trace-output.svg.gz

Binary file not shown.

58
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

314
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"

2
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",

14
frontend/src/uxbox/main/exports.cljs

@ -77,14 +77,14 @@
(let [shape (geom/transform-shape frame shape)
opts #js {:shape shape}]
(case (:type shape)
:curve [:> path/path-shape opts]
:text [:> text/text-shape opts]
:icon [:> icon/icon-shape opts]
:rect [:> rect/rect-shape opts]
:path [:> path/path-shape opts]
:image [:> image/image-shape opts]
:curve [:> path/path-shape opts]
:text [:> text/text-shape opts]
:icon [:> icon/icon-shape opts]
:rect [:> rect/rect-shape opts]
:path [:> path/path-shape opts]
:image [:> image/image-shape opts]
:circle [:> circle/circle-shape opts]
:group [:> group-wrapper {:shape shape :frame frame}]
:group [:> group-wrapper {:shape shape :frame frame}]
nil))))))
(mf/defc page-svg

19
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:
Loading…
Cancel
Save