Difference between revisions of "Display Creator"
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
==What is Display Creator== | ==What is Display Creator== | ||
| − | Display creator is a way to graphically control your GLCD scenes using a WYSIWYG type interface. | + | Display creator is a way to graphically control your GLCD layout, scenes and user interface (UI) using a what you see if what you get (WYSIWYG) type interface. |
| − | + | When creating Graphical Display layouts it can often become more and more complex to manage all the various coordinates, images and primitive shapes and end up with a nice looking display layout. | |
| − | |||
| − | When creating Graphical Display layouts it can often become more and more complex to manage all the various coordinates and end up with a nice looking display layout. | ||
A way to solve this problem is to allow the layout of the display to be defined graphically. | A way to solve this problem is to allow the layout of the display to be defined graphically. | ||
| − | The display manager is capable of managing special | + | The display manager component is capable of managing special Display Creator panels which can be used as placeholders that can show the layout of the screen and allow you to graphically create and control a design. |
| Line 16: | Line 14: | ||
To begin simply add your selected GLCD component to the 2d panel and then add a display manager component. | To begin simply add your selected GLCD component to the 2d panel and then add a display manager component. | ||
| − | The display manager component will automatically link to the GLCD and automatically create a single | + | The display manager component will automatically link to the GLCD and automatically create a single Display Creator panel which will appear after a few seconds. |
| − | The display manager component has additional properties to allow you to add more scenes and define which | + | The display manager component has additional properties to allow you to add more Display Creator panels (scenes) and define which Display Creator panels are used by the component. Increasing the number of scenes e.g. from 1 to 4 will automatically add more Display Creator panels to your project after a few seconds. |
[[File:WYSIWYG_1.png|Component and Layout scene panels]] | [[File:WYSIWYG_1.png|Component and Layout scene panels]] | ||
| Line 26: | Line 24: | ||
The Max Objects and Max Widgets properties define how many Objects (none touchable) and Widgets (touchable) items can be on any single layout. The default is 20 of each but increase these as required. You will be warned if you create a layout scene that requires more then you have allocated room for. | The Max Objects and Max Widgets properties define how many Objects (none touchable) and Widgets (touchable) items can be on any single layout. The default is 20 of each but increase these as required. You will be warned if you create a layout scene that requires more then you have allocated room for. | ||
| − | ==A typical program== | + | The Enable Callbacks property allows the touch callback feature on all the Graphical Manager Primitive components, turn this off if you are not using a touch feature or if you want to implement your own touch routines. |
| + | |||
| + | |||
| + | ==A typical bare bones program== | ||
| + | |||
| + | Here is a very basic program to initialise the GLCD, the Display manager and then display the contents of the first Display Creator panel. | ||
| + | |||
| + | [[File:WYSIWYG_3.png|Component and Layout scene panels]] | ||
| + | |||
| + | {{Fcfile|DisplayCreator - NoTouch.fcfx|DisplayCreator - NoTouch}} | ||
| + | |||
| + | |||
| + | Here is the same program, this time with a touch enabled GLCD. We need to sample the touch sensor and then pass the coordinates to the Display Manager. If there is no touch then we also tell the Display Manager so it can update its touch repeat rate variables. | ||
| + | |||
| + | [[File:WYSIWYG_4.png|Component and Layout scene panels with touch]] | ||
| + | |||
| + | {{Fcfile|DisplayCreator - Touch.fcfx|DisplayCreator - Touch}} | ||
| + | |||
| + | Adding a fixed delay to the loop will allow for reliable touch intervals, for example a loop delay of 10ms and a Touch Repeat Rate of 10 would be 10 x 10ms = 100ms between repeat button presses. | ||
| + | |||
| + | |||
| + | ==Using the Display Creator layout panels== | ||
| + | |||
| + | The Display Creator panels control what will be shown on each scene of the GLCD. You might for example want a main screen, a menu screen and then a config screen. | ||
| + | |||
| + | The Scene panels can be renamed to better identify their role in the program. To do this use the Panels tab of the Project Explorer, right click the scene you want to rename and select Rename. | ||
| + | |||
| + | [[File:WYSIWYG_5.png|Renaming scene panel]] | ||
| + | |||
| + | The Display Manager component allows you to select which Display Creator panel will be referenced for each numeric Scene you want to display. | ||
| + | |||
| + | The Graphical Manager Primitives can be added to each Display Creator panel and you can do things like move, scale, copy, paste, align etc with these primitives like you can on a normal component panel. The Snap to grid feature can also be useful to easily acheiving uniform scaling and spacing between primitives. | ||
| + | |||
| + | [[File:WYSIWYG_6.png|Adding Primitives]] | ||
| + | |||
| + | Each Display Creator panel will automatically take the background colour defined in the Display Manager component but this background colour can be overridden by altering the Display Background Colour property available when clicking on a blank area of the Display Creator Panel. | ||
| + | |||
| + | ==Touchable items== | ||
| + | |||
| + | ===Without Callback=== | ||
| + | |||
| + | Without callback you will need to manually compare the touchID returned by the CheckForTouch component macro. It is possible that the same ID is used by different items on different scenes so you will need to keep track of the current scene using a variable. | ||
| + | |||
| + | [[File:WYSIWYG_7.png|Checking for touch IDs]] | ||
| + | |||
| + | |||
| + | ===With Callback=== | ||
| + | With callback enabled you instead define a callback macro in the touchble primitive properties which will be called when the item it touched as part of the CheckForTouch component macro. | ||
| + | The callback macro has a parameter of type handle which contains the unique handle of the item touched and can be compared like this. | ||
| − | + | [[File:WYSIWYG_8.png|Callback macro]] | |
Latest revision as of 14:29, 27 October 2025
Contents
What is Display Creator
Display creator is a way to graphically control your GLCD layout, scenes and user interface (UI) using a what you see if what you get (WYSIWYG) type interface.
When creating Graphical Display layouts it can often become more and more complex to manage all the various coordinates, images and primitive shapes and end up with a nice looking display layout.
A way to solve this problem is to allow the layout of the display to be defined graphically.
The display manager component is capable of managing special Display Creator panels which can be used as placeholders that can show the layout of the screen and allow you to graphically create and control a design.
Setting up the Display Manager component
To begin simply add your selected GLCD component to the 2d panel and then add a display manager component.
The display manager component will automatically link to the GLCD and automatically create a single Display Creator panel which will appear after a few seconds.
The display manager component has additional properties to allow you to add more Display Creator panels (scenes) and define which Display Creator panels are used by the component. Increasing the number of scenes e.g. from 1 to 4 will automatically add more Display Creator panels to your project after a few seconds.
The Max Objects and Max Widgets properties define how many Objects (none touchable) and Widgets (touchable) items can be on any single layout. The default is 20 of each but increase these as required. You will be warned if you create a layout scene that requires more then you have allocated room for.
The Enable Callbacks property allows the touch callback feature on all the Graphical Manager Primitive components, turn this off if you are not using a touch feature or if you want to implement your own touch routines.
A typical bare bones program
Here is a very basic program to initialise the GLCD, the Display manager and then display the contents of the first Display Creator panel.
Here is the same program, this time with a touch enabled GLCD. We need to sample the touch sensor and then pass the coordinates to the Display Manager. If there is no touch then we also tell the Display Manager so it can update its touch repeat rate variables.
Adding a fixed delay to the loop will allow for reliable touch intervals, for example a loop delay of 10ms and a Touch Repeat Rate of 10 would be 10 x 10ms = 100ms between repeat button presses.
Using the Display Creator layout panels
The Display Creator panels control what will be shown on each scene of the GLCD. You might for example want a main screen, a menu screen and then a config screen.
The Scene panels can be renamed to better identify their role in the program. To do this use the Panels tab of the Project Explorer, right click the scene you want to rename and select Rename.
The Display Manager component allows you to select which Display Creator panel will be referenced for each numeric Scene you want to display.
The Graphical Manager Primitives can be added to each Display Creator panel and you can do things like move, scale, copy, paste, align etc with these primitives like you can on a normal component panel. The Snap to grid feature can also be useful to easily acheiving uniform scaling and spacing between primitives.
Each Display Creator panel will automatically take the background colour defined in the Display Manager component but this background colour can be overridden by altering the Display Background Colour property available when clicking on a blank area of the Display Creator Panel.
Touchable items
Without Callback
Without callback you will need to manually compare the touchID returned by the CheckForTouch component macro. It is possible that the same ID is used by different items on different scenes so you will need to keep track of the current scene using a variable.
With Callback
With callback enabled you instead define a callback macro in the touchble primitive properties which will be called when the item it touched as part of the CheckForTouch component macro.
The callback macro has a parameter of type handle which contains the unique handle of the item touched and can be compared like this.
