Overview
Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.
Note: Mobile devices are not supported.
Version
Report Server Version
Plugin Version
V11.0.2
V1.2.0
Scenario Introduction
This article mainly introduces how to use custom model components to import 3D models and creating park scenes in an FVS report.
Effects
1. Click the model or button to zoom in and out.
2. Click the model, and the monitoring video pops up.
-
Example
Creating a Component
Create an FVS report
Add a Custom Model component, and click Edit Component to enter the editing page. As is shown below:
Creating a Scene
When entering the editing page of a custom model for the first time, you should create a scene. The default selection is Sci-fi Grid. In this example, just click Generate Scene.
After creating the scene, enter the component editing page, select Scene, and set the ground background to Hexagon. As is shown below:
Setting up the Model
1. Importing the Model
In the FVS editing mode, custom model components only support the GLB models. You need to convert models in other formats to the GLB models.
There are two sample models: warehouse.glb and workshop.glb. Click to download the file:
a. Click Model > Add Model > Custom Model in the right configuration panel, click Upload New Model, and select the GLB file to upload the custom model.
b. You can select multiple models by clicking the two models to be uploaded separately. Click Finish, and the models will be added to the component page. A model can be added several times. As is shown below:
2. Adjusting the Model
The imported model may not be visible, probably because the model is too large or too small, or out of sight.
a. Try to reduce the model size to 0.1 times (or other sizes), and then make further adjustments.
b. When the model is selected, the displacement tool will appear, and you can adjust the position of the model by dragging the tool. As is shown below:
You can also manually adjust the (x,y,z) coordinate values in Position.
c. Rotate the model to adjust the viewing angle.
Usually you only need to adjust the rotation angle along the Y-axis, that is, the rotation angle on the horizontal plane. As is shown below:
d. Adjust the viewing angle and size of the overall scene.
Adjust the viewing angle and size in the component editing page first, click Return to editor, and edit to make the overall effect suitable for the large screen.
Make adjustment in the 3D component editing page first (As is shown below):
In the editing page, select the component and click Adjust Viewing Angle in the upper right corner. The component border will become a dotted line, and then you can adjust the viewing angle. After adjusting, click anywhere on the template page to exit. As is shown below:
3. Configuring Data
In FVS, associate the FR dataset with the model name and configure data labels. There are two example datasets.
a. Enter the component editing page and click Data > Add Data Layer on the right configuration area.
b. Modify the layer name to the corresponding model name, match Name and Content fields of the corresponding dataset based on the model name, set content, scalling, hue, and display in label settings list. As is shown below:
Designing Pop-up Box and Page Jump
In FVS, using the data layer of the model as a parameter, you can pass the model name in the data layer to the interactive object to configure the linkage, pop-up boxes and other special effects of the model.
1. Designing Pop-up Box for Monitoring Video
a. In the editing page, select the custom model component, and add a click event in the Interaction tab page. Apply the click event to the Warehouse layer, and then select the pop-up box event.
b. Set the content URL of the pop-up box to the preview link of the pop-up content page. This means that you need to create another FVS or FRM template for the pop-up content, and reference the content of the template.
The template used in this example dialog box is Security room monitoring 1.fvs. Click to download the template:
Security room monitorinng 1.zip
After previewing the template in the designer, copy the preview link to use it.
You can adjust the style of the pop-up box. For more details, see FVS Click to Jump Out of the Pop-up Box.
2. Switching Viewing Angle by Setting Multi-page plus Smooth Transitions
If you want to click a model or button to zoom in on a certain position, you need to create a separate page for each perspective, and use multiple-page and smooth transition to switch between model views, move or zoom in on spatial positions.
a. Click New Page, add two pages and modify the names. The template finally contains three pages: Homepage, Warehouse, and Workshop.
b. On the homepage, select the custom model component and set a page jump event for each model separately.
For example, clicking warehouse will jump to the warehouse page:
The same works for the workshop model.
c. You can also make custom buttons to trigger page jump events.
For example, by using the title component, you can set the border background, text content. You can also adjust the layout effect of the text and background by adjusting the component padding. As is shown below:
Set Interaction > Click Event for the title component. As is shown below:
d. After setting up all click events, select all the components on the homepage, copy and paste them into the other two pages, and the events will be copied as well.
Adjust the viewing angle of custom model component Warehouse and Workshop so that each page only display one corresponding model. And add other components, as shown in the following figure:
e. Enable smooth transition between pages.
FVS multiple-page smooth transition can allow the same component to switch between different pages without reloading, which can achieve the effect of switching viewing angle for custom model components.
Two conditions are needed for smooth transition:
Each page needs to have Smooth Transition button enabled.
Components with Smooth Transition should be of the same type and name (components copied and pasted to different pages will automatically have the same name)
Previewing
Materials Download
Test template: Smart Park demo Test.fvs
Test material: Test materials.zip
