Component: Display Manager (Graphical Library) - Revision history

BenR at 09:56, 6 May 2026

2026-05-06T09:56:36Z

2026-05-06T09:56:04Z

Flowcode v11

2026-05-06T09:54:29Z

Flowcode v11

2026-05-06T09:54:03Z

2026-04-27T08:58:05Z

2025-10-22T14:13:50Z

2025-06-09T08:59:24Z

2025-04-01T14:51:45Z

Basic Example

2025-04-01T14:47:49Z

Examples

2025-03-28T11:36:21Z

Examples

@@ Line 86: / Line 86: @@
 [https://youtu.be/KM_CKja7wXY Graphical Display Manager and Layout Editor Part 2]
-====Converting Flowcode v10 examples====
+The v10 examples can also be used in v11 but the functions have changed slightly, now you need to define the colours for each object rather then by setting an overall colour theme.
 ===Flowcode v10===

← Older revision		Revision as of 09:56, 6 May 2026
Line 85:		Line 85:

	[https://youtu.be/KM_CKja7wXY Graphical Display Manager and Layout Editor Part 2]		[https://youtu.be/KM_CKja7wXY Graphical Display Manager and Layout Editor Part 2]
		+
		+
		+	====Converting Flowcode v10 examples====
		+
		+	The v10 examples can also be used in v11 but the functions have changed slightly, now you need to define the colours for each object rather then by setting an overall colour theme. To do this you must create a byte array with the correct number of bytes and then populate the byte array with the colours you wish to use.

	===Flowcode v10===		===Flowcode v10===

@@ Line 84: / Line 84: @@
 [https://youtu.be/8pBGSSQuoaI Graphical Display Manager and Layout Editor Part 1]
-[https://www.youtu.be/KM_CKja7wXY Graphical Display Manager and Layout Editor Part 2]
+[https://youtu.be/KM_CKja7wXY Graphical Display Manager and Layout Editor Part 2]
 ===Flowcode v10===

@@ Line 78: / Line 78: @@
 ==Examples==
-===Basic Example===
+===Flowcode v11===
 An example showing how to use the display manager with a gLCD and a touch interface to create a full HMI.
@@ Line 86: / Line 97: @@
 {{Fcfile|DisplayManagerDemo.fcfx|Display Manager Demo}}
-===Keypad Example===
+====Keypad Example====
 An example showing how you can use the CreateWigitArray component to create a touch keypad for your gLCD.

@@ Line 249: / Line 249: @@
 | width="90%" | ObjectType
 |-
-| colspan="2" | 0=Hidden, 1=Rect, 2=Line, 3=Ellipse, 4=FilledEllipse, 5=FilledRect&nbsp;
+| colspan="2" | 0=Hidden, 1=Rect, 2=RoundedRect, 3=Ellipse, 4=Line, 8=Bitmap&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
@@ Line 446: / Line 446: @@
 | width="90%" | WidgetType
 |-
-| colspan="2" | 0=WidgetHidden, 1=WidgetRect, 2=WidgetRoundedRect, 3=WidgetEllipse, 4=VSlider, 5=HSlider, 6=VSliderRound, 7=HSliderRound&nbsp;
+| colspan="2" | 0=WidgetHidden, 1=WidgetRect, 2=WidgetRoundedRect, 3=WidgetEllipse, 4=VSlider, 5=HSlider, 6=VSliderRound, 7=HSliderRound, 8=Bitmap&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
@@ Line 580: / Line 580: @@
 |-
 | width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-s16-icon.png]] - INT
 | width="90%" style="border-top: 2px solid #000;" | ''Return''
 |}

@@ Line 74: / Line 74: @@
 ==Examples==
 An example showing how to use the display manager with a GLCd and a touch interface to create a full HMI.
@@ Line 82: / Line 84: @@
-An example showing how you can use the CreateWigitArray component to easily create a touch keypad for your gLCD
+===Keypad Example===
-Component will create the widgets as keypad buttons with your custom text, it allows you to click on the widgets so you have a working keypad.
+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 that is very flexible in what you can create:
+The CreateWidgetArray function macro has a number of parameters to allow high flexibility in what you can create:
 [[File:Updated__Display_Manager2.png]]
-Lots of flexibility and there are also tooltips to help.
+There are also tooltips for each parameter to help.
 [[File:Updated__Display_Manager3.png]]
@@ Line 98: / Line 100: @@
 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.

← Older revision		Revision as of 11:36, 28 March 2025
Line 97:		Line 97:

	Note: if you get a unable to run simulation error then make sure you have the latest components downloaded.		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}}		{{Fcfile\|DisplayManager_WidgetArray_Keypad_Example.fcfx\|Display Manager Widget Array Keypad Example}}