144 lines
9.3 KiB
XML
144 lines
9.3 KiB
XML
|
<presentation>
|
||
|
|
<definitions>
|
||
|
|
<width>1920</width>
|
||
|
|
<height>1080</height>
|
||
|
|
<defaultfontcolor>#ffffff</defaultfontcolor>
|
||
|
|
<path>img/</path>
|
||
|
|
<boxwidth>1720</boxwidth>
|
||
|
|
<boxinnerx>165</boxinnerx>
|
||
|
|
<boxinnerwidth>1590</boxinnerwidth>
|
||
|
|
<boxheight>175</boxheight>
|
||
|
|
<mirrorline>880</mirrorline>
|
||
|
|
<headerpos>0,35*${scale},1920*${scale},270*${scale}</headerpos>
|
||
|
|
<headersize>90</headersize>
|
||
|
|
<boxx>105</boxx>
|
||
|
|
<box3_1>235</box3_1>
|
||
|
|
<box3_2>445</box3_2>
|
||
|
|
<box3_3>655</box3_3>
|
||
|
|
<listsize>72</listsize>
|
||
|
|
<transition>transform</transition>
|
||
|
|
<scale>1</scale>
|
||
|
|
</definitions>
|
||
|
|
<modules>
|
||
|
|
<defaultbg>
|
||
|
|
<img src="${path}bg.jpg" x="0" y="0" width="${width}" height="${height}"></img>
|
||
|
|
<img src="${path}logo.svg" x="40*${scale}" y="970*${scale}" width="82*${scale}" height="83*${scale}"></img>
|
||
|
|
<text x0="0" y0="1000*${scale}" x1="1920*${scale}" y1="1060*${scale}" size="40*${scale}">Introduction to presentationmaker.js</text>
|
||
|
|
<text x0="1700*${scale}" y0="20*${scale}" x1="1900*${scale}" y1="60*${scale}" size="20*${scale}" halign="right">${page}/${numpages}</text>
|
||
|
|
</defaultbg>
|
||
|
|
<boxx3>
|
||
|
|
<defaultbg />
|
||
|
|
<img src="${path}box.png" x="${boxx}*${scale}" y="${box3_1}*${scale}" width="${boxwidth}*${scale}" height="${boxheight}*${scale}"></img>
|
||
|
|
<img src="${path}box.png" x="${boxx}*${scale}" y="${box3_2}*${scale}" width="${boxwidth}*${scale}" height="${boxheight}*${scale}"></img>
|
||
|
|
<img src="${path}box.png" x="${boxx}*${scale}" y="${box3_3}*${scale}" width="${boxwidth}*${scale}" height="${boxheight}*${scale}"></img>
|
||
|
|
</boxx3>
|
||
|
|
<box3>
|
||
|
|
<boxx3></boxx3>
|
||
|
|
<text pos="${headerpos}" size="${headersize}" halign="center" valign="center">${headertext}</text>
|
||
|
|
<text x0="${boxinnerx}*${scale}" y0="${box3_1}*${scale}" w="${boxinnerwidth}*${scale}" h="${boxheight}*${scale}" size="${listsize}*${scale}" halign="left" valign="center">${text1}</text>
|
||
|
|
<text x0="${boxinnerx}*${scale}" y0="${box3_2}*${scale}" w="${boxinnerwidth}*${scale}" h="${boxheight}*${scale}" size="${listsize}*${scale}" halign="left" valign="center">${text2}</text>
|
||
|
|
<text x0="${boxinnerx}*${scale}" y0="${box3_3}*${scale}" w="${boxinnerwidth}*${scale}" h="${boxheight}*${scale}" size="${listsize}*${scale}" halign="left" valign="center">${text3}</text>
|
||
|
|
</box3>
|
||
|
|
<box3r>
|
||
|
|
<options rotate="0,0,90">
|
||
|
|
<boxx3 width="${height}" heigh="${width}"></boxx3>
|
||
|
|
<text pos="200,35,1080,220" size="${headersize}" halign="center" valign="center">${headertext}</text>
|
||
|
|
<text x0="${boxinnerx}" y0="${box3_1}" w="${boxinnerwidth}" h="${boxheight}" size="${listsize}" halign="left" valign="center">${text1}</text>
|
||
|
|
<text x0="${boxinnerx}" y0="${box3_2}" w="${boxinnerwidth}" h="${boxheight}" size="${listsize}" halign="left" valign="center">${text2}</text>
|
||
|
|
<text x0="${boxinnerx}" y0="${box3_3}" w="${boxinnerwidth}" h="${boxheight}" size="${listsize}" halign="left" valign="center">${text3}</text>
|
||
|
|
</options>
|
||
|
|
</box3r>
|
||
|
|
<mirrorimage>
|
||
|
|
<calc name="y2">((${mirrorline} - ${y}) +${mirrorline} - ${h})</calc>
|
||
|
|
<img src="${path}${img}" x="${x}*${scale}" y="${y}*${scale}" width="${w}*${scale}" height="${h}*${scale}"></img>
|
||
|
|
<options opacity=".44" flip="v" y="${height}">
|
||
|
|
<img src="${path}${img}" x="${x}*${scale}" y="(${height} - ${mirrorline}*${scale}) - ${scale} * (${mirrorline} - ${y})" width="${w}*${scale}" height="${h}*${scale}" mask-image="linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 40%)"></img>
|
||
|
|
</options>
|
||
|
|
</mirrorimage>
|
||
|
|
</modules>
|
||
|
|
<pages>
|
||
|
|
<page name="Welcome">
|
||
|
|
<defaultbg />
|
||
|
|
<mirrorimage img="presentationmaker.svg" x="642" y="600" w="634" h="374"></mirrorimage>
|
||
|
|
<text pos="${headerpos}" size="${headersize}" halign="center" valign="center">Welcome to the presentationmaker.js example</text>
|
||
|
|
<text x0="100" y0="450" x1="1820" y1="550" size="80" halign="center" valign="top">A quick presentation of the why and how.</text>
|
||
|
|
</page>
|
||
|
|
<page x="1920" name="Why">
|
||
|
|
<box3>
|
||
|
|
<headertext>Why using presentationmaker.js</headertext>
|
||
|
|
<text1>Powerpoint / Impress are hard to use.</text1>
|
||
|
|
<text2>I wanted to concentrate on the content, not the quirks of the tools.</text2>
|
||
|
|
<text3>I want to make use of modern browser features.</text3>
|
||
|
|
</box3>
|
||
|
|
</page>
|
||
|
|
<page y="1180" vx="-100" vy="980" vwidth="1920*2+200" vheight="2460" width="1920*2" height="2160" name="Features">
|
||
|
|
<calc name="scale">2</calc>
|
||
|
|
<box3 headertext="Features" text1="Template based slides/pages." text2="you can create new templates than can even calulate positions or things, this is scaled by 2X." text3="Using those templates is easy."></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020*2" name="Navigation (I)">
|
||
|
|
<box3 headertext="Navigation (I)" text1="A click/tap shows next page." text2="Swiping left/right works too." text3="Arrow on keyboard of course as well."></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020*2.5" y="1180" rz="-90" vx="2020*2.5" vy="1180" vrz="90" name="Navigation (II)">
|
||
|
|
<box3 headertext="Navigation (II)" text1="On the top left is a fullscreen icon." text2="Forwards and backwards button and a quick jump." text3="This works in every rotation :)"></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020*3" y="0" name="Creating slides">
|
||
|
|
<box3 headertext="Creating slides" text1="Presentations are based on easy to understand XML." text2="Basic elements can be combined to templates." text3="Templates can then form pages."></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020*3" y="1180" name="Example">
|
||
|
|
<defaultbg />
|
||
|
|
<text pos="${headerpos}" size="${headersize}" halign="center" valign="center">Example</text>
|
||
|
|
<text pos="100,270,1820,860" size="40" halign="left" valign="top">
|
||
|
|
This page is made by<br />
|
||
|
|
<pre><code>
|
||
|
|
<page x="2020*3" y="1180" name="Example">
|
||
|
|
<defaultbg />
|
||
|
|
<text pos="\${headerpos}" size="\${headersize}" halign="center"
|
||
|
|
valign="center">Example</text>
|
||
|
|
<text pos="100,270,1820,860" size="40" halign="left"
|
||
|
|
valign="top">
|
||
|
|
This page is made by<br />
|
||
|
|
<pre><code>Recursion is nice</code>/</pre>
|
||
|
|
</text>
|
||
|
|
</page>
|
||
|
|
</code></pre>
|
||
|
|
</text>
|
||
|
|
</page>
|
||
|
|
<page x="2020*3" y="1180*2" name="Modules / Templates">
|
||
|
|
<box3 headertext="Used Modules" text1="<strong>page</strong>: A page defintion." text2="<strong>defaultbg:</strong> a custom element that show the green background image" text3="<strong>text:</strong> A text box with given size and text"></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020*4" name="box3">
|
||
|
|
<box3 headertext="Module box3" text1="This is rendered by using the box3 custom module." text2="It is based on the boxx3 module (background + background images for text)." text3="Plus text areas for the text."></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020*4" y="1180" name="Modules within modules">
|
||
|
|
<calc name="math">sin(30*PI/180) + sqrt(9)</calc>
|
||
|
|
<box3 headertext="Modules can include other modules" text1="As seen on last slide." text2="In modules you can calculate things that can be used later." text3="This was calulated by "sin(30*PI/180) + sqrt(9)" = ${math}"></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020*4" y="1180*2" name="Practical use for calc">
|
||
|
|
<defaultbg />
|
||
|
|
<mirrorimage img="presentationmaker.svg" x="642" y="600" w="634" h="374"></mirrorimage>
|
||
|
|
<text pos="${headerpos}" size="${headersize}" halign="center" valign="center">The mirrored image is an example where calc helps.</text>
|
||
|
|
<text x0="100" y0="450" x1="1820" y1="550" size="80" halign="center" valign="top">Also it uses some image effects.</text>
|
||
|
|
</page>
|
||
|
|
<page x="2020*4" y="1180*3" vx="2020*4-100" vy="1180*3-100" vwidth="2120" vheight="1280" name="Page position" rz="3">
|
||
|
|
<box3 headertext="Page positions" text1="Pages can be positioned anywhere on the canvas." text2="Rotation of the page and the view can be different." text3="This can create nice effects, just don't over do it."></box3>
|
||
|
|
</page>
|
||
|
|
<page x="5320" y="1180*3" z="0" rx="55" ry="20" width="1920" height="1080" vx="5320-150" vy="4400" vz="450" vwidth="2120" vheight="1280" vrx="-50" name="3D">
|
||
|
|
<box3 headertext="Rotation can also be in 3D" text1="Again, use just for rare effects." text2="Don't over do it." text3="Yes, we really mean that."></box3>
|
||
|
|
</page>
|
||
|
|
<page x="2020" y="1180*3" name="Get it">
|
||
|
|
<box3 headertext="Get it an use it." text1="Licensed under GPL-3." text3="We love to get a shout-out if you use it.">
|
||
|
|
<text2><a href="https://git.contentnation.net/grumpydevelop/presentationmaker.js" target="_blank">git.contentnation.net/presentationmaker</a></text2>
|
||
|
|
</box3>
|
||
|
|
</page>
|
||
|
|
<page x="0" y="1180*3" name="Credits">
|
||
|
|
<box3 headertext="Credits" text1="My own render engine I made for an old project.">
|
||
|
|
<text2><a href="https://impress.js.org/" target="_blank">impress.js.org</a><br />(inspired, no code was used from the project.)</text2>
|
||
|
|
<text3>Built by <a href="https://contentnatin.net/@grumpydevelop">GrumpyDeveloper</a></text3>
|
||
|
|
</box3>
|
||
|
|
</page>
|
||
|
|
<page x="3500" y="1000" z="2000" vx="4000" vy="1800" vz="4000" width="3840" height="2160" vwidth="1920" vheight="1080" name="The end">
|
||
|
|
<text x0="0" y0="0" w="${width}" h="${height}" size="1000" halign="center" valign="center">The end</text>
|
||
|
|
</page>
|
||
|
|
</pages>
|
||
|
|
</presentation>
|