FVS Off-screen Control

This document is applicable to users who have installed the FVS Dashboard Edit Mode plugin to learn FVS template's functions.

Version

Application Scenarios

You may need to explain the content displayed on dashboards to viewers and demonstrate the FVS templates simultaneously, which is inconvenient for two people to split the work.

In this case, the Off-screen Control function can be used to remotely control the dashboard with a handheld mobile device, making it easier for the presenter to independently explain the content.

Functions

After the Off-screen Control function is enabled for FVS templates, Projection Ratio and Interaction Event can be set.

During preview, you need to add the suffix &offScreen=true behind the URL of the template to be previewed. After refreshing the link, you can scan the code with a mobile device to use the function.

The off-screen control terminal allows you to click all the interaction events on the template, such as clicking page turning buttons, linked charts, and pop-up windows.

The demonstration video is as follows.

Hardware Environment

• Server: Simply meet the requirements of FineReport projects. For details, see Hardware Configuration.

• Client: PC or all-in-one devices like MAXHUB used for screen projection. You can access FVS templates on the server through the client. For details, see FVS Installation and Configuration Requirements.

• Off-screen control terminal: Mobile devices used to control the dashboards, such as mobile phones and tablets. You can control the dashboard by touching the screen.

Software Environment

• Server: FineReport 11.0.9 and later versions equipped with the FVS Dashboard Edit Mode plugin of V1.12.2 and later versions. (If you test with local designer, install FineReport on the client side.)

• Client: Chrome browser used to preview FVS templates (If 3D components are included, the earliest version of Chrome browser should be 86.)

• Off-screen control terminal: Click to download the latest version of the DataAnalysis App.

Network Environment

Localhost Environment

If localhost is accessed through the client, the client and the off-screen control terminal need to be in the same network environment. That is to say, the two terminals should be connected to the same Wi-Fi network (without setting network isolation) and have IP addresses within the same network segment.

Except for Localhost Environment

1. If the client accesses an IP address or remote server except for localhost, the client and the off-screen control terminal need to be in the same network environment without setting network isolation.

In addition, you need to configure insecure in chrome://flags/. Enter the server's IP address (including the HTTP/HTTPS protocol and port number), select Enabled, and click Relaunch to restart the browser.

2. If the client for screen projection is connected to a wired network, in addition to the above requirements, you also need to configure mdns in chrome://flags/. Select Disabled and click Relaunch to restart the browser.

Enabling Off-screen Control

1. Open the built-in template The First FVS Dashboard.

2. Open the template in the designer, choose Template > FVS Template Setting, select Off-screen Control in the pop-up setting box, and tick Enable FVS Off-screen Control.

Selecting Projection Ratio

Projection ratio refers to the scale at which the template is zoomed in in the off-screen control terminal. The final projection ratio is subject to the aspect ratio of the control screen, and may slightly differ from the setting to ensure that control screen is filled by the content.

During off-screen control, a template map is generated in the top left corner of the control screen, showing a proportional effect. Only two effects are provided as examples for comparison, as shown in the following two figures.

• 1:1

• 1:4

This section takes 1:1 as an example.

Interaction Event

A default Switch Template Page event exists in the Interaction Event tab page, with Switch Page as its default button name. The default event can be unticked and its button name can be changed, but the event cannot be deleted.

Keep the default in this example, as shown in the following figure.

Adding an interaction event

If you don't want to use the default event, or if some interaction events in the template are not applicable to mobile terminals, you can add interaction events through JavaScript scripts.

The newly added interaction events can be edited and deleted (irreversible operations).

Click the interaction event list icon in the bottom right corner of the control screen, and the set interaction events can be viewed.

Previewing a Template and Adding a Suffix

After the off-screen control setting is configured, preview the template, add the suffix &offScreen=true behind the URL, and press Enter to refresh the webpage. Then the off-screen control QR code appears.

Scanning Code with the Off-screen Control Terminal

Ensure that the off-screen control device and client are in the same network environment, scan the QR code with the DataAnalysis App of the off-screen control terminal, and then wait for client authorization.

The following figure introduces how to enable the screen recording permission.

Client Authorization

Select a page to be shared on the client, choose Window or Entire Screen, and click Share. Then the authorization is successful.

Starting Off-screen Control

After the authorization, the FVS template can be manipulated by the control terminal.

During off-screen control, you can double-tap the template map generated in the upper left corner of the control screen to zoom in it, after which the template can be restored by single-tap itself. If you tap or slide the screen, the displayed content of the template changes with the template map.

Off-screen Authorization Blocked by Firewall

Problem

The client does not pop up the shared authorization prompt box after you scan the code by using the off-screen control terminal when the client and the off-screen control terminal are in the same network environment.

Cause

The client firewall may block the application. You can disable the firewall.

Solution

One: Disable the firewall directly.

Two: Take Windows as an example. Choose Windows Defender Firework > Allow an app or feature through Windows Defender Firework > Change settings to allow Google Chrome through firewall. For details, search for specific methods through Google.