Create Screen

Xenial Portal Digital Menu Board Screens

To create DMB screen content:

  1. From the upper-right of the Screens screen, select Create Screen to open the content builder.

  2. From the pane on the right, define the following:

    Field

    Description

    Screen Size

    From the dropdown, select the desired resolution for the screen.

    Screen Name

    Type a name for the screen.

    Description

    Type a description of the screen.

  3. Use the content builder to design the screen content:

    Anmerkung

    The screen content is automatically saved after each user action.

  4. In the upper-right of the content builder, select Preview Screen to see a preview of the screen in a browser window.

  5. From the upper-left of the content builder, select the "hamburger" icon.

  6. From the "hamburger" icon dropdown, select Exit Screen to exit the content builder.

    Once a screen is created, use the Display Layouts editor to assign the screen to one or more display layouts.

Add Image

To add an image to a screen:

  1. From the upper-left of the content builder, select Image.

  2. From the Open window, select the image.

    • Valid file types: PNG, JPEG, GIF, SVG.

    • Maximum file size: 30MB.

  3. From the lower-right of the Open window, select Open. The image is added to the workspace and to the Layers pane on the left.

To configure the image properties:

  1. From the screen on the content builder, select the image.

  2. From the pane on the right, define the following:

    Field

    Description

    Name

    Type a name for the image.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the image.

    When the position of the image is manually adjusted, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the image.

    When the width and height of the image is manually adjusted, the W and H field values are updated automatically.

    Scale Proportionally

    Enable this option to automatically update the X, Y, W, and H values proportionally when one value is changed.

    Alt Text

    Type the alternate text to display on the screen in the event the image is not available.

    Description

    Type a description of the image.

Add Video

To add a video to a screen:

  1. From the upper-left of the content builder, select Video.

  2. From the Open window, select the video.

    • Valid file types: MP4, MOV, WEBM.

    • Maximum file size: 100MB.

  3. From the lower-right of the Open window, select Open. The video is added to the workspace and to the Layers pane on the left.

To configure the video properties:

  1. From the screen on the content builder, select the video.

  2. From the pane on the right, define the following:

    Field

    Description

    Name

    Type a name for the video.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the video.

    When the position of the video is manually adjusted, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the video.

    When the width and height of the video is manually adjusted, the W and H field values are updated automatically.

    Infinite Play

    Enable the toggle to play the video on an infinite loop.

    Description

    Type a description of the video.

Add Component

The following describes how to add components to a Xenial DMB screen:

Add Price Component

To add a product price component to a screen:

  1. From the upper-left of the content builder, select Component.

  2. From the Component dropdown, select Price Component.

To configure the component properties:

  1. From the content builder, select the component.

  2. From the pane on the right, define the following:

    Field

    Description

    Name

    Type a name for the component.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    Product

    To assign a product to the component:

    1. Select Add Product.

    2. From the Product List window, select the product.

    3. From the lower-right of the Product List window, select Done.

    The name and ID of the selected product are displayed in the Product field.

    Text

    To configure the component text:

    1. From the font dropdown, select the desired font.

    2. In the provided field, type the desired font size.

    3. From the formatting dropdown, select the desired option for formatting the text.

    4. Select the desired font color and alignment.

Anmerkung

For additional component properties, see Screen Configuration.

Add Carousel

To add a carousel:

  1. From the upper-left of the content builder, select Component.

  2. From the Component dropdown, select Carousel.

  3. From the Open window, select a component to add to the carousel.

  4. Select Open.

To configure the carousel properties:

  1. From the pane on the left, select the carousel.

  2. From the pane on the right, define the following:

    Field

    Description

    Name

    Type a name for the carousel. The default name is "Carousel".

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Width and height of the carousel. The values are automatically set to the width and height of the largest component included in the carousel. The values are non-editable.

    Transition Effect

    From the dropdown, select the desired effect to use when transitioning from one component to another.

    Carousel Items

    Select and drag the control to the left of the listed items to sort them in the desired sequence.

    Auto Dur(s)

    For each listed item: Type the number of seconds to display the item before transitioning to the next item.

To add additional components to a carousel:

  1. From the pane on the left, select the carousel.

  2. From the upper-left of the content builder, select the component.

  3. Repeat these steps to add another component.

Layers

The following describes how to manage content layers for a Xenial DMB screen:

Actions Menu

From the Layers pane on the left of the Xenial DMB content builder, right-click an object to open the actions menu. The following describes the available actions:

Action

Description

Copy

Copy the properties and components within the current screen to create a new screen.

Paste

Paste the contents of the clipboard.

Rename Layer

Rename the current layer.

Hide

Hide the current layer from view.

Lock

Make the contents and properties of the layer non-editable.

Bring Forward

Bring the selected layer forward if it is behind another layer.

Bring To Front

Bring the selected layer forward to the foreground of the screen.

Send Backward

Move the selected layer backward to position it behind another layer.

Send to Back

Move the selected layer backward and make it the bottommost layer.

Create Group

Create a group that contains multiple components and define the coordinates for the group.

Create Carousel

Create a collection of components that are displayed consecutively in a loop at a specified duration.

Create Group

To create a group of related DMB components on a screen layer:

  1. From the pane on the left of the content builder, locate the Layers field.

  2. From the Layers field, right-click a component to include in the group.

  3. From the popup menu, select Create Group.

  4. From the pane on the right, define the following:

    Field

    Description

    Name

    Type a name for the group.

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component is manually adjusted, the W and H field values are updated automatically.

    Description

    Type a description of the group.

To add additional components to a group:

  1. From the pane on the left, select the group.

  2. From the upper-left of the content builder, select the component.

  3. Repeat these steps to add another component.

Ungroup Components

To ungroup a collection of components:

  1. From the pane on the left of the content builder, locate the Layers field.

  2. From the Layers field, right-click the Group folder.

  3. From the popup menu, select Ungroup.

Create Carousel

A carousel is a collection of components that are displayed consecutively on an infinite loop at a specified duration. A carousel can include any combination of images, videos, and/or price components.

For example, a carousel rotation might include two (2) images of the current promotional items (where each image is displayed for five (5) seconds), followed by an eight (8) second video.

To create a carousel from a screen layer:

  1. From the pane on the left of the content builder, locate the Layers field.

  2. From the Layers field, right-click the component.

  3. From the popup menu, select Create Carousel.

  4. From the pane on the right, define the following:

    Field

    Description

    Name

    Type a name for the carousel. The default name is "Carousel".

    • Select the lock icon to make the component properties non-editable.

    • Toggle the eye icon to hide/show the component.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component is manually adjusted, the W and H field values are updated automatically.

    Transition Effect

    From the dropdown, select the desired effect to use when transitioning from one component to another.

    Auto Dur(s)

    For each listed item: Type the number of seconds to display the item before transitioning to the next item.

To add additional components to a carousel:

  1. From the pane on the left, select the carousel.

  2. From the upper-left of the content builder, select the component.

  3. Repeat these steps to add another component.