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

Table of contents

• Mozaïk image extension
  • Setup
  • Widget: image.Image
    • parameters
    • usage
  • Widget: image.Svg
    • parameters
    • usage
  • Changelog
    • 2.0.0-dev
    • 0.4.0
    • 0.2.2
    • 0.2.1
    • 0.2.0
    • 0.1.0
  • License

Setup

• Install extension: npm i -S mozaik-ext-image
• Register widget:

  // 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

• Register the widget

• 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

• Register the widget

• 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

Changelog

2.0.0-dev

• Added for Mozaik 2.x
• Added new widget: image.Svg
• Changed refreshInterval unit from seconds to milliseconds
• Changed title default value to no header

0.4.0

• Added support for background styles

0.2.2

• Updated package links

0.2.1

• Improved documentation

0.2.0

• Added double buffering when refreshing image

0.1.0

• First public release

License

Distributed under the MIT license