presentationmaker.js - a tool to make browser bases presentations
The what?
It is a browser based tool to create presentation based on custom buildable templates.
You define the presentation in an xml file, that will be processed and then shown in the browser.
All you need to do is supply the content, the images and possibly some universal styling, the rest is done by the tool.
A quick demo (included in the source code)
The why!
I tried to create a similar presentation (without effects) in Libreoffice. I was more fighting the tool than creating the content.
Yes, you can define custom templates, but you have to manually calculate positions, fight quirks and adjust every slide individually, because something breaks.
Also, having it rendered in a browser enables more possibilites. Starting with media integration (audio/video) as well as having the full power of a browser including custom scripting is just so much more powerful than a pdf.
The how does it work?
You create (or copy the default) html file that includes a stylesheet and the script.
You then give it the presentation XML-file.
It will read the file and genereate the needed html for the presentation.
It also gives a customizable UI.
The details are below, but for the curious here is how it works.
The XML file is parsed the resulting tree is then analyzed.
The <definition> block creates variables that can later be used in various fields by ${variable_name}.
You can use other definitions in there, for example in formulas.
The most magic happens in the <modules> block.
There you define your templates that can be used later. Again, nesting is possible if you previously defined the blocks.
Here the magic of formulas and variable start to shine.
You can use formulas to calculate positions, text sizes and similar so you can create a library of page designs or areas.
Do you want your name on every slide in one corner? Create a template for that. Or the number of the current page on the footer? Create a template.
<text x0="1700*${scale}" y0="20*${scale}" x1="1900*${scale}" y1="60*${scale}" size="20*${scale}" halign="right">${page}/${numpages}</text>
This even scales your position and text size if needed.
Of course you can give the module custom variables that will be set from the calling page (or the other module):
Module
<box3>
...
<text pos="${headerpos}" size="${headersize}" halign="center" valign="center">${headertext}</text>
...
</box3>
And in the page:
<page x="1920" name="Why">
<box3>
<headertext>Why using presentationmaker.js</headertext>
...
</box3>
</page>
Each module has an instance of the class RenderTree, which in turn has other modules or final elements.
Currently these elements are calc, img, options and text.
See description below for details.
The pages are placed on an theoretically unlimited canvas. You give it X, Y and Z (yes: 3D) positions and rotations (0 degrees means normal view)
as well a viewpoint. If no viewpoint is given, it is calculated to show the full page.
When switching pages/slides, the view will move to the new position, with the includes css this will be animated and moved within 1 second.
Feel free to adjust that, it's your presentation.
The how do I use it?
From the included README.md:
The main presentation file is pure XML with a <presentation> root node. Below this there are
<defintions>
These are in the form of
<name>value<name>
Later "name" can be used via${name}
in the templates/pages<modules>
Similar to the definitions, a <module_name>...</module_name> Creates a module that can be used later. The module itself can use other previously defined modules as
<module_name optional="value">optional inner content</module_name>
The parameter you add during use will be available to the module as${optional}
Existing internal modules are<calc>
Calculates a formula and stores the result in a variable for later use. Parameters:
name
the name of the variable inner text is the formular to be used to calculate the value<img>
Shows an image. Parameters:
src
file name of the imagex
Left position of the image (relative to the page)y
Top position of the image (relative to the page)width
Image widthheight
Image height<options>
Creates an effect or transformation layer to affect content that is rendered inside. Parameters:
opacity
optional opacity value 0: fully transparent, 1: fully visibleblendmode
optional one the https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode valuesflip
optional flipping of the image (currently only y supported)rotate
rotation values in X,Y,Z formy
optional y axis to flip at Inner XML is the content to display<text>
Show a text in an invisible bounding box. Parameters:
x0
left side of the bounding box.y0
top side of the bounding box.x1
right side of the bounding box (mutally exclusive to width)y1
bottom side of the bounding box (mutally exclisve to height)pos
shortcut to x0,y0,x1,y1 (mutually exclusive to above values)halign
horizontal alignment in the bounding box, possible values:left
,center
,right
, defaults tocenter
valign
vertical alignment in the bounding box, possible value:top
,center
,bottom
, default totop
fontsize
optional font size in pixelcolor
optional color Inside the XML is the text to display<page>
This is the section for the actual pages to show. In the pages, modules, variables as well as calulation can be used. Parameters:
id
optional id of the page (useful for CSS styling)width
page width, default to thewidth
variable in the definitions sectionheight
page height, default to theheight
variable in the definitions sectionx
X position of the page in the canvas, defaults to 0y
Y position of the page in the canvas, defaults to 0z
Z position of the page in the canvas, defaults to 0rx
rotation of the page on the X-Axis in °, defaults to 0ry
rotation of the page on the Y-Axis in °, defaults to 0rz
rotation of the page on the Z-Axis in °, defaults to 0vx
viewport position in X, defaults tox
vy
viewport position in Y, defaults toy
vz
viewport position in Z, defaults toz
vwidth
viewport width, defaults towidth
vheight
viewport width, defaults toheight
vrx
rotation of the vieport on the X-Axis in °, defaults to 0vry
rotation of the vieport on the Y-Axis in °, defaults to 0vrz
rotation of the vieport on the Z-Axis in °, defaults to 0name
name of the page (shown in drop down), defaults to page number
Last words
Create your own thing, use your own design, create a templates library and have fun with it.
The tool is licensed under GPL-3 or later, feel free to extend, modify and improve it. Just don't forget the pull request or link.
Digitale Signaturen des Artikels
Was sind die digitalen Signaturen und wie prüfe ich die?Inhalts-Signatur:
a66d51f448c2c22557b848cc6c3e762fMGUCMCLtpKHJUQvGIy1VRr8wJSDVNS1PA4yE+ciFOJKK49un8asE1ZnyKmdbqaLqMt0SIAIxAOjODWvClQa6REhebOgn46QOjpvJvONuw5GpIIuusxlbuKYIrkGJl0afUBO25bz5yg==
Content Nation Signatur
MGUCMQD6VG5RXCSKLL9xyDO4N9ljqaKDGqO+sAjaGQB/ywqTKc7Jxo7KAJDQV1Sm68suUPcCMBSPePkvhpuGZ+/VFyH4zoz5z7GAH2LwX+//I5O3WWFRGoDETl+KCMPzqrxytEoRDQ==
Mehr Signatur-Informationen
Inhalts-Signatur:
Profil public key (a66d51f448c2c22557b848cc6c3e762f)