Mozaik-ext-image NPM

Mozaïk image extension

Show image in a widget. Supports also refreshing the image in timely bases, making it handy for webcams, daily comics or kittens 😊

📢 NOTE See mozaik-2 branch for Mozaik 2 compatible extension

preview

Table of contents

Mozaïk image extension

Setup

Install extension: npm i -S mozaik-ext-image

// register_extensions.js
import image from 'mozaik-ext-image'
Registry.addExtensions({ image, ... })

Add widget(s) in dashboard config.yml (see Widget X specific documentation)

Widget: image.Image

Show the image in widget.

parameters

key	required	description
`url`	yes	URL to an image.
`title`	no	Title to show in widget. Defaults to no header
`refreshInterval`	no	Image refreshing interval in milliseconds (refreshing is done automatically by adding/incrementing counter attribute). Defaults to no refresh. Example: 3000
`backgroundSize`	no	Image size (set as background image). Defaults to 'cover'
`backgroundColor`	no	Background color, handy with transparent images. Defaults to parent color
`backgroundPosition`	no	Background position, defaults to 'center center'

usage

Add widget in dashboard configuration:

widgets:
  -
    extension:          image
    widget:             Image
    url:                https://picsum.photos/200/300/?random
    refreshInterval:    10000
    backgroundSize:     cover
    backgroundPosition: center -7vh
    title:              Random image
    columns:            1
    rows:               1
    x:                  0
    y:                  0

Widget: image.Svg

Show (and optionally animate the path drawing) the SVG image in a widget.

parameters

key	required	description
`url`	depends	URL to an image. Either this or content needs to be defined. NOTE: Because of the browser CORS rules, an extension client is needed to download the file in temp folder. This is done automatically once registered
`content`	depends	SVG image contents. Either this or url needs to be defined. Remember to use > to note multiline text
`title`	no	Title to show in widget. Defaults to no header
`animation`	no	Animation style if wanted to be used. Options: delayed, sync, oneByOne, script, scenario or scenario-sync. Defaults to empty which mean no animation. See vivus documentation for more info
`duration`	no	Animation duration in frames. Defaults to 200

usage

Add widget in dashboard configuration:

widgets:
  -
    extension:          image
    widget:             Svg
    content: >
      <svg>
        <path ...>
        <path data-ignore="true" ...>
      </svg>
    title:              Random image
    animation:          oneByOne
    speed:              100
    columns:            1
    rows:               1
    x:                  0
    y:                  0