2.5D

Example

The following figure shows a 2.5D component displaying a device alert.

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

3. Above the component list on the left side of the canvas, enter 2.5D in the search box to find the component. Then, drag the component to the canvas.

   For more information about adding components, see Add a component.

   In the component panel's search box on the left, enter 2.5D. From the Basic Components category, drag the 2.5D component onto the canvas. After you add the component, the Style panel on the right displays its initial properties: coordinates X=12 and Y=0, size W=800 and H=600, and a default name such as 2.5D-zfhe. By default, Component Visibility is selected, opacity is 100%, and you can click Edit Component at the bottom to open the component editor.

Step 2: Configure the component style

1. In the Style panel on the right side of the web application editor, adjust the component's size and position.

   For more information, see Configure styles.

2. In the Style panel on the right side of the web application editor, click Edit Component.

   You can also double-click the 2.5D component on the canvas.

3. In the component editor, use the Style panel on the right to configure the display style of the 2.5D component.

   Parameter	Description
   Background	Sets the component's background color.
   Grid	Shows or hides the grid and sets its density.
   Shadow Settings	Shows or hides model shadows and sets their direction and opacity.
   Model Event	Shows or hides model events.
   Global Model Label	Shows or hides all model labels and lets you associate them with a status. Note Select the Associate Status checkbox to have the label style reflect the model's status.

Step 3: Configure models in the 2.5D component

This section uses the 2.5D Pipe and cooling tower models as examples.

• 2.5D Pipe model

  1. In the component editor, drag a 2.5D Pipe model from the Component tab into the 2.5D component. Add anchor points to draw the pipe.

  2. Optional: Hover over an anchor point and press Backspace or Delete to remove it.

  3. After you finish drawing, click Finish Editing in the Style panel on the right or press Esc.

     To edit the pipe model again, click Start Editing in the Style panel or double-click the pipe model on the canvas.

  4. In the Style panel on the right, set the 2.5D Pipe model's color, width, Flow Speed, and Flow Direction, and adjust its final position.

• Cooling tower model

  1. In the component editor, drag the cooling tower model from the Assets tab on the left into the 2.5D component.

     1. Official 2.5D models: From the Official section, drag a model into the 2.5D component.

     2. Local 2.5D models: Click Upload Asset. In the Asset Library dialog box, click Upload Image to upload a local 2.5D model to the My library. Then, drag the model from the Personal section into the 2.5D component.

        Important

        • You can upload image files in .png format.

        • The My library has a maximum capacity of 5 GB.

        • You cannot delete 2.5D models from the Official library. For models in the My library, click the delete icon to remove them.

  2. In the Style panel on the right, set the cooling tower model's size, Label Name, and Associate Status, and adjust its final position.

     Note

     Select the Associate Status checkbox to have the label style reflect the model's status.

Step 4: Configure the model data source

1. Click a model, such as the cooling tower, in the 2.5D component. In the Style panel on the right, click Configure Data Source next to Status.

   Important

   The 2.5D Pipe model does not support data source configuration.

2. In the Data Source Settings panel, select a data source type and click OK.

   Available data source types include Device, API, Static Data, and Application Push.

   The data source must return one of the following strings:

   String	Description	Status indicator
   "NORMAL"	The default status for a device without a configured data source.
   "RUN"	The device is running.
   "IDLE"	The device is idle.
   "ALERT"	The device has an active alert.
   "DOWN"	The device is down due to a critical alert.

3. Click Save in the upper-right corner of the page.

4. Click Return to Page in the upper-left corner of the component editor. In the web application editor, click Preview in the upper-right corner to check the component's data and visual effects.