QR codes

Chart style

A QR code widget generates scannable QR codes from associated content.

Style Panel

• Search Configuration: Click the icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis coordinates of the widget, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: rotates the widget around its center, in degrees.

    • Enter the rotation angle directly, or click the plus (+) or minus (-) sign to adjust the value.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: a value from 0 to 1. A value of 0 hides the widget, and 1 displays it fully. Default value: 1.

• Input Content: the content displayed when the QR code is scanned. You can also obtain the content from the text field in the Data panel. If both this configuration item and the data panel are configured, the data panel value takes precedence.

• Fill Color: the foreground and background colors of the QR code widget.

• Border Style: the border style of the QR code widget, including the line type, corner angle, width, and color.

• LOGO: the logo icon style in the center of the QR code. Click the icon to show or hide the logo.

  Metric	description
  Image Link	The image used as the logo. To use a remote image, enter its URL. Click Preview to preview the image at full size. Click Change below the image box to replace it. For more information, see Use the interface.
  Image Size	The width and height of the logo image, in pixels. The logo displays correctly when its size is within 30%.
  Image Fillet	The corner radius of the logo image, in pixels. A value of 0 produces square corners. Larger values increase the rounding.
  Background Color	The background color of the logo image.
  Border Style	The border style of the logo image, including the line type, corner angle, line width, and color.

Data Sources panel

Advanced Panel

No event configurations are available for this widget.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	Triggered after a data interface request is responded to and processed by a filter. Returns the processed JSON data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.

   • Action

     Action	Description
     Import data	After the widget data is processed into its required format, this action imports the data for redrawing without requesting server data again. For more information, see the data example. [ { "text": "The text content of the QR code. " } ]
     Request Data Interface	Requests server data again. Data from an upstream data processing node or layer node is used as request parameters. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Move	Move a widget to a specified location. For more information, see the data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles widget visibility. No parameters are required.
     Display	Display the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then modify the style field in the data processing node in Blueprint Editor.

Case demonstration

This example dynamically generates a QR code by randomly selecting content from a word cloud.

1. Log on to the DataV console.

2. Select a dashboard and click Edit to go to the Canvas Editor page.

3. Add the Word Cloud and QR Code components to the canvas.

4. Click the icon in the upper-left corner to go to the Blueprint page.

5. On the Layer Nodes tab, add all components to the main canvas.

6. On the Logical Nodes tab, add a serial data processing node to the main canvas.

7. Connect components.

8. Configure the processing method of the Serial Data Processing node.

   return [{"text": data.name}];

9. Click Preview in the upper-right corner to preview the results.

10. (Optional) Display the web page content while scanning the QR code. You can set the content of the Data Sources panel to an HTTPS web page.