Link Search Menu Expand Document
ADE Reference Manual

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 Educational Video Link to IOT’s website for Educational Video  

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 Educational Video… Connect to the education video and play it