The primary repository for presentatinmaker.js, a tool to create presentation in the browser.

Find a file

Sascha Nitsch 3dce91450e initial import		2024-07-05 20:13:58 +02:00
public	initial import	2024-07-05 20:13:58 +02:00
src	initial import	2024-07-05 20:13:58 +02:00
.eslintrc.js	initial import	2024-07-05 20:13:58 +02:00
.gitignore	initial import	2024-07-05 20:13:58 +02:00
package.json	initial import	2024-07-05 20:13:58 +02:00
README.md	initial import	2024-07-05 20:13:58 +02:00
tsconfig.json	initial import	2024-07-05 20:13:58 +02:00
webpack.config.js	initial import	2024-07-05 20:13:58 +02:00

README.md

Presentationmaker.js

What is

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

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
presentation can be formatted via normal CSS

Installation

If you just want to use it, take a look at the public/index.html file. It is a good start to use it. Additionally, you need the 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

<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