diff --git a/images/qtlogo.svg b/images/qtlogo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cb8989bb7938ef7cdf5df80184e4618210bf7c08
--- /dev/null
+++ b/images/qtlogo.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="462pt"
+ height="339pt"
+ viewBox="0 0 462 339"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="TheQtCompany_logo_2.svg">
+ <metadata
+ id="metadata20">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs18" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1536"
+ inkscape:window-height="801"
+ id="namedview16"
+ showgrid="false"
+ inkscape:zoom="1.1138643"
+ inkscape:cx="270.58047"
+ inkscape:cy="174.65092"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" />
+ <path
+ fill="#41cd52"
+ d=" M 63.50 0.00 L 462.00 0.00 L 462.00 274.79 C 440.60 296.26 419.13 317.66 397.61 339.00 L 0.00 339.00 L 0.00 63.39 C 21.08 42.18 42.34 21.13 63.50 0.00 Z"
+ id="path6" />
+ <path
+ d=" M 122.37 71.33 C 137.50 61.32 156.21 58.79 174.00 58.95 C 190.94 59.16 208.72 62.13 222.76 72.24 C 232.96 79.41 239.59 90.48 244.01 101.93 C 251.16 120.73 253.26 141.03 253.50 161.01 C 253.53 181.13 252.62 201.69 245.96 220.86 C 241.50 233.90 233.01 245.48 221.81 253.52 C 229.87 266.58 238.09 279.54 246.15 292.60 C 236.02 297.27 225.92 301.97 215.78 306.62 C 207.15 292.38 198.56 278.11 189.90 263.89 C 178.19 265.81 166.21 265.66 154.44 264.36 C 140.34 262.67 125.97 258.37 115.09 248.88 C 106.73 241.64 101.48 231.51 97.89 221.21 C 92.01 203.79 90.43 185.25 90.16 166.97 C 90.02 147.21 91.28 127.14 97.24 108.18 C 101.85 93.92 109.48 79.69 122.37 71.33 Z"
+ id="path8"
+ fill="#ffffff" />
+ <path
+ d=" M 294.13 70.69 C 304.73 70.68 315.33 70.68 325.93 70.69 C 325.96 84.71 325.92 98.72 325.95 112.74 C 339.50 112.76 353.05 112.74 366.60 112.75 C 366.37 121.85 366.12 130.95 365.86 140.05 C 352.32 140.08 338.79 140.04 325.25 140.07 C 325.28 163.05 325.18 186.03 325.30 209.01 C 325.56 215.30 325.42 221.94 328.19 227.75 C 330.21 232.23 335.65 233.38 340.08 233.53 C 348.43 233.50 356.77 233.01 365.12 232.86 C 365.63 241.22 366.12 249.59 366.60 257.95 C 349.99 260.74 332.56 264.08 316.06 258.86 C 309.11 256.80 302.63 252.19 299.81 245.32 C 294.76 233.63 294.35 220.62 294.13 208.07 C 294.11 185.40 294.13 162.74 294.12 140.07 C 286.73 140.05 279.34 140.08 271.95 140.05 C 271.93 130.96 271.93 121.86 271.95 112.76 C 279.34 112.73 286.72 112.77 294.11 112.74 C 294.14 98.72 294.10 84.71 294.13 70.69 Z"
+ id="path10"
+ fill="#ffffff" />
+ <path
+ fill="#41cd52"
+ d=" M 160.51 87.70 C 170.80 86.36 181.60 86.72 191.34 90.61 C 199.23 93.73 205.93 99.84 209.47 107.58 C 214.90 119.31 216.98 132.26 218.03 145.05 C 219.17 162.07 219.01 179.25 216.66 196.17 C 215.01 206.24 212.66 216.85 205.84 224.79 C 198.92 232.76 188.25 236.18 178.01 236.98 C 167.21 237.77 155.82 236.98 146.07 231.87 C 140.38 228.84 135.55 224.09 132.73 218.27 C 129.31 211.30 127.43 203.69 126.11 196.07 C 122.13 171.91 121.17 146.91 126.61 122.89 C 128.85 113.83 132.11 104.53 138.73 97.70 C 144.49 91.85 152.51 88.83 160.51 87.70 Z"
+ id="path12" />
+</svg>
diff --git a/images/qtmaintenancetoolsources.png b/images/qtmaintenancetoolsources.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ab3fe01963bdd2805d3213ff8ddf72616c7f79a
Binary files /dev/null and b/images/qtmaintenancetoolsources.png differ
diff --git a/images/qtstack.svg b/images/qtstack.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fe928bdf4a37ecd1cdcc8e3125918ac38747dfca
--- /dev/null
+++ b/images/qtstack.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ width="400pt"
+ height="700pt"
+ viewBox="-10 0 200 400"
+ version="1.1">
+
+ <style>
+ .qttextdark1 { font: 13px sans-serif; fill: rgb(9, 16,43) }
+ .qttextdark2 { font: 13px sans-serif; fill: rgb(243, 243, 244) }
+ .qttextlight1 { font: 13px sans-serif; fill: rgb(255, 255, 255) }
+ .qttextlight2 { font: 13px sans-serif; fill: rgb(58, 64, 85) }
+ .qtaccent1 { fill: rgb(65, 205, 82) }
+ .qtaccent2 { fill: rgb(132, 136, 149) }
+ .qtaccent3 { fill: rgb(83, 88, 107) }
+ .qtaccent4 { fill: rgb(23, 168, 26) }
+ .qtaccent5 { fill: rgb(34, 40, 64) }
+ .qtaccent6 { fill: rgb(181, 183, 191) }
+ .qthyperlink { fill: rgb(58, 64, 85) }
+ .qthyperlinkfollowed { fill: rgb(65, 205, 82) }
+
+ </style>
+
+ <path
+ class="qtaccent5"
+ d=" M 10 0
+ L 170 0
+ L 170 40
+ L 160 50
+ L 0 50
+ L 0 10
+ Z"
+ />
+ <text x="30" y="30" class="qttextlight1">Application</text>
+
+ <path
+ class="qtaccent1"
+ d=" M 10 50
+ L 170 50
+ L 170 90
+ L 160 100
+ L 0 100
+ L 0 60
+ Z"
+ />
+ <text x="30" y="80" class="qttextlight1">Qt</text>
+
+ <path
+ class="qtaccent2"
+ d=" M 10 100
+ L 170 100
+ L 170 140
+ L 160 150
+ L 0 150
+ L 0 110
+ Z"
+ />
+ <text x="30" y="130" class="qttextlight1">Emscripten</text>
+
+ <path
+ class="qtaccent3"
+ d=" M 10 150
+ L 170 150
+ L 170 190
+ L 160 200
+ L 0 200
+ L 0 160
+ Z"
+ />
+ <text x="30" y="180" class="qttextlight1">HTML/Wasm</text>
+
+
+ </svg>
diff --git a/images/qtws18.png b/images/qtws18.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c7984745afa0dbf8946cd7f5b9fa961891d2c7e
Binary files /dev/null and b/images/qtws18.png differ
diff --git a/images/slate-icon-web.svg b/images/slate-icon-web.svg
new file mode 100644
index 0000000000000000000000000000000000000000..19ffcc07b01da12305c38ead79b14516f683d72a
--- /dev/null
+++ b/images/slate-icon-web.svg
@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="268"
+ height="268"
+ viewBox="0 0 268 268"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+ sodipodi:docname="slate-logo-web.svg"
+ inkscape:export-filename="C:\dev\slate\app\images\image-project@2x.png"
+ inkscape:export-xdpi="180"
+ inkscape:export-ydpi="180">
+ <defs
+ id="defs4" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="0.99999999"
+ inkscape:cx="401.51295"
+ inkscape:cy="47.7708"
+ inkscape:document-units="px"
+ inkscape:current-layer="g881"
+ showgrid="false"
+ fit-margin-top="6"
+ fit-margin-left="6"
+ fit-margin-right="6"
+ fit-margin-bottom="6"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="1017"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ objecttolerance="10000"
+ inkscape:object-nodes="false"
+ inkscape:snap-nodes="false"
+ inkscape:measure-start="0,0"
+ inkscape:measure-end="0,0">
+ <inkscape:grid
+ type="xygrid"
+ id="grid4209"
+ originx="-2.7721205"
+ originy="254.97743" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ transform="translate(-600.97078,-948.65864)"
+ id="g881"
+ inkscape:groupmode="layer"
+ inkscape:label="logo-256">
+ <g
+ id="g925">
+ <g
+ id="g904">
+ <path
+ style="opacity:1;fill:#fcdcb5;fill-opacity:1;stroke:none;stroke-width:1.46951449;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 780.82284,1094.0266 54.2337,20.6948 0.60596,14.1904 -54.83955,20.7684 z"
+ id="path851"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccc" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path853"
+ d="m 810.7998,1177.5903 33.89841,-36.0976 -8.63731,-13.8116 -55.34788,20.9787 z"
+ style="fill:#f3c998;fill-opacity:1;stroke:none;stroke-width:0.84895539px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+ <path
+ style="fill:#f3c998;fill-opacity:1;stroke:none;stroke-width:0.84895539px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 810.80003,1065.5284 33.27602,35.9735 -10.26869,13.8239 -53.09434,-20.5756 z"
+ id="path855"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccc" />
+ <path
+ inkscape:connector-curvature="0"
+ style="opacity:1;fill:#277aa9;fill-opacity:1;stroke:none;stroke-width:10.16017246;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 810.7998,1177.5903 -29.44378,-29.1443 v 0 -53.773 0 l 29.33515,-29.1446 -170.80269,2e-4 -30.91769,29.1444 v 53.773 l 30.91791,29.1443 z"
+ id="path857"
+ sodipodi:nodetypes="ccccccccccc" />
+ <path
+ style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.71057272;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 843.97718,1101.5042 16.99361,17.0573 v 5.4671 l -16.99361,18.3914 -10.89593,-13.6386 v -13.6386 z"
+ id="path859"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <g
+ aria-label="slate"
+ transform="scale(1.0041224,0.99589453)"
+ style="font-style:normal;font-weight:normal;font-size:50.20623398px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.25515592"
+ id="text863">
+ <path
+ d="m 662.0737,1147.2698 q -2.61073,0 -4.0165,-1.205 -1.35557,-1.2049 -1.35557,-2.7111 0,-1.3054 0.95392,-2.2593 0.95392,-0.9539 2.81155,-0.9539 0.65268,0 1.50619,0.1506 0.90371,0.1004 1.35556,0.1506 -0.0502,-1.3054 -0.60247,-2.4601 -0.50206,-1.1547 -1.30536,-2.2091 -0.8033,-1.1045 -1.50619,-1.9078 -1.55639,2.9622 -3.11279,4.9202 -1.50618,1.958 -3.31361,3.7153 -0.90371,0.9037 -1.90783,0.9037 -0.8033,0 -1.30537,-0.5523 -0.50206,-0.6025 -0.50206,-1.456 0,-1.0041 0.70289,-1.8576 l 0.65268,-0.8033 q 2.76134,-3.414 4.16712,-5.6231 0.8535,-1.456 2.00825,-3.8659 1.15474,-2.4601 2.25928,-5.0708 0.95391,-2.2091 3.96629,-2.2091 1.40577,0 1.95804,0.251 0.55227,0.2511 0.55227,0.8033 0,0.3013 -0.20082,0.954 -0.20083,0.6526 -0.55227,1.3053 -0.90372,1.8074 -0.90372,3.0626 0,0.7531 0.50207,1.6568 0.55227,0.9037 1.6568,2.2593 1.6066,2.1087 2.4099,3.6148 0.85351,1.456 0.85351,3.2132 0,0.5021 -0.10041,1.4058 2.4601,-0.9539 5.77371,-5.0708 0.60248,-0.7029 1.35557,-0.7029 0.65268,0 1.00413,0.6025 0.40165,0.6024 0.40165,1.6568 0,1.9078 -0.95392,3.1128 -2.51031,3.1127 -4.8198,4.2675 -2.25928,1.1045 -5.6231,1.2049 -2.00825,1.7071 -4.76959,1.7071 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Pacifico;-inkscape-font-specification:Pacifico;baseline-shift:baseline;fill:#ffffff;fill-opacity:1;stroke-width:1.25515592"
+ id="path876" />
+ <path
+ d="m 693.23843,1134.7182 q 0.65268,0 1.00413,0.6025 0.40165,0.6024 0.40165,1.6568 0,2.0082 -0.95392,3.1128 -2.15887,2.6609 -4.71939,4.3679 -2.51031,1.707 -5.72351,1.707 -4.41815,0 -6.57701,-4.0165 -2.10867,-4.0165 -2.10867,-10.3927 0,-6.1251 1.5564,-13.9573 1.6066,-7.8322 4.66918,-13.4553 3.11278,-5.6231 7.38031,-5.6231 2.4099,0 3.76547,2.2593 1.40578,2.2091 1.40578,6.3762 0,5.9745 -3.31362,13.8569 -3.31361,7.8824 -8.98691,15.6142 0.35144,2.0584 1.15474,2.9621 0.8033,0.8535 2.10866,0.8535 2.05846,0 3.61485,-1.1547 1.5564,-1.205 3.96629,-4.0667 0.60248,-0.7029 1.35557,-0.7029 z m -6.17536,-31.0275 q -1.15475,0 -2.61073,4.1672 -1.45598,4.1671 -2.56052,10.3424 -1.10453,6.1754 -1.20495,11.8487 3.56465,-5.8741 5.67331,-11.7482 2.10866,-5.9244 2.10866,-10.7944 0,-3.8157 -1.40577,-3.8157 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Pacifico;-inkscape-font-specification:Pacifico;baseline-shift:baseline;fill:#ffffff;fill-opacity:1;stroke-width:1.25515592"
+ id="path878" />
+ <path
+ d="m 696.2712,1146.1652 q -3.11278,0 -4.97042,-2.2593 -1.85763,-2.2592 -1.85763,-5.9243 0,-4.0165 1.85763,-7.5811 1.85764,-3.6149 4.92022,-5.7738 3.11278,-2.209 6.57701,-2.209 1.10454,0 1.45598,0.4518 0.40165,0.4017 0.65268,1.5062 1.05434,-0.2008 2.20908,-0.2008 2.4601,0 2.4601,1.7572 0,1.0543 -0.75309,5.0206 -1.15474,5.7737 -1.15474,8.033 0,0.7531 0.35144,1.205 0.40165,0.4518 1.00413,0.4518 0.95391,0 2.30948,-1.2049 1.35557,-1.2552 3.66506,-4.0165 0.60247,-0.7029 1.35557,-0.7029 0.65268,0 1.00412,0.6025 0.40165,0.6024 0.40165,1.6568 0,2.0082 -0.95392,3.1128 -2.05845,2.5605 -4.36794,4.3177 -2.30949,1.7572 -4.46836,1.7572 -1.6568,0 -3.06258,-1.1045 -1.35556,-1.1548 -2.05845,-3.1128 -2.61073,4.2173 -6.57702,4.2173 z m 1.80743,-5.0708 q 1.10453,0 2.10866,-1.3054 1.00412,-1.3053 1.45598,-3.4642 l 1.85763,-9.238 q -2.10866,0.05 -3.91609,1.6066 -1.75721,1.5062 -2.81155,4.0165 -1.05433,2.5104 -1.05433,5.3219 0,1.5564 0.60248,2.3095 0.65268,0.7531 1.75722,0.7531 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Pacifico;-inkscape-font-specification:Pacifico;baseline-shift:baseline;fill:#ffffff;fill-opacity:1;stroke-width:1.25515592"
+ id="path880" />
+ <path
+ d="m 736.12005,1134.7182 q 0.65268,0 1.00412,0.6025 0.40165,0.6024 0.40165,1.6568 0,2.0082 -0.95392,3.1128 -2.15886,2.6609 -4.71938,4.3679 -2.56052,1.707 -5.87413,1.707 -10.24207,0 -10.24207,-14.4092 0,-2.209 0.15062,-4.4683 h -1.95805 q -1.50618,0 -2.05845,-0.5523 -0.50207,-0.5523 -0.50207,-1.7572 0,-2.8116 2.25929,-2.8116 h 2.86175 q 0.85351,-5.5226 2.61072,-10.0914 1.75722,-4.5688 4.21733,-7.2799 2.51031,-2.7112 5.37207,-2.7112 2.10866,0 3.31361,1.8577 1.20495,1.8576 1.20495,4.6692 0,7.7819 -6.52681,13.5556 h 5.62309 q 0.8033,0 1.15475,0.3515 0.35144,0.3514 0.35144,1.3053 0,3.4643 -5.6733,3.4643 h -6.12516 q -0.10042,2.5103 -0.10042,3.9161 0,5.2214 1.20495,7.3301 1.25516,2.1086 3.91609,2.1086 2.15887,0 3.81567,-1.3053 1.65681,-1.3054 3.91609,-3.9161 0.60247,-0.7029 1.35557,-0.7029 z m -8.78609,-27.8143 q -0.7531,0 -1.70701,1.9079 -0.90372,1.8576 -1.75722,5.2214 -0.8033,3.3136 -1.35557,7.3803 2.96217,-2.5605 4.41815,-5.7235 1.50618,-3.2132 1.50618,-5.8239 0,-2.9622 -1.10453,-2.9622 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Pacifico;-inkscape-font-specification:Pacifico;baseline-shift:baseline;fill:#ffffff;fill-opacity:1;stroke-width:1.25515592"
+ id="path882" />
+ <path
+ d="m 751.41177,1136.2244 q 0.65268,0 1.00412,0.6025 0.40165,0.6024 0.40165,1.6568 0,1.8074 -0.8535,3.1127 -1.40578,2.1589 -3.71526,3.3639 -2.25928,1.2049 -5.42228,1.2049 -4.8198,0 -7.48073,-2.8617 -2.66093,-2.912 -2.66093,-7.8322 0,-3.4642 1.45598,-6.4264 1.45599,-3.0124 4.0165,-4.7696 2.61073,-1.7572 5.87413,-1.7572 2.91196,0 4.66918,1.7572 1.75722,1.707 1.75722,4.6692 0,3.4642 -2.51031,5.9745 -2.46011,2.4601 -8.43465,3.9161 1.20495,2.3095 4.06671,2.3095 2.05845,0 3.36381,-0.9539 1.35557,-0.9539 3.11279,-3.2132 0.60248,-0.7531 1.35557,-0.7531 z m -8.23382,-8.7861 q -1.85763,0 -3.163,2.1589 -1.25515,2.1588 -1.25515,5.2214 v 0.1004 q 2.96217,-0.7029 4.66918,-2.1086 1.70701,-1.4058 1.70701,-3.2634 0,-0.954 -0.55227,-1.5062 -0.50206,-0.6025 -1.40577,-0.6025 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Pacifico;-inkscape-font-specification:Pacifico;baseline-shift:baseline;fill:#ffffff;fill-opacity:1;stroke-width:1.25515592"
+ id="path884" />
+ </g>
+ <path
+ style="fill:#e0cfc4;fill-opacity:1;stroke:none;stroke-width:0.56462616px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 736.80878,1008.286 c -26.64126,-11.69827 -52.94782,-16.70298 -78.55006,-7.6206 -19.02056,7.8477 -29.39929,17.0364 -34.87854,31.6545 -4.84037,13.189 -2.88648,26.8425 4.82773,34.0468 3.62337,3.3838 8.7722,8.4538 19.10853,6.7915 5.5492,5.4685 7.96591,5.6509 7.62053,1.1723 l 3.51717,2.5402 c 7.22326,1.6893 3.89349,-3.2977 2.5402,-7.0344 3.13672,1.8837 5.47602,4.1661 12.11467,4.2988 24.19011,-1.5303 35.11569,-6.1816 51.38968,-9.5745 l 21.29843,-56.2746 z"
+ id="path867"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccscccccccc" />
+ <path
+ style="fill:#d4bcad;fill-opacity:1;stroke:none;stroke-width:0.56462616px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 747.36029,1007.1135 c -10.58155,1.2615 -20.51202,3.5246 -24.42477,15.0457 -2.01684,6.7171 -2.15077,13.6695 0,20.9077 4.88978,7.9591 3.88107,19.5511 16.96205,22.8181 3.45201,1.4512 8.83843,0.9329 12.29044,-0.219 l 0.64345,3.7796 c 1.14297,6.7139 15.1492,8.028 25.40174,6.0573 5.0678,-0.9741 8.45991,-11.6969 7.62059,-19.149 -1.3892,-4.1979 -4.10088,-8.3411 -7.03439,-9.9654 1.94694,-14.0268 -1.73984,-24.4321 -7.03428,-33.8038 1.42082,-4.2276 1.43894,-7.7539 0.78155,-10.9423 -1.77118,-7.15196 -5.91536,-11.93098 -12.89629,-13.87331 -11.53085,-0.5888 -15.87745,5.07959 -19.73521,11.13773 -2.0501,4.51338 -2.55436,12.19468 7.42512,8.20668 z"
+ id="path869"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccssccccccc" />
+ <path
+ style="fill:#d6c2b4;fill-opacity:1;stroke:none;stroke-width:0.56462616px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 728.79747,1049.515 c 7.27239,11.4161 14.35088,21.8627 21.10302,30.6774 1.20101,-1.6648 2.83786,-2.8937 5.08033,-3.5171 2.08223,0.5546 3.6996,1.3417 3.71259,2.9309 2.55392,-0.7968 5.10693,-1.591 6.6435,1.1724 l -1.36775,3.3218 c -6.45734,-0.1996 -7.7793,1.9351 -8.59756,4.2988 4.1421,4.4796 7.75249,8.4127 11.1377,12.1146 0.92944,3.2742 2.03006,6.7196 -3.12633,3.908 l -3.12639,-1.3678 -3.12639,-3.9079 c 2.19786,4.3403 5.25232,9.6158 4.68956,10.9423 0.0728,2.2799 2.13829,6.1903 -3.12634,4.1033 l -0.93942,-2.7258 c -7.14219,-6.2985 -3.64162,-9.3166 -1.50818,-1.6832 0.40907,1.769 -1.9872,2.6792 -3.60977,1.2826 l -6.05731,-7.4251 -9.76995,-8.0112 -36.93022,-27.7466 c -7.56017,-15.4009 -9.97491,-37.2174 6.64351,-40.8382 12.87342,-2.8048 14.1598,9.731 22.2754,22.4708 z"
+ id="path871"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="sccccccccccccccccccss" />
+ <circle
+ transform="rotate(90)"
+ style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.69387853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="circle873"
+ cx="1021.3183"
+ cy="-745.81561"
+ r="2.4179285" />
+ <path
+ style="fill:#000000;fill-opacity:0.40404041;stroke:none;stroke-width:0.56462616px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 735.52206,1040.1781 c 1.92464,0.9334 4.20974,-0.2961 6.49387,-1.5199 15.35642,-0.8629 10.43046,-15.4213 -1.93435,-9.5335 -2.44093,-0.1585 -4.88193,-0.3889 -7.32286,1.2434 -0.39795,4.1494 0.97037,7.1213 2.76334,9.81 z"
+ id="path875"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccc" />
+ <circle
+ transform="rotate(90)"
+ r="2.4179285"
+ cy="-751.2041"
+ cx="1044.573"
+ id="circle877"
+ style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.69387853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <rect
+ y="954.65863"
+ x="606.97076"
+ height="256"
+ width="256"
+ id="rect883"
+ style="opacity:0.30100002;fill:none;fill-opacity:1;stroke:none;stroke-width:1.38383985;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ </g>
+</svg>
diff --git a/qtwasm.html b/qtwasm.html
new file mode 100644
index 0000000000000000000000000000000000000000..319731258f79509cdd4c3af07dea4c315abc1ee7
--- /dev/null
+++ b/qtwasm.html
@@ -0,0 +1,397 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+ <title>Qt for Wasm</title>
+
+ <link rel="stylesheet" href="reveal.js/css/reveal.css">
+ <link rel="stylesheet" href="reveal.js/css/theme/white.css">
+
+ <!-- Theme used for syntax highlighting of code -->
+ <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
+
+ <!-- Printing and PDF exports -->
+ <script>
+ var link = document.createElement( 'link' );
+ link.rel = 'stylesheet';
+ link.type = 'text/css';
+ link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
+ document.getElementsByTagName( 'head' )[0].appendChild( link );
+ </script>
+ </head>
+ <body>
+ <div class="reveal">
+ <div class="slides">
+ <section>
+ <img width=150 height=75 src="images/qtlogo.svg">
+ <h2>Qt for WebAssembly</h2>
+ <img width=300 height=300 src="images/qtws18.png">
+ <p>morten.sorvig@qt.io <p/>
+ </section>
+ <section>
+ <h2>Qt for WebAssembly</h2>
+ <iframe width="300" height="300" src = "qt/gui_opengl/gui_opengl.html"></iframe>
+ <iframe width="300" height="300" src = "qt/widgets_wiggly/widgets_wiggly.html"></iframe>
+ <iframe width="600" height="300" src = "qt/quick_clocks/quick_clocks.html"></iframe>
+ </section>
+ <section>
+ <section>
+ <h2>Qt for Web Browsers</h2>
+ <p>(The story so far)</p>
+ <p><strike>Qt for Google Native Client</strike></p>
+ <p>QmlWeb</p>
+ <p>Qt WebGL Streaming</p>
+ <p>Qt for WebAssembly</p>
+ </section>
+ <section>
+ <h2>QMLWeb</h2>
+ <iframe width="1000" height="600" src="https://qmlweb.github.io"></iframe>
+ </section>
+ </section>
+ <section>
+ <h2>Agenda</h2>
+ <p>Introduction to WebAssembly and Emscripten</p>
+ <p>Building for WebAssembly</p>
+ <p>Qt applications as a <canvas></p>
+ <p>Local File Access</p>
+ <p>Networking</p>
+ <p>JavaScript and C++ Interop</p>
+ </section>
+ <section>
+ <h2>Platform Stack</h2>
+ <img src="images/qtstack.svg" style="display:block;margin:0 auto;">
+ </section>
+ <section>
+ <section>
+ <h2>WebAssembly</h2>
+ <iframe width="1000" height="600" src="https://webassembly.org"></iframe>
+ </section>
+ <section>
+ <h2>WebAssembly</h2>
+ <p>webassembly.org</p>
+ <p>"WebAssembly is a binary instruction format for virtual machine"</p>
+ <p>Works with the following browsers:</p>
+ <p>Desktop: Chrome, Edge, Firefox, Safari.</p>
+ <p>Mobile: Chrome on Android, Safari on iOS<sup>*</sup></p>
+ <br>
+ <p>(Mobile Safari curently has limited support for large wasm files)</p>
+ <p></p>
+ </section>
+ <section>
+ <h2>WebassAembly</h2>
+ <p>Wasm <i>modules</i> are distributed as .wasm files.</p>
+ <p>Wasm modules are <i>compiled</i> then <i>instantiated</i>.</p>
+ <p>Wasm modules may export and import functions.</p>
+ <p>Wasm heap memory is accesible from JacaScript as an ArrayBuffer </p>
+ <p></p>
+ </section>
+ <section>
+ <h2>Webassembly</h2>
+ <pre class="fragment"><code class="hljs" data-trim contenteditable>
+wasm-bytes = await Fetch(...)
+let module = await WebAssembly.compile(wasm-bytes)
+
+let importObject = ... // environment with attached
+ // memory or import functions
+let instance = await WebAssembly.instantiate(module, importObject)
+ </code></pre>
+ <pre class="fragment"><code class="hljs" data-trim contenteditable>
+let source = Fetch(...)
+let importObject = ...
+let instance = await WebAssembly.
+ instantiateStreaming(source, importObject)
+ </code></pre>
+ </section>
+ </section>
+ <section>
+ <section>
+ <h2>Emscripten</h2>
+ <iframe width="1000" height="600" src="http://kripken.github.io/emscripten-site/"></iframe>
+ </section>
+ <section>
+ <h2>Emscripten</h2>
+ <p>emscripten.org</p>
+ <p>"Emscripten is a toolchain for compiling to WebAssembly, built using LLVM, that lets you run C and C++ on the web."</p>
+ <p>Provides a toolchain for compiling to WebAssembly, based on llvm</p>
+ <p>Provides the runtime: Standard C and C++ libraries, html5.h, C++ <-> JavaScript interop</p>
+ </section>
+ <section>
+ <h2>Emscripten</h2>
+ <p>Compiler: emcc</p>
+ <p>emcc main.cpp -o main.js</p>
+ main.wasm: wasm code <br>
+ main.js: emscripten runtime and API<br>
+ </section>
+ </section>
+ <section>
+ <section>
+ <h2>Qt</h2>
+ <p>New platform for 5.12: Q_OS_WASM</p>
+ <p>License: GPLv3 and Commercial/Tech Preview</p>
+ <p>Host system support: GNU/Linux, macOS, Windows Subsystem for Linux</p>
+ </section>
+ </section>
+ <section>
+ <h2>Build Qt from source</p>
+ <img width=650 src="images/qtmaintenancetoolsources.png">
+ </section>
+ <section>
+ <h2>Build Qt from source</h2>
+ <pre><code class="hljs" data-trim contenteditable>
+$ ~/Qt/qt-5.12/configure -xplatform wasm-emscripten
+$ make</code></pre>
+ <p>Implicit configure flags: -static -no-feature-thread</p>
+ <p>Suppored Modules: QtBase, QtDeclarative, QQuickControls2, QtCharts, QtWebSockets, ++</p>
+ <p>Not Supported: QtMultimedia, QtWebEngine</p>
+ </section>
+ <section>
+ <h2>The fine print</h2>
+ <p>No nested event loop support (QEventLoop::exec())</p>
+ <p>No system font support (bring your own fonts)</p>
+ <p>No accessibility/screen reader support</p>
+ <p>No system cliboard support</p>
+ <p>No virtual keyboard support on Mobile</p>
+ <p></p>
+ </section>
+ <section>
+ <h2>Build Application</h2>
+ <pre><code class="hljs" data-trim contenteditable>
+$ /path/to/qtbase-wasm/bin/qmake
+$ make</code></pre>
+ <p>Will produce .wasm, .js and .html files</p>
+ <p>These can be served from any web server</p>
+ </section>
+ <section>
+ <h2>Build Output Files</h2>
+ <table>
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Owner</th>
+ <th>Purpose</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr style>
+ <td>app.html</td>
+ <td>Qt</td>
+ <td>HTML container</td>
+ </tr>
+ <tr>
+ <td>qtloader.js</td>
+ <td>Qt</td>
+ <td>JS API for loading Qt apps</td>
+ </tr>
+ <tr>
+ <td>app.js</td>
+ <td>emscripten</td>
+ <td>app runtime and JS API</td>
+ </tr>
+ <tr>
+ <td>app.wasm</td>
+ <td>emscripten</td>
+ <td>app binary</td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+ <section>
+ <h2>Wasm Binary Size</h2>
+ <p>(compressed)</p>
+ <table>
+ <thead>
+ <tr>
+ <th>Modules</th>
+ <th>gzip</th>
+ <th>brotli</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Core Gui</td>
+ <td>2.8MB</td>
+ <td>2.1MB</td>
+ </tr>
+ <tr>
+ <td>Core Gui Widgets</td>
+ <td>4.3MB</td>
+ <td>3.2MB</td>
+ </tr>
+ <tr>
+ <td>Core Gui Widgets Quick Charts</td>
+ <td>8.6MB</td>
+ <td>6.3MB</td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+ <section>
+ <section>
+ <h2>Application as <canvas></h2>
+ <p> The application is embedded in the html page as a canvas element</p>
+ <pre><code class="hljs" data-trim contenteditable>
+<div>
+ <canvas>
+ <!--- App Appears Here -->
+ </canvas>
+</div></code></pre>
+ <p>The html file controls cavas position and size<p/>
+ <p>The application sees a QScreen with geometry matching that of the canvas<p/>
+ </section>
+ <section>
+ <h2>qtloader.js</h2>
+ <pre>
+var qtLoader = QtLoader()
+qtLoader.loadEmscriptenModule("app") // loads app.js and app.wasm </pre>
+ </section>
+ </section>
+ <section>
+ <h2>Demo: Slate</h2>
+ <img src="images/slate-icon-web.svg" style="display:block;margin:0 auto;">
+ <a href="https://github.com/mitchcurtis/slate" target="_blank">Slate - Pixel Art Editor</a>
+ <p>Image editor made with Qt Quick Controls 2<p/>
+ </section>
+ <section>
+ <iframe width="900" height="600" src = "qt/slate/app/slate.html"></iframe>
+ <br><small><small>Also, <a href=qt/slate/app/slate.html target="_blank">full viewport</a></small></small></br>
+ </section>
+
+ <section>
+ <h2>Local File Access</h2>
+ <p>Sandbox prevents direct file system access</p>
+ <p>Emscripten creates an in-memory file system, accessible by QFile</p>
+ <p>HTML has API for opening a file dialog and triggering file dialog<p>
+ <p>Not Compatible with QFileDialog - New API is needed<p>
+ <p><p>
+ </section>
+ <section>
+ <h2>Local File Access</h2>
+ <p>Callback-based loadFile()</p>
+ <pre><code class="hljs" data-trim contenteditable>
+QWasmFile::loadFile("*.txt",
+ [](const QByteArray &fileContent,
+ const QString &fileName) {
+
+ qDebug() << "Got" << fileContent.count()
+ << "bytes from" << fileName;
+});
+</code></pre>
+ <p>Fire-and-forget saveFile()</p>
+ <pre><code class="hljs" data-trim contenteditable>
+QByteArray content = ...;
+QString fileNameHint = ...;
+QWasmFile::saveFile(content, fileNameHint);
+ </code></pre>
+ </section>
+ <section>
+ <iframe width="900" height="600" src = "qt/slate/app/slate.html"></iframe>
+ </section>
+
+ <section>
+ <h2>Networking</h2>
+ <table>
+ <thead>
+ <tr>
+ <th>API</th>
+ <th>Protocol</th>
+ <th>Notes</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>QNetworkAccessManager</td>
+ <td>Http</td>
+ <td>Same Origin</td>
+ </tr>
+ <tr>
+ <td>QWebSocket</td>
+ <td>WebSocket</td>
+ <td>Any host</td>
+ </tr>
+ <tr>
+ <td>QAbstractSocket</td>
+ <td>WebSocket</td>
+ <td>Websockify forwarding host</td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+ </section>
+
+ <section>
+ <h2>MQTT over WebSocket</h2>
+ <iframe width="700" height="600" src="qt/mqtt_simpleclient/mqtt_simpleclient.html"></iframe>
+ </section>
+
+ <section>
+ <h2>JavaScript and C++ Interop</h2>
+ <p>Use case: The applicaiton is a web page component</p>
+ <p>We want bidirectional transfer of control and state</p>
+ <p>Emscripten provides API for JavaScript <-> C++ interop</p>
+ </section>
+ <section>
+ <h2>Call DOM API from C++</h2>
+ <p>Using API from val.h</p>
+ <pre><code class="hljs" data-trim contenteditable>
+using emscripten::val;
+val document = val::global("document");
+val input =
+ document.call<val>("createElement", std::string("input"));
+val body = document["body"];
+body.call<void>("appendChild", input);
+ </code></pre>
+ </section>
+ <section>
+ <h2>Calling C++ API from JavaScript</h2>
+ <p>Export C++ API to JavaScript</p>
+ <pre><code class="hljs" data-trim contenteditable>
+ #include <emscripten/bind.h>
+
+ void setColor(int r, int g, int b, int colorSpaceIndex);
+
+ EMSCRIPTEN_BINDINGS(colorDebugger) {
+ emscripten::function("setColor", &setColor);
+ }
+ </code></pre>
+ <p>Make call from JavaScript </p>
+ <pre><code class="hljs" data-trim contenteditable>
+ Module.setColor(rgb[0], rgb[1], rgb[2], colorSpaceIndex);
+ </code></pre>
+ </section>
+
+ <section>
+ <iframe width="1000" height="900" src = "qt/colordebugger/examples/web/index-minimal.html"></iframe>
+ </section>
+
+ <section>
+ <img width=150 height=75 src="images/qtlogo.svg">
+ <h1>Thanks!</h1>
+ github.com/msorvig/QtWS18
+ </section>
+
+ </div>
+ </div>
+
+ <script src="reveal.js/lib/js/head.min.js"></script>
+ <script src="reveal.js/js/reveal.js"></script>
+
+ <script>
+ // More info about config & dependencies:
+ // - https://github.com/hakimel/reveal.js#configuration
+ // - https://github.com/hakimel/reveal.js#dependencies
+ Reveal.initialize({
+ history: true,
+ slideNumber: true,
+ viewDistance: 3,
+ dependencies: [
+ { src: 'reveal.js/plugin/markdown/marked.js' },
+ { src: 'reveal.js/plugin/markdown/markdown.js' },
+ { src: 'reveal.js/plugin/notes/notes.js', async: true },
+ { src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
+ ]
+ });
+ </script>
+ </body>
+</html>
diff --git a/reveal.js/css/theme/white.css b/reveal.js/css/theme/white.css
index 27e44a1b4ed5c4bec90bb110d4fbe5265be1581f..dcfae39932a9b88f4956dbbecb1df3e96e3d860a 100644
--- a/reveal.js/css/theme/white.css
+++ b/reveal.js/css/theme/white.css
@@ -50,7 +50,6 @@ body {
font-weight: 600;
line-height: 1.2;
letter-spacing: normal;
- text-transform: uppercase;
text-shadow: none;
word-wrap: break-word; }
@@ -229,9 +228,7 @@ body {
*********************************************/
.reveal section img {
margin: 15px 0px;
- background: rgba(255, 255, 255, 0.12);
- border: 4px solid #222;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+ background: rgba(255, 255, 255, 0.12); }
.reveal section img.plain {
border: 0;
@@ -251,7 +248,8 @@ body {
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
- color: #2a76dd; }
+ color: rgb(65, 205, 82);
+}
/*********************************************
* PROGRESS BAR