Graphics Elements

From Smart LCD

Tachometer - Hand Mode (HND)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Mode options are Hand / Donut Mix Color / Donut Discolor / Icon Rotation / Icon Open / Pseudo Icon Rotation / Pseudo Icon Open
Direction options Clockwise / CounterClockwise
Start Angle is the angular location of the min value
Sweep Angle is the effective angular area that relatively begin form the Start Angle for sensing 

Background
Marking & Label Enable can generate the meter face details
Base Color, Label, Minor Marking can be enable and define at here
Label Min Value and Label Max Value is for meter face display only. 
It show beside the Major Marking

Foreground
Hands Type options are Line / Quadrangle / Trangle
Hands Color is for the pointer hand color
Center Mark Color is color at the center of the meter

Rotation Center Point
Rotation Center options are Auto / Advance
Rotation Center X, Y define the the rotation reference point

Content
VP Resource is the type of VP to be used
VP Address is the VP for the operation
Min Value is the bottom value that can be shown
(value smaller than this value will stop at the min location)
Max Value is the top value that can be shown 
(value larger than this value will stop at the max location)

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. 
VP value will set to 1 as enable at power-on. It can be disabled (hidden) by a zero value
Base Color VP, Hands Color VP, Center Mark Color VP, Major Marking Color VP, Minor Marking Color VP and Label Color VP are none by default (using the above selected color)
Select a VP for real time base color adjustment
VP value will copy the above selected color at power-on
Hands Type VP, is none by default (using the above selected color)
Select a VP for real time base color adjustment
VP value will copy the above selected color at power-on

Preview
Preview Value is only for displaying text in SGTools environment

Note

*1. Radius and Angle Definition

Tachometer - (Pseudo) Icon Mode (TCM)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Mode options are Hand / Donut Mix Color / Donut Discolor / Icon Rotation / Icon Open / Pseudo Icon Rotation / Pseudo Icon Open
Direction options Clockwise / CounterClockwise
Start Angle is the angular location of the min value
Sweep Angle is the effective angular area that relatively begin form the Start Angle for sensing

Foreground
Icon select an icon to be rotate
Transparent = False by default
True: enable transparent effect to show the IMG_ICO
Auto: enable transparent effect and pick a high possible color as Transparent color
Transparent Color assign one color in the IMG_ICO that show as transparent
suggested to use pure color for transparent effect (e.g. pure-magenta pure-black, pure-white, etc…)
Icon Center options are Auto / Advance
Icon Center X, Y define the the icon rotation reference

Rotation Center Point
Rotation Center could be Icon Center (auto select) or by manual
Rotation Center X, Y define the the rotation reference point

Content
VP Resource is the type of VP to be used
VP Address is the VP for the operation
Min Value is the bottom value that can be shown
(value smaller than this value will hide the tachometer)
Max Value is the top value that can be shown 
(value bigger than this value will hide the tachometer)

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. 
VP value will set to 1 as enable at power-on. It can be disabled (hidden) by a zero value
Transparent color VP is none by default (using the above selected color)
Select a VP for real time transparent color change. VP value will copy the above selected color at power-on.
Transparent VP is none by default (using the above option)
Select a VP for real time transparent background control. VP value will copy the above transparent config at power-on.
It can be enabled by a non-zero value or disable by a zero
Icon VP is none by default (using the above selected font)
Select a VP for real time IMG_ICON change. VP value will copy the above IMG_ICO ID at power-on.

Preview
Preview Value is only for displaying text in SGTools environment

Note

*1 Pseudo Icon Mode is similar to Icon Mode. It shows the Icon that pre-combined with background.

*2 Pseudo Icon Mode is similar to Icon Open Mode. It shows the Icon angle section that pre-combined with background

*3 Tachometer - Pseudo Icon Mode operation idea

Mode=Pseudo Icon Rotation; Transparent=True; Transparent Color=000000;

Direction=Clockwise; Start Angle=225; Sweep Angle=270; Min Value=0; Max Value=17;

Background Image Foreground Image Angles

Display result

VP value = 00~08

VP value = 09~17

*4 Tachometer - Pseudo Icon Open Mode operation idea

Mode=Pseudo Icon Open; Transparent=True; Transparent Color=000000;

Direction=Clockwise; Start Angle=270; Sweep Angle=180; Min Value=0; Max Value=14;

Background Image Foreground Image Angles

Display result

VP value = 00~04

VP value = 05~09

VP value = 10~14

Tachometer - Donut Mode (R16, R32)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Mode options are Hand / Donut Mix Color / Donut Discolor / Icon Rotation / Icon Open / Pseudo Icon Rotation / Pseudo Icon Open
Direction options Clockwise / CounterClockwise
Start Angle is the angular location of the min value
Sweep Angle is the effective angular area that relatively begin form the Start Angle for sensing

Background
Show Base Color show the Donut shape background even at min value
(in Mix Color Mode, Background color is the Gap color)
Base Color is the Donut background color
(Mix Color Mode, Background color is the Gap color)
Internal Radius define the middle hole of the Donut
Edge Width can selected as an outline over the Donut

Foreground
Step Width is for adjust display Levels color size
Gap Width is for adjust the display Levels color gap which show Base Color
No.Of Levels
2 for Donut Mix Color Mode show a gradient mix of two color
3-26 for Donut Discolor Mode change the whole donut color w.r.t. VP value

Rotation Center
Rotation Center could be Icon Center (auto select) or by manual
Rotation Center X, Rotation Center Y define the is the rotation reference point

Content
VP Resource is the type of VP hold the content (VP_N16 by default)
VP Address is the VP that hold the value
Min Value is the minimum tachometer value to be show (value smaller than this value will hide the tachometer)
Max Value is the maximum tachometer value to be show (value bigger than this value will hide the tachometer) 

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control.
VP value will set to 1 as enable at power-on. It can be disabled (hidden) by a zero value.
Color Array VP is for changing the color for visual effect
VP value will copy the above selected Color at power-on.

Preview
Preview Value is only for displaying text in SGTools environment

Note

*1. Definition of Radius and Angle *2. example: Direction = Clockwise; Start Angle = 255°; Sweep Angle = 270

*3. Donut Mix Color Mode example

*4. Donut Discolor Mode example

Progress Bar (B16, B32)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Mode options are
Color Mode, longer color bar could be show with a no. close to max (bar color could also be a mix of Forecolor1 & 2)
Icon Mode, Icon will move to the far end with a no. close to max
Fill Icon Mode, bar color could be replaced by an IMG_ICO
Direction options are
L->R / R->L / Up->Dn / Dn->Up
Forecolor1 Progress start color
Forecolor2 Progress end color
Transparent
False by default
True: enable transparent effect to show the IMG_ICO
Gap/Transparent Color function depends on mode selected
In Fill Color Mode, the selected color is gap color in the Progress Bar
In Icon Mode with Transparent Enabled, the selected color in the IMG_ICO will show as transparent.
(it is suggested to use pure color for transparent effect)(e.g. pure-magenta pure-black, pure-white, etc…)
Gap Width is in pixel for gap in the bar
Step Width is in pixel for the distance between gap

Content
VP Resource is the type of VP hold the content (VP_N16 by default)
VP Address is the VP that hold the value
Icon for Move Icon mode or Fill Icon mode
Min Value is the minimum Progress Bar value
Max Value is the maximum Progress Bar value

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. VP value will set to 1 as enable at power-on. It can be disabled (hidden) by a zero value
Foreground color1 VP is none by default (using the above selected color)
Select a VP for real time color change
VP value will copy the above selected color at power-on.
Foreground color2 VP is none by default (using the above selected color)
Select a VP for real time color change
VP value will copy the above selected color at power-on.
Transparent color VP is none by default (using the above selected color)
Select a VP for real time transparent color change
VP value will copy the above selected color at power-on.
Transparent VP is none by default (using the above option)
Select a VP for real time transparent background control VP value will copy the above transparent config at power-on. It can be enabled by a non-zero value or disable by a zero
ICON VP is none by default (using the above selected font)
Select a VP for real time change the IMG_ICO ID
VP value will copy the above ID at power-on.

Preview
Preview Value is only for displaying text in SGTools environment

note

*1. Progress Bar Operating Mode (Dn-->Up) Idea

Color Mode

(100%, 60%)

Fill Icon Mode

(100%, 60%)

Icon Mode

(100%, 60%, 0%)

Graph Element (G16)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Foreground Color is the color for of graph

Format
Plot Type options are
Dot, plot data as dot;
Line, plot data and link with line
Area, fill betwen plot and X-axis
Top Fill, fill between plot and Max Value
Bottom Fill, fill between plot and Min Value
Dot Width options are 1 / 2 / 3 / 4 pixels
(may resize the element width)
Dot Height options are 1 / 2 / 3 / 4 pixels
(may resize the element height)

Content
VP Graph select a VP_G16 array to be port on screen
Min Value is minimal graph potting value
Max Value is maximum graph potting value

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. VP value will set to 1 as enable at power-on. It can be disabled (hidden) by a zero value
Foreground color VP is none by default (using the above selected color)
Select a VP for real time color change
VP value will copy the above selected color at power-on.
Ymin VP is none by default (using the above selected color)
Select a VP for real time graph Min Value for Y scale zoom or pan
VP value will copy the above selected color at power-on.
Ymax VP is none by default (using the above selected color)
Select a VP for real time graph Max Value for Y scale zoom or pan
VP value will copy the above selected color at power-on.
Rule1 VP is none by default
Select a VP for real time horizontal line to be show in graph
Rule2 VP is none by default
Select a VP for another real time horizontal line to be show in graph

Bitmap Element (BP1)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Foreground Color(1) is the color for "1" bits
Background Color(0) is the color for "0" bits
Show Type options are
Show all (default) show all Foreground and Background Color
Show Foreground only show the "1" bits' color
Show Background only show the "0" bits' color

Content
VP Bitmap select a VP_BP1 array for the 1bpp graph data

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. VP value will set to 1 as enable at power-on. It can be disabled (hidden) by a zero value
Foreground color VP is none by default (using the above selected color)
Select a VP for real time color change
VP value will copy the above selected color at power-on.
Background color VP is none by default (using the above selected color)
Select a VP for real time color change
VP value will copy the above selected color at power-on.
Show Type VP is none by default (using the Show Type)
Select a VP for real time Show Type change
0(Show all) / 1(Show Foreground only) / 2(Show Background only)
VP value will copy the above selected Show Type at power-on

Round Clock (CLK_R)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Mode options are Hand /  Icon Rotation
Transparent False for showing clock face background color
Background Color clock face color
Face True for generate clock face and markings

Face
Line Color, Line Width are clock outer circle color and line width
Major Marking Color, Major Marking Width are clock hour mark color and line width
Minor Marking Color, Minor Marking Width are clock minutes mark color and line width
Font, Font Color are clock mark numbers font and color 

Hands
Hands Type options are Line / Quadrangle / Trangle
Hour Hand Color, Minute Hand Color, Second Hand Color, Center Mark Color are color of hands and the color of its center 

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. VP value will set to 1 as enable at power-on. It can be disabled (hidden) by a zero value
Transparent VP is none by default (using the above selected)
Select a VP for real time Transparent change (1=true, 0=false)
VP value will copy the above selected at power-on.
Hands Type is none by default (using the above selected)
Select a VP for real time hand config change
(0=Line, 1=Quadrangle, 2=TrangleHands)
VP value will copy the above selected at power-on.
Color VPs, is none by default (using the above selected color)
Select a VP for real time color change
VP value will copy the above selected at power-on.

QR Code Element (QRC)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Style
Scale define the dot size of the QR code

Format
Size define matrix size and the capacity of the QR code


Content
VP Resource QR code need string data to be generate, VP_N16, VP_STR can be used
VP Address is the VP that hold the string

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. VP value will set to 1 as enable at power-on. 
It can be disabled (hidden) by a zero value

Preview
Preview Value is only for displaying text in SGTools environment

Draw Pad (DPD)

General
Show the basic information of the element
X and Y is the location of element on screen, reference point is element top-left corner
Width and Height are in pixels
top-left corner of the screen = 0,0

Content
VP Resource Draw Pad need a series of VP_N16 to draw
VP Address is the first VP that hold the draw code

Properties Control (advance feature)
Enable VP is none by default (element operate normally)
Select a VP for real time element control. VP value will set to 1 as enable at power-on. 
It can be disabled (hidden) by a zero value
Retrieved from "https://topway.app/sld_doc/en/index.php?title=Graphics_Elements&oldid=597"