All Products
Search
Document Center

Manage big screens

Last Updated: Jul 29, 2020

Except for dashboards, Data Management Service (DMS) provides another type of visualization applications: big screens. Providing customizable layouts and styles, big screens allow you to combine visualization components with built-in auxiliary graphics and create various visual styles.
Dashboards and big screens are designed for different purposes. Dashboards are used to quickly generate visual reports. Big screens are widely used for data viewing and presentation either in a static or scrolling way. Therefore, it usually takes more time to create a big screen than to create a dashboard. This topic describes how to stylize a big screen.

Features

Big screen editor

1

No. Name
Toolbar
Canvas
Layer panel
Parameter settings panel
Zoom tool

Toolbar

The toolbar provides the following four groups of icons.
3

No. Name Description
Chart You can click this icon to add charts to a big screen.
Auxiliary graphics You can click this icon to add four types of auxiliary graphics: rectangle, label, video, and timer.
Operation icons Operation icons include the Copy, Paste, Undo, Redo, and Delete icons. They are used to manage layers on the canvas.
Preview You can click this icon to open a new webpage to view the display effect of the big screen that you are creating.

Add a chart

  1. Click the Chart icon in the toolbar. In the Add Chart dialog box that appears, view available charts in the current project.
  2. Select one or more charts and click Next Step.
  3. Select a data refresh mode and click Save.

    You can set the data refresh mode to Manual refresh or Scheduled refresh.

    • Manual refresh: After you select this mode for a chart, you need to reload the big screen each time you want to update data.
    • Scheduled refresh: The system automatically polls the data source and updates data in the chart at an interval that you set in the unit of seconds.
  4. After you click Save, the chart appears on the canvas.

    You can drag and drop a chart to adjust its position. You can also drag the chart in the lower-right corner to resize the chart.

Add an auxiliary graphic

4

  1. Click the Auxiliary graphics icon in the toolbar. A list appears, including the following four types of auxiliary graphics:

    • Rectangle: generally used to decorate the background of charts. You can set the background color, background picture, and borders for a rectangle.
    • Label: generally used to display texts. You can set the text font, margin, background color, and borders for a label.
    • Video: used to play online videos.
    • Timer: used as a ticking clock.
  2. Select a type from the list. A corresponding auxiliary graphic appears on the canvas.

Operation icons

Operation icon Description Shortcut for macOS
Shortcut for Windows
Copy You can click this icon to copy a layer. Cmd + C Ctrl + C
Paste
You can click this icon to paste a layer. Cmd + V Ctrl + V
Undo When you edit the canvas, you can click the Undo icon to roll back an operation or click the Redo icon to restore an operation. N/A N/A
Redo
Delete You can click this icon to delete a layer. Delete Backspace or Delete

Note:

  • You can copy, paste, and delete multiple layers at a time.
  • To select multiple layers, press and hold the Cmd or Alt key on the keyboard and click the layers.

Preview and share

After you create a big screen, you can click the Preview icon in the toolbar to preview the big screen on a new webpage.

Canvas

Each chart or auxiliary graphic added to the canvas can be viewed as a layer.

  • You can drag and drop a layer to adjust its position. You can also select a layer and use the arrow keys on the keyboard to fine-tune the position of the layer.

    When you are dragging a layer, a prompt appears to the right of the layer showing the current position of the layer in the form of coordinates. Guides are also displayed on the canvas to help you align the layer.

    5

  • When you edit a part of the canvas, you can adjust the slider of the zoom tool to zoom in or zoom out in the canvas.
    6

  • You can press and hold the Cmd or Alt key on the keyboard and click multiple layers to select them, and then copy, delete, or align the layers at a time.
    7

  • To deselect one or more selected layers, click the blank area on the canvas.

  • To edit a chart, click the Edit icon in the upper-right corner of the chart.

Layer panel

In the Layer panel, you can perform the following operations:

  • Select a layer: You can select a layer on the canvas by selecting the corresponding item in the layer list.
  • Select multiple layers: You can select multiple layers on the canvas by pressing and holding the Cmd or Alt key on the keyboard and selecting the corresponding items in the layer list.
  • Adjust the position of a layer on the Z axis: After you select a layer, you can click the icons above the layer list to adjust the position of the layer on the Z axis. The icons include the Move up, Move down, Top, and Bottom icons.

Parameter settings panel

  • By default, the parameter settings panel allows you to configure background settings, including the following items.

    • Screen size: You can adjust the size of the canvas based on the display terminal of the big screen.
    • Background color: You can set a background color for the big screen.
    • Zoom Mode:
      • Proportional scaling width: The width of the canvas will be the same as the width of the display terminal. The height of the canvas will be proportionally scaled.
      • Proportional zoom height: The height of the canvas will be the same as the height of the display terminal. The width of the canvas will be proportionally scaled.
      • Full screen: Both the height and width of the canvas will be the same as the height and width of the display terminal. In this mode, the canvas may be deformed on the display terminal.
      • Actual Size.
    • Background picture: You can upload a background picture for the big screen.
      8
  • After you select a layer on the canvas, the parameter settings panel allows you to configure layer settings, including the following items:

    • Size
    • Position
    • Background color
    • Border
    • Data refresh mode
    • Configuration specific to each layer type

    9

  • After you select multiple layers on the canvas, the parameter settings panel allows you to configure the layer alignment. 7

Procedure

Create a big screen

  1. Log on to the DMS console.

  2. In the top navigation bar, choose Data Factory > Data Visualization.

    For more information about how to access the data visualization feature, see Access the data visualization feature.

  3. In the left-side navigation pane, click Visual.

  4. On the Visual Management page, click New big screen in the Big Screen section.

  5. In the dialog box that appears, set Name and Description.

  6. Click Save. The new big screen you just created is displayed as a card in the Big Screen section.

Edit a big screen

  1. Log on to the DMS console.
  2. In the top navigation bar, choose Data Factory > Data Visualization.

    For more information about how to access the data visualization feature, see Access the data visualization feature.

  3. In the left-side navigation pane, click Visual.

  4. On the Visual Management page, click the target big screen card. You can edit the big screen on the page that appears.

    You can also click the Edit icon in the upper-right corner of the big screen card.

  5. For more information about how to configure a big screen, see Features.

Delete a big screen

  1. Log on to the DMS console.
  2. In the top navigation bar, choose Data Factory > Data Visualization.

    For more information about how to access the data visualization feature, see Access the data visualization feature.

  3. In the left-side navigation pane, click Visual.

  4. On the Visual Management page, click the Delete icon in the upper-right corner of the target big screen card.
  5. In the message that appears, click OK. The big screen will be immediately deleted.