Skip to content
Snippets Groups Projects
Commit 3269c24c authored by Morten Sorvig's avatar Morten Sorvig
Browse files

Add presentation

parent f593d34c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
images/qtlogo.svg 0 → 100644
+ 67
− 0
View file @ 3269c24c
<?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>
images/qtmaintenancetoolsources.png 0 → 100644
+ 0
− 0
View file @ 3269c24c
images/qtmaintenancetoolsources.png

140 KiB

images/qtstack.svg 0 → 100644
+ 78
− 0
View file @ 3269c24c
<?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>
images/qtws18.png 0 → 100644
+ 0
− 0
View file @ 3269c24c
images/qtws18.png

146 KiB

images/slate-icon-web.svg 0 → 100644
+ 183
− 0
View file @ 3269c24c
<?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>
qtwasm.html 0 → 100644
+ 397
− 0
View file @ 3269c24c
<!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 &lt;canvas&gt;</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 &lt;canvas&gt;</h2>
<p> The application is embedded in the html page as a canvas element</p>
<pre><code class="hljs" data-trim contenteditable>
&lt;div&gt;
&lt;canvas&gt;
&lt;!--- App Appears Here --&gt;
&lt;/canvas&gt;
&lt;/div&gt;</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&lt;val&gt;("createElement", std::string("input"));
val body = document["body"];
body.call&lt;void&gt;("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 &lt;emscripten/bind.h&gt;
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>
reveal.js/css/theme/white.css
+ 3
− 5
View file @ 3269c24c
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment