# Presentationmaker.js
![PresentationMaker.js logo](public/img/presentationmaker.png)

## What is
A simple(ish) tool to create presentation from XML source.
For those who fight against typical presentation tools.

## Demo
A live demo can be found [here](https://userdata.contentnation.net/a5970e0955da4472b5f84a8dbb740273/presentation/)

## Features
* HTML output for use in browser
* input from XML file (either single file or embedded into HTML)
* transition between pages
* HTML in elements supported
* Custom templates, you define them, combine them and use it
* powerful calculation inside description and templates thanks to [fparser](https://fparser.alexi.ch/)
* presentation can be formatted via normal CSS

## Installation
If you just want to use it, take a look at the [public/index.html](public/index.html) file. It is a good start to use it. Additionally, you need the [public/presentationmaker.js](public/presentationmaker.js) script.
The CSS is optional, but encouraged.
It provides all the needed boilerplate to get you running.
### Development
If you want to help with development or want to see live updates if you change your xml, check out the project and use
```
npm install
npx webpack serve
```
and a browser pointing to localhost:8080

## Usage
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
### &lt;modules&gt;
Similar to the definitions, a &lt;module_name&gt;...&lt;/module_name&gt;
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

## Example
For a fully featured example, take a look at [public/example.xml](public/example.xml) file.
It show multiple modules, some of them nested, many formular and some HTML inside the text.