grumpydevelop
/
presentationmaker.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
The primary repository for presentatinmaker.js, a tool to create presentation in the browser.
2 Commits
1 Branch
0 Tags
946 KiB
TypeScript 93.2%
CSS 3.5%
HTML 2.3%
JavaScript 1%
 
 
 
 
Go to file
Sascha Nitsch 2b7f9f3fa1 changed output directory 
include generated file as well
 		2024-07-10 14:24:28 +02:00
dist initial import 2024-07-05 20:22:32 +02:00
public changed output directory 2024-07-10 14:24:28 +02:00
src initial import 2024-07-05 20:22:32 +02:00
.eslintrc.js initial import 2024-07-05 20:22:32 +02:00
.gitignore initial import 2024-07-05 20:22:32 +02:00
README.md initial import 2024-07-05 20:22:32 +02:00
package.json initial import 2024-07-05 20:22:32 +02:00
tsconfig.json initial import 2024-07-05 20:22:32 +02:00
webpack.config.js changed output directory 2024-07-10 14:24:28 +02:00

README.md

Presentationmaker.js

PresentationMaker.js logo

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 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 file. It show multiple modules, some of them nested, many formular and some HTML inside the text.