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 image
• x Left position of the image (relative to the page)
• y Top position of the image (relative to the page)
• width Image width
• height 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 visible
• blendmode optional one the https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode values
• flip optional flipping of the image (currently only y supported)
• rotate rotation values in X,Y,Z form
• y 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 to center
• valign vertical alignment in the bounding box, possible value: top, center, bottom, default to top
• fontsize optional font size in pixel
• color 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 the width variable in the definitions section
• height page height, default to the height variable in the definitions section
• x X position of the page in the canvas, defaults to 0
• y Y position of the page in the canvas, defaults to 0
• z Z position of the page in the canvas, defaults to 0
• rx rotation of the page on the X-Axis in °, defaults to 0
• ry rotation of the page on the Y-Axis in °, defaults to 0
• rz rotation of the page on the Z-Axis in °, defaults to 0
• vx viewport position in X, defaults to x
• vy viewport position in Y, defaults to y
• vz viewport position in Z, defaults to z
• vwidth viewport width, defaults to width
• vheight viewport width, defaults to height
• vrx rotation of the vieport on the X-Axis in °, defaults to 0
• vry rotation of the vieport on the Y-Axis in °, defaults to 0
• vrz rotation of the vieport on the Z-Axis in °, defaults to 0
• name 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.