[]
v7.1
(Showing Draft Content)

Interaction With Dashboards

You can interact with the 3D scene component in a dashboard using an image component. Below are the scenarios you can create using an image component in the dashboard to interact with the 3D scenes.

  • Control the Auto Loop status of the 3D scene through the command of the image component

  • Bind the JavaScript command of the 3D scene to the image component

Examples

  • Control the Auto Loop status of the 3D scene through the command of the image component


    In this example, we will add an image component and a Command option to control the autoloop status of the 3D scene.

  1. From the Data Visualization tab, drag and drop the 3D Scene component onto the designer area.

    drag an drop 3d scens


  2. Click the Configure 3D Scene button on the 3D Scene component.

    click here


  3. 3D Scene Setting popup will appear on your screen. Select a 3D scene and click the OK button.

    select scene


  4. Drag and drop an Image component.

    drag and drop Iamge component


  5. On the Inspector panel, under the Interaction section, select the option Command from the Click Action dropdown list.

    select command option


  6. Click the plus icon plus icon to add the command.

    click plus icon


  7. Command Setting dialog box is displayed with the following options. Select the 3D Scene Auto Loop option from the list.

    command setting dialog box


  8. The following options are displayed. Select the 3D Scene and the Auto Loop Action options. In this example, we have selected the Pause/Resume AutoLoop option.

    select Auto Loo option


  9. Preview the dashboard. Click the Image to start or pause the AutoLoop.


    Preview1

  • Bind the JavaScript command of the 3D scene to the image component


    In this example, we will use the JavaScript code to customize the interaction behavior. We will click on the image in the dashboard, and it will enter the production line of the 3D scene of a factory.

    Note: For this scenario, you need to add JavaScript to the 3D Scene. Refer to Create 3D Scene for more details.

  1. From the Data Visualization tab, drag and drop the 3D Scene component onto the designer area.

    drag an drop 3d scens


  2. Click the Configure 3D Scene button on the 3D Scene component.

    click here


  3. 3D Scene Setting popup will appear on your screen. Select a 3D scene with the JavaScript code and click the OK button.

    select scene


  4. Drag and drop an Image component.

    . drag and drop image 2


  5. On the Inspector panel, under the Interaction section, select the option Command from the Click Action dropdown list.

    select command option


  6. Click the plus icon plus icon to add the command.

    click plus icon


  7. Command Setting dialog box is displayed with the following options. Select the 3D Scene Dynamic Script option from the list.

    select 3d scene dynamic script


  8. The following options are displayed. Select the 3D Scene and the Dynamic Script options.

    select script


  9. Preview the dashboard. Click the Image to enter the Production Line of the factory.

    preview 2