Overview
This document applies to users who have installed the FineVis Data Visualization plugin to learn plugin functions.
Version
| Report Server Version | Plugin Version | Functional Change |
|---|---|---|
11.0.16 | V2.0.0 | Added the Loading Effect function to the FVS template setting page. You can customize the page loading background color. |
11.0.22 | V2.7.1 | Allowed you to set the template loading effect and component loading effect respectively. Added styles such as image and video to the loading effect. |
11.0.22 | V2.8.1 | Made the image source of the loading effect support more settings, including saturation, brightness, and contrast. |
Application Scenario
The screen becomes white during the FVS template loading or switching due to performance or network issues. In this case, you want to customize the loading effect.
You want to set the opening animation of the template loading.
Since the component loading takes too much time, you want to customize the component loading effect.
Function Description
You can set the template loading and component loading effects respectively under Template > FVS Template Setting > Loading Effect.
You can set multiple styles of the loading effect, including background color, image, and video.
Note: You need to update the FVS resource to obtain new resources.
Function Description
Template Loading
The template loading effect applies to the whole template, which allows you to set the background color, loading effect, and loading time.
The following table describes these settings.
| Settings | Description |
|---|---|
Background Color | You can customize the loading page background color and set the opacity. By default, the color is white, and the opacity is 0 (transparent). |
Loading Effect | It is deselected by default. After you select Enable Template Loading Effect, you can set the image/video loading effect. 1. Image You can select Resource Center, Custom Upload, and Online Image to set the loading effect. After you select the image, you can set the image hue, opacity, etc.. Note:2. Video You can select Resource Center, Custom Upload, and Online Video to set the loading effect. After you select the video, you can set the filling method and initial volume. However, after you set the volume, the video is played in mute mode by default. You need to enable the sound manually. |
Loading Time | After selecting Enable Template Loading Effect, you can set the loading effect display time (Auto/Custom). 1. Auto It depends on the actual page loading time. When the page loading is finished, the loading effect disappears. 2. Custom If the custom time is longer than the actual page loading time: After the page loading is finished, hover your cursor over the page, a close button is displayed, and you can click to exit the loading effect. Besides, you can press the Esc key to exit the loading effect. If the custom time is shorter than the actual page loading time: The loading effect will be played in a loop until the loading ends, which depends on the actual loading time. |
Component Loading
The component loading effect supports differentiating loading effects set by 2D and 3D components.
For details, see the following table.
| Component Type | Loading Effect |
|---|---|
2D component | Currently, the 2D component only supports the table component. Enable Component Loading Effect is selected by default. You can use 4 spin effects (that is, 4 spin icons). You can set the hue, opacity, etc.. By default, the loading effect will be displayed if the loading time exceeds 3 seconds. |
3D component | The 3D component includes 3D city scenes, custom 3D scenes, Unity components, and scene maps. Enable Component Loading Effect is selected by default. You can select Simple Loading or Animation Loading. Simple Loading: The setting content is consistent with that of the 2D component. By default, the loading effect will be displayed if the loading time exceeds 3 seconds. Animation Loading: It supports the display of progress bar animation, which is the actual loading progress. The loading effect appears when the loading starts.
|
Note:For example, you can modify the time to 1 second, the operation steps are shown as follows:
1. Go to the db.script file in the path %FR_HOME%\webroot\WEB-INF\embed\finedb.
2. Press the Ctrl+F keys to search FINE_CONF_ENTITY, and add the statement: INSERT INTO FINE_CONF_ENTITY VALUES('FVSConfig.widgetLoadingDelayTime','1000').
3. Save the file and restart the project.
Example
Creating a Template
You can download the sample template: FVS 3D City Component Example.fvs.
1. Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer.
2. Click My Resource, click Drag or click to open the local template and save it to My Resource to upload the sample template, and click Create to create a template.
Setting the Loading Effect
1. Click Template > FVS Template Setting to go to the setting page. Select Loading Effect.
2. Set the template loading effect:
Set the background color to be consistent with that of the page (#000000FF).
Select Enable Template Loading Effect, choose Image > Resource Center, search the loading animation, select jiazaidonghua2, and click Finish.
3. Set the component loading effect:
For the 2D component, keep the default settings. For the 3D component, select Animation Loading. Finally, click OK to save the settings and close the settings box.
Effect Display
Save the template and click Preview. The following figure shows the preview effect.
Note:
Previous：FVS Template Performance Mode
