The use of image components

The use of image components

1. Overview

1.1 Function introduction

Image, which helps you to add image elements to your dashboard. It includes local images and internet images.

1.2 Application scenario

You can use image component to display images in a dashboard.

2. Function

2.1 Add image component

Select Image on the right and drag it to the canvas:

2.2 Upload image

You can upload images in the following two ways:

•Double-click image component and set image in the image  pop-up window.

•Select the component first, and then click Setting > Image > Select Image button on the right to set image in the "Image" pop-up window.

[Image Source] Select the type of image you want to upload, you can choose Local or Internet.

[Add Image] Click it to add a new image, the local image will open the local resources, the internet image need to set image name and url address.

➢Note:

•The url address of network image needs to be with protocol, for example, "http://xxx/image/image1.jfif".

•The url supports parameters, including built-in parameters and custom dashboard parameters, you can pass different parameter values to show different images; for example, user A sees image A, user B sees image B. For detailed usage, please refer toDynamic Images.

•After adding internet image, it will generate a file in the format of "xxx.url", you can see the name and url address after clicking it, as shown below:

[New]After clicking New, a new folder will be created in the list below, and the uploaded image files will be generated into the list, you can customize the folder.

2.3 Adjust image display

Click Setting > Image > Display Form on the right side, drop down to select the display form, you can choose "Original", "Fill", "Zoom", "T9 Zoom".

[Original] No change in pixels of image.

[Fill] Stretch image according to the size of the component, so that the image completely fills the component, as follows:

[Zoom] Zoom image according to the component size in equal proportion, the maximum side of the image is no longer enlarged when it is enlarged to the minimum side of the screen, which can maintain the proportion of the image while maximizing the display of the image, which can be set to be centered.

[T9 Zoom] Customize the top, bottom, left and right pixels, divide the image into 9 blocks, and go to zoom the image according to the area:

Zoom principle:

1, 3, 7, 9 parts remain unchanged;

2, 8 zoom width in equal proportion;

4, 6 zoom high in equal proportion;

5 zoom width and height in equal proportion.

2.4 Display style

Click Setting > Image > Display Style on the right side, you can switch the style to button and set the batch commit. The background of the button status is gray, as follows.

2.5 Batch commit

In the right side Setting > Option, you can set commit type of the image component to realize batch commit, Return to Source Dashboard as below.

[Null] No commit operation.

[Batch Commit] Select batch commit. If filter and parameter components are used in the dashboard, you need to click the image batch commit filtering conditions after determining the options to see the filtering effect, which is usually used in the case of more filter and parameter components to optimize the dashboard loading performance. For details, please refer to Create Visual Dashboard > Data Process and Analysis > Filter > Batch Commit.

[Return to Source Dashboard]select  Return to Source Dashboard, a link is set in the dashboard and the target window is self, click image component, the target dashboard after the jump can return to the source dashboard, please refer to Commit > Return to Source Dashboard.

2.6 Image format

Set the component style on the right side [Format], including background color or global filter, rounded corner radius, line, shadow, transparency, etc. For details, please refer toComponent Operation and Setting > Format.

The image format is jpg, png, gif, svg (layer group greater than 3) supports global filter setting, svg (layer group less than or equal to 2) supports fill color setting.

2.7 Dynamic Image

Dynamic images are realized by modifying images through scripts.

•use the image function for local images.

1)Add local images with the name "Big Screen Dashboard1, Big Screen Dashboard2".

2)Bind the "Local Image" column to the "DropdownListParameter1" component, the values are "Big Screen Dashboard1, Big Screen Dashboard2".

3)Select the "DropdownListParameter1" component, click [Setting > Option] on the right side, check "Defaults", and set it to "First Value".

4)Select the "Image1" component, click [Setting > Script] on the right side, and enter the script under the "On Load" tab of the "Script" dialog: image1.image="". param["DropdownListParameter1"]+".png".

5)Switch the option on the "DropdownListParam1" component to dynamically view local images.

•Use imageUrl function for Internet images.

1)Add internet images with the name "Transportation%20Industry, Power_Industry, Financial%20Industry".

2)Bind the "Industry" column to the "DropDownListParameter1" component, the values are "Transportation%20Industry, Power_Industry, Financial%20Industry".

3)Select the "DropdownListParameter 1" component, click [Setting > Option] on the right side, check "Defaults", and set it to "First Value".

4)Select the "Image 1" component, click [Setting > Script] on the right side, and enter the script under the "On Load" tab of the "Script" dialog: image1.imageUrl="http://xxx/image/"+param["Industry"]+".png", where http://xxx/image/ is image path, param["Industry"] is the name of the image, and .png is the format of the image.

5)Switch the option on the "drop-down list parameter 1" component to dynamically view the internet images.