grumpydevelop
/
presentationmaker.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
presentationmaker.js/public/example.xml

144 lines
9.3 KiB
XML
Raw Blame History

<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>
&lt;page x="2020*3" y="1180" name="Example"&gt;
&lt;defaultbg /&gt;
&lt;text pos="\${headerpos}" size="\${headersize}" halign="center"
valign="center">Example&lt;/text&gt;
&lt;text pos="100,270,1820,860" size="40" halign="left"
valign="top"&gt;
This page is made by&lt;br /&gt;
&lt;pre&gt;&lt;code&gt;Recursion is nice&lt;/code&gt;/&lt;/pre&gt;
&lt;/text&gt;
&lt;/page&gt;
</code></pre>
</text>
</page>
<page x="2020*3" y="1180*2" name="Modules / Templates">
<box3 headertext="Used Modules" text1="&lt;strong&gt;page&lt;/strong&gt;: A page defintion." text2="&lt;strong&gt;defaultbg:&lt;/strong&gt; a custom element that show the green background image" text3="&lt;strong&gt;text:&lt;/strong&gt; 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 &quot;sin(30*PI/180) + sqrt(9)&quot; = ${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>
Reference in New Issue View Git Blame Copy Permalink