Standard Widget Library – RDK TECH https://rdktech.org Rapid Development Kit Mon, 18 Mar 2024 19:35:06 +0000 en-US hourly 1 https://wordpress.org/?v=6.8 https://rdktech.org/wp-content/uploads/2024/02/RDK-logo-black-2-32x32.png Standard Widget Library – RDK TECH https://rdktech.org 32 32 Flexible Label https://rdktech.org/rdk-documentation/widgets/standard-widget-library/flexible-label/ Mon, 18 Mar 2024 19:35:06 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1200  

Scrolling Label is an output widget. It is used to display English text and supports scolling functions. This widget uses only our built-in English fonts, therefore, it is efficent and resource-thrifty. This widget is suitable for displaying changing messages such as error messages.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Flexible Label

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Binding Register

Property Description Operation
Register as index Decide whether to select a register as the index Checkbox
Contex/Index Register Select a register to be the index register Register Selector

Text Array

Property Description Operation
Content Please refer to PlainTextArray Table Dialog for more details PlainTextArray Table Dialog

Setting

Property Description Operation
Use Format String Use Python-compliant format string Checkbox
Format String Please refer to Format String for more details Format String
Font Size Set the font size Font Selector
Text Color Select the text color Color Selector
Opacity % Select the text opacity (0-100%) Number Editor
Show Background Decide whether to show the background Checkbox
Background Main Color Select the color for the background Color Selector
Background Grad Color Select the gradient color for the background Color Selector
Background Opaciy % Select the opacty (0-100%) for the background Number Editor
Display Mode Please refer to Label Display Mode for more details Label Display Mode
Scrolling Speed px/s Select the scolling speed (5-50 px/sec) Number Editor
Alignment Select the alignment for the text Alignment Selector

Right-Click Menu

Font Size

Property Description Operation
Font Size Select the font size Font Selector

Display Mode

Property Description Operation
Display Mode Please refer to Label Display Mode for more details Label Display Mode

Alignment

Property Description Operation
Alignment Select the alignment for the text Alignment Selector

Widget-Specific Actions

Property Description Operation
Link to User Manual… Connect to the education video and play it
]]> Palette https://rdktech.org/rdk-documentation/widgets/standard-widget-library/palette/ Mon, 18 Mar 2024 19:34:44 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1198  

Pallete is an output widget. It can serve as a multi-color lighting signal or as a LED of which color can be tuned by setting RGB values. Obvisouly, it can serve as a pallete.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Pallete

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Body Setting

Property Description Operation
Binding RGB Register Checked to bind a register for showing RGB Checkbox
Color 0 Select color 0. If RGB Binding Regsiter is enabled, this function is invalid. Color Selector
Color 1 Select color 1. If RGB Binding Regsiter is enabled, this function is invalid. Color Selector
Color 2 Select color 2. If RGB Binding Regsiter is enabled, this function is invalid. Color Selector
Color 3 Select color 3. If RGB Binding Regsiter is enabled, this function is invalid. Color Selector
Color R Bind a register of which value (0-255) represents the Red color value Register Selector
Green Bind a register of which value (0-255) represents the Green color value Register Selector
Blue Bind a register of which value (0-255) represents the Blue color value Register Selector
Binding Regsiter Select a binding register of which value serves as the index to choose color 0~3. If RGB Binding Regsiter is enabled, this function is invalid. Register Selector
Pallete Shape Select this widget’s shape Dropdown List
Corner Radius Set the radius for the corner when the widget shape is set to Rectangular Number Editor
Show Color Select a color (0~3) for preview. If RGB Binding Regsiter is enabled, this function is invalid. Dropdown List

Border Setting

Property Description Operation
Border Color Select a color for the border Color Selector
Border Width Set the border width. The maximum width varies according to the size of the widget. Number Editor

Right-Click Menu

Widget-Specific Actions

Property Description Operation
Link to User Manual… Connect to the education video and play it
]]> LED https://rdktech.org/rdk-documentation/widgets/standard-widget-library/led/ Mon, 18 Mar 2024 19:34:21 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1196  

LED is an output widget.

This widget is to emulate the behavior of the physical LEDs. It can be set as on/off mode or analog mode for brightness.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

LED

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Behavior Setting

Property Description Operation
Value as Brightness Use the value of the binding register to set the brightness Checkbox
Toggle/Brightness Binding Register Select a binding register for the toggle mode (on/off) or as the indicator for brightness (0-255) Register Selector

Body Setting

Property Description Operation
Show Center Handler Show Center Handler Checkbox
Main Color Select a main color Color Selector
Gradient Color Select a gradient color Color Selector
Body Opacity % Set the widget body opacity(0-100%) Number Editor
LED Shape Select a LED shape Dropdown List
Corner Radius Set the corner radius; only valid when the LED shape is set to Rectangle Number Editor

Border Setting

Property Description Operation
Border Color Select a border color Color Selector
Border Opacity % Set the border opacity (0-100%) Number Editor
Border Width Set the border width. The maximum value varies according to the size of the widget. Number Editor

Shadow Setting

Property Description Operation
Shadow Mode Select the shadow mode Dropdown List
Shadow Color Select a shadow color Color Selector
Shadow Width Select a shadow width (0-30) Number Editor

On-Widget Editor

Property Description Operation
Adjust the center of the widget Center Editor

Right-Click Menu

Move to Center

Property Description Operation
Move to Center Move the center of the circle to the central point of the widget Center Editor

Widget-Specific Actions

Property Description Operation
Link to User Manual… Connect to the education video and play it
]]> Circular Gauge https://rdktech.org/rdk-documentation/widgets/standard-widget-library/circular-gauge/ Mon, 18 Mar 2024 19:33:58 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1194  

Circular Gauge is an input/output widget

As an output widget, this widget offers a complete set of meters. As an input widget, it can combine with the cicular needle and proper background to perform a turning knob function.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Circular Gauge

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Display Setting

Property Description Operation
Display Text Display Text Label Checkbox
Text The content of the text label Plain Text
Font Set the typeface, font size, baldness, italics and line space for the text Font Selector
Text Color Select a color for the text label Color Selector
Text Location Set the coordinate values for the text label Alignment Selector
Start Number Starting number for the circular scale Number Editor
End Number Ending number for the circular scale Number Editor
Reversed Scales Checked to reverse the progression of the scale. Checkbox
Start Angle Set the angle(1-359) for the starting point of the scale. Please refer to Number Editor Number Editor
Arc Length Set the arc length in degrees(1-360) Number Editor

Needle Behavior Setting

Property Description Operation
Minimum Data Value Set the minimum value that represents the starting value of the circule scales. This valume must be smaller than the maximum value of the binding register. Number Editor
Maximum Data Value Set the maximum value that represents the end value of the circule scales. This valume must be larger than the minimum value of the binding register. Number Editor
Binding Register Select a register of which value is represented by the needle Register Selector
Needle Top Left Set the coordinate value for the top-left corner of the needle Alignment Selector
Needle Bottom Right Set the coodinate value for the bottom-right corner of the needle Alignment Selector
Enable Slider Knob Onced enabled, this knob can be used to change the value of the binding register Checkbox
Load Needle Image Load an image from the file system as the needle File Open Dialog Box

Outline Setting

Property Description Operation
Display Outline Display outline Checkbox
Border Color Select a color for the border Color Selector
Border Style Select a line style for the border Dropdown List
Fill Color Select a color for the outline Color Selector

Background Image Setting

Property Description Operation
Show Background Image Show the background image Checkbox
Image Top Left Set the image’s top-left coordinates Alignment Selector
Image Bottom Right Set the image’s bottom-right coordinates Alignment Selector
Load Background Image Load an image from the file system as the background File Open Dialog Box

Tick Style Setting

Property Description Operation
Tick Style Select a style for the ticks. Please refer to Color Selector Dropdown List
Tick Head Style Set the tick head style Dropdown List
Center Location Set the coordinate for the tick’s circle Alignment Selector
Move to Center Move the center of tick’s circle to the central point of the widget Alignment Selector

1st Tick Setting

Property Description Operation
Enable Scale Enable the scales for 1st Tick Checkbox
Tick Granularity Set the tick’s granularity Number Editor
Tick Start Radius Set the tick’s starting position as a percentage (1-200%) of the radius Number Editor
Tick End Radius Set the tick’s ending position as a percentage (1-200%) of the radius Number Editor
Tick Color Select a color fot the ticks Color Selector
Tick Style Set the tick style Frame Selector
Display Number Display number on the ticks Checkbox
Display Start Number Display the starting number Checkbox
Display End Number Display the ending number Checkbox
Text Start Radius Set the number’s position as a percentage of the radius (1-200%) Number Editor
Number Font Set the typeface, font size, baldness, italics for the display number Font Selector
Number Color Select a color for the display number Color Selector

2nd Tick Setting

Property Description Operation
Enable Scale Enable the scales for 2nd Tick Checkbox
Tick Granularity Set the tick’s granularity Number Editor
Tick Start Radius Set the tick’s starting position as a percentage (1-200%) of the radius Number Editor
Tick End Radius Set the tick’s ending position as a percentage (1-200%) of the radius Number Editor
Tick Color Select a color fot the ticks Color Selector
Tick Style Set the tick style Frame Selector
Display Number Display number on the ticks Checkbox
Display Start Number Display the starting number Checkbox
Display End Number Display the ending number Checkbox
Text Start Radius Set the number’s position as a percentage of the radius (1-200%) Number Editor
Number Font Set the typeface, font size, baldness, italics for the display number Font Selector
Number Color Select a color for the display number Color Selector

Shadow and Light Source Control

Property Description Operation
Enable Shadow and Light Sournce Please refer to SVG Filter Checkbox
Shadow Dx Set the shadow’s x-axis displacement Number Editor
Shadow Dy Set the shadow’s y-axis displacement Number Editor
Light Surface Scale Please refer to SVG Filter Number Editor
Light Specular Constant Please refer to SVG Filter Number Editor
Light Specular Exponent Please refer to SVG Filter Number Editor
Light Color Select the light color Color Selector
Light Source X Set the light source’s x-coordinate, please refer to SVG Filter Number Editor
Light Source Y Set the light source’s y-coordinate, please refer to SVG Filter Number Editor
Light Source Z Set the light source’s z-coordinate, please refer to SVG Filter Number Editor

On-Widget Editor

Property Description Operation
Move to Center Center Editor
Adjust Label Location Label Editor
Adjust Scale Location Scale Editor
Adjust Background Image Location Image Editor

Right-Click Menu

Move to Center

Property Description Operation
Move to Center Move the center of the circle to the central point of the widget Center Editor

Tick Style

Property Description Operation
Tick Style Select a style for the ticks. Please refer to Color Selector

Tick Head Style

Property Description Operation
Tick Head Style Select a style for the tick head

Widget-Specific Actions

Property Description Operation
Load Background Image… Load an image from the file system as the background File Open Dialog Box
Paste to Background Image from Clipboard Paste an image from Clipboard as the background
Edit Back Ground Image Edit the background image Image Editor Dialog Box
Link to User Manual… Connect to the education video and play it
]]> Circular Scale https://rdktech.org/rdk-documentation/widgets/standard-widget-library/circular-scale/ Mon, 18 Mar 2024 19:33:30 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1192  

Circule Scale is an output widget.

The purpose of this widget is to create the circule meter with scales and labels. The widget removes the need of using an external graphic design tool to design the meter. This widget offers flexible settings for scales and labels. It also offers shadow and light source setting for creating desired visual effects.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Circule Scale

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Display Setting

Property Description Operation
Display Text Display Text Label Checkbox
Text The content of the text label Plain Text
Font Set the typeface, font size, baldness, italics and line space for the text Font Selector
Text Color Select a color for the text label Color Selector
Text Location Set the coordinate values for the text label Alignment Selector
Start Number Starting number for the circular scale Number Editor
End Number Ending number for the circular scale Number Editor
Reversed Scales Checked to reverse the progression of the scale. Checkbox
Start Angle Set the angle(1-359) for the starting point of the scale. Please refer to Number Editor Number Editor
Arc Length Set the arc length in degrees(1-360) Number Editor

Outline Setting

Property Description Operation
Display Outline Display outline Checkbox
Border Color Select a color for the border Color Selector
Border Style Select a line style for the border Dropdown List
Fill Color Select a color for the outline Color Selector

Background Image Setting

Property Description Operation
Show Background Image Show the background image Checkbox
Image Top Left Set the image’s top-left coordinates Alignment Selector
Image Bottom Right Set the image’s bottom-right coordinates Alignment Selector
Load Background Image Load an image from the file system as the background File Open Dialog Box

Tick Style Setting

Property Description Operation
Tick Style Select a style for the ticks. Please refer to Color Selector Dropdown List
Tick Head Style Set the tick head style Dropdown List
Center Location Set the coordinate for the tick’s circle Alignment Selector
Move to Center Move the center of tick’s circle to the central point of the widget Alignment Selector

1st Tick Setting

Property Description Operation
Enable Scale Enable the scales for 1st Tick Checkbox
Tick Granularity Set the tick’s granularity Number Editor
Tick Start Radius Set the tick’s starting position as a percentage (1-200%) of the radius Number Editor
Tick End Radius Set the tick’s ending position as a percentage (1-200%) of the radius Number Editor
Tick Color Select a color fot the ticks Color Selector
Tick Style Set the tick style Frame Selector
Display Number Display number on the ticks Checkbox
Display Start Number Display the starting number Checkbox
Display End Number Display the ending number Checkbox
Text Start Radius Set the number’s position as a percentage of the radius (1-200%) Number Editor
Number Font Set the typeface, font size, baldness, italics for the display number Font Selector
Number Color Select a color for the display number Color Selector

2nd Tick Setting

Property Description Operation
Enable Scale Enable the scales for 2nd Tick Checkbox
Tick Granularity Set the tick’s granularity Number Editor
Tick Start Radius Set the tick’s starting position as a percentage (1-200%) of the radius Number Editor
Tick End Radius Set the tick’s ending position as a percentage (1-200%) of the radius Number Editor
Tick Color Select a color fot the ticks Color Selector
Tick Style Set the tick style Frame Selector
Display Number Display number on the ticks Checkbox
Display Start Number Display the starting number Checkbox
Display End Number Display the ending number Checkbox
Text Start Radius Set the number’s position as a percentage of the radius (1-200%) Number Editor
Number Font Set the typeface, font size, baldness, italics for the display number Font Selector
Number Color Select a color for the display number Color Selector

Shadow and Light Source Control

Property Description Operation
Enable Shadow and Light Sournce Please refer to SVG Filter Checkbox
Shadow Dx Set the shadow’s x-axis displacement Number Editor
Shadow Dy Set the shadow’s y-axis displacement Number Editor
Light Surface Scale Please refer to SVG Filter Number Editor
Light Specular Constant Please refer to SVG Filter Number Editor
Light Specular Exponent Please refer to SVG Filter Number Editor
Light Color Select the light color Color Selector
Light Source X Set the light source’s x-coordinate, please refer to SVG Filter Number Editor
Light Source Y Set the light source’s y-coordinate, please refer to SVG Filter Number Editor
Light Source Z Set the light source’s z-coordinate, please refer to SVG Filter Number Editor

On-Widget Editor

Property Description Operation
Move to Center Center Editor
Adjust Label Location Label Editor
Adjust Scale Location Scale Editor
Adjust Background Image Location Image Editor

Right-Click Menu

Move to Center

Property Description Operation
Move to Center Move the center of the circle to the central point of the widget Center Editor

Tick Style

Property Description Operation
Tick Style Select a style for the ticks. Please refer to Color Selector

Tick Head Style

Property Description Operation
Tick Head Style Select a style for the tick head

Widget-Specific Actions

Property Description Operation
Load Background Image… Load an image from the file system as the background File Open Dialog Box
Paste to Background Image from Clipboard Paste an image from Clipboard as the background
Edit Back Ground Image Edit the background image Image Editor Dialog Box
Link to User Manual… Connect to the education video and play it
]]> Generic Gauge https://rdktech.org/rdk-documentation/widgets/standard-widget-library/generic-gauge/ Mon, 18 Mar 2024 19:33:05 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1190  

Generic Gauge is an output widget.

This widget offers an efficient and resource-thrifty way to dispay meters. The scales are symmeric and gradient colors can be used. This widget has a default needle which is rendered directly by the system. By doing so, this widget requies far less system resources. It is suitable for HMIs that need many gauges and the gagues need to reflect the change of the values quickly. This widget supports layering images and it can be layered upon other background images for enhancing visual effects.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Generic Gauge

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Gauge Configuration

Property Description Operation
Minimum Data Value Set the minimum value for the scales Number Editor
Maximum Data Value Set the maximum value for the scales Number Editor
Critical Data Value Set the critical value when the tick’s color starts to change Number Editor
Start Angle Starting angle (0-179), please refere to Number Editor Number Editor
Tick Granularity Set the tick granularity(0-100) Number Editor
Sub Tick Granularity Set the sub tick granularity (0-20) Number Editor

Label Style Setting

Property Description Operation
Display Label Display labels Checkbox
Label Distance from Scale Line Set the distance between the lable and the scale as a percentage(0-100) of the radius Number Editor
Label Color Select a color for the labels Color Selector

Tick Style Setting

Property Description Operation
Tick Main Color Select a color as the major color for the ticks Color Selector
Tick Gradient Color Select a color as the gradient color for the ticks Color Selector
Tick Width Set the tick width(0-100) Number Editor
Tick Length Set the tick length(0-200) Number Editor
Tick Critical Color Set the critical color for the ticks Color Selector
Center Location Set the coordinate values for the center of the widget Alignment Selector

Needle Configuration

Property Description Operation
Radius Original Circle Set the radius of the circle around the centeral point. Users can set the radius to the maximum value and change the opacity for makeing this circle as the widget background. Number Editor
Origianl Circle Color Select a color for the original circle Color Selector
Enable Needle 1 Enable Needel 1 Checkbox
Needle 1 Binding Register Set the binding register for Needle 1. The needle starts with the minimum value of the binding register and change the angle according to the value of this register till the maximum value. Register Selector
Needle 1 Color Select a color for Needle 1 Color Selector
Enable Needle 2 Enable Needel 2 Checkbox
Needle 2 Binding Register Set the binding register for Needle 2. The needle starts with the minimum value of the binding register and change the angle according to the value of this register till the maximum value. Register Selector
Needle 2 Color Select a color for Needle 2 Color Selector
Enable Needle 3 Enable Needel 3 Checkbox
Needle 3 Binding Register Set the binding register for Needle 3. The needle starts with the minimum value of the binding register and change the angle according to the value of this register till the maximum value. Register Selector
Needle 3 Color Select a color for Needle 3 Color Selector

On-Widget Editor

Property Description Operation
Adjust the location of the center of the widget Center Editor

Right-Click Menu

Move to Center

Property Description Operation
Move to Center Move the center of the circle to the central point of the widget Center Editor

Widget-Specific Actions

Property Description Operation
Link to User Manual… Connect to the education video and play it
]]> Data Chart https://rdktech.org/rdk-documentation/widgets/standard-widget-library/data-chart/ Mon, 18 Mar 2024 19:32:41 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1188  

Data Chart is an output widget. This widget draws line graph/chart according to the input data. It provides flexible settings such as background color, foreground colors, grid granularity and so on.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Data Chart

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Image Setting

Property Description Operation
Show Protractor Show the protractor Checkbox
Show Background Image Show the background image Checkbox
Show Grid Show the grids Checkbox
Load Background Image Load an image from the file system as the background File Open Dialog Box

Background Setting

Property Description Operation
Background Color Select a color for the background Color Selector
Border Color Select a color for borders Color Selector
Border Style Select a border style Frame Selector

Data Area Setting

Property Description Operation
Top Left Corner Set the coordinate values for the top left corner Alignment Selector
Bottom Right Corner Set the coordinate values for the bottom right corner Alignment Selector
Data Update Mode Set the data update mode to be circulr or shift mode Dropdown List
Char Display Type Set the chart to be line, column, point or area mode Dropdown List
Data Series Opacity % Set the data serise opacity (0-100%) Number Editor
Data Series Width Set the data chart width Number Editor
Data Series Point Count Set the data point number on X-Axis Number Editor
Maximum Data Value Set the maximum data value for the Y-Axis Number Editor
Minimum Data Value Set the minimum data value for the Y-Axis Number Editor

Grid Setting

Property Description Operation
Grid Granularity Set the grid granularity
(X-aixs value of the chart’s bottom-right corner – X-axis value of the top-left corner)/X-axis of Grid Granularity = Number of grids on X-axis		 Alignment Selector
Grid Background Color Select a color for the grid background Color Selector
Grid Line Color Select a color for the grid lines Color Selector
Grid Line Style Select a line style for the grid lines Frame Selector

Horizontal Scale Setting

Property Description Operation
Show Horizontal Scale Show the horizontal scale Checkbox
Font Set the font’s type, size, style and line space Font Selector
Text Color Select a color for the texts Color Selector
Starting Number Set the starting number Number Editor
Granularity Set the granularity for increasement or decreasement. If the value is set to be minus, it is treated as the decreasement. Plain Text
Location Set the location of the horizontal scales Alignment Selector

Vertical Scale Setting

Property Description Operation
Show Vertical Scale Show the Vertical scale Checkbox
Font Set the font’s type, size, style and line space Font Selector
Text Color Select a color for the texts Color Selector
Starting Number Set the starting number Number Editor
Granularity Set the granularity for increasement or decreasement. If the value is set to be minus, it is treated as the decreasement. Plain Text
Location Set the location of the vertical scales Alignment Selector

Grid Shadow Setting

Property Description Operation
Grid Shadow Dx Set the grid shadow’s X-axis value Number Editor
Grid Shadow Dy Set the grid shadow’s Y-axis value Number Editor
Grid Shadow Color Select a color for the brid shadow Color Selector

Data Series 1 Setting

Property Description Operation
Enable Data Series 1 Enable Data Series 1 Checkbox
Binding Register Set the binding register of which value is shown by the data serier 1 chart
This register can NOT be the same as that of other data series.		 Register Selector
Color Select the color for Data Series 1 Color Selector

Data Series 2 Setting

Property Description Operation
Enable Data Series 2 Enable Data Series 2 Checkbox
Binding Register Set the binding register of which value is shown by the data serier 2 chart
This register can NOT be the same as that of other data series.		 Register Selector
Color Select the color for Data Series 2 Color Selector

Data Series 3 Setting

Property Description Operation
Enable Data Series 3 Enable Data Series 3 Checkbox
Binding Register Set the binding register of which value is shown by the data serier 3 chart
This register can NOT be the same as that of other data series.		 Register Selector
Color Select the color for Data Series 3 Color Selector

Data Series 4 Setting

Property Description Operation
Enable Data Series 4 Enable Data Series 4 Checkbox
Binding Register Set the binding register of which value is shown by the data serier 4 chart
This register can NOT be the same as that of other data series.		 Register Selector
Color Select the color for Data Series 4 Color Selector

On-Widget Editor

Property Description Operation
Set the locations of Horizontal Scales and Vertical Scales
Set the chart size and location
Set the grid granularity

Right-Click Menu

Widget-Specific Actions

Property Description Operation
Reset Ratio by Width Reset the size of the widget based on the original widget ratio with width unchanged Reset Editor
Reset Ratio by Height Reset the size of the widget based on the original widget ratio with height unchanged Reset Editor
Load background Image… Load an image from the file system as the background File Open Dialog Box
Link to User Manual… Connect to the education video and play it
]]> Rotation Image https://rdktech.org/rdk-documentation/widgets/standard-widget-library/rotation-image/ Mon, 18 Mar 2024 19:32:13 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1186  

Rotation Image is an output widget. It provides the rotation function for a still image. This widget is suitable for implementing the needle of a meter or gauge. It supports opacity and image layering. This widget can work together with other widgets to form complex widgets ehancing the visual effect of the HMI.

The performance and resource requirement is inversely propotional to the size of the image. The larger-sized image of this widget requires more memory space and computation resources.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Rotation Image

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Center Location Setting

Property Description Operation
Center Location Set the coordinate values for the center of the circle Alignment Selector
Move to Center Move the center of the circle to the central point of the widget Alignment Selector

Rotation Setting

Property Description Operation
Minimum Data Value Set the staring value of the needle. This value must be smaller than the maximum value of the binding register. Number Editor
Maximum Data Value Set the ending value of the needle. This value must be larger than the minimum value of the binding register. Number Editor
Revsered Scale Set the scale to be reserved.
That is to set the minimum value to be the ending value of the needed and the maximum value to be the staring value.		 Checkbox
Start Angle Set the needle’s starting angle (0-360). Please refer to Number Editor Number Editor
Arc Length Needle’s rotation arc length in degree (0-360) Number Editor
Load Rotated Image Load an image from the file system as the needle File Open Dialog Box

Behavior Setting

Property Description Operation
Enable Slider Knob Enale the knob
If the knob is enabled, this widget can become an input one as users can change the binding register’s value.		 Checkbox
Binding Register Select a binding regsiter whose value is represented by the needle Register Selector

Preview

Property Description Operation
Show Protractor Show the protractor
The protractor represents the range of the rotation		 Checkbox
Value Slider to select a value for the needle to display Number Editor

On-Widget Editor

Property Description Operation
Adjust the location of the center of the circle Center Editor

Right-Click Menu

Move to Center

Property Description Operation
Move to Center Move the center of the circle to the central point of the widget Center Editor

Widget-Specific Actions

Property Description Operation
Reset to Original Size Reset the widget to its original size Reset Editor
Reset Ratio by Width Reset the size of the widget based on the original widget ratio with width unchanged Reset Editor
Reset Ratio by Height Reset the size of the widget based on the original widget ratio with height unchanged Reset Editor
Load Rotated Image… Load an image from the file system as the needle File Open Dialog Box
Pasted Rotated image from Clipboard Pasted an image from Clipboard as the needle
Link to User Manual… Connect to the education video and play it
]]> Bitmap Image https://rdktech.org/rdk-documentation/widgets/standard-widget-library/bitmap-image/ Mon, 18 Mar 2024 19:31:50 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1184  

Bitmap Iamge is an output widget. It can be used for foreground or background images. It takes various format such as BMP, JPG, and PNG with support of multi-layer images. The size of the image can be changed. The image is stored under the original size in ADE projects but will be adjusted to the panel’s resolution once downloaded to Ubique Panel.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Bitmap Image

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Image Setting

Property Description Operation
Load Image Load images from the file system File Open Dialog Box

Center Location Setting

Property Description Operation
Alignment Move the center of the image to the central location Alignment Selector

On-Widget Editor

Property Description Operation
Adjust the location of the center of the image Center Editor

Right-Click Menu

Move to Center

Property Description Operation
Move to Center Move the Center to the central point of the image Center Editor

Widget-Specific Actions

Property Description Operation
Reset to Original Size Reset the widget to its original size Reset Editor
Reset Ratio by Width Reset the size of the widget based on the original widget ratio with width unchanged Reset Editor
Reset Ratio by Height Reset the size of the widget based on the original widget ratio with height unchanged Reset Editor
Edit Image Edit image files Image Editor Dialog Box
Load Image… Load images from the file system File Open Dialog Box
Paste from Clipboard Paste images from Clipboard
Link to User Manual… Connect to the education video and play it
]]> Touch Area https://rdktech.org/rdk-documentation/widgets/standard-widget-library/touch-area/ Mon, 18 Mar 2024 19:31:28 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1182  

Touch Area is an input widget. It allows users to define a rectangular area for accepting touch. This area is invisible. For irrgular touch area, users can use multiple Touch Area widgets to fit into the shape. Users can design their own push buttons by combining their images with Touch Area for showing pressed and released states.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Touch Area

Property Description Operation
Widget Name Widget displayed name Name
Link to User Manual Link to IOT’s website for User Manual

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Click Event Setting

Property Description Operation
Enable Page Selector Clicking triggers to the target page Checkbox
Select Target Page The target page selector Page Selector
Enable Register Operation Clicking triggers a register operation Checkbox
Binding Register Select which register for the operation Register Selector
Operation Mode Select which operation to be performed. Please refer to Register Operation Setting Register Operation Setting
Enable Callback Function Clicking tirggers a Blockly callback function Checkbox
Behavior Programming Blockly Editor Blockly Editor

Pressing Event Setting

Property Description Operation
Enable Page Selector Pressing triggers to the target page Checkbox
Select Target Page The target page selector Page Selector
Enable Register Operation Pressing triggers a register operation Checkbox
Binding Register Select which register for the operation Register Selector
Operation Mode Select which operation to be performed. Please refer to Register Operation Setting Register Operation Setting
Enable Callback Function Pressing tirggers a Blockly callback function Checkbox
Behavior Programming Blockly Editor Blockly Editor

Releasing State Setting

Property Description Operation
Enable Page Selector Releasing triggers to the target page Checkbox
Select Target Page The target page selector Page Selector
Enable Register Operation Releasing triggers a register operation Checkbox
Binding Register Select which register for the operation Register Selector
Operation Mode Select which operation to be performed. Please refer to Register Operation Setting Register Operation Setting
Enable Callback Function Releasing tirggers a Blockly callback function Checkbox
Behavior Programming Blockly Editor Blockly Editor

Short Click Event Setting

Property Description Operation
Enable Page Selector Clicking triggers to the target page Checkbox
Select Target Page The target page selector Page Selector
Enable Register Operation Clicking triggers a register operation Checkbox
Binding Register Select which register for the operation Register Selector
Operation Mode Select which operation to be performed. Please refer to Register Operation Setting Register Operation Setting
Enable Callback Function Clicking tirggers a Blockly callback function Checkbox
Behavior Programming Blockly Editor Blockly Editor

Continous Pressing Event

Property Description Operation
Enable Page Selector Continous pressing (longer than 1.5 seconds) triggers to the target page Checkbox
Select Target Page The target page selector Page Selector
Enable Register Operation Continous pressing (longer than 1.5 seconds) triggers a register operation Checkbox
Binding Register Select which register for the operation Register Selector
Operation Mode Select which operation to be performed. Please refer to Register Operation Setting. Register Operation Setting
Enable Callback Function Continous pressing (longer than 1.5 seconds) triggers a Blockly callback funtion Checkbox
Behavior Programming Blockly Editor Blockly Editor

Repeated Continous Pressing Event

Property Description Operation
Enable Page Selector Continous pressing (longer than 1.5 seconds) repeatedly triggers to the target page Checkbox
Select Target Page The target page selector Page Selector
Enable Register Operation Continous pressing (longer than 1.5 seconds) repeatedly triggers a register operation Checkbox
Binding Register Select which register for the operation Register Selector
Operation Mode Select which operation to be performed. Please refer to Register Operation Setting. Register Operation Setting
Enable Callback Function Continous pressing (longer than 1.5 seconds) repeatedly triggers a Blockly callback funtion Checkbox
Behavior Programming Blockly Editor Blockly Editor

Right-Click Menu

Widget-Specific Actions

Property Description Operation
Preview Press Animation Preview the widget action when pressed
Link to User Manual… Connect to the education video and play it
]]>