Building a Visual Board Using Visualization Studio

About this task

With SOTI Connect's Visualization Studio, you can add and configure Visual Board widgets in a drag-and-drop authoring environment. The studio features a large canvas where you can position and edit your widget selections.

Once you have created a Visual Board (as described in Copying a Visual Board and Creating or Importing a Visual Board) you can open it in the Visualization Studio for edit (see Editing or Deleting a Visual Board).

You can add the following device widget types to a Visual Board:

  • Actions (such as Download Firmware or Print Test Label)
  • Properties (such as Serial Number or Active IP Address)
  • Images (such as annotated device control panel photos)
  • Charts (such as Line or Bar graphs)
  • Gauges (such as Circle or Bar gauges)

Placing Widgets on the Visualization Studio Canvas

Procedure

  1. On the Edit Board Screen, click one of the widget selectors from the left-hand menu (Actions, Properties, Images, Charts, or Gauges).
  2. Browse through the list of widget selections. You can view the full name of the widget by hovering over it with your mouse.
  3. Drag and drop the widget onto the canvas. A red box around the widget as you are placing it indicates you cannot drop the widget in that location because it would obscure an interactive widget that you have already placed.
    Tip: You can place widgets on top of Image widgets to create interactive image carousels.
  4. You can manipulate the widgets on the canvas in the following ways:
    • Change the dimensions of larger widgets such as images, charts, and gauges by clicking the widget on the canvas and entering new X and Y coordinates or Width and Height values. Alternately, click the widget selection again and adjust with your mouse using the handles:

    • Delete or edit a widget by clicking the widget in the canvas, then clicking the Edit or Delete buttons. You can also multiselect widgets to move them in batches:

  5. Click Update to save changes to your Visual Board. If the Update button is greyed out, check the orientation of widgets on the canvas to ensure there is no invalid overlapping of widgets.

Working with Device Actions Widgets

Procedure

  1. Click the Actions widget selector from the left-hand menu:

    Actions widget selector

  2. Browse the list of available actions for the device type you selected when you created the Visual Board. For more general information, see Using Device Actions.
  3. Drag and drop your desired action onto the canvas.
  4. Click Update.

Results

If your Visual Board is set as visible in Device Information's Visualization tab, actions you placed in the board are interactive, like the Turn On and Turn Off actions for this lightbulb device:

Visualization tab example with actions highlighted

Working with Device Properties Widgets

Procedure

  1. Click the Properties widget selector from the left-hand menu:

    Properties widget selector

  2. Browse the list of available properties for the device type you selected when you created the Visual Board.
  3. Drag and drop your desired property onto the canvas.
  4. Click Update.

Results

If your Visual Board is set as visible in Device Information's Visualization tab, properties you placed in the board will display device states, like the On/Off and Hue properties for this lightbulb device:

Visualization tab with properties highlighted

Working with Images Widgets

Procedure

  1. Click the Images widget selector from the left-hand menu:

    Images widget selector

  2. Browse through the collection of images for the device type you selected when you created the Visual Board, or upload custom images by clicking Upload Device Image Upload Device Image. SOTI suggests uploading high-resolution images (720p and greater) to support zooming and scaling.
  3. Drag and drop an image onto the canvas. If you have multiple images (for example, different views of the same printer), drag a second image on top of the first one to establish an image carousel.
  4. Click Update.

Results

If your Visual Board is set as visible in Device Information's Visualization tab, images you placed on the board appear and the viewer can interact with them, as shown in this example:

Working with Charts Widgets

Procedure

  1. Click the Charts widget selector from the left-hand menu:

    Charts widget selector

  2. Three charts are available for your Visual Board: Line, Bar, and Donut. Drag and drop a chart type onto the canvas, then configure the charts in the Chart Widget Settings screen to display the desired information:
    OptionDescription
    Line Chart
    • Property: Select the device property that you want to measure in the line graph. For example, for a printer you might choose Inches to monitor how many label inches a printer outputs over a time period.
    • Number of Buckets: Set the total number of time periods you want displayed on your graph's X axis. For example, if you select Months as the Interval for your graph, and 5 as the Number of Buckets, five months is displayed on the X axis.
    • Interval: Select the time interval you want to capture in your graph. For example, Hours, Weeks, or Months.
    Bar Chart
    • Property: Select the device property that you want to measure in the bar graph. For example, for a printer you might choose Cuts to monitor how many label cuts a printer performs over a time period.
    • Number of Buckets: Set the total number of time periods you want displayed on your graph's X axis. For example, if you select Months as the Interval for your graph, and 5 as the Number of Buckets, five months is displayed on the X axis.
    • Interval: Select the time interval you want to capture in your graph. For example, Hours, Weeks, or Months.
    • Value Type: Select either the Average Value or the Latest Value to appear in your bar graph.
    Donut Chart
    • Property: Select the device property that you want to measure in the donut graph. For example, for a printer you might choose Cuts to monitor how many label cuts a printer performs over a time period.
    • Number of Buckets: Set the total number of time periods you want displayed on your graph's X axis. For example, if you select Months as the Interval for your graph, and 5 as the Number of Buckets, five months is displayed on the X axis.
    • Interval: Select the time interval you want to capture in your graph. For example, Hours, Weeks, or Months.
    • Number of Segments: Set the total number of segments displayed in your donut chart.
  3. In the Chart Widget Settings screen, click Save to add your chart to the Visual Board.

Results

If your Visual Board is set as visible in Device Information's Visualization tab, charts you placed in the board appear with updated data from the device.

Working with Gauges Widgets

Procedure

  1. Click the Gauges widget selector from the left-hand menu:

    Gauges widget selector

  2. Two gauges are available for your Visual Board: Circular, and Bar. Drag and drop a gauge type onto the canvas, then configure the gauges in the Gauge Widget Settings screen to display the desired information:
    OptionDescription
    Circular Gauge
    • Property: Select the device property that you want to measure in the circle gauge. For example, for a printer you might choose Inches to monitor how many label inches a printer outputs over a time period.
    • Minimum Value: Set the minimum value you want displayed in your gauge. This value appears on the far left side of the circle image.
    • Maximum Value: Set the maximum value you want displayed in your gauge. This value appears on the far right side of the circle image.
    • Gauge Skin: Choose the visual style of your gauge. Half Circle Gauge shows the measurement as a half-circle filling up, while Needle Gauge uses a needle indicator to show the measurement, like a speedometer or pressure gauge.
    Bar Gauge
    • Property: Select the device property that you want to measure in the bar gauge. For example, for a printer you might choose Cuts to monitor how many label cuts a printer performs over a time period.
    • Minimum Value: Set the minimum value you want displayed in your gauge. This value appears on the far left side of the bar image.
    • Maximum Value: Set the maximum value you want displayed in your gauge. This value appears on the far right side of the bar image.
  3. In the Chart Widget Settings screen, click Save to add your chart to the Visual Board.

Results

If your Visual Board is set as visible in Device Information's Visualization tab, gauges you placed in the board appear with updated data from the device.