Wiki bot: Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 1.0 |- | width="20%" style="color:gray;..."

2025-10-22T14:13:51Z

Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 1.0 |- | width="20%" style="color:gray;..."

New page

{| style="width:50%"
|-
| width="20%" style="color:gray;" | Author
| MatrixTSL
|-
| width="20%" style="color:gray;" | Version
| 1.0
|-
| width="20%" style="color:gray;" | Category
| Graphical Library
|}

==Display Manager Dummy component==
A component designed to simplify the process of drawing primitives and text onto a graphical display. Keeps track of coordinates so you don't have to. Also works great as a base layer for gLCD based games as it will check for collisions and perform movement.

==Detailed description==

===Objects===

The component can create the following objects.

*'''Object_Hidden''' - 0 - A hidden area with no graphics.
*'''Object_Rectangle''' - 1 - A simple rectangular box.
*'''Object_Line''' - 2 - A simple straight line.
*'''Object_Ellipse''' - 3 - A simple ellipse or circle.
*'''Object_EllipseFilled''' - 4 - A filled ellipse or circle.
*'''Object_RectangeFilled''' - 5 - A filled rectangular box.

===TextField===

There is also an additional TextField object which consists of an Object_Rectangle that is pre-populated with text.

===Widgets===

The component can also create the following interactive buttons and sliders.

*'''Widget_Hidden''' - 0 - A hidden area with no graphics.
*'''Widget_Rectangle''' - 1 - A rectangular box with a shadow.
*'''Widget_RoundedRectangle''' - 2 - A rounded rectangular box with a shadow.
*'''Widget_Ellipse''' - 3 - A simple ellipse or circle with a shadow.
*'''Widget_VSlider''' - 4 - A vertical slider with a square thumb.
*'''Widget_HSlider''' - 5 - A horizontal slider with a square thumb.
*'''Widget_VSlider_Round''' - 6 - A vertical slider with a round thumb.
*'''Widget_HSlider_Round''' - 7 - A horizontal slider with a round thumb.

The type can be entered by using the component's public constants. Begin with the Display Manager handle name followed by :: and the list of the public variables will be displayed.

For example... '''DisplayManager1::Object_Rectangle''' or '''DisplayManager1::Widget_VSlider'''

===Touch Repeat Rate for Button Widgets===

The Touch Repeat Rate property applies to button based widgets and sets the frequency that a valid touch will be detected for a held button. This is similar to holding down a single key on a keyboard and acts to reduce the frequency of positive button detections when touching the button. For example if you had a button that incremented a value, without the repeat rate the value would increment much faster then anticipated in an uncontrollable manner. When no touch is detected it is recommended to call the NoTouch macro to clear the touch counters and allow a more responsive user experience.

Example of implementing touch repeat rate

[[File:ButtonRepeatRate.jpg]]

==Examples==

===Basic Example===

An example showing how to use the display manager with a gLCD and a touch interface to create a full HMI.

The example shows how to create a simple menu system as well as a toggle switch and a slider used to control a PWM output.

{{Fcfile|DisplayManagerDemo.fcfx|Display Manager Demo}}

===Keypad Example===

An example showing how you can use the CreateWigitArray component to create a touch keypad for your gLCD.

[[File:Updated__Display_Manager1.png]]

The CreateWidgetArray function macro has a number of parameters to allow high flexibility in what you can create:

[[File:Updated__Display_Manager2.png]]

There are also tooltips for each parameter to help.

[[File:Updated__Display_Manager3.png]]

Note: if you get a unable to run simulation error then make sure you have the latest components downloaded.

How the key touch is detected

The first widget is automatically assigned a unique widget ID e.g. the first widget with text 1 on it is assigned 24.

All the following widgets ID is then incremented from 24, e.g. widget with text 6 on is assigned 24+ 5 = 29.

The widget button pressed can then be calculated from 29 – 24 + 1 = 6.

{{Fcfile|DisplayManager_WidgetArray_Keypad_Example.fcfx|Display Manager Widget Array Keypad Example}}

==Macro reference==

===GetSliderValue===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetSliderValue'''
|-
| colspan="2" | Reads the value of one of the sliders ranging between 0 and 1. 
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | WidgetID
|-
| colspan="2" |  
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-f32-icon.png]] - FLOAT
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===ModifyBitmap===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''ModifyBitmap'''
|-
| colspan="2" | Allows the bitmap image to be swapped out 
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | ID
|-
| colspan="2" | Object or Widget ID to update 
|-
| width="10%" align="center" | [[File:Fc9-string-icon.png]] - STRING
| width="90%" | Filename
|-
| colspan="2" | Bitmap filename in 8.3 file format 
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | Scaling
|-
| colspan="2" | 0=Native, 1=Stretch 
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | Transparancy
|-
| colspan="2" | 0=Disabled, 1=Enabled 
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | Redraw
|-
| colspan="2" |  
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===ModifyColour===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''ModifyColour'''
|-
| colspan="2" | Changes the theme index of the selected Object or Widget. 
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | ID
|-
| colspan="2" | Unique ID of the object or Widget 
|-
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
| width="90%" | Index
|-
| colspan="2" | 0=Foreground, 1=Background, 2=Highlight 
|-
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
| width="90%" | R
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
| width="90%" | G
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
| width="90%" | B
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | Redraw
|-
| colspan="2" |  
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===ModifyPosition===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''ModifyPosition'''
|-
| colspan="2" | Moves an existing object or Widget to absolute coordinates on the screen. 
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | ID
|-
| colspan="2" | Unique ID of the object or Widget 
|-
| width="10%" align="center" | [[File:Fc9-s16-icon.png]] - INT
| width="90%" | X
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-s16-icon.png]] - INT
| width="90%" | Y
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | Relative
|-
| colspan="2" | 0=Absolute Positioning, 1=Relative Positioning 
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===ModifyScale===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''ModifyScale'''
|-
| colspan="2" | Changes the width and height of the selected Object or Widget. 
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | ID
|-
| colspan="2" | Unique ID of the object or Widget 
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | Width
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | Height
|-
| colspan="2" |  
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===SetSliderValue===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetSliderValue'''
|-
| colspan="2" | Sets the value of one of the sliders and optionally redraws the slider to reflect the value change. 
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | WidgetID
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-f32-icon.png]] - FLOAT
| width="90%" | Value
|-
| colspan="2" | Range: 0 to 1 
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | RedrawSlider
|-
| colspan="2" | 0=Do not redraw, 1=Redraw 
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===SetTextLabel===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetTextLabel'''
|-
| colspan="2" | Draws a single line of text onto an object or Widget location. Useful for labelling Widgets such as buttons or having name, value statistics. Drawn using the object themes. 
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="90%" | ID
|-
| colspan="2" | Unique identifier of object or Widget. 
|-
| width="10%" align="center" | [[File:Fc9-string-icon.png]] - STRING
| width="90%" | Text
|-
| colspan="2" | Text string to set as the label 
|-
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
| width="90%" | Font
|-
| colspan="2" | GLCD Font Index to use 
|-
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
| width="90%" | HAlignment
|-
| colspan="2" | 0=Left, 1=Center, 2=Right 
|-
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
| width="90%" | VAlignment
|-
| colspan="2" | 0=Top, 1=Middle, 2=Bottom 
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | Transparent
|-
| colspan="2" | 0=Background Colour Drawn, 1=Don't Draw Background Colour 
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

==Property reference==

{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''
|-
|}

==Component Source Code==

Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_Lib_DisplayManagerDummy.fcfx FC_Comp_Source_Lib_DisplayManagerDummy.fcfx]

Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_Lib_DisplayManagerDummy.fcfx FC_Comp_Source_Lib_DisplayManagerDummy.fcfx]

Component: Display Manager Dummy (Graphical Library) - Revision history

Wiki bot: Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 1.0 |- | width="20%" style="color:gray;..."