MPLAB® Harmony Graphics Suite > Designer > Microchip Aria Designer > Properties Editor Panel > Object Properties
MPLAB® Harmony Graphics Suite
Contents | Home
Previous | Up | Next
Documentation Feedback
Microchip Support
Object Properties
Object Properties and Event Actions

Each widget has a structured tree of properties, visible under the MPLAB Harmony Configurator window on the right of the standard window setup within MPLAB X IDE. Most widget properties have a Related Event action that can be use in an event or macro to change or set a property from the application. 

Each widget has 3-4 property sets: 

Editor – Controls the behavior of layers and widgets under the MPLAB Harmony Graphics Composer Suite Editor.  

Property Name 
Type 
Description 
Related Event Actions 
Locked 
Boolean 
Locks the object (widget), preventing changes by the designer. Only affects the object (widget) in the editor. 
N/A 
Hidden 
Boolean 
Hides the widget and its children in the designer window. Only affects the appearance of the widget in the editor. 
N/A 
Active 
Boolean 
For layers only. Sets the layer as active. Any objects (widgets) added to the screen will be added to this layer. 
N/A 
Locked to Screen Size 
Boolean 
For layers only. Locks the layer size to the size of the display’s screen. 
N/A 

 

Widget – Controls the behavior of screens, layers, and widgets on the display.

Property Name 
Type 
Description 
Related Event Actions 
Name 
String 
Editable name for each object. By default, widgets are named NameWidget1, …,NameWidgetN. For example: ButtonWidget1, ButtonWidget2, … . 
N/A 
Position 
[X,Y] Pair of Integers 
Location on the layer of the upper left corner of the widget or the location on the display of the upper left corner of the layer. Measured in display pixels. X is measured from left-to-right and Y is measured from up-to-down from the upper left corner of the parent object (typically a Layer or Panel). 
Adjust Position, Set X Position, Set Y Position 
Size 
[X,Y] Pair of Integers 
X: Width, Y: Height of object, in display pixels. 
Adjust Size, Set Size, Set Width, Set Height 
Enabled 
Boolean 
Is the object enabled? Disabled objects are not built into the display’s firmware. 
Set Enabled 
Visible 
Boolean 
Is the object visible by default? Object visibility can be manipulated in firmware using laWidget_GetVisible and laWidget_SetVisible. 
Set Visible 
Border 
Widget Border 
Choices are: { None | Line | Bevel }. 
Set Border Type 
Margin 
Integer 
Four integers ([Left,Top,Right,Bottom]) defining the widget’s margins on the display, in display pixels. 
Set Margins 
Scheme 
- 
Color scheme assigned to the layer or widget. Blank implies the default color scheme. 
Set Scheme 
Background Type 
- 
Sets the background of the layer or widget. Choices are { None | Fill | Cache }. In MPLAB Harmony v2.03, this type was Boolean. Now, Off = None, On = Fill. With Fill selected, the widget's background is one solid color. With Cache selected, a copy (cache) of the framebuffer is created before the widget is drawn and this cache is used to fill the background of the widget. This supports transparent widgets in front of complex widgets, such as JPEG images. Instead of rerendering the JPEG image, it is just drawn from the cache. 
Set Draw Background 
Alpha Blending 
Boolean 
Is alpha blending enabled for this layer or widget and all of its children? If enabled, specify the amount of alpha blending as an 8-bit integer. Zero makes the object invisible, whereas 255 makes the background invisible. 
N/A 

 

Widget Advanced – Advanced control of layers and widgets

Optimization Sub-Property Name 
Type 
Description 
Related Event Actions 
Draw Once 
Boolean 
Indicates that the widget should draw once per screen Show Event. All other attempts to invalidate or paint the widget will be rejected. 
N/A 
Force Opaque 
Boolean 
Provides a hint to the renderer that the entire area for this widget is opaque. Useful for widgets that may use something like an opaque image to fill the entire widget rectangle despite having fill mode set to None. This can help reduce unnecessary drawing. 
N/A 
Local Redraw 
Boolean 
Provides a “hint” to the widget’s renderer that the widget is responsible for removing old pixel data. This can avoid unnecessary redrawing. 
N/A 
Important! 
Use Local Redraw only if you know what you’re doing! 

 

Widget Name (e.g., Button Check Box, Circle, etc.) – Optional properties tied to each widget. See Dedicated Widget Properties and Event Actions. 

 

Events – Associates widget events with event call-backs. For example, you can enable and specify a button pressed event and button release event for the Button widget. 

For each event you specify:

  • Enabled/Disabled Check box – To enable or disable (default) the event.
  • Event Callback – Selected from the Event Editor Action List.

There are additional Event actions that do not correspond to any specific property:

  • Set Parent – Set the parent of the object, including no parent.
Dedicated Widget Properties and Event Actions

Arc Widget

Property Name 
Type 
Description 
Related Event Actions 
Radius 
Integer 
The outside radius of the arc. 
Set Radius 
Start Angle 
Integer 
The starting angle of the arc in degrees. 
Set Start Angle 
Center Angle 
Integer 
The center angle of the arc in degrees. A positive angle draws the arc counter-clockwise from the start angle. A negative angle draws clockwise. 
Set Center Angle 
Thickness 
Integer 
The thickness of the arc fill, measured from the radius to center. (radius – thickness) determines the inside radius. 
Set Thickness 
Round Edge 
Boolean 
Draws round arc edge. 
Set Round Edge 

 

Bar Graph Widget

Property Name 
Type 
Description 
Related Event Actions 
Stacked 
Boolean 
Stacks the bars for the entries in a category 
Set Stacked Bars 
Tick Length 
Integer 
The length, in pixels, of the ticks on each axis 
Set Tick Length 
Fill Graph Area 
Boolean 
Fills the graph area with scheme base color 
Fill Graph Area 
Value Axis Configuration

  • Maximum Value
  • Minimum Value
  • Tick Interval
  • Subtick Interval
  • Show Ticks
  • Tick Position
  • Show Tick Labels
  • Show Subticks
  • Subtick Position
  • Show Gridlines
  • String Set

 

Integer
Integer
Integer
Integer
Boolean
Enum
Boolean
Boolean
Enum
Boolean
String Asset
 
Configures the value (Y) axis
The maximum value of the axis
The minimum value of the axis
The intervals between major ticks
The interval between minor ticks
Show/Hide the major ticks
Position of major ticks on the value axis. Choices are: {Inside | Center | Outside}
Show/Hide the tick labels
Show/Hide the minor ticks
Position of minor ticks on the value axis. Choices are: {Inside | Center | Outside}
Show/Hide the gridlines
The string asset containing the numeric characters for the tick labels. The asset must contain the characters for numbers 0 to 9. 
Set Max Value
Set Min Value
Set Tick Interval
Set Subtick Interval
Show Value Axis Ticks
Set Value Axis Ticks Position
Show Value Axis Labels
Show Value Axis Subticks
Set Value Axis Subticks Position
Show Value Axis Gridlines
Set Labels String 
Category Axis Configuration

  • Show Tick
  • Show Category Labels
  • Tick Position

 


Boolean
Boolean
Enum 

Configures the category (X) axis
Show/Hide the ticks
Show/Hide the category labels
Position of the ticks on the category axis. Choices are: {Inside | Center | Outside} 


Show Category Axis Ticks
Show Category Axis Labels
Set Category Axis Ticks Position 
Category Configuration Dialog 
(See Description) 
The Category Configuration Dialog lets users add categories to the line graph. The following properties can be set:

  • Label – String Asset. The label to show for each category

 
None 
Data Configuration Dialog 
(See Description) 
The Data Configuration Dialog lets users add and configure data series to the line graph. The following properties can be set:

  • Scheme – Scheme. The color scheme of the data series
  • Category Values – Integer. Values in series for each category

 
None 

 

Button

Property Name 
Type 
Description 
Related Event Actions 
Toggleable 
Boolean 
Is button toggle enabled? 
Set Toggleable 
Pressed 
Boolean 
If Toggleable is enabled, provide default state of the button. This can be used to see the colors of an asserted button. 
Set Press State 
Text String 
- 
Select widget’s text string from the Select String Dialog. 
Set Text 
Alignment:

  • Horizontal
  • Vertical

 
- 
Text string alignment within the button object.
Horizontal alignment. Choices are: { Left | Center | Right }.
Vertical alignment. Choices are: { Top | Middle | Bottom }. 

Set Horizontal Alignment
Set Vertical Alignment 
Pressed Image 
- 
Select image used for pressed state. Default: no image. 
Set Pressed Image 
Released Image 
- 
Select image used for pressed state. Default: no image. 
Set Released Image 
Image Position 
- 
Position of image relative to button text. Choices are: { LeftOf | Above | RightOf | Below | Bottom }. 
Set Image Position 
Pressed Offset 
Integer 
Offset of button contents when pressed. In Pixels.
The X and Y position of the button contents is offset by this amount. 
Set Pressed Offset 

 

Check Box

Property Name 
Type 
Description 
Related Event Actions 
Text String 
- 
Select widget’s text string from the Select String Dialog. 
Set Text 
Alignment:

  • Horizontal
  • Vertical

 
- 
Text string alignment within the button object.
Horizontal alignment. Choices are: { Left | Center | Right }.
Vertical alignment. Choices are: { Top | Middle | Bottom }. 

Set Horizontal Alignment
Set Vertical Alignment 
Checked 
Boolean 
Default state of the check box. 
Set Check State 
Unchecked Image 
- 
Select image used for widget’s unchecked state. Default: no image. 
Set Unchecked Image 
Checked Image 
- 
Select image used for the widget’s checked state. Default: no image. 
Set Checked Image 
Image Position 
- 
Position of image relative to check box text. Choices are: : { LeftOf | Above | RightOf | Below | Bottom }. 
Set Image Position 
Image Margin 
Integer 
Space between image and text. In Pixels. 
Set Image Margin 

 

Circle

Property Name 
Type 
Description 
Related Event Actions 
X 
Integer 
X offset of circle’s center, from widget’s upper left hand corner, in pixels. 
N/A 
Y 
Integer 
Y offset of circle’s center, from widget’s upper left hand corner, in pixels. 
N/A 
Radius 
Integer 
Circle’s radius, in pixels. 
Set Radius 
Thickness 
Integer 
Thickness of circle, in pixels, from the outside edge inwards 
N/A 
Filled 
Boolean 
Specifies if the center area of the circle is filled with the palette's background color 
N/A 

 

Circular Gauge Widget

Property Name 
Type 
Description 
Related Event Actions 
Radius 
Integer 
The outside radius of circular gauge. 
Set Radius 
Start Angle 
Integer 
The starting angle of the circular gauge in degrees. 
Set Start Angle 
Center Angle 
Integer 
The canter angle of the circular gauge in degrees. A positive value draws the gauge counter-clockwise. Clockwise if negative. 
Set Center Angle 
Start Value 
Integer 
The start value of the circular gauge. 
Set Start Value 
End Value 
Integer 
The end value of the circular gauge. 
Set End Value 
Value 
Integer 
The value of the circular gauge. 
Set Value 
String Set 
String Asset 
The string asset containing the numeric characters for the tick labels. The asset must contain the characters for numbers 0 to 9. 
- 
Major Ticks Configuration

  • Ticks Visible
  • Tick Length
  • Tick Value
  • Tick Labels Visible

 

Boolean
Integer
Integer
Boolean 
Configures the major ticks.
Shows/Hides the major ticks.
The length of ticks in pixels.
The interval between ticks.
Shows/Hides the major tick labels. 

Show/Hide Ticks
Set Tick Length
Set Tick Value
Show/Hide Tick Labels 
Hand Configuration

  • Hand Visible
  • Hand Radius
  • Center Circle Visible
  • Center Circle Radius
  • Center Circle Thickness

 

Boolean
Integer
Integer
Integer
Integer 
Configures the gauge hand/needle.
Shows/Hides the gauge hand/needle.
Sets the length of the hand in pixels
Shows/Hides the hand center circle.
Sets the radius of the center circle in pixels
Sets the thickness of the center circle in pixels. 

Show/Hide Hand
Set Hand Radius/Length
Show/Hide Center Circle
Set Center Circle Radius
Set Center Circle Thickness 
Advanced Configuration 
- 
Additional widget configuration options for adding minor ticks, labels and arcs. 
- 
Minor Ticks Configuration Dialog 
(See Description) 
The Minor Ticks configuration lets users add minor ticks to the widget. The following properties can be set:

  • Start Value – Integer. The value where the first tick starts
  • End Value – Integer. The value where the last tick ends
  • Interval – Integer. The interval between ticks
  • Radius – The radius in pixels where the ticks will be drawn from
  • Length – The length of the ticks in pixels, drawn from the radius towards the center
  • Scheme – The color scheme for the ticks

 



None

 
Minor Tick Labels Configuration Dialog 
(See Description) 
The Minor Ticks configuration lets users add minor tick labels to the widget. The following properties can be set: 

  • Start Value – Integer. The value where the first tick label is drawn
  • End Value – Integer. The value where the last tick ends
  • Interval – Integer. The interval between ticks
  • Radius – Integer. The radius, in pixels, where the tick labels will be drawn from
  • Position – Enum, choices are {Outside | Inside}. Position of the label relative to the radius
  • Scheme – The color scheme for the ticks

 



None

 
Arcs Configuration Dialog 
(See Description) 
The Arcs configuration lets users draw arcs in the gauge widget. The arcs can be used to colorize regions or range of values in the gauge. The following properties can be set for each arc: 

  • Type – Enum, choices are {VALUE | ANGLE}. A value type arc is drawn relative to the values in the gauge. An angle type arc is draw based on the angles and is not affected by the values in the gauge.
  • Start – Integer. The start value or angle of the arc
  • End – Integer. The start value or angle of the arc
  • Thickness – Integer. The thickness of the arc in pixels, filled inward from the radius towards the center
  • Radius – Integer. The radius of the arc in pixels
  • Scheme. The color scheme of the arc

 




None


 

 

Circular Slider Widget

Property Name 
Type 
Description 
Related Event Actions 
Radius 
Integer 
The outside radius of circular slider. 
Set Radius 
Start Angle 
Integer 
The start angle of the circular slider, in degrees. 
Set Start Angle 
Start value 
Integer 
The start value of the circular slider. 
Set Start Value 
End Value 
Integer 
The end value of the circular slider. 
Set End Value 
Value 
Integer 
The value of the circular slider. 
Set Value 
Border Circle Configuration

  • Show Outside Circle
  • Outside Circle Thickness
  • Show Inside Circle
  • Inner Circle Thickness

 

Boolean
Integer
Boolean
Integer 
Configures the border circle.
Shows/Hides the outside circle border.
The thickness of the outside circle border in pixels.
Shows/Hides the inside circle border.
The thickness of the inside circle border in pixels. 
Show/Hide Outside Border
Set Outside Border Thickness
Show/Hide Inside Border
Set Inside Border Thickness
 
Active Area Configuration 

  • Fill Active Slider Area
  • Round Edges
  • Active Slider Area Thickness
  • Inner Circle Thickness

 

Boolean
Boolean
Integer
Integer 
Configures the slider active area.
Fills the active slider area.
Draws a round edge for the active area.
The thickness of the slider active area in pixels.
The thickness of the inside circle border in pixels. 
Show/Hide Active Arc Area
Set Round Edges
Set Active Arc Area Thickness
Show/Hide Inactive Arc Area
 
Button Configuration 

  • Show Circular Button
  • Sticky Button
  • Touch on Button Only
  • Circular Button Radius
  • Circular Button Thickness

 

Boolean
Boolean
Boolean
Integer
Integer 
Configures the slider button.
Shows/Hides the circular slider button.
If set, the button sticks when it reaches the start/end values.
If set, the widget responds to touches within the button area only.
The radius of the circular button in pixels.
The thickness of the of the circular button border in pixels. 
Show/Hide Circular Button
Set Sticky Button
None
Set Circular Button Radius
Set Circular Button Thickness 

 

Draw Surface – No additional properties. 

 

Gradient  

Property Name 
Type 
Description 
Related Event Actions 
Direction 
- 
Gradient draw direction. Choices are: { Right | Down | Left | Up }. 
Set Direction 

 

Group Box

Property Name 
Type 
Description 
Related Event Actions 
Text String 
- 
Select widget’s text string from the Select String Dialog. 
Set Text 
Alignment 
- 
Text string alignment within the widget. Choices are: { Left|Center|Right }. 
Set Alignment 

 

Image Sequence

Property Name 
Type 
Description 
Related Event Actions 
Sequence Configuration Dialog 
- 
Specify image sequence by using the Image Sequence Configuration Dialog window. 
Set Entry Image, Set Entry Horizontal Alignment, Set Entry Vertical Alignment, Set Entry Duration, Set Image Count 
Starting Image 
Integer 
Selects the first image to be shown. 
Set Active Image 
Play By Default 
Boolean 
Will image sequence play automatically? 
N/A 
Repeat 
Boolean 
Should the image sequence repeat? 
Set Repeat
Additional related event actions: , Show Next, Start Playing, Stop Playing. 

 

Image Widget

Property Name 
Type 
Description 
Related Event Actions 
Image 
- 
Select image used. 
Set Image 
Alignment:

  • Horizontal
  • Vertical

 
- 
Image alignment within the image object.
Horizontal alignment. Choices are: { Left | Center | Right }.
Vertical alignment. Choices are: { Top | Middle | Bottom }. 

Set Horizontal Alignment
Set Vertical Alignment 

 

Image Plus Widget

Property Name 
Type 
Description 
Related Event Actions 
Image 
- 
Select Image used 
Set Image 
Resize To Fit 
Boolean 
Resize the image to fill the size of the widget area 
Toggles option to best fit the image to the widget area 
Interactive 
Boolean 
Makes the widget interactive, allowing the image to be translated, stretched and zoomed 
Toggles option to permit two-finger gestures to interact with the widget 

 

Key Pad

Property Name 
Type 
Description 
Related Event Actions 
Row Count 
Integer 
Number of key pad rows. 
None. 
Column Count 
Integer 
Number of key pad columns. 
None. 
Key Pad Configuration Dialog
 
(see Description) 
The Key Pad dialog window has the following: 

  • Width – Integer. Width of each key, in pixels.
  • Height – Integer. Height of each key, in pixels.
  • Rows – Integer. Number of key rows. A duplicate of Row Count.
  • Columns – Integer. Number of key columns. A duplicate of Column Count.

 

None.
None.
None.
None. 
- 
- 
Selecting one of the keys on the key pad diagram displays the Cell Properties for that key:

  • Enabled – Boolean. Disabled cells (keys) are made invisible.
  • Text String – Select key’s text string from the Select String Dialog.
  • Pressed Image – Select image used for pressed state. Default: no image.
  • Released Image – Select image used for released state. Default: no image.
  • Image Position – Position of image relative to key text. Choices are: { LeftOf | Above | RightOf | Below | Behind }.
  • Image Margin – Integer. Space between image and text. In Pixels.
  • Draw Background – Boolean. Controls whether the key should fill its background rectangle.
  • Editor Action – Select the generic editor action that fires when the key is clicked. Choices are: { None | Accept | Append |
  • Editor Value String

Other Key Event Actions: 


Set Key Enabled
Set Key Text
Set Key Pressed Image
Set Key Released Image
Set Key Image position

Set Key Image Margin
None.

Set Key Action
Set Key Value
Set Key Background Type 

 

Label

Property Name 
Type 
Description 
Related Event Actions 
Text String 
- 
Select widget’s text string from the Select String Dialog. 
Set Text 
Alignment:

  • Horizontal
  • Vertical

 
- 
Text string alignment within the widget.
Horizontal alignment. Choices are: { Left | Center | Right }.
Vertical alignment. Choices are: { Top | Middle | Bottom }. 

Set Horizontal Alignment
Set Vertical Alignment 
Custom Spacing 
Boolean 
Enables custom spacing between lines 
N/A 
Line Spacing (pixels) 
Integer 
A positive value will adjust the spacing between lines 
N/A 

 

Line

Property Name 
Type 
Description 
Related Event Actions 
Start X 
Integer 
X start of line, in pixels, from upper left hand corner of the widget. 
Set Start Point Position 
Start Y 
Integer 
Y start of line, in pixels, from upper left hand corner of the widget. 
Set Start Point Position 
End X 
Integer 
X end of line, in pixels, from upper left hand corner of the widget. 
Set End Point Position. 
End Y 
Integer 
Y end of line, in pixels, from upper left hand corner of the widget. 
Set End Point Position. 

 

Line Graph Widget

Property Name 
Type 
Description 
Related Event Actions 
Stacked 
Boolean 
Stacks the values of the entries in a category 
Set Stacked Points 
Tick Length 
Integer 
The length of the ticks on each axis 
Set Tick Length 
Fill Graph Area 
Boolean 
Fills the graph area with scheme base color 
Fill Graph Area 
Fill Series Area 
Boolean 
Fills the series area with series scheme base color 
Fill Series Area 
Value Axis Configuration

  • Maximum Value
  • Minimum Value
  • Tick Interval
  • Subtick Interval
  • Show Ticks
  • Tick Position
  • Show Tick Labels
  • Show Subticks
  • Subtick Position
  • Show Gridlines
  • String Set

 


Integer
Integer
Integer
Integer
Boolean
Enum
Boolean
Boolean
Enum
Boolean
String Asset
 

Configures the value (Y) axis
The maximum value of the axis.
The minimum value of the axis.
The intervals between major ticks.
The interval between minor ticks.
Show/Hide the major ticks.
Position of major ticks on the value axis. Choices are: {Inside | Center | Outside}.
Show/Hide the tick labels.
Show/Hide the minor ticks.
Position of minor ticks on the value axis. Choices are: {Inside | Center | Outside}.
Show/Hide the gridlines.
The string asset containing the numeric characters for the tick labels. The asset must contain the characters for numbers 0 to 9. 
Set Max Value
Set Min Value
Set Tick Interval
Set Subtick Interval
Show Value Axis Ticks
Set Value Axis Ticks Position
Show Value Axis Labels
Show Value Axis Subticks
Set Value Axis Subticks Position
Show Value Axis Gridlines
Set Labels String 
Category Axis Configuration

  • Show Tick
  • Show Category Labels
  • Tick Position

 


Boolean
Boolean
Enum 

Configures the category (X) axis
Show/Hide the ticks
Show/Hide the category labels
Position of the ticks on the category axis. Choices are: {Inside | Center | Outside} 
Show Category Axis Ticks
Show Category Axis Labels
Set Category Axis Ticks Position 
Category Configuration Dialog 
(See Description) 
The Category Configuration Dialog lets users add categories to the line graph. The following properties can be set:

  • Label – String Asset. The label to show for each category

 
None 
Data Configuration Dialog 
(See Description) 
The Data Configuration Dialog lets users add and configure data series to the line graph. The following properties can be set:

  • Scheme – Scheme. The color scheme of the data series
  • Point Type – Enum. The point indicator to use for the series. Choices are: {None | Circle | Square}
  • Fill Points – Boolean. Fills the points with series scheme foreground color
  • Draw Lines – Boolean. Draws lines between points in the series using series scheme foreground color
  • Category Values – Integer. Values in series for each category

 
None 

 

List

Property Name 
Type 
Description 
Related Event Actions 
Selection Mode 
- 
Select list selection mode. Choices are: {Single|Multiple|Contiguous}. 
Set Selection Mode 
Allow Empty Selection 
Boolean 
Is a list selection allowed to be empty? 
Set Allow Empty Selection 
Alignment 
- 
Horizontal text alignment. Choices are: { Left | Center | Right }. 
Set Item Alignment 
Icon Position 
- 
Position of list icons relative to list text. Choices are: { LeftOf | RightOf }. 
Set Icon Position 
Icon Margin 
- 
Space between icon and text, in pixels. 
Set Icon Margin 
List Configuration Dialog 
- 
Defines the string and icon image for each entry in the list. 
Set Item Icon, Set Item Icon (actually sets item text).
Additional Related Event Actions: Deselect All Items, Insert Item, Remove All Items, Remove Item, Select All Items, Set Item Selected, Toggle Item Select(ed). 

 

List Wheel

Property Name 
Type 
Description 
Related Event Actions 
Alignment 
- 
Sets horizontal text alignment. Choices are: { Left | Center | Right }. 
Set Item Alignment 
Icon Position 
- 
Position of icons relative to text. Choices are: { LeftOf | RightOf }. 
Set Icon Position 
Icon Margin 
Integer 
Sets the space between icon and text. In pixels. 
Set Icon Margin 
Selected Index 
Integer 
Selects the default list item. 
Set Selected Index 
List Configuration Dialog 
- 
Defines the image/text for each entry in the list. 
Set Item Icon, Set Item Icon (actually sets item text)
Additional Related Event Actions: Append Item, Insert Item, Remove All Items, Remove Item, Select Next Item, Select Previous Item. 

 

Panel – No additional properties. 

 

Pie Chart Widget  

Property Name 
Type 
Description 
Related Event Actions 
Start Angle 
Integer 
The starting angle of the pie chart in degrees. 
Set Start Angle 
Center Angle 
Integer 
The center angle of the pie chart in degrees. A positive value draws the chart counter-clockwise. Clockwise if negative. 
Set Center Angle 
Labels Visible 
Boolean 
Shows/Hides the labels for each data 
Show/Hide Labels 
Labels Offset 
Integer 
The position of the labels relative to the center of the pie chart, in pixels. 
Set Label Offset 
String Set 
String Asset 
The string asset containing the numeric characters for the tick labels. The asset must contain the characters for numbers 0 to 9. 
Set Label String ID 
Data Configuration Dialog 
(See Description) 
The Data Configuration Dialog lets users add data entries to the pie chart. The following properties can be set: 

  • Value – Integer. The value of the entry
  • Radius – Integer. The radius, in pixels, of the pie for the entry
  • Offset – Integer. The offset, in pixels, of the pie from the center
  • Scheme – The color scheme for the ticks

 



None

 

 

Progress Bar

Property Name 
Type 
Description 
Related Event Actions 
Direction 
- 
Direction of progress bar. Choices are: { Right | Down | Left | Up }. 
Set Direction 
Value 
- 
Default value of the progress bar. The primitives laProgressBarWidget_GetValue and laProgressBarWidget_GetValue can be used to manipulate the widget’s value during run time. 
Set Value 

 

Radial Menu Widget

Property Name 
Type 
Description 
Related Event actions 
Ellipse Visible 
Boolean 
Show the elliptical track of the widget 
Elliptical track gets draw in Harmony Composer simulation and at runtime. 
Highlight Prominent 
Boolean 
Highlights the prominent item when the widget rotation has completed its reset to the static, selectable position by drawing a rectangle behind the prominent item. 
- 
Ellipse Type 
Enum 
Selects the type of elliptical track
Default – an elliptical track that best fits the widget area based on the size of the tallest and widest images with the size scale settings factored-in.
Orbital – a “flatter” elliptical track that is best used with the Theta setting for a tilted look
Rolodex – a vertical track with Theta setting locked at 90 degrees 
Locks Theta to 90 degrees when Rolodex is selected 
Theta 
Integer 
The angle (in degrees) of tilt relative to the y-axis of the ellipse. The number range is 0 to 90 degrees. 
This field is only valid for Default and Orbital Ellipse Type setting. It is locked at 90 when Rolodex is selected. 
a 
Integer 
This is the half-length (in pixels) of the 0-180 axis of ellipse. It is auto-calculated based on the widget size, the tallest image’s height, the ellipse type and scale settings. 
- 
b 
Integer 
This is the half-length (in pixels) of the 90-270 axis of ellipse. It is auto-calculated based on the widget size, the widest image’s width, the ellipse type and scale settings. 
- 
Size Scale Configuration

  • Size Scale












* Minimum Size Modifier







* Maximum Size Modifier 

Enum











Integer








Integer 
Off – all images displays at its original size
Gradual – images in the very back are scale to the Minimum Size Modifier setting, the scale is gradually increased, with the prominent front item scaled to the Maximum Size Modifier setting
Prominent – the image that is at the front, prominent location is scaled based on the Maximum Size Modifier, all other images are scaled to the Minimum Size Modifier setting

The value (in percent) for the widget to resize the image to. When Size Scale is set to Gradual, this value represents the lowest scale for the item in the back. When Size Scale is set to Prominent, this value represents the scaling value for every image in the widget except for the prominent item. This value is equal to or less than the Maximum Size Modifier value

The value (in percent) for the widget to resize the image to. When Size Scale is set to Gradual, this value represents the largest scale for the item in the front (prominent position). When Size Scale is set to Prominent, this value represents the scaling value for the prominent item. This value is equal to or greater than the Minimum Size Modifier value 
-












-








- 
Item List Configuration

  • Total Number of Items Shown



* Total Number of Widget Items


* Widget Items Configuration Dialog 

Integer


Integer



(See Description) 
The number images visible on the radial menu. This number does not may be less than or equal to the total images in the widget.

The total number of images the widget contains.


The Widget Items Configuration Dialog lets users add images to the widget. The follow properties can be set:

  • Image – Image Asset. The image to show for the widget item

 
The widget automatically space-out the images along the elliptical track base on this value.


If this number is greater than Total Number of Items Shown, some of the images will be hidden in a FIFO queue in the back

- 
Touch Area Configuration

  • Show Touch Area




* Touch Area X Offset


* Touch Area Y Offset


* Touch Area Width Percent


* Touch Area Height Percent 


Boolean



Integer



Integer



Integer



Integer 


Show visually in Harmony Graphics composer the rectangular area that permits touch interaction.

The X-coordinate in local space of the touch-allowed area for the widget. This is auto-calculated based on the Touch Area Width Percent.

The Y-coordinate in local space of the touch-allowed area for the widget. This is auto-calculated based on the Touch Area Height Percent.

The percentage of the width of the touch-allowed area as compared to the entire widget area.

The percentage of the height of the touch-allowed area as compared to the entire widget area. The default value is 50. 


This setting is for preview in Harmony Graphics composer only. The touch area is not rendered at runtime.
-



-



If this value is less than 100 percent, the area is horizontally centered.

If this value is less than 100 percent, the area is defined starting from the bottom of the widget. 

 

Radio Button

Property Name 
Type 
Description 
Related Event Actions 
Text String 
- 
Select widget’s text string from the Select String Dialog. 
Set Text 
Alignment:

  • Horizontal
  • Vertical

 
- 
Text string alignment within the widget.
Horizontal alignment. Choices are: { Left | Center | Right }.
Vertical alignment. Choices are: { Top | Middle | Bottom }. 

Set Horizontal Alignment
Set Vertical Alignment 
Group 
Integer 
Radio Button Group Number. Default is -1, indicating no group. Only one radio button in a group can have a default selected value of On. All others in the group are Off 
N/A 
Selected 
Boolean 
If selected, the button has a default value of On. All other buttons in the group have a Selected value of Off. 
Select 
Selected Image 
- 
Select image used for selected state. Default: no image. 
Set Selected Image 
Unselected Image 
- 
Select image used for unselected state. Default: no image. 
Set Unselected Image 
Image Position 
- 
Position of image relative to widget text. Choices are: { LeftOf | Above | RightOf | Below | Behind }. 
Set Image Position 
Image Margin 
- 
Space between radio button image and text, in pixels. 
Set Image Margin 
Circle Button Size 
- 
The diameter of the default circle button, in pixels 
Set Circle Button Size 

 

Rectangle

Property Name 
Type 
Description 
Related Event Actions 
Thickness 
Integer 
Line thickness in pixels. 
Set Thickness 

 

Scroll Bar

Property Name 
Type 
Description 
Related Event Actions 
Orientation 
- 
Scroll bar orientation. Choices are: { Vertical | Horizontal }. 
Set Orientation 
Maximum 
Integer 
Maximum scroll value (minimum = 0.) 
Set Maximum Value 
Extent 
Integer 
Length of scroll bar slider, re scroll bar maximum value. Indicates the number of lines or size of window visible at each scroll setting. 
Set Extent 
Value 
Integer 
Initial scroll bar value. 
Set Value, Set Value Percentage 
Step Size 
Integer 
Step size value of scroll bar arrow buttons. ( Min = 1, Max = 9999 ). 
Set Step Size
Additional Related Event Actions: Step Backward, Step Forward 

 

Slider

Property Name 
Type 
Description 
Related Event Actions 
Orientation 
- 
Orientation of the slider. Choices are: { Vertical | Horizontal }. 
Set Orientation 
Minimum 
- 
Minimum slider value. 
Set Minimum Value 
Maximum 
- 
Maximum slider value. 
Set Maximum Value 
Value 
- 
Initial slider value. 
Set Value, Set Value Percentage 
Grip Size 
- 
Grip size of slider, from 10 to 9999, in pixels. 
Set Grip Size
Additional Related Event Actions: Step 

 

Text Field

Property Name 
Type 
Description 
Related Event Actions 
Text String 
- 
Select widget’s text string from the Select String Dialog. 
Clear Text followed by Append Text 
Alignment 
- 
Horizontal alignment. Choices are: { Left | Center | Right }. 
Set Alignment 
Cursor Enable 
- 
Boolean. Show blinking cursor while editing. 
Set Cursor Enabled 
Cursor Delay 
- 
Cursor delay in milliseconds. From 1 to 999,999. 
Set Cursor Delay
Additional Related Event Actions: Accept Text, Append Text, Backspace, Clear Text, Start Editing. 

 

Touch Test – No dedicated properties. 

 

Window  

Property Name 
Type 
Description 
Related Event Actions 
Title String 
- 
Select widget’s title string from the Select String Dialog. 
Set Title 
Icon Image 
- 
Select image used. Default: no image. 
Set Icon 
Image Margin 
Integer 
Space between icon and title, in pixels. 
N/A 

 

Layer Properties and Event Actions

The property list for a graphic layer is close in look and feel to that of a widget. Each Layer has three property sets: Editor (see above), Widget (see above), and Layer (see below). 

Layer Properties  

Property Name 
Type 
Description 
Related Event Actions 
Transparency Enabled 
Boolean 
Automatically mask out pixels of with a specified color.
If enabled Specify: 
N/A 
Mask Color 
Integer 
Red/Green/Blue or Red/Green/Blue/Alpha color value 
N/A 
All Input Passthrough 
Boolean 
Allow input events to pass through this layer to layers behind it. 
N/A 
VSync Enabled 
Boolean 
Layers should swap only during vertical syncs. 
N/A 
Buffer Count 
Integer 
Integer number of frame buffers associated with this layer,
either 1 or 2. 
N/A 
Buffer N 
- 
For each buffer (N= 1 or 2) you specify: 
- 
Allocation Method 
- 
Buffer allocation method.
Choices are: { Auto | Address | Variable Name }

  • Auto – Automatically allocate frame buffer space
  • Address – Specify a memory address
  • Variable Name – Use variable name as buffer location

 
N/A 
Memory Address 
- 
If Address is the allocation method, specify the raw (physical) memory address as a hexadecimal number. 
N/A 
Variable Name 
String 
If Variable name is the allocation method,
specify the variable name as a string value. 
N/A 

 

Screen Properties and Events

The property list for a screen shares the Name and Size properties with Layers and Widgets but has these unique properties. 

Screen Properties  

Property Name 
Type 
Description 
Related Event Actions 
Orientation 
- 
Display orientation: 0, 90, 180, 270 Degrees.
This can also be set using the Display Manager. 
N/A 
Mirrored 
Boolean 
Enables screen mirroring. 
N/A 
Layer Swap Sync 
Boolean 
Enables that all layer buffer swapping happen at the same time, delaying lower layers until higher layers are finished drawing as well. For example, assume you make changes to layer 0 and layer 1 and you want to see those changes show up on the screen at the same time. Without this option you’d see layer 0’s changes as soon as it finishes when layer 1 has not yet started drawing. This option will hold layer 0’s swap operation until layer 1 finishes as well.
Note: Currently, this property is only supported by the GLCD Graphics Controller Driver and is ignored by all other drivers. 
N/A 
Persistent 
Boolean 
Indicates that the screen should not free its widgets and memory when it is hidden. This results in faster load times and persistent data, but at the cost of higher memory consumption. 
N/A 
Export 
Boolean 
Includes this screen the application build.
This can also be set using the Screens panel. 
N/A 
Primary 
Boolean 
Sets this screen as the primary screen. The primary screen is the first screen displayed when the application starts. This can also be done using the Screens Panel Generate check box. 
N/A 
MPLAB® Harmony Graphics Suite > Designer > Microchip Aria Designer > Properties Editor Panel > Object Properties
MPLAB® Harmony Graphics Suite
Contents | Home
Previous | Up | Next
Documentation Feedback
Microchip Support