Impresi

Impresi is a Javascript library for creating beautiful slide presentations.

Demo

Installation

Through CDN

https://unpkg.com/impresi

Demo

Through NPM

npm i impresi --save

Demo

Usage

The Impresi instance

Every Impresi application starts by creating a new Impresi instance:

let impresi = new Impresi("board");

In the above example, "board" is the ID of the HTML element acting as a container for the Impresi board, for example:

<div id="board"></div>

The easiest way to use Impresi is to pass a configuration object to the Impresi instance:

 let config = {
    resources: [
      {
        id: "b1",
        type: "background",
        options: {
          "backgroundColor": "#e6f7ea"
        }
      },{
        id: "b1h1",
        type: "heading",
        text: "Hello Impresi",
        options: {
          x: 37,
          y: 20
        }
      }
    ],
    actions: [
      { in: ["b1", "b1h1"] }
    ]
  };

  let impresi = new Impresi("board", config);
  impresi.start();

The same can be achieved by chaining methods together, like so:

let b1 = impresi.createBackground(options: {
          "backgroundColor": "#e6f7ea"
  });
 let b1h1 = impresi.createHeading(
    "A heading",
    {
      x: 37,
      y: 20
    }
  );
impresi
    .addActions({ in: [b1, b1h1] });
impresi.start();

Methods

createBackground

createBackground([options]) : Impresi

options

Type: Object

An optional plain object with sets of key/value pairs that configure the background. All properties are optional.

| Property | Type | Description | Default | | ------ | ------ | ------ | ------ | | backgroundColor | String | Background color of background. | "#333" | | imageUrl | String | Url of background image. | None | | inAnimationName | String | Animate.css class name for in animation. | "fadeIn" | | x | Integer | Horizontal point of the heading measured as a percentage of the screen width. | 10 | | y | Integer | Vertical point of the heading measured as a percentage of the screen height. | 10 |

Example

//by config
{
    id: "b1",
    type: "background",
    options: {
        "backgroundColor": "#e6f7ea"
    }
}
//by code
let b1 = impresi.createBackground({
    imageUrl: "path/to/image.jpg"
  });

createHeading

createHeading(text, [options]) : Impressi

text

Type: String

The text to set as the content of the heading. Required.

options

Type: Object

An optional plain object with sets of key/value pairs that configure the heading. All properties are optional.

| Property | Type | Description | Default | | ------ | ------ | ------ | ------ | | fontSize | Integer | Size of font measured in percentage of the screen width. | 4 | | fontColor | String | Color of font. | "#fff" | | backgroundColor | String | Color of heading background or "transparent" for no background color. | "#333" | | width | Integer | Width of the image measured as a percentage of the screen width. | None | | inAnimationName | String | Animate.css class name for in animation. | "slideInUp" | | x | Integer | Horizontal point of the heading measured as a percentage of the screen width. | 10 | | y | Integer | Vertical point of the heading measured as a percentage of the screen height. | 10 |

Example

//by config
{
    id: "b1h1",
    type: "heading",
    text: "A heading",
    options: {
         x: 20,
         y: 20
    }
}
//by code
let b1h1 = impresi.createHeading(
    "A heading",
    {
      fontSize: 3,
      x: 10,
      y: 5
    }
  );

createBlurb

createBlurb(text, [options]) : Impresi

text

Type: String

The text to set as the content of the blurb. Required.

options

Type: Object

An optional plain object with sets of key/value pairs that configure the blurb. All properties are optional.

| Property | Type | Description | Default | | ------ | ------ | ------ | ------ | | fontSize | Integer | Size of font measured in percentage of the screen width. | 3 | | fontColor | String | Color of font. | "#fff" | | backgroundColor | String | Color of blurb background or "transparent" for no background color. | "#333" | | width | Integer | Width of the image measured as a percentage of the screen width. | None | | inAnimationName | String | Animate.css class name for in animation. | "slideInUp" | | x | Integer | Horizontal point of the blurb measured as a percentage of the screen width. | 10 | | y | Integer | Vertical point of the blurb measured as a percentage of the screen height. | 10 |

Example

//by config
{
    id: "b1b1",
    type: "blurb",
    text: "A blurb",
    options: {
         x: 37,
         y: 20
    }
}
//by code
let b1b1 = impresi.createBlurb(
    "A blurb",
    {
      x: 10,
      y: 15
    }
  );

createImage

createImage(src, [options]) : Impresi

src

Type: String

The value of the src attribute of the image. Required.

options

Type: Object

An optional plain object with sets of key/value pairs that configure the image. All properties are optional.

| Property | Type | Description | Default | | ------ | ------ | ------ | ------ | | width | Integer | Width of the image measured as a percentage of the screen width. | None | | inAnimationName | String | Animate.css class name for in animation. | "slideInUp" | | x | Integer | Horizontal point of the heading measured as a percentage of the screen width. | 10 | | y | Integer | Vertical point of the heading measured as a percentage of the screen height. | 10 |

Example

//by config
{
  id: "b1i1",
  type: "image",
  src: "https://uploads.codesandbox.io/uploads/user/fb7343ed-58b4-4220-b73d-9c46dd5128c4/rtO9-christchurchartgallery_002_1024x1024.jpg",
  options: {
    width: 50,
    x: 26,
    y: 30
  }
}
//by code
let b1 = impresi.createImage({
    src: "https://uploads.codesandbox.io/uploads/user/fb7343ed-58b4-4220-b73d-9c46dd5128c4/rtO9-christchurchartgallery_002_1024x1024.jpg",
    options: {
      width: 50,
      x: 26,
      y: 30
    }
  });

addActions

addActions(actions) : Impresi

actions

Type: Object

An plain object the following properties:

in

Type: Array

A collection of items to be displayed on the board.

out

Type: Array

A collection of items to be removed from the board.

Example

impresi
    .addActions({ in: [b1, b1h1, b1b1] })
    .addActions({ out: [b1, b1h1, b1b1], in: [b2, b2h1, b2b1] });