![]() include generated file as well |
||
---|---|---|
dist | ||
public | ||
src | ||
.eslintrc.js | ||
.gitignore | ||
README.md | ||
package.json | ||
tsconfig.json | ||
webpack.config.js |
README.md
Presentationmaker.js
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
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 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
Example
For a fully featured example, take a look at public/example.xml file. It show multiple modules, some of them nested, many formular and some HTML inside the text.