Skip to content

Widgets Reference

Introduction to Workshop4 Widgets

Workshop4 provides a drag n' drop design tool for most of its powerful development environments. This allows user to easily utilise three types of widgets in their projects:

  • GCI Widgets
  • Internal Functions (PmmC) Widgets
  • Inherent Widgets

This offers increased flexibility in creating applications depending on the hardware requirement. These widgets include the following: buttons, sliders, knobs, gauges, LED indicators, LED digit, strings, static labels, media, and images.

Additional non-GUI widgets are also available that allows the user to add miscellaneous functionalities like sound, hardware I/O, or supporting resources like fonts, depending on the target processor and environment used.

All these widgets are available in the Widgets Menu of the ViSi and ViSi-Genie environment of Workshop4 IDE. Given its high configurability, these widgets can be customized directly on the What You See Is What You Get (WYSIWYG) screen or through the Object Inspector.

This document covers the following types of widgets:

GCI Widgets

The GCI Widgets also known as Graphics Composer Image (GCI) widgets, are widgets that are generated by the graphics composer program used in Workshop4 IDE. A GCI widget is composed of a set of frames representing each value.

During project compilation, Workshop4 creates a GCI (*.gci or *.gcf) file which is a collection of GCI widgets sometimes along with a DAT (*.dat) file. These files are copied to a microSD (or external flash for Flash-based PIXXI module) to be accessible to the processor for rendering on the display during runtime. This widget type is ideal for applications that only requires heavy graphics.

These widgets are available for GOLDELOX, PICASO, DIABLO and PIXXI processors.

When using PIXXI processor in Flash mode, only a few small GCI widgets can fit in the external flash. Therefore, it is only advisable to be used for icons and small screen backgrounds.

Here are some sample application screens utilizing GCI widgets:

GCI widgets

GCI widgets

GCI widgets

The following subsections show examples of these widgets.

GCI Button Widgets

These are widgets commonly used for receiving touch inputs from the user.

GCI Button widgets

The following widgets can be selected from the Buttons Pane by selecting their respective icon.

Fancy Button - Fancy Button Rocker02 - Rocker02 User Button - User Button
Rocker03 - Rocker03 Animated Button - Animated Button Slider01 - Slider01
Button01 - Button01 Toggle01 - Toggle01 Button02 - Button02
Toggle02 - Toggle02 Rocker01 - Rocker01

GCI Fancy Button

The Fancy Button widget is shown in the diagram below.

Fancy Button Diagram

Fancy Button Diagram
Property Description
Name Widget name
Alias Widget alias
Appearance Button appearance options
- Alignment Button text position
- Layout Picture location
- PictureAlignment Picture alignment
- SimpleLayout Disable button face colour gradient
- Spacing Button text spacing from picture
AutoSizeToPicture Resize button to the picture size
Bevel Enable or disable Button Bevel
Bevel Color Button Bevel
Caption Button text string
Color Button main colour
Font Button text font options
Height Widget height
Left Top-left X-position
Matrix Button grouping (ViSi-Genie only)
Momentary Button type
Picture Image selection for button picture
StatusWhenOff Status caption options for the initial state
- BGcolor Status caption background colour
- Caption Status caption text string
- Glow Enable or disable glow effect
- Font Status caption text font options
- Visible Show or hide status caption
StatusWhenOn Status caption options for the second state
- BGcolor Status caption background colour
- Caption Status caption text string
- Glow Enable or disable glow effect
- Font Status caption text font options
- Visible Show or hide status caption
Top Top-left Y-position
Width Widget width

GCI User Button

The User Button widget properties are listed below.

User button widget example

User button widget example
Property Description
Name Widget name
Alias Widget alias
Height Widget height
Images Button states image selection (Opens Image List Editor)
Left Top-left X-position
Matrix Button grouping (ViSi-Genie only)
Momentary Button type
Stretch Enable or disable widget scaling
Top Top-left Y-position
Width Widget width

Note

When this widget is added, it will be initially empty. The user can add images for the button state through the Images property in the Object Inspector pane.

GCI Animated Button

The Animated Button widget properties are listed below.

Animated button widget example

Animated button widget example
Property Description
Name Widget name
Alias Widget alias
Height Widget height
Images Button states images (Opens Image List Editor)
Interval Animation frame animation speed (ViSi-Genie only)
Left Top-left X-position
Matrix Button grouping (ViSi-Genie only)
Momentary Button type
Stretch Enable or disable widget scaling
Top Top-left Y-position
Width Widget width

Note

When this widget is added, it will be initially empty. The user can add images for the button state through the Images property in the Object Inspector pane.

GCI 4D Button

The default 4D Button widgets are shown below. Users can add custom buttons under this category.

4DButton 4DButton 4DButton 4DButton 4DButton 4DButton 4DButton 4DButton
4D Buttons
Property Description
Name Widget name
Alias Widget alias
Height Widget height
Left Top-left X-position
Matrix Button grouping (ViSi-Genie only)
Momentary Button action type
Size Set button size
Style Button styles
Top Top-left Y-position
Type Button design type
Width Widget width

Adding Custom GCI Buttons in Workshop4

New buttons for the Buttons Pane can be created by adding files with the specified formatting into the dedicated directory inside the Workshop4 program located at \4D Labs\4D Workshop 4 IDE\SysImages\Buttons\

Buttons Directory Path

Within this directory are the button 'types' folder. All 'types' folders containing valid contents will appear in the Buttons pane in Workshop4.

Buttons Pane

Inside the 'types' folder are the following: preview image, config file and style folders

Buttons Directory Path

The preview image in the Button tab for the new button is provided by the image file named 'default.png'. The image file can only have a maximum dimension of 32 by 32 pixels.

Button Preview Image

The config file specifies the default style and size of the button widget when it is added to the WYSIWYG screen. This file has a filename format: default.[style].[size], (i.e. "default.blue.32x32", this sets the default button to have the blue style and use the images in the 32x32 size folder). If this file is not present, Workshop4 will use the first style and size as the default.

Default Button Style & Size Widget

There could be one or more 'style' folder for each button type. Each valid 'style' folder will have a corresponding entry in the Style property of the object inspector.

Style Folders

A 'style' folder can have one or more 'size' folders representing the size of the custom buttons for that particular style. Each folder in this directory should have the name format [Width]x[Height] (i.e. 32x32 for button having a size of 32 by 32 pixels). This will create a corresponding entry in the Size property of the object inspector. An optional folder called 'Scaled' can be created in order to add a resizable button, the images have a maximum dimension of 128 by 128 pixels.

Size Folders

Inside each 'size' folder are the images that will be used as the button state frames. There should be four .png image files named 'Up.png', 'UpPresssed.png', 'Down.png' and 'downpressed.png' in this folder. These images will be used by Workshop4 to create the state frames of a button.

Buttons State Frames Images

GCI Digits Widget

These are widgets commonly used for displaying values or status information.

GCI Digits Widget

The following widgets can be selected from the Digits Pane by selecting their respective icon.

LED Digits - LED Digits LED - LED
Custom Digits - Custom Digits User LED - User LED

GCI LED Digits

The LED Digits widget is shown in the diagram below.

GCI LED Digits

LED Digits Diagram
Property Description
Name Widget name
Alias Widget alias
Color Active LED segment colour
DECimals DECimal Place relative to separator
Digits Total number of LED digit
Height Widget height
LeadingZero Enable or disable leading zeroes
Left Top-left X-position
OutlineColor LED segment outline colour
Palette LED segment colour
- High Active LED Segment colour
- Low Inactive LED Segment colour
Top Top-left Y-position
Width Widget width

GCI Custom Digits

The Custom Digits widget properties are listed below.

Custom LED digits example

Custom LED digits example

Shown below are the sample bitmap images required for creating a custom digit widget. In creating the bitmap image each digit must have equal width and height, as this will be divided into the individual digit.

Bitmap Image for unsigned custom digit

Bitmap Image for unsigned custom digit

Bitmap Image for signed custom digit

Bitmap Image for signed custom digit
Property Description
Name Widget name
Alias Widget alias
Bitmap Custom LED digit bitmap image
Digits Total number of LED digit
LeadingZero Enable or disable leading zeroes
Left Top-left X-position
Top Top-left Y-position

GCI LED

The LED widget is shown in the diagram below.

LED Diagram

LED Diagram
Property Description
Name Widget name
Alias Widget alias
Active Set LED initial state to active
Caption Caption text string
Color Background colour
Font Button text font options
Glyphs Custom LED type image (Conjoined image containing two states)
Height Widget height
Layout LED position
LedType LED type (Custom, LargeRect, Rectangle, Rounded)
Left Top-left X-position
Palette LED colour
- High Active LED colour
- Low Inactive LED colour
Spacing Digit size
Top Top-left Y-position
Width Widget width

GCI User LED

The User LED widget is shown in the diagram below.

User LED Diagram

User LED Diagram
Property Description
Name Widget name
Alias Widget alias
Active Set LED initial state to active
Bevel Bevel options
- BorderColor Border colour
- BorderWidth Border width
- InnerColor Inner Space colour
- InnerHighlight Inner Bevel highlight colour
- InnerOutline Inner Bevel outline colour
- InnerShadow Inner Bevel shadow colour
- InnerSpace Inner Space width
- InnerStyle Inner Bevel style
- InnerWidth Inner Bevel width
- OuterColor Outer Space colour
- OuterHighlight Outer Bevel highlight colour
- OuterOutline Outer Bevel outline colour
- OuterShadow Outer Bevel shadow colour
- OuterSpace Outer Space width
- OuterStyle Outer Bevel style
- Outerwidth Outer Bevel width
- Visible Enable or disable bevel
Height Widget height
Left Top-left X-position
OutlineColor Outline colour
OutlineWidth Outline width
PaletteEx LED colour
- High1 Active LED lamp gradient start colour
- High2 Active LED lamp gradient end colour
- Low1 Inactive LED lamp gradient start colour
- Low2 Inactive LED lamp gradient end colour
Top Top-left Y-position
Width Widget width

GCI Gauge Widgets

These are widgets commonly used for displaying values.

GCI Gauge Widgets

The following widgets can be selected from the Gauges Pane by selecting their respective icon.

Meter - Meter Tank - Tank Gauge - Gauge
Spectrum - Spectrum Angular Meter - Angular Meter Scope - Scope
Cool Gauge - Cool Gauge Smart Gauge - Smart Gauge Thermometer - Thermometer

Note

Smart Widgets are only enabled when a Workshop4 Pro License is purchased.

GCI Meter

The Meter widget is shown in the diagram below.

Meter Diagram

Meter Diagram
Property Description
Name Widget name
Alias Widget alias
Angle Start and End angle offset from horizontal
BackImage Background image
BGcolor Background colour (Not applicable if background image is present)
Bevel Bevel options
- BorderColor Border colour
- BorderWidth Border width
- InnerColor Inner Space colour
- InnerHighlight Inner Bevel highlight colour
- InnerOutline Inner Bevel outline colour
- InnerShadow Inner Bevel shadow colour
- InnerSpace Inner Space width
- InnerStyle Inner Bevel style
- InnerWidth Inner Bevel width
- OuterColor Outer Space colour
- OuterHighlight Outer Bevel highlight colour
- OuterOutline Outer Bevel outline colour
- OuterShadow Outer Bevel shadow colour
- OuterSpace Outer Space width
- OuterStyle Outer Bevel style
- Outerwidth Outer Bevel width
- Visible Enable or disable bevel
Caption Caption text string
Color Background colour
Font Caption font options
Height Widget height
LabelOffsetX Label offset distance from centre point
LabelOffsetY Label offset distance from centre point
Labels Total number of labels
Left Top-left X-position
Maxvalue Maximum value
Minvalue Minimum value
NeedleColor Needle colour
NeedleWidth Needle width
Scale Scale options
- Color1 Colour of scale partition 1
- Color2 Colour of scale partition 2
- Color3 Colour of scale partition 3
- Enlarge Number of partitions between each major tick
- Heightmax Length of the major ticks
- Heightmin Length of the minor ticks
- Percent1 Scale percentage of partition 1
- Percent2 Scale percentage of partition 2
- Ticks Total number of ticks
- Visible Enable or disable scale
Spacing Spacing distance from bevel
Top Top-left Y-position
TotalTicks Total number of partitions between each ticks
Width Widget width

GCI Gauge

The Gauge widget is shown in the diagram below.

Gauge Diagram

Gauge Diagram
Property Description
Name Widget name
Alias Widget alias
Bevel Bevel options
- BorderColor Border colour
- BorderWidth Border width
- InnerColor Inner Space colour
- InnerHighlight Inner Bevel highlight colour
- InnerOutline Inner Bevel outline colour
- InnerShadow Inner Bevel shadow colour
- InnerSpace Inner Space width
- InnerStyle Inner Bevel style
- InnerWidth Inner Bevel width
- OuterColor Outer Space colour
- OuterHighlight Outer Bevel highlight colour
- OuterOutline Outer Bevel outline colour
- OuterShadow Outer Bevel shadow colour
- OuterSpace Outer Space width
- OuterStyle Outer Bevel style
- Outerwidth Outer Bevel width
- Visible Enable or disable bevel
Color Base colour
Height Widget height
Left Top-left X-position
Maxvalue Maximum value
Minvalue Minimum value
Orientation Gauge orientation
Palette1 Partition 1 ticks
- High Active tick colour
- Low Inactive tick colour
Palette2 Partition 2 ticks
- High Active tick colour
- Low Inactive tick colour
Palette3 Partition 3 ticks
- High Active tick colour
- Low Inactive tick colour
Percent1 Percentage of partition 1
Percent2 Percentage of partition 2
Spacing Tick spacing
Step Step value
Style Gauge direction
Tickheight Tick width
Top Top-left Y-position
Width Widget width

GCI Angular Meter

The Angular Gauge widget is shown in the diagram below.

Angular Meter Diagram

Angular Meter Diagram
Property Description
Name Widget name
Alias Widget alias
Angle Gauge starting angle
AngleOffset Gauge end angle offset (in reference to the starting angle)
BaseColor Gauge base colour
Caption Caption text string
CaptionXOffset Caption horizontal offset
CaptionYOffset Caption vertical offset
CenterDotColor Denter dot colour
CenterDotWidth Center dot width
Color Background colour
ColorZone1 Colour of scale partition 1
ColorZone2 Colour of scale partition 2
ColorZone3 Colour of scale partition 3
DECimals Number of decimals in the labels
Font Caption font options
Height Widget height
Labels Total number of labels
LabelsFont Label font options
LabelsOffset Label offset distance from the scale
Left Top-left X-position
Maxvalue Gauge maximum value
Minvalue Gauge minimum value
NeedleBasewidth Needle base width
NeedleColor Needle base and Needle colour
NeedleLength Needle length (Use -1 for automatic scaling)
Percent1 Percentage of partition 1
Percent2 Percentage of partition 2
Radius Scale inner radius (Use -1 for automatic scaling)
Spacing Spacing between scale inner circumference and widget boundary
Ticks Total number of ticks
TicksColor Tick colour
TicksEnlarge Number of partitions between each major tick
TicksMax Length of the major ticks
TicksMin Length of the minor ticks
Top Top-left Y-position
Width Widget width

GCI Cool Gauge

The Cool Gauge widget is shown in the diagram below.

Cool Gauge Diagram

Cool Gauge Diagram
Property Description
Name Widget name
Alias Widget alias
Arc Arc options
- Color Arc colour
- Opacity Arc opacity value (0 to 255)
- StartAngle Arc start angle
- StopAngle Arc stop angle
- Width Arc width
Threshold Arc threshold options
- Center Arc threshold center position relative to value
- Color Arc threshold colour
- EndValue Arc end value
- Opacity Arc threshold opacity value (0 to 255)
- Span Arc threshold value span
- StartAngle Arc threshold start angle
- StartValue Arc start value
- SweepAngle Arc threshold sweep angle
- ThresholdKind Arc starting and ending point reference type (Value or Angle)
CircleEndValue Gauge circular form end angle
CircleStartValue Gauge circular form start angle
DialText Gauge dial text string
Digit Gauge Digit
- Alignment Digit alignment
- BackGroundColor Digit background colour
- BackGroundOpacity Digit background opacity value (0 to 255)
- Color Digit colour
- Visible Enable or disable digit
DivisionColor Major tick colour
DivisionCount Total number of major ticks
DivisionWidth Major tick width
EqualDimensions Enable or disable equal width and height auto resize
Font Dial text font options
Height Widget height
Innercircle Gauge face options
- Color Inner circle colour
- Opacity Inner circle opacity value (0 to 255)
- Gloss Inner circle glossy effect
- - Color Inner circle gloss colour
- - Opacity Inner circle gloss opacity value (0 to 255)
Left Top-left X-position
Logarithmic Enable or disable logarithmic scaling of labels
LogarithmicBase Base value for logarithmic scaling
MaximumValue Gauge maximum value
MinimumValue Gauge minimum value
Needle Needle options
- Color Needle color
- InnerCenterColor Inner center gradient colour 1
- InnerCenterColorTo Inner center gradient colour 2
- InnerCenterOpacity Inner center opacity value (0 to 255)
- OuterCenterColor Outer center gradient colour 1
- OuterCenterColorTo Outer center gradient colour 2
- OuterCenterOpacity Outer center opacity value (0 to 255)
- ShineColor Needle shine gradient colour 1
- ShineColorTo Needle shine gradient colour 2
OuterCircle Outer circle options
- Color Outer circle colour
- Opacity Outer circle opacity value (0 to 255)
- Width Outer circle width
OuterRim Outer rim options
Color Outer rim colour
Opacity Outer rim opacity value (0 to 255)
Width Outer rim width
ShowValues Enable or disable scale labels
SubDivisionColor Minor tick colour
SubDivisionCount Number of minor ticks between each major tick
SubDivisionWidth Minor tick width
TextRendering Text rendering option for labels
Top Top-left Y-position
ValueFont Value font options
ValueFormat Value formatting option
Width Widget width

Note

The Cool Gauge widget, usually, is composed with 18 different shades of one colour. The user can change that colour by right-clicking on the widget and selecting a colour from the Colour Picker. That colour will then have various shades applied to each of the 18 colours.

GCI Thermometer

The Thermometer widget is shown in the diagram below.

Thermometer Diagram

Thermometer Diagram
Property Description
Name Widget name
Alias Widget alias
Caption Caption text string
Color Base colour
ColorAfter Empty tube colour
ColorBefore Tube fill colour
Direction Widget orientation
Font Label and caption font options
Height Widget height
Left Top-left X-position
Scale Scale options
- Color Scale tick colour
- DECimals DECimal precision of scale labels
- Heightmax Major tick length
- Heightmin Minor tick length
- Max Maximum scale value
- Min Minimum scale value
- Offset Scale offset from tube
- Position Scale position relative to tube
- ScaleType Use logarithmic or linear scale values
- SmallStep Minor tick division
- Step Major tick steps
- Visible Enable or disable scale
Setpoint Setpoint pointer options
- Bitmap Image for custom setpoint pointer
- Color Setpoint pointer colour
- Shape Setpoint pointer type
- Value Setpoint pointer value
- Visible Enable or disable setpoint pointer
- ShowCaption Enable or disable caption text
- Top Top-left Y-position
Value Value pointer options
- Bitmap Image for custom value pointer
- Color Value pointer colour
- Shape Value pointer type
- Value Value pointer value
- Visible Enable or disable value pointer
Width Widget width

GCI Tank

The Tank widget is shown in the diagram below.

Tank Diagram

Tank Diagram
Property Description
Name Widget name
Alias Widget alias
Color Base colour
Container Container section options
- Height Container section height
- Visible Enable or disable container section
- Width Container section width
EmptyColor Empty section colour
FillColor Indicator fill colour
Height Widget height
Left Top-left X-position
Max Widget maximum value
Min Widget minimum value
Position Initial indicator fill value
Shape Tank section shape
Top Top-left Y-position
Width Widget width

GCI Spectrum

The Spectrum widget is shown in the diagram below.

Spectrum Diagram

Spectrum Diagram
Property Description
Name Widget name
Alias Widget alias
BarSpacing Bar segment spacing
BarWidth Bar segment width
Bevel Bevel options
- BorderColor Border colour
- BorderWidth Border width
- InnerColor Inner Space colour
- InnerHighlight Inner Bevel highlight colour
- InnerOutline Inner Bevel outline colour
- InnerShadow Inner Bevel shadow colour
- InnerSpace Inner Space width
- InnerStyle Inner Bevel style
- InnerWidth Inner Bevel width
- OuterColor Outer Space colour
- OuterHighlight Outer Bevel highlight colour
- OuterOutline Outer Bevel outline colour
- OuterShadow Outer Bevel shadow colour
- OuterSpace Outer Space width
- OuterStyle Outer Bevel style
- Outerwidth Outer Bevel width
- Visible Enable or disable bevel
Color Base colour
Columns Total number of columns
Height Widget height
Left Top-left X-position
Maxvalue Maximum value
Minvalue Minimum value
Palette1 Partition 1 ticks
- High Active tick colour
- Low Inactive tick colour
Palette2 Partition 2 ticks
- High Active tick colour
- Low Inactive tick colour
Palette3 Partition 3 ticks
- High Active tick colour
- Low Inactive tick colour
Percent1 Percentage of partition 1
Percent2 Percentage of partition 2
Spacing Column spacing
TickHeight Bar segment thickness
Top Top-left Y-position
Width Widget width

GCI Scope

The Scope widget is shown in the diagram below.

Scope Diagram

Scope Diagram
Property Description
Name Widget name
Alias Widget alias
Color Base colour
GraticuleColor Graticule dot colour
GraticuleVisible Enable or disable graticule dots
GraticuleXinc Graticule dot horizontal spacing
GraticuleYinc Graticule dot vertical spacing
Height Widget height
Left Top-left X-position
RefreshINCrement Update or redraw rate (ViSi-Genie only)
Top Top-left Y-position
Trace1Color Trace1 line colour
Trace2Color Trace2 line colour
Trace3Color Trace3 line colour
Trace4Color Trace4 line colour
Traces Number of traces
Width Widget width
Xmag Trace horizontal scaling
Yamp Vertical trace scaling
YLine X-axis offset distance from top
YLineColor X-axis colour
YLineVisible Enable or disable X-axis line
Yoffset X-axis offset value (ViSi-Genie only)

GCI Smart Gauge

The Smart Gauge widget properties are listed below.

Smart Gauge

Smart Gauge
Property Description
Name Widget name
Alias Widget alias
Config Configure Smart Gauge (Opens the Smart Editor)
Left Top-left X-position
Top Top-left Y-position

Note

More details about creating and manipulating Smart Widgets can be found in the Smart Widgets Editor User Guide.

GCI Input Widgets

These are widgets commonly used for receiving touch inputs from the user.

GCI Input Widgets

The following widgets can be selected from the Inputs Pane by selecting their respective icon.

Knob - Knob Dipswitch - Dipswitch
Rotary Switch - Rotary Switch Rocker - Rocker
Slider - Slider Color Picker - Color Picker
Trackbar - Trackbar Smart Knob - Smart Knob
Keyboard - Keyboard Smart Slider - Smart Slider

Note

Smart Widgets are only enabled when a Workshop4 Pro License is purchased.

GCI Knob

The Knob widget is shown in the diagram below.

Knob Diagram

Knob Diagram
Property Description
Name Widget name
Alias Widget alias
BackImage Knob base image
BaseAngle Rotation endpoint offset angle (Counterclockwise rotation from the south)
HandleImage Handle image
Left Top-left X-position
Maxvalue Knob maximum value
Minvalue Knob minimum value
Radius Knob radius
Top Top-left Y-position
Width Widget width

GCI Rotary Switch

The Rotary Switch widget is shown in the diagram below.

Rotary Switch Diagram

Rotary Switch Diagram
Property Description
Name Widget name
Alias Widget alias
ButtonColor Switch handle dot colour
Color Base colour
Font Font options
Height Widget height
LabelsOffset Label offset from the switch
Left Top-left X-position
Radius Knob radius
ShowLabel Enable or disable labels
SwitchAngleEnd Switch rotation ending angle
SwitchAngleStart Switch rotation starting angle
SwitchColor Switch face colour
SwitchPositions String list entry for each switch position
Top Top-left Y-position
Width Widget width
WinchColor Switch handle colour
WinchOffset Switch handle thickness

GCI Slider

The Slider widget is shown in the diagram below.

Slider Diagram

Slider Diagram
Property Description
Name Widget name
Alias Widget alias
Bevel Bevel options
- BorderColor Border colour
- BorderWidth Border width
- InnerColor Inner Space colour
- InnerHighlight Inner Bevel highlight colour
- InnerOutline Inner Bevel outline colour
- InnerShadow Inner Bevel shadow colour
- InnerSpace Inner Space width
- InnerStyle Inner Bevel style
- InnerWidth Inner Bevel width
- OuterColor Outer Space colour
- OuterHighlight Outer Bevel highlight colour
- OuterOutline Outer Bevel outline colour
- OuterShadow Outer Bevel shadow colour
- OuterSpace Outer Space width
- OuterStyle Outer Bevel style
- Outerwidth Outer Bevel width
- Visible Enable or disable bevel
BorderColor Outer Border colour
BorderWidth Outer Border width
Color Base colour
Height Widget height
Left Top-left X-position
Maxvalue Slider maximum value
Minvalue Slider minimum value
Orientation Slider orientation
Palette1 Tick colour
- High Active tick colour
- Low Inactive tick colour
Spacing Tick spacing
SolidFill Select tick fill type
TickWidth Tick width
Top Top-left Y-position
Width Widget width

GCI Trackbar

The Trackbar widget is shown in the diagram below.

Trackbar Diagram

Trackbar Diagram
Property Description
Name Widget name
Alias Widget alias
BorderWidth Spacing between track and base edge
Color Base colour
Frequency Frequency of scale tick partitions based on maximum value
GutterBevel Gutter Bevel options
- BorderColor Border colour
- BorderWidth Border width
- InnerColor Inner Space colour
- InnerHighlight Inner Bevel highlight colour
- InnerOutline Inner Bevel outline colour
- InnerShadow Inner Bevel shadow colour
- InnerSpace Inner Space width
- InnerStyle Inner Bevel style
- InnerWidth Inner Bevel width
- OuterColor Outer Space colour
- OuterHighlight Outer Bevel highlight colour
- OuterOutline Outer Bevel outline colour
- OuterShadow Outer Bevel shadow colour
- OuterSpace Outer Space width
- OuterStyle Outer Bevel style
- Outerwidth Outer Bevel width
- Visible Enable or disable bevel
GutterColor Gutter colour
GutterWidth Gutter width
Height Widget height
Maxvalue Slider maximum value
Minvalue Slider minimum value
Orientation Slider orientation
ScaleOffset Scale tick offset distance from track
TickColor Tick colour
TickMarks Tick position
Top Top-left Y-position
Width Widget width

GCI Keyboard

The Keyboard widget is shown in the diagram below.

Qwerty Keyboard Diagram

Qwerty Keyboard Diagram

Numeric Keyboard Diagram

Numeric Keyboard Diagram

Cellphone Keyboard Diagram

Cellphone Keyboard Diagram
Property Description
Name Widget name
Alias Widget alias
AutoCapsDisplay Enables or disables auto capitalization of letters for the Caps Lock key
Fill Keyboard base fill options (Opens Fill Editor)
Font Font options for the main keys
Height Widget height
HighlightCaps Highlight colour for keys toggled by the caps lock or shift keys
KeyboardType Key layout type (Opens Keyboard Editor)
KeyDistance Distance between each key
Left Top-left X-position
SmallFont Font options for the special keys
Top Top-left Y-position
Width Widget width

GCI Dipswitch

The Dipswitch widget is shown in the diagram below.

Dipswitch Diagram

Dipswitch Diagram
Property Description
Name Widget name
Alias Widget alias
Background Background options
- BorderStyle Bevel style
- BrightHighlightColor Bevel highlight colour 1
- DarkShadowColor Bevel shadow colour 1
- FaceColor Background track colour
- HighlightColor Bevel highlight colour 2
- ShadowColor Bevel shadow colour 2
Height Widget height
Left Top-left X-position
Margin Thumb distance from background edges
NumPositions Number of switch positions
Orientation Slider orientation
Thumb Thumb options
- BorderStyle Bevel style
- BrightHighlightColor Bevel highlight colour 1
- DarkShadowColor Bevel shadow colour 1
- FaceColor Thumb face colour
- HighlightColor Bevel highlight colour 2
- Length Thumb length
- Ripples Enable or disable ripple line design
- ShadowColor Bevel shadow colour 2
Top Top-left Y-position
Width Widget width

GCI Rocker

The Rocker widget is shown in the diagram below.

Rocker Diagram

Rocker Diagram
Property Description
Name Widget name
Alias Widget alias
BorderColor Border colour
BorderWidth Border width
ClickRect Set touch detection area (Whole or Half)
Height Widget height
LED LED indicator options
- UseDefaultColours Enable or disable default LED colour
- AutoInactiveColor Enable auto selection of inactive LED colour
- Centered Centre LED position relative to rocker orientation axis
- ColorActive Active state LED colour
- ColorDarkShadow LED bevel dark shadow colour (Not applicable for Ellipse shape)
- ColorHighlight LED bevel highlight colour
- ColorInactive Inactive state LED colour
- ColorShadow LED bevel shadow colour
- Height LED height
- Left LED horizontal offset distance
- Shape LED shape selection (Diamond, Ellipse or Rectangle)
- ShowReflection Enable or disable LED reflection effect
- Top LED vertical offset distance
- Visible Enable or disable LED indicator
- Width LED width
Left Top-left X-position
Orientation Slider orientation
SwitchColors Switch face colour options
- UseDefaultColors Use monochromatic colour
- COffAngled Face colour for the Off half (Rocker toggled to On state)
- COffDown Face colour for the Off half (Rocker toggled to Off state)
- COffEdge Edge colour for the Off half (Rocker toggled to On state)
- COnAngled Face colour for the On half (Rocker toggled to Off state)
- COnDown Face colour for the On half (Rocker toggled to On state)
- COnEdge Edge colour for the On half (Rocker toggled to Off state)
Top Top-left Y-position
Width Widget width

GCI Color Picker

The Color Picker widget is shown in the diagram below.

Color Picker Diagram

Color Picker Diagram
Property Description
Name Widget name
Alias Widget alias
Color Background colour
Height Widget height
Left Top-left X-position
Top Top-left Y-position
Width Widget width

GCI Smart Knob

The Smart Knob widget properties are listed below.

Smart Knob Diagram

Smart Knob Diagram
Property Description
Name Widget name
Alias Widget alias
Config Configure Smart Knob (Opens the Smart Editor)
Left Top-left X-position
Top Top-left Y-position

Note

More details about creating and manipulating Smart Widgets can be found in the Smart Widgets Editor User Guide.

GCI Smart Slider

The Smart Slider widget properties are listed below.

Smart Slider Diagram

Smart Slider Diagram
Property Description
Name Widget name
Alias Widget alias
Config Configure Smart Slider (Opens the Smart Editor)
Left Top-left X-position
Top Top-left Y-position

Note

More details about creating and manipulating Smart Widgets can be found in the Smart Widgets Editor User Guide.

GCI Label Widgets

These are widgets commonly used for displaying text information.

GCI Label Widgets

The following widgets can be selected from the Labels Pane by selecting their respective icon.

Label - Label Strings - Strings Static Text - Static Text

GCI Label

The Label widget is shown in the diagram below.

Label Diagram

Label Diagram
Property Description
Name Widget name
Alias Widget alias
4DGLFont Text alignment inside the textbox
- Font System font selection
- Bold Enable or disable bold font style
- Italic Enable or disable italicized font style
- Inverse Swap font and background colour
- Underline Enable or disable underline
- MagWidth Font width multiplier
- MagHeight Font height multiplier
- Opaque Enable or disable background
BGcolor Label background colour
Caption Label text string
Font Text font style
FGcolor Text colour
FontSize Text font size
Left Top-left X-position
Top Top-left Y-position

GCI Static Text

The Static Text widget is shown in the diagram below.

Static Text Diagram

Static Text Diagram

The text inside the static text can be aligned as shown below.

Left Aligned

Center Aligned

Right Aligned

Property Description
Name Widget name
Alias Widget alias
Alignment Text alignment inside the textbox
Autosize Enable or disable textbox auto sizing relative to contents
Caption Text string
Color Background colour
Font Text font options
Height Widget height
Left Top-left X-position
Top Top-left Y-position
Transparent Enable or disable textbox background
Width Widget width
Wordwrap Enable or disable word wrapping

GCI Strings

The Strings widget properties are listed below.

String Diagram

String Diagram

The text inside the static text can be aligned as shown below.

Left Aligned

Center Aligned

Right Aligned

Property Description
Name Widget name
Alias Widget alias
Alignment Text alignment inside the textbox
BGcolor Text background colour
Height Widget height
FGcolor Text font colour
Font Text font options
Left Top-left X-position
Strings String input (Open string editor)
StringStyle String content style
Top Top-left Y-position
Width Widget width

GCI System/Media

These are widgets commonly used for multimedia and system.

GCI System/Media

The following widgets can be selected from the System/Media Pane by selecting their respective icon.

Image - Image Form - Form
Video - Video User Image - User Image

GCI Image

The Image widget properties are listed below.

Image Widget

Image Widget
Property Description
Name Widget name
Alias Widget alias
Height Widget height
Image Image file selection (Opens Image + Video Converter)
Left Top-left X-position
Source Source file crop options
- Height Frame crop height
- Left Frame crop horizontal starting point
- Top Frame crop vertical starting point
- Width Frame crop width
Top Top-left Y-position
Width Widget width

Note

When this widget is added, it will initially prompt the user to select an image file.

GCI Video

The Video widget properties are listed below.

Video Widget

Video Widget
Property Description
Name Widget name
Alias Widget alias
Frames Video frames options
- First Select initial video frame
- Last Select final video frame
- FrameDelay Video frame delay (ViSi-Genie only)
Height Widget height
Left Top-left X-position
Source Source file clipping window options
- Height Frame clip window height
- Left Frame clip window horizontal starting point
- Top Frame clip window vertical starting point
- Width Frame clip window width
Top Top-left Y-position
Video Video file selection (Opens Image + Video Converter)
Width Widget width

Note

When this widget is added, it will initially prompt the user to select a media file. The user can then replace or edit the video by pressing the Replace/Edit Video Button button of the Video property.

GCI Form

The Form properties are listed below.

Property Description
Name Widget name
Alias Widget alias
Bgtype Form background type (Colour or Image)
Color Form background colour
Image Form background image file selection (Opens Image + Video Converter)
Height Widget height
Left Top-left X-position
Source Source file crop options
- Height Frame crop height
- Left Frame crop horizontal starting point
- Top Frame crop vertical starting point
- Width Frame crop width
Top Top-left Y-position
Width Widget width

GCI User Image

The User Image widget properties are listed below.

User Image Widget

User Image Widget
Property Description
Name Widget name
Alias Widget alias
Height Widget height
Images Image file selection (Opens Image List Editor)
Left Top-left X-position
Stretch Enable or disable image resizing
Top Top-left Y-position
Width Widget width

Note

When this widget is added, it will be initially empty. The user can add the images by pressing the Add Images Button button or double-clicking the Images property.

GCI Background Widgets

These are widgets commonly used for adding visual cues or design.

GCI Background Widgets

The following widgets can be selected from the Background Pane by selecting their respective icon.

Border - Border Scale - Scale Gradient - Gradient

GCI Border

The Border widget is shown below.

Border Widget

Border Widget

The border can have the following styles:

Box - Box Frame - Frame
TopLine - TopLine LeftLine - LeftLine
BottomLine - BottomLine RightLine - RightLine
Spacer - Spacer
Property Description
Name Widget name
Alias Widget alias
Height Widget height
HighlightColor Border bevel highlight colour
Left Top-left X-position
ShadowColor Border bevel shadow colour
Shape Border shape
Style Border bevel direction (Lowered or Raised)
Top Top-left Y-position
Width Widget width

GCI Gradient

The Gradient widget is shown below.

Gradient Widget

Gradient Widget
Property Description
Name Widget name
Alias Widget alias
ColorWidth Gradient colour step size
Direction Gradient direction
EndColor Gradient end colour
Height Widget height
Left Top-left X-position
StartColor Gradient start colour
SwapColors Swap start and end colours
Top Top-left Y-position
Width Widget width

GCI Scale

The Scale widget is shown in the diagram below.

Scale Diagram

Scale Diagram
Property Description
Name Widget name
Alias Widget alias
Alignment Label alignment relative to scale ticks
Color Background colour
Digits Label format
Font Scale font colour
Height Widget height
Layout Label alignment relative to orientation axis
LeadingZero Enable or disable zero
Left Top-left X-position
Length Widget length
Maxvalue Maximum value of the numerical mark
Minvalue Minimum value of the numerical mark
Orientation Scale orientation (Horizontal or Vertical)
PeakColor Peak value colour
PeakLevel Label peak value
ScaleColor Scale tick colour
ScaleOffset Scale tick offset
ShowSign Enable or disable label sign
TickMarks Tick mark layout
Ticks Total number of partitions
TickHeight Tick length
TickWidth Tick width
Top Top-left Y-position
Transparent Enable or disable widget transparency
Width Widget width

Internal (PmmC) Widgets

The Internal Functions (PmmC) Widgets provides a way to deliver high quality graphical widgets without using any external memory storage device. This type of widget is generated during runtime by executing widget functions included in the PmmC. This widget type is ideal for standalone applications that requires light graphics.

These widgets are available for PIXXI and DIABLO-16 processors only. These are not available for GOLDELOX or PICASO.

Internal Widgets requires a small amount of program space to store widget parameters. This reduces that amount of useable code space for the project. If the project will require a huge amount of code space and multiple widgets, it is highly advisable to use GCI widgets instead.

In Workshop4, this type of widget can be identified by checking for a blue I located at the bottom left of the widget icon.

Here is a sample application screen utilizing Internal widgets:

Internal (PmmC) Widget

Internal Button Widgets

These are widgets commonly used for receiving touch inputs from the user.

Internal Button Widgets

All buttons can be found under the Buttons tab of the widget selection pane as shown above.

Internal (PmmC) buttons

Internal (PmmC) buttons can be identified with the blue i located at the bottom left of the button icon.

Internal Button D

The function required for rendering this widget is discussed in the gfx_Button4 section of PIXXI Internal Functions Reference Manual. The Button widget is shown in the diagram below.

Button with Caption

Button with Caption

Button with Dots

Button with Dots
Property Description
Name Widget name
Alias Widget alias
BaseColorA Base bevel gradient start colour
BaseColorB Base bevel gradient end colour
BaseGradient Base bevel gradient direction/style
ButtonColorA Button bevel gradient start colour
ButtonColorB Button bevel gradient end colour
ButtonGradientOff Off position button bevel gradient direction/style
ButtonGradientOn On position button bevel gradient direction/style
Caption Caption text (Applicable if using text caption on button face)
CaptionColorOff Off position text label colour (Applicable if using Caption)
CaptionColorOn On position text label colour (Applicable if using Caption)
CaptionStyle Setting for caption or dots on button face (Set to Yes for Caption, No for Dots)
DotColorA Dot gradient start colour (Applicable if using Dots on button face)
DotColorB Dot gradient end colour (Applicable if using Dots on button face)
DotGradient Dot gradient direction/style (Applicable if using Dots on button face)
FaceColor Button face colour
Font Caption text font (Applicable if using Caption), refer to the section External Font when using custom fonts
FontSize Caption text font size (Applicable if using Caption)
Matrix Button grouping (ViSi-Genie only)
Momentary Button type
Left Top-left X-position
Radius Button size
RingColorOff Off position ring colour
RingColorOn On position ring colour
Top Top-left Y-position

Internal Switch

The function required for rendering this widget is discussed in the gfx_Switch section of PIXXI Internal Functions Reference Manual. The Switch widget is shown in the diagram below.

Switch Diagram

Switch Diagram
Property Description
Name Widget name
Alias Widget alias
BevelMainColor Container and switch bevel main colour
BevelShadowColor Container and switch bevel shadow colour
ContainerBevel Container bevel thickness
FontSize Label font size
Font Label font, refer to the section External Font when using custom fonts
Height Widget height
Left Top-left X-position
OFFColor OFF position fill colour
OFFLabel OFF position text label
OFFLabelColor OFF position text label colour
ONColor ON position fill colour
ONLabel ON position text label
ONLabelColor ON position text label colour
Orientation Switch orientation
SwitchBevel Switch bezel thickness
Top Top-left Y-position
Width Widget width

Internal Digits Widget

These are widgets commonly used for displaying values or status information.

Internal Digits Widget

All Digits widgets can be found under the Digits tab of the widget selection pane as shown above. This pane is mostly composed of Leds and Digits.

Internal (PmmC) Led and Digits

Internal (PmmC) Led and Digits can be identified with the blue i located at the bottom left of the widget icon.

Internal LED

The function required for rendering this widget is discussed in the gfx_Led section of PIXXI Internal Functions Reference Manual. The LED widget is shown in the diagram below.

LED Diagram LED Diagram

LED Diagram
Property Description
Name Widget name
Alias Widget alias
BaseColorA Base bevel gradient start colour
BaseColorB Base bevel gradient end colour
BaseInnerCorner Inner corner radius (Ideally less than BaseOuterCorner)
BaseOuterCorner Outer corner (Ideally less than half of the widget height)
Height Widget height
LEDcolorOff LED Off colour
LEDcolorOn LED On colour
LEDLampRadius LED lamp radius
Left Top-left X-position
ShineColor LED shine effect colour
ShineEffect Enable or disable LED shine effect
ShineRadius LED shine effect radius (Ideally less than or equal to BaseInnerCorner)
Top Top-left Y-position
Width Widget width

Internal LED Digits

The function required for rendering this widget is discussed in the gfx_LedDigits section of PIXXI Internal Functions Reference Manual. The LED Digits widget is shown in the diagram below.

LED Digits Diagram

LED Digits Diagram
Property Description
Name Widget name
Alias Widget alias
ColorActive Active LED segment colour
ColorInactive Inactive LED segment colour
DECimalPlace DECimal Place relative to separator
Digits Total number of LED digit
DPisComma Separator style for decimal point (Set to Yes for Comma, No for Dot)
Format Input format
LeadingZero Enable or disable leading zeroes
Left Top-left X-position
ShowDP Enable or disable separator
Signed Enable or disable signed value output
Size Digit size
Spacing Spacing between each digit
Top Top-left Y-position

Internal LED Digit

The function required for rendering this widget is discussed in the gfx_LedDigit section of PIXXI Internal Functions Reference Manual. The LED Digit widget is shown in the diagram below.

LED Digit Diagram

LED Digit Diagram
Property Description
Name Widget name
Alias Widget alias
ColorActive Active LED segment colour
ColorInactive Inactive LED segment colour
Left Top-left X-position
Size Digit size
Top Top-left Y-position

Internal Gauge Widgets

These are widgets commonly used for displaying values.

Internal Gauge Widgets

All gauges can be found under the Gauges tab of the widget selection pane as shown above.

Internal (PmmC) Gauges

Internal (PmmC) gauges can be identified with the blue i located at the bottom left of the gauge icon.

Internal Angular Meter

The function required for rendering this widget is discussed in the gfx_AngularMeter section of PIXXI Internal Functions Reference Manual. The Angular gauge is shown in the diagram below.

Angular Gauge Diagram

Angular Gauge Diagram
Property Description
Name Widget name
Alias Widget alias
BGcolor Gauge background colour (Required for erasing Needle path)
BGtransparent Enable/Disable background
Caption Gauge caption text
CaptionColor Gauge caption colour
CaptionFont Gauge caption font family, refer to the section External Font when using custom fonts
CaptionX0ffset Caption horizontal offset from centre of rotation
CaptionYOffset Caption vertical offset from centre of rotation
GaugeEndAngle Set the ending angle for the scale and needle element
GaugeStartAngle Starting angle for the scale and needle element
Height Widget height
LabelColor Label text colour
LabelColorFromScale Use scale colour at current point as label text colour (Overrides Label text colour)
LabelCount Total number of labels (Actual labels = LabelCount + 1; set to -1 to disable labels)
LabelDiscrete Label type (Set to yes for individual text labels)
LabelFont Label text font, refer to the section External Font when using custom fonts
LabelOffset Label offset distance from centre point
Labels String input for individual text labels
Left Top-left X-position
Maxvalue Gauge maximum value
MinorTicks Number of minor ticks between each major ticks (Set to 0 to disable)
Minvalue Gauge minimum value
NeedleColor Gauge Needle colour
NeedleLength Needle pointer length
NeedleOffset Needle offset from centre of rotation
NeedlePinColor Needle pin colour
NeedlePinDotColor Needle pin dot colour
NeedlePinDotRadius Needle pin dot radius
NeedlePinRadius Needle pin radius
NeedleStyle Needle pointer style
NeedleTail Needle tail length (Applicable only for double triangle style)
NeedleThickness Needle width (Half value of overall needle thickness)
Sect1Color Colour of the first ring section of the range scale
Sect2Color Colour of the second ring section of the range scale
Sect2StartingAngle Starting angle of the second ring section of the range scale
Sect3Color Colour of the third ring section of the range scale
Sect3StartingAngle Starting angle of the third ring section of the range scale
SectionStepSize Range scale section incremental step size
ScaleInnerRadius Range scale inner radius
ScaleOuterRadius Range scale outer radius
TickColor Major and Minor tick colour
TickColorFromScaleColor Use scale colour at current point as tick colour (Overrides tick colour)
TickInnerMajorlength Length of the inner major ticks
TickInnerMinorLength Length of the inner minor ticks
TickOuterMajorLength Length of the outer major ticks
TickOuterMinorLength Length of the outer minor ticks
TickWidth Tick line thickness
Top Top-left Y-position
TotalTicks Total number of partitions between each ticks
Width Widget width

Note

When designing the gauge, note that the needle will use the background colour parameter for erasing its path, whether the background is set as transparent or opaque.

Internal Needle

The function required for rendering this widget is discussed in the gfx_Needle section of PIXXI Internal Functions Reference Manual. The Needle widget is shown in the diagram below.

Needle Diagram

Needle Diagram

There are five different styles available for the needle as shown below.

Triangle Triangle
Double Triangle Double Triangle
Round Rectangle Round Rectangle
Point Rectangle Point Rectangle
Line Line
Property Description
Name Widget name
Alias Widget alias
BGcolor Background colour (Required for erasing Needle path)
EndAngle Needle rotation end angle
Height Widget height
Left Top-left X-position
Maxvalue Needle maximum value
Minvalue Needle minimum value
NeedleColor Needle pointer colour
NeedleLength Needle pointer length
NeedleOffset Needle offset from centre of rotation
NeedlePinColor Needle pin colour
NeedlePinDotColor Needle pin dot colour
NeedlePinDotRadius Needle pin dot radius
NeedlePinRadius Needle pin radius
Needlestyle Needle pointer style
NeedleTail Needle tail length (Applicable only for double triangle style)
NeedleThickess Needle width (Half value of overall needle thickness)
StartAngle Needle rotation starting angle
Top Top-left Y-position
Width Widget width

Internal Gauge

The function required for rendering this widget is discussed in the gfx_Gauge section of PIXXI Internal Functions Reference Manual. The Gauge widget is shown in the diagram below.

Gauge Diagram

Gauge Diagram
Property Description
Name Widget name
Alias Widget alias
BaseColor Gauge base colour
Height Widget height
Left Top-left X-position
Maxvalue Gauge maximum value
Minvalue Gauge minimum value
Orientation Gauge orientation
P1ActiveColor Partition 1 bar active colour
P1lnactiveColor Partition 1 bar inactive colour
P2ActiveColor Partition 2 bar active colour
P2InactiveColor Partition 2 bar inactive colour
P2start Partition 2 percentage
P3ActiveColor Partition 3 bar active colour
P3InactiveColor Partition 3 bar inactive colour
P3start Partition 3 percentage
Spacing Bar spacing
Thickness Gauge thickness
Top Top-left Y-position
TopRight Change gauge fill direction
Width Widget width

Internal Ruler Gauge

The function required for rendering this widget is discussed in the gfx_RulerGauge section of PIXXI Internal Functions Reference Manual. The Internal Ruler Gauge widget is shown in the diagram below.

Ruler Gauge Diagram

Ruler Gauge Diagram
Property Description
Name Widget name
Alias Widget alias
BackGroundColor Gauge background colour
Height Widget height
Left Top-left X-position
MajorTickLength Major tick length
MajorTicks Total number of major ticks
Maxvalue Gauge maximum value
MinorTickLength Minor tick length
MinorTicks Total number of minor ticks
Orientation Gauge orientation
P1color Low range colour
P2color Medium range colour
P2start Starting value of the medium range
P3color High range colour
P3start Starting value of the high range
TickColor Tick colour
TicksBR Set tick position (Set to Yes for bottom/right side, otherwise top/left side)
Top Top-left Y-position
Width Widget width

Internal Input Widgets

These are widgets commonly used for receiving touch inputs from the user.

Internal Input Widgets

All Internal input widgets can be found under the Int/Inh Inputs tab of the widget selection pane as shown above.

Internal (PmmC) sliders

Internal (PmmC) sliders and knobs can be identified with the blue i located at the bottom left of the widget icon.

Internal Knob

The function required for rendering this widget is discussed in the gfx_Dial section of PIXXI Internal Functions Reference Manual. The Knob widget is shown in the diagram below.

Knob Diagram

Knob Diagram
Property Description
Name Widget name
Alias Widget alias
BackGroundColor Knob background colour
BevelColorA Knob bevel background left side colour
BevelColorB Knob bevel background right side colour
BevelSize Knob bevel thickness
BGtransparent Enable or disable background
Caption Knob caption text
CaptionColor Knob caption text colour
CaptionFont Knob caption text font, refer to the section External Font when using custom fonts
CaptionX0ffset Knob caption horizontal offset from centre of rotation
CaptionYOffset Knob caption vertical offset from centre of rotation
DiallndicatorStyle Knob dial indicator style
DialLength Knob dial length (Not applicable for Circle indicator style)
DialOffset Dial indicator offset relative to knob
DialSize Knob dial size (Not applicable for Line indicator style)
Height Widget height
KnobColor Knob face colour
KnobRadius Knob radius
LabelColor Label text colour
LabelCount Total number of labels (Actual labels = LabelCount + 1; set to -1 to disable labels)
LabelDiscrete Label type (Set to yes for individual text labels)
LabelFont Label text font, refer to the section External Font when using custom fonts
LabelOffset Label text offset relative to knob
Labels String input for individual text labels
Left Top-left X-position
MaxAngle Knob maximum angle
Maxvalue Knob maximum value
MinAngle Knob minimum angle
Minvalue Knob minimum value
P1ActiveColor Partition 1 indicator active colour
P1InactiveColor Partition 1 indicator inactive colour
P2ActiveColor Partition 2 indicator active colour
P2lnactiveColor Partition 2 indicator inactive colour
P2StartingAngle Partition 2 starting angle
P3ActiveColor Partition 3 indicator active colour
P3InactiveColor Partition 3 indicator inactive colour
P3StartingAngle Partition 3 starting angle
PointerColor Knob pointer colour
PointerLength Knob pointer length (Not applicable for circle pointer style)
PointerSize Knob pointer size (Not applicable for line pointer style)
PointerStyle Knob pointer style
Top Top-left Y-position
Width Widget width

Internal Slider E

The function required for rendering this widget is discussed in the gfx_Slider5 section of PIXXI Internal Functions Reference Manual. The Slider widget is shown in the diagram below.

Slider E Diagram

Slider E Diagram
Property Description
Name Widget name
Alias Widget alias
BRminorTicks Minor tick partitions between each major tick in the bottom/right side marker
BRtickCount Total number of ticks for the bottom/right side marker
Color Slider base colour
Font Value indicator font, refer to the section External Font when using custom fonts
FontColor Value indicator font colour
Height Widget height
Indicator Enable or disable value indicator
KnobColorA Slider knob gradient start colour
KnobColorB Slider knob gradient end colour
KnobGradient Slider knob gradient direction/style
KnobOutlineColorA Slider knob outline gradient start colour
KnobOutlineColorB Slider knob outline gradient end colour
KnobOutlineGradient Slider knob outline gradient direction/style
Left Top-left X-position
MajorTickColor Major tick colour
MajorTickLength Major tick length
Maxvalue Slider maximum value
MinorTickColor Minor tick colour
MinorTickLength Minor tick length
Minvalue Slider minimum value
Orientation Slider orientation
ProgressBar Enable or disable progress bar mode (Set to Yes to turn the slider into a gauge)
Ticks Enable or disable marker ticks
TLminorTicks Minor tick partitions between each major ticks in the top/left side marker
TLtickCount Total number of ticks for the top/left side marker
Top Top-left Y-position
TrackFillColorA Track fill colour from top/right side to current knob position
TrackFillColorB Track fill colour from bottom/left side to current knob position
Width Widget width

Internal Background Widgets

These are widgets commonly used for adding visual cues or design.

Internal Background Widgets

All background widgets can be found under the Background tab of the widget selection pane as shown above.

Internal (PmmC) background widgets

Internal (PmmC) background widgets can be identified with the blue i located at the bottom left of the widget icon.

Internal Panel B

The function required for rendering this widget is discussed in the gfx_Panel2 section of PIXXI Internal Functions Reference Manual. The Panel widget is shown in the diagram below.

Panel B Diagram

Panel B Diagram
Property Description
Name Widget name
Alias Widget alias
ColorFill Panel fill colour
Fill Enable or disable panel fill
Height Widget height
Left Top-left X-position
LineColor1 First bevel colour
LineColor2 Second bevel colour
LineWidth1 Panel outer bevel thickness
LineWidth2 Panel inner bevel thickness
State Panel bevel direction (Lowered or Raised)
Top Top-left Y-position
Width Widget width

Internal Scale

The function required for rendering this widget is discussed in the gfx_Scale section of PIXXI Internal Functions Reference Manual. The Scale widget is shown in the diagram below.

Scale Diagram

Scale Diagram
Property Description
Name Widget name
Alias Widget alias
BackGroundColor Numerical mark background colour
CentreGap Gap size when scale is centred
Font Scale font, refer to the section External Font when using custom fonts
FontColor Scale font colour
Left Top-left X-position
Length Widget length
Maximum Maximum value of the numerical mark
Minimum Minimum value of the numerical mark
Orientation Scale orientation (Horizontal or Vertical)
ScaleEndAlign Enable or disable alignment of the scale end marks to the corners
ScaleLoc Scale position relative to the central axis
ShowZero Enable or disable the zero mark on the scale
TickColor Tick colour
TickLength Major tick length
TickLengthMinor Minor tick length
TickMarks Marker tick position
Ticks Total number of major tick (Actual number of ticks = ticks – 1)
TicksMinor Number of minor ticks between each major ticks
Top Top-left Y-position

Inherent Widgets

The Inherent Widgets are the latest breakthrough in the 4D display graphics. It provides a way to deliver high quality graphical widgets without the use of microSD card.

These widgets are available for PIXXI and DIABLO-16 processors only. These are not available for GOLDELOX or PICASO.

In PIXXI processors, this type of widget requires external flash to store the resources for real time rendering. While in DIABLO-16, the same resources are stored in Flash Bank.

Like the Internal Widgets, this widget type is ideal for applications that requires complex graphics without using micro-SD cards.

Inherent Widgets requires a small amount of program space to store widget parameters. This reduces that amount of useable code space for the project. If the project will require a huge amount of code space and multiple widgets, it is highly advisable to use GCI widgets instead.

PIXXI projects utilizing inherent widgets needs to be redesigned to use GCI widgets instead. In DIABLO, inherent widgets can be used together with GCI widgets.

Note

Since there is limited available space in PIXXI External Flash, only a few different types of inherent widget can be used. This should be considered when adding a new type of widget to the project. Each type of Inherent widget used by PIXXI, gets stored in External Flash.

DIABLO-16 uses Flashbank5 to store all of the inherent widget resources (whether they are used in the application or not), so the overhead is not the same as it is for PIXXI processors.

Inherent Widget

Inherent Widget

Inherent Widget

Inherent Widget

Error 30 – DIABLO-16 Only

When compiling and loading your project using Workshop4, if you are presented with Error 30, this means you have not loaded the resources required for Inherent Widgets into the DIABLO-16 processor yet. This is only relevant for DIABLO-16, as PIXXI-28 and PIXXI-44 handle Inherent Widgets in a different manor.

The simple procedure requires you to go to the Tools Menu of Workshop4, and click the “Load Inherents into Bank 5” button while your display is connected to your PC via the 4D Programmer. From that point onward, your Inherent Widgets will function correctly.

Load Inherents into Bank 5 button

This process is only required to be done once typically, but if your project changes and you overwrite Flash Bank 5 of the DIABLO-16 processor, then this will need to be reloaded in order to use Inherent Widgets again. Updates to Workshop4 and additional Inherent widget functionality will also need the Inherent Widgets to be loaded again. Please refer to the Release Notes of Workshop4 to see if this is required.

Inherent Button Widgets

These are widgets commonly used for receiving touch inputs from the user.

Inherent Button Widgets

All buttons can be found under the Buttons tab of the widget selection pane as shown above.

Inherent Buttons

Inherent buttons can be identified with the red i located at the bottom left of the button icon.

Inherent Button E

The Button E widget is shown in the diagram below.

Button E Diagram

Button E Diagram

Button E OFF Position

Button E OFF Position
Property Description
Name Widget name
Alias Widget alias
BaseColorA Base bevel gradient start colour
BaseColorB Base bevel gradient end colour
BaseCornerRadius Base bevel corner radius (Ideally less than half of widget height)
BaseOffset Base bevel offset from the button face
FaceCornerRadius Button face corner radius (Ideally equal or less than BaseCornerRadius)
Font Caption text font, refer to the section External Font when using custom fonts
FontSize Caption text font size
Height Widget height
Left Top-left X-position
Matrix Button grouping (ViSi-Genie only)
Momentary Button type
OFFColor OFF position text label colour
OFFfaceColorA OFF position button face gradient start colour
OFFfaceColorB OFF position button face gradient start colour
OFFlabel OFF position button text
ONColor ON position text label colour
ONfaceColor ON position button face colour
ONLabel ON position button text
ShineColor LED shine effect colour
ShineEffect Enable or disable LED shine effect
ShineRadius LED shine effect radius (Ideally less than (Height/2 – basewidth – 4))
Top Top-left Y-position
Width Widget width

Inherent Switch B

The Switch B widget is shown in the diagram below.

Switch B Diagram

Switch B Diagram
Property Description
Name Widget name
Alias Widget alias
BevelMainColor Container and switch bevel main colour
BevelShadowColor Container and switch bevel shadow colour
ContainerBevelThickness Container bevel thickness
Font Label font, refer to the section External Font when using custom fonts
FontSize Label font size
Height Widget height
Left Top-left X-position
OFFColor OFF position text label colour
OFFLabel OFF position text label
OFFPositionFill OFF position track fill colour
ONColor ON position text label colour
ONLabel ON position text label
ONPositionFill ON position track fill colour
Orientation Switch orientation
SwitchBevelThickness Switch bevel thickness
Top Top-left Y-position
Width Widget width

Inherent Toggle Input

The Inherent Toggle Input Widget is a Workshop4 PRO widget that allows users to design their own buttons using 4DGL code. When added to a project, this widget is shown as a generic rectangular image as shown below.

Inherent Toggle Input

This is merely a representation of the rectangular space occupied by the button and the colours selected for the widget properties. Note that the actual appearance will depend on the user code.

Property Description
Name Widget name
Alias Widget alias
Code Inherent Toggle Input User INC file
Color1 First colour available for user code
Color2 Second colour available for user code
Color3 Third colour available for user code
Color4 Fourth colour available for user code
Color5 Fifth colour available for user code
Color6 Sixth colour available for user code
Height Widget height
Left Top-left X-position
Matrix Button grouping (ViSi-Genie only)
Momentary Button type
Text1 First text available for user code
Text2 Second text available for user code
Text3 Third text available for user code
Top Top-left Y-position
Value1 First value available for user code
Value2 Second value available for user code
Value3 Third value available for user code
Value4 Fourth value available for user code
Value5 Fifth value available for user code
Value6 Sixth value available for user code
Width Widget width

Inherent Media Button

The Media Button widget is shown in the diagram below.

Media Button Diagram

Media Button Diagram

The media button has 47 available Button Styles as shown below.

47 available Media Button Styles

Round - Round Halfmoon Right Flat - Halfmoon Right Flat Round Flat - Round Flat
Keyboard Round - Keypad Round Round Medium Flat - Round Medium Flat Keypad Square - Keypad Square
Square - Square Up - Up Square Flat - Square Flat
Down - Down Round Raised Sunken - Round Raised Sunken Left - Left
Round Sunken Raised - Round Sunken Raised Right - Right Round Sunken Flat - Round Sunken Flat
Up Flat - Up Flat Round Sunken Sunken - Round Sunken Sunken Down Flat - Down Flat
Square Raised Sunken - Square Raised Sunken Left Flat - Left Flat Square Sunken Raised - Square Sunken Raised
Right Flat - Right Flat Square Sunken Flat - Square Sunken Flat Led1 Round - Led1 Round
Square Sunken Sunken - Square Sunken Sunken Led1 Square - Led1 Square Halfmoon Up Sunken - Halfmoon Up Sunken
Led1 Round Flat - Led1 Round Flat Halfmoon Down Sunken - Halfmoon Down Sunken Led1 Square Flat - Led1 Square Flat
Halfmoon Left Sunken - Halfmoon Left Sunken Led1 Round Sunk - Led1 Round Sunk Halfmoon Right Sunken - Halfmoon Right Sunken
Led1 Square Sunk - Led1 Square Sunk Halfmoon Up Raised - Halfmoon Up Raised Led2 Round - Led2 Round
Halfmoon Down Raised - Halfmoon Down Raised Led2 Square - Led2 Square Halfmoon Left Raised - Halfmoon Left Raised
Led2 Round Flat - Led2 Round Flat Halfmoon Right Raised - Halfmoon Right Raised Led2 Square Flat - Led2 Square Flat
Halfmoon Up Flat - Halfmoon Up Flat Led2 Round Sunk - Led2 Round Sunk Halfmoon Down Flat - Halfmoon Down Flat
Led2 Square Sunk - Led2 Square Sunk Halfmoon Left Flat - Halfmoon Left Flat

The Media Button has 21 different types of Button Symbols as shown below.

21 different types of Media Button Symbols

Nothing - Nothing Pause - Pause Text Symbol - Text Symbol
Next - Next INC Vertical - INC Vertical Prev - Prev
DEC Vertical - DEC Vertical Fast-Forward - Fast-Forward INC Horizontal - INC Horizontal
Rewind - Rewind DEC Horizontal - DEC Horizontal Stop - Stop
INC Horizontal Thin - INC Horizontal Thin Plus - Plus DEC Horizontal Thin - DEC Horizontal Thin
Minus - Minus INC Vertical Thin - INC Vertical Thin Plus Thin - Plus Thin
DEC Vertical Thin - DEC Vertical Thin Minus Thin - Minus Thin Play - Play
Property Description
Name Widget name
Alias Widget alias
BackgroundColor Background colour for the sunken ring
Font Text font style, refer to the section External Font when using custom fonts
FontMagnification Text font style
Height Widget height
InnerGradColor Button face colour
LedOffColor LED Off colour
LedOnColor LED On colour
Left Top-left X-position
Matrix Button grouping (ViSi-Genie only)
Momentary Button type
OuterGradColor Button face bevel colour
OuterGradWidth Button face bevel width
RingWidth Button recess width (0 to disable)
Style Button style
Symbol Symbol type
SymbolColor Symbol colour
Text Text symbol string input
Top Top-left Y-position
Width Widget width

Inherent Digits Widgets

These are widgets commonly used for displaying values or status information.

Inherent Digits Widgets

All Digits widgets can be found under the Digits tab of the widget selection pane as shown above. This pane is mostly composed of Leds and Digits.

Inherent Widgets

Inherent widgets can be identified with the red i located at the bottom left of the widget icon.

Inherent Media LED

The Media LED widget is shown in the diagram below.

Media LED Diagram

Media LED Diagram

The media button has 12 available LED Styles as shown below.

12 available LED Styles for Media Button

Led1 Round - Led1 Round Led2 Round - Led2 Round Led1 Square - Led1 Square
Led2 Square - Led2 Square Led1 Round Flat - Led1 Round Flat Led2 Round Flat - Led2 Round Flat
Led1 Square Flat - Led1 Square Flat Led2 Square Flat - Led2 Square Flat Led1 Round Sunk - Led1 Round Sunk
Led2 Round Sunk - Led2 Round Sunk Led1 Square Sunk - Led1 Square Sunk Led2 Square Sunk - Led2 Square Sunk

The Media Button has 21 different types of Button Symbols as shown below.

21 different types of Media Button Symbols

Media_No_Symbol - Media_No_Symbol Media_Pause - Media_Pause Media_Text_Symbol - Media_Text_Symbol
Media_Next - Media_Next Media_INC_Vertical - Media_INC_Vertical Media_Prev - Media_Prev
Media_DEC_Vertical - Media_DEC_Vertical Media_Fast-Forward - Media_Fast-Forward Media_INC_Horizontal - Media_INC_Horizontal
Media_Rewind - Media_Rewind Media_DEC_Horizontal - Media_DEC_Horizontal Media_Stop - Media_Stop
Media_INC_Horizontal_Thin - Media_INC_Horizontal_Thin Media_Plus - Media_Plus Media_DEC_Horizontal_Thin - Media_DEC_Horizontal_Thin
Media_Minus - Media_Minus Media_INC_Vertical Thin - Media_INC_Vertical Thin Media_Plus_Thin - Media_Plus_Thin
Media_DEC_Vertical_Thin - Media_DEC_Vertical_Thin Media_Minus_Thin - Media_Minus_Thin Media_Play - Media_Play
Property Description
Name Widget name
Alias Widget alias
BackgroundColor Background colour for sunken ring
Font Label font style, refer to the section External Font when using custom fonts
FontMagnification Font size multiplier for optional text
Height Widget height
InnerGradColor Button face colour
LedOffColor LED Off colour
LedOnColor LED On colour
Left Top-left X-position
OuterGradColor LED face bevel colour
OuterGradWidth LED face bevel width
RingWidth LED recess width (0 to disable)
Style LED style
Symbol Symbol type
SymbolColor Symbol colour
Text Text symbol string input
Top Top-left Y-position
Width Widget width

Inherent Gauge Widgets

These are widgets commonly used for displaying values.

Inherent Gauge Widgets

All gauges can be found under the Gauges tab of the widget selection pane as shown above.

Inherent Gauges

Inherent gauges can be identified with the red i located at the bottom left of the gauge icon.

Inherent User Gauge

The Inherent User Gauge widget is a Workshop4 PRO widget that allows users to design their own gauges using 4DGL code. When added to a project, this widget is shown as a generic rectangular image as shown below.

Inherent Gauge Widgets

This is merely a representation of the rectangular space occupied by the gauge and the colours selected for the widget properties. Note that the actual appearance will depend on the user code.

Property Description
Name Widget name
Alias Widget alias
Code Inherent User Gauge INC file
Color1 First colour available for user code
Color2 Second colour available for user code
Color3 Third colour available for user code
Color4 Fourth colour available for user code
Color5 Fifth colour available for user code
Color6 Sixth colour available for user code
Height Widget height
Left Top-left X-position
Text1 First text available for user code
Text2 Second text available for user code
Text3 Third text available for user code
Top Top-left Y-position
Value1 First value available for user code
Value2 Second value available for user code
Value3 Third value available for user code
Value4 Fourth value available for user code
Value5 Fifth value available for user code
Value6 Sixth value available for user code
Width Widget width

Inherent Media Gauge

The Media Gauge widget is shown in the diagram below.

Media Gauge Diagram

Media Gauge Diagram

The Media Gauge has sixteen (16) available styles as shown below.

16 different types of Media Gauge Styles

Circular - Circular HalfmoonLeft - HalfmoonLeft Square - Square
HalfmoonRight - HalfmoonRight Rectangular - Rectangular HalfmoonTop - HalfmoonTop
Meter - Meter HalfmoonBottom - HalfmoonBottom QuartermoonTopLeft - QuartermoonTopLeft
SquareTopLeft - SquareTopLeft QuartermoonTopRight - QuartermoonTopRight SquareTopRight - SquareTopRight
QuartermoonBottomLeft - QuartermoonBottomLeft SquareBottomLeft - SquareBottomLeft QuartermoonBottomRight - QuartermoonBottomRight
SquareBottomRight - SquareBottomRight
Property Description
Name Widget name
Alias Widget alias
Bezel Enable or disable bezel
BezelBackground Bezel effect
BezelColor Bezel colour
BezelGradient Bezel gradient style
BezelInnerGradient Bezel Inner gradient style
DialColor Dial face colour
DialGradient Dial inner gradient style
Font Ticks values font, refer to the section External Font when using custom fonts
FontMagnification Ticks value magnification
GaugeEndAngle End angle of the scale
GaugeStartAngle Start angle of the scale
Height Height of the Widget
HighColor High range scale colour
InnerBezelColor Inner Bezel Colour
InnerWidth Width of ring inside the bezel
LabelOffset Offset of labels from edge excluding bezel. Can be negative
Left Top-left X-position
LowColor Low range scale colour
LowPercent Coloured scale low range percent value
MedColor Medium range scale colour
MedPercent Coloured scale medium range value
MeterCaption Text for meter caption
NeedleColor Colour of needle and pin
OuterWidth Width of bezel
RangeHigh Maximum value of range
RangeLow Minimum value of range
Scale Enable or disable scale
ScaleDivisor Divide range value to print smaller tick values
ShineLevel Shine level (-30 to 30)
Style Style of gauge
TextColor Text colour
TextEnd High range end text (will remove the tick values if filled with character or string)
TextStart Low range end text (will remove the tick values if filled with character or string)
TickColor Ticks colour
Ticks Number of ticks
Top Top-left Y-position
Width Widget width

Inherent Media Thermometer

The Fancy Thermometer widget is shown in the diagram below.

Fancy Thermometer Diagram

Fancy Thermometer Diagram
Property Description
Name Widget name
Alias Widget alias
BaseColor Base colour
BulbColor Color of the thermometer bulb
Font Font for C or F Unit, refer to the section External Font when using custom fonts
FontMagnification Font Maginification for C or F Unit
Height Widget height
Left Top-left X-position
Max Maximum value
Metric Select Unit Metric (C) or Imperial (F)
Min Minimum value
ScaleColor Scale tick colour
ScaleFont Scale values font style, refer to the section External Font when using custom fonts
ScaleFontMagnification Maginification of scale font
TextColor Font colour for scale value and label
Ticks Number of ticks
Top Top-left Y-position
Width Widget width

Inherent Input Widgets

These are widgets commonly used for receiving touch inputs from the user.

Inherent Input Widgets

All Inherent input widgets can be found under the Int/Inh Inputs tab of the widget selection pane as shown above.

Inherent sliders and knobs

Inherent sliders and knobs can be identified with the red i located at the bottom left of the widget icon.

Inherent Slider C

The Slider C widget is shown in the diagram below.

Slider C Diagram

Slider C Diagram
Property Description
Name Widget name
Alias Widget alias
Frames Slider maximum value
Height Widget height
InnerGradient Slider container inner lining gradient direction/style
InnerGradientColorA Slider container inner lining gradient start colour
InnerGradientColorB Slider container inner lining gradient end colour
KnobColorA Slider knob gradient start colour
KnobColorB Slider knob gradient end colour
KnobFaceDotColor Slider knob dot colour
KnobGradient Slider knob gradient direction/style
KnobOutlineColorA Slider knob outline gradient start colour
KnobOutlineColorB Slider knob outline gradient end colour
KnobOutlineGradient Slider knob outline gradient direction/style
Left Top-left X-position
Orientation Slider orientation
OuterGradient Slider container outer lining gradient direction/style
OuterGradientColorA Slider container outer lining gradient start colour
OuterGradientColorB Slider container outer lining gradient end colour
ProgressBar Enable or disable progress bar mode (Set to Yes to turn the slider into a gauge)
Top Top-left Y-position
TrackFillColorA Track fill colour from top/right side to current knob position
TrackFillColorB Track fill colour from bottom/left side to current knob position
Width Widget width

Inherent Slider D

The Slider D widget is shown in the diagram below.

Inherent Slider D Diagram

Inherent Slider D Diagram
Property Description
Name Widget name
Alias Widget alias
BorderColor Slider base border colour
Color Slider base colour
Font Value indicator font, refer to the section External Font when using custom fonts
FontColor Value indicator font colour
Height Widget height
Indicator Enable or disable value indicator
KnobGradient Slider knob gradient direction/style
KnobOutlineColorA Slider knob gradient start colour
KnobOutlineColorB Slider knob gradient end colour
LEDActiveColor Active LED colour
LEDColorA LED outline gradient start colour
LEDColorB LED outline gradient end colour
LEDGradient LED outline gradient direction/style
LEDInactiveColorA Inactive LED gradient start colour
LEDInactiveColorB Inactive LED gradient end colour
LEDInactiveGradient Inactive LED gradient direction/style
LEDPartition Number of partitions between each LED
LEDRadius LED radius
Left Top-left X-position
Maxvalue Slider maximum value
Minvalue Slider minimum value
Orientation Slider orientation
SwitchMode Enable or disable multiposition switch mode
Top Top-left Y-position
TrackFillColorA Track gradient start colour
TrackFillColorB Track gradient end colour
TrackOutlineColorA Track outline gradient start colour
TrackOutlineColorB Track outline gradient end colour
Width Widget width

Inherent Slider F

The Slider F widget is shown in the diagram below.

Slider F Diagram

Slider F Diagram
Property Description
Name Widget name
Alias Widget alias
Color Slider base colour
Font Value indicator font, refer to the section External Font when using custom fonts
FontColor Value indicator font colour
Height Widget height
Indicator Enable or disable value indicator
KnobColor Slider knob colour
Left Top-left X-position
Maxvalue Slider maximum value
Minvalue Slider minimum value
Orientation Slider orientation
ProgressBar Enable or disable progress bar mode (Set to Yes to turn the slider into a gauge)
TickColor Tick colour
TickCount Total number of ticks
Ticks Enable or disable marker ticks
TickWidth Tick thickness
Top Top-left Y-position
TrackFillColorA Track fill colour from top/right side to current knob position
TrackFillColorB Track fill colour from bottom/left side to current knob position
Width Widget width

Inherent Slider G

The Slider G widget is shown in the diagram below.

Inherent Slider G Diagram

Inherent Slider G Diagram
Property Description
Name Widget name
Alias Widget alias
Color Slider base colour
Font Value indicator font, refer to the section External Font when using custom fonts
FontColor Value indicator font colour
Height Widget height
Indicator Enable or disable value indicator
KnobColor Slider knob colour
Left Top-left X-position
Maxvalue Slider maximum value
Minvalue Slider minimum value
Orientation Slider orientation
ProgressBar Enable or disable progress bar mode (Set to Yes to turn the slider into a gauge)
TickColor Tick colour
TickCount Total number of ticks
Ticks Enable or disable marker ticks
TickWidth Tick thickness
Top Top-left Y-position
TrackFillColorA Track fill colour from top/right side to current knob position
TrackFillColorB Track fill colour from bottom/left side to current knob position
Width Widget width

Inherent Slider H

The Slider H widget is shown in the diagram below.

Slider H Diagram

Slider H Diagram
Property Description
Name Widget name
Alias Widget alias
Color Slider base colour
Frames Slider maximum value
Height Widget height
KnobDotColor Slider dot colour
Left Top-left X-position
Orientation Slider orientation
ProgressBar Enable or disable progress bar mode (Set to Yes to turn the slider into a gauge)
Top Top-left Y-position
TrackFillColorA Track fill colour from top/right side to current knob position
TrackFillColorB Track fill colour from bottom/left side to current knob position
Width Widget width

Inherent Linear Input

The Inherent Linear Input widget is a Workshop4 PRO widget that allows users to design their own linear inputs such as sliders and trackbars using 4DGL code. When added to a project, this widget is shown as a generic rectangular image as shown below.

Inherent Linear Input

This is merely a representation of the rectangular space occupied by the linear input and the colours selected for the widget properties. Note that the actual appearance will depend on the user code.

Property Description
Name Widget name
Alias Widget alias
Code Inherent Linear Input INC file
Color1 First colour available for user code
Color2 Second colour available for user code
Color3 Third colour available for user code
Color4 Fourth colour available for user code
Color5 Fifth colour available for user code
Color6 Sixth colour available for user code
Height Widget height
Left Top-left X-position
Maxvalue Value at maximum position
Minvalue Value at minimum postion
OffsetBR Touch offset at Bottom (vertical) or Right (horizontal)
OffsetTL Touch offset at Top (vertical) or Left (horizontal)
Orientation Linear input orientation
Text1 First text available for user code
Text2 Second text available for user code
Text3 Third text available for user code
Top Top-left Y-position
Value1 First value available for user code
Value2 Second value available for user code
Value3 Third value available for user code
Value4 Fourth value available for user code
Value5 Fifth value available for user code
Value6 Sixth value available for user code
Width Widget width

Inherent Rotary Input

The Inherent Rotary Input widget is a Workshop4 PRO widget that allows users to design their own circular inputs using 4DGL code. When added to a project, this widget is shown as a generic rectangular image as shown below.

Inherent Rotary Input

This is merely a representation of the rectangular space occupied by the rotary input and the colours selected for the widget properties. Note that the actual appearance will depend on the user code.

Property Description
Name Widget name
Alias Widget alias
Code Inherent User Gauge INC file
Color1 First colour available for user code
Color2 Second colour available for user code
Color3 Third colour available for user code
Color4 Fourth colour available for user code
Color5 Fifth colour available for user code
Color6 Sixth colour available for user code
Height Widget height
Left Top-left X-position
MaxAngle Angle position at maximum value (0 is East)
Maxvalue Value at maximum position
MinAngle Angle position at minimum value (0 is East)
Minvalue Value at minimum position
Text1 First text available for user code
Text2 Second text available for user code
Text3 Third text available for user code
Top Top-left Y-position
Value1 First value available for user code
Value2 Second value available for user code
Value3 Third value available for user code
Value4 Fourth value available for user code
Value5 Fifth value available for user code
Value6 Sixth value available for user code
Width Widget width

Inherent Media Slider

The Media Slider widget is shown in the diagram below.

Media Slider Diagram

Media Slider Diagram
Property Description
Name Widget name
Alias Widget alias
BackGroundColor Base colour
Frames Slider maximum value starting from zero
Height Widget height
KnobCentreCcolor Slider knob centre face colour
KnobCentreSunken Slider knob centre face direction (Yes for Sunken, No for Raised)
KnobOuterColor Slider knob ring colour
KnobRingSunken Slider knob ring direction (Yes for Sunken, No for Raised)
Left Top-left X-position
NewOW Slider knob ring thickness
Orientation Widget orientation
ScaleBevelColor Scale bevel colour
ScaleBevelSunken Scale bevel direction (Yes for Sunken, No for Raised)
ScaleBevelWidth Scale bevel width
ScaleCentreSunken Scale centre fill direction (Yes for Sunken, No for Raised)
ScaleHeight Scale centre fill thickness
ScaleLeftColor Colour on top/left fill of the scale
ScaleRightColor Colour on bottom/right fill of the scale
ShineLevel Shine effect value
Top Top-left Y-position
Width Widget width

Inherent Media Rotary

The Media Rotary widget is shown in the diagram below.

Media Rotary Diagram

Media Rotary Diagram

The Media Rotary widget has fourteen (14) available input styles as shown below.

14 available input styles for Media Rotary

Style00 - Style00 Style07 - Style07 Style01 - Style01
Style08 - Style08 Style02 - Style02 Style09 - Style09
Style03 - Style03 Style10 - Style10 Style04 - Style04
Style11 - Style11 Style05 - Style05 Style12 - Style12
Style06 - Style06 Style13 - Style13
Property Description
Name Widget name
Alias Widget alias
Frames Maximum value starting from zero
Height Widget height
IndicatorOffset Indicator position from the centre of rotation
IndicatorRadius Indicator radius
IndInnerColor Indicator colour
IndOuterColor Indicator bevel colour
InnerDiameter Knob recess diameter
InnerEdgeColor Knob recess bevel colour
InnerEdgeWidth Knob recess bevel thickness
InnerRadiusColor Knob recess face colour
Left Top-left X-position
MaxAngle Maximum angle
MinAngle Minimum angle
OuterEdgeColor Knob base bevel colour
OuterEdgeWidth Knob base bevel thickness
OuterRadiusColor Knob base colour
RotaryInputStyle Rotary input style
ShineLevel Shine Level (0-21)
Top Top-left Y-position
Width Widget width

Inherent Label Widgets

These are widgets commonly used for displaying text information.

Inherent Label Widgets

All label widgets can be found under the Labels tab of the widget selection pane as shown above.

Inherent Widgets

Inherent widgets can be identified with the red i located at the bottom left of the widget icon.

Inherent Label B

The Inherent Label B widget is shown in the diagram below.

Inherent Label B Diagram

Inherent Label B Diagram

The text inside the label can be aligned as shown below.

Left Aligned

Center Aligned

Right Aligned

Property Description
Name Widget name
Alias Widget alias
Alignment Text alignment inside the textbox
BGcolor Label background colour
Buffer Maximum textbox string buffer size (including trailing null)
Caption Label text string input
Font Text font style, refer to the section External Font when using custom fonts
FontColor Text colour
FontSize Text font size
Height Textbox height
Left Top-left X-position
Margin Margin from top, left for left alignment, right for right alignment
Top Top-left Y-position
Width Widget width

Inherent Background Widgets

These are widgets commonly used for adding visual cues or design.

Inherent Background Widgets

All background widgets can be found under the Background tab of the widget selection pane as shown above.

Inherent Background Widgets

Inherent background widgets can be identified with the red i located at the bottom left of the widget icon.

Inherent Media Panel

The Media Panel widget is shown in the diagram below.

Media Panel Diagram

Media Panel Diagram
Property Description
Name Widget name
Alias Widget alias
Left Top-left X-position
Top Top-left Y-position
Width Widget width
Height Widget height
Bevelcolour Bevel colour
Panelcolour Panel colour
Outerwidth Width of bezel
RadTopLeft Fillet radius of top-left corner
RadTopRight Fillet radius of top-right corner
RadBottomLeft Fillet radius of bottom-left corner
RadBottomRight Fillet radius of bottom-right corner
BevelGradSunken Raise or sunk bezel gradient
PanelGradSunken Raise or sunk panel gradient
BevelGradLevel Bezel Gradient Level. 0-63, -1 is top and bottom gradient
PanelGradLevel Panel Gradient Level. 0-63, -1 is top and bottom gradient

Miscellaneous Widgets

There are several non-GUI widgets available to use depending on environment and target module. This includes hardware I/O, timer and sound related functionalities.

Pin I/O Widgets

Pin I/O Widgets are available to use when in ViSi Genie environment with a compatible processor.

Pin I/O Widgets

Pin Input

The pin input widget allows ViSi Genie projects to add basic digital input functionality.

Property Description
Name Widget name
Alias Widget alias
IdleState State of the pin when idle
Pin Pin number

Pin Output

The pin output widget allows ViSi Genie projects to add basic digital output functionality.

Property Description
Name Widget name
Alias Widget alias
IdleState State of the pin when idle
PulseDuration Duration of pulse when active
Pin Pin number

System/Media

Several system and media widgets are available for the user.

System/Media Widgets

Sound - Sound Timer - Timer External Font - External Font

Sound

The sound widget allows ViSi Genie projects to add basic sound functionality.

Property Description
Name Widget name
Alias Widget alias
WavFiles List of wav files to be played

The Sound object is different to other objects in that there is only one of them (Sounds0) and that the values have predefined meanings. Performing a write object sets them. Reading Index 0 returns the number of blocks left to play.

Here are the object indexes used by the Sound Widget.

Object Index Description
0 Play wav file at specified value
1 Set Volume to specified value
2 Pause
3 Continue
4 Stop

Note

The Sound object (like the Timer object) will always reside in Form0.

Timer

The timer widget allows ViSi Genie projects to add basic timer functionality.

Property Description
Name Widget name
Alias Widget alias
Enabled Initial state of the timer. Set to yes to indicate the timer is to start when the program is loaded. Once enabled, the timer continues until the Video displays its last frame
Interval The number of milliseconds between timer events.

Note

The Sound object (like the Timer object) will always reside in Form0.

External Font

External Fonts provides Workshop4 projects the ability to render custom fonts from external storage devices such as a microSD card or a flash chip.

When using this feature in a ViSi project, the following are required:

  • The first (global) variable in your program must be an array of 'handles'.
  • If using an external flash:
    • the elements of the array should be the indexes of the font in the Flash File system
    • An Inherent/Internal widget should use -1-array_index when using the font in its widget definition
  • If using a microSD card:
    • the elements of the array should be the font 'handle' that can be acquired using file_LoadImageControl
    • An Inherent/Internal widget should use -8193-array_index when using the font in its widget definition

These requirements are done automatically in ViSi Genie projects.

Property Description
Name Widget name
Alias Widget alias
Bold Set if the font is bold
CharSet Set whether the character set covers ANSI or Unicode set
FontName Font Family
Italic Set if the font is italic
Size Size of the font
Strikethrough Set if the font is ~~strikethrough~~
Underline Set if the font is underlined

Revision History

Document Revision

Revision Date Revision Content
1.0 07/02/2020 Initial release version
1.1 23/07/2020 Document title changes, GCI, Internal, Inherent for better readability
Fixed a few minor typos with widget names
Added miscellaneous widgets
1.2 25/03/2021 Addition of Error 30 into this document, previously only in Diablo16 Processor Datasheet
1.3 06/12/2023 Modified for web-based documentation