Skip to content

Display Widget

The display widget is used to show the contents of a display on a slide slide or another display (think of this like a picture-in-picture kind of thing). To attempt to clear up any confusion, there are two types of displays: a display which is basically an in-memory target for for slides and widgets, and a display widget (this help topic) which enables the graphical display of the previously mentioned type of display within its boundaries (it is the actual visual output of the logical display).

Here's an example:

#config_version=5
displays:
  window:
    height: 600
    width: 800
  my_frame:
    width: 400
    height: 300
    default: true

slides:
  base_slide:
    widgets:
      - type: display
        source_display: my_frame
        width: 400
        height: 300
        x: 300
        y: 200
      - type: text
        text: this is the base slide
        x: 600
        y: 400
  frame_slide:
    widgets:
      - type: text
        text: this is a slide in the frame
    background_color: red
slide_player:
  mc_ready.1:
    base_slide:
      target: window
  mc_ready.2: frame_slide

And the result:

image

Settings

type: display
source_display:
width:
height:
effects:

Note

Display widgets also have "common" widget settings for position, opacity, animations, color, style, etc. Those are not listed here, but are instead covered in common widget settings page.

Also remember that all widget settings can be controlled via widget styles, rather than you having to set every setting on every widget.

The following display widget settings may be animated: x: y:, and pos:.

source_display:

The name of the logical display to show on the screen within the widget boundaries. This name is available as a target: name is other areas of your configs when you want to target a slide the specified display.

More information on display targets is here.

width:

The width of the frame in pixels.

height:

The height of the frame in pixels.

effects:

A list of effects to apply to the display contents. These effects perform image processing to the source image and can be used to get an old school "DMD look" or "color DMD look" to your display as well as other special effects. For more information on effects, please review the effects documentation.

An example of a display widget with a dmd effect:

#config_version=5
#! displays:
#!   window:
#!     height: 200
#!     width: 600
#!   dmd:
#!     width: 400
#!     height: 300
#!     default: true
slides:
  base_slide:
    - type: display
      source_display: dmd
      width: 640
      height: 160
      effects:
        - type: dmd
          dot_color: ff5500
#! slide_player:
#!   mc_ready:
#!     base_slide:
#!       target: window

Something missing or wrong? You can fix it!

This website is edited by people like you! Is something wrong or missing? Is something out of date, or can you explain it better?

Please help us! You can fix it yourself and be an official "open source" contributor!

It's easy! See our Beginner's guide to editing the docs.

Page navigation via the keyboard: < >

You can navigate this site via the keyboard. There are two modes:

General navigation, when search is not focused:

  • F , S , / : open search dialog
  • P , , : go to previous page
  • N , . : go to next page

While using the search function:

  • Down , Up : select next / previous result
  • Esc , Tab : close search
  • Enter : go to highlighted page in the results