View source for Display Creator

==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.

[[File:WYSIWYG_1.png|Component and Layout scene panels]]

[[File:WYSIWYG_2.png|Display Manager - Display Creator properties]]

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.

[[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]]