FVS Pagination Attribute

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.

Version

Functions

A FineVis visualization dashboard is a canvas with multiple pages containing multiple components. This document introduces the page attributes.

Basic Operations of Pages

1. At the bottom of the canvas, you can click Fold/Expand to fold/expand the page operation area (expanded by default).

2. You can click + New Page to add a blank page after all pages.

3. You can right-click a page to open the operation panel, including New Page, Copy Page, Paste Page, and Delete Page.

• If no page is copied, Paste Page is gray and can not be used.

• The pasted page is added after the right-clicked page by default.

• If there is only one page, Delete Page is gray and can not be used.

4. You can right-click a blank area in the page area to open the operation panel, including New Page and Paste Page. The added/pasted page is added in the click position.

• If no page is copied, Paste Page is gray and can not be used.

5. You can paste a page copied from another template. If the canvases are different in size, the page is pasted from the top left corner of the current template canvas in which its components remain unchanged in size and components that exceed the canvas size are pasted beyond the canvas.

6. You can hold down a page and drag it to adjust the page order.

Page Name

Select a page, click Page on the right configuration panel, and you can manually modify the page name.

Page Background

Page background supports five styles of configuration: None, Color, My Resource, Custom Upload, and 3D Background.

Note:

1. The configuration of the page background takes effect only for the selected page in the current canvas.

2. If a color or image with transparency is used for the page background, the page is displayed with black background during preview in full screen mode.

Color

To select a color as the page background, you can click the color block or manually enter the color value.

My Resource

1. The materials in My Resource are from the FVS resource center, and materials labeled as Background are selected by default.

2. After selecting a material, you can select Adapt, Fill or Stretch as the filling method and set the hue.

Custom Upload

1. After selecting Custom Upload as the page background, click Choose, click + Upload Picture, and you can select a local image file and upload it.

2. Supported file formats for upload include JPG, JPEG, PNG, APNG, GIF, and WebP.

3. After upload, hover the cursor over an image and you can set 9-Patch.

4. After selecting an image, you can select the filling method and set the hue.

3D Background

3D background is often used in scenes where the same 3D model is used in multiple pages to improve the efficiency of template production and facilitate the subsequent maintenance of the template.

For details, see FVS 3D Background Application. 

Page Transition

Smooth Transition can be enabled. After Smooth Transition is enabled, if a component exists both on the previous page and on the current page, a shifting animation is triggered during page switching, and the component's exit animation on the previous page is invalid.

Note:

For details, see FVS Page Smooth Transition.

Preview Playback Setting

If there are multiple pages in a template, you can set the preview playback for the template in the page area.

The following table describes the settings.

The icons are displayed from left to right: Previous, Pause/Continue, Next, and Page Navigation.

The effect is shown in the following figure.

Note:

1. During template preview, the starting page is the first page by default and cannot be customized.

2. You can use the setPageButtonDisplayPolicy interface to permanently hide the switch icons in the lower left corner.

Hiding Pages During Preview

FineVis Data Visualization V2.1.1 allows you to show or hide pages during preview. Hiding pages during preview does not affect editing operations in the designer.

• If multiple pages exist, pages are displayed during preview by default. When you hover the cursor over the page area, the Show During Preview icon appears in the upper right corner. After being clicked, the icon is turned into Hide During Preview and fixed in the upper right corner. Click the icon again to restore Show During Preview.

• If only one page exists or can be previewed, the icon will no longer appear when you hover the cursor over the page area.

After being hidden, the page is not displayed in the page navigation during preview. For example, the effect of hiding Page 1 is shown in the following figure.

In addition, you can hide or show pages through JS.

• Show the page.

duchamp.showStory("Page1"); //Page1 is the name of this page.

• Hide the page.

duchamp.hideStory("Page1"); //Page1 is the name of the page.

Note:

If you try to hide the current page on the current page, a prompt pops up, indicating that you cannot hide the current page.