Difference between revisions of "Display Creator"

From Flowcode Help
Jump to navigationJump to search
Line 46: Line 46:
  
 
==Using the layout panels==
 
==Using the layout panels==
 +
 +
The layout scene 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 Scene panel will be referenced for each numeric Scene you want to display.
 +
 +
The Graphical Manager Primitives can be added to each Scene 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]]

Revision as of 14:11, 27 October 2025

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 scene component 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 layout scene which will appear after a few seconds.

The display manager component has additional properties to allow you to add more scenes and define which scenes are used by the component. Increasing the number of scenes e.g. from 1 to 4 will automatically add more layout scenes to your project after a few seconds.

Component and Layout scene panels

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 layout scene panel.

Component and Layout scene panels

FC6 Icon.png 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.

Component and Layout scene panels with touch

FC6 Icon.png 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 layout panels

The layout scene 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.

Renaming scene panel

The Display Manager component allows you to select which Scene panel will be referenced for each numeric Scene you want to display.

The Graphical Manager Primitives can be added to each Scene 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.

Adding Primitives