GUI design guidelines

Last update: 2018-07-30 by EGE3D

graphic context

a place to draw textures with GLFW3

As we said in the previous document - gui design guidelines, the display to redraw is composed as a sequence of frames (picutures) played almost 24 fps on a screen area usually contained into a window. Generally speaking this container is named Graphic Context (GC). To support in developments, there are different GC libraries that exposes the capability to handle GCs. In our case we choose to integrate our library over GLFW3 that's open source and works well for our requirements. GLFW3 other than a GC context also offers capability to handles keyboard and mouse events to detect user inputs.

In EGE2D gui project we have isolated the GLFW3 calls into a single class named "ege2dDisplay" that's the main GC handler. The class is instantiated at the beginning of every project to supply the context to draw onto. Once instanciated, the class starts a window that receive all draw requests. The instantiation of the graphic context is shown in Tutorial-01 into the sample projects.

Source code: You can DOWNLOAD source code from Github following the links on this page and looking for download. On the same page there are also some Video tutorial on YouTube sections that explanes how to download, prepare the system and compile the library and the samples for different destination platforms.

Toturial-01: Actually Tutorial 01 do nothing except intanciating a GC and release it immediately after. The Tutorial 01 should be executed step by step with debugger and is placed just to take things simple as possible. If the Tutorial is too easy for your expertice, you can move immediately above to next one.

In Tutorial-01 ege2dDisplay is instanciated specifying the size of the window and a title to be shown over.

Development Tip:Can be interesting, if somebody would to help in development, to overload class constructor with several other that exposes some usefull behaviours like enlarge,minimize,close buttons to be hided or displayed and/or be shown with grayed colors when not available to user inputs.

Display something

Once opened a GC like shown above, next step is to display something on it. To do that there is the dedicated function named "draw(ege2dTextureJpeg *inputImageToShow)" that takes a pointer to our texture as input and play it onto the window.

All the steps are contained in Tutorial-02. In the tutorial, a GC is opened as seen early, an image is loaded with dedicated instance of the class "ege3dTextureJpeg", after this the picture is passed to draw() as argument.

There are some more aspects to be described in details to have the complete idea of the magic.
a) First think is "texture->load(filename,EGE_ENU_TEXTURE_ROLE::None);" method. We describe it in more details in texture handling document. Just to go straight to the end, texture can be both a file from disk as in the first case of the tutorial, or a dynamic image constructed on the cpu side. In this case the picture is loaded directly from the disk with the specified name. The parameter "EGE_ENU_TEXTURE_ROLE::None" is actually never used up to now. We will see if necessary will implement in the future. For the moment keep it as EGE_ENU_TEXTURE_ROLE::None.
b) Second one, LoadGPU is a function that executes transfer of loaded image from ram to the video memory, GPU memory. Passing through this function the texture is transfered to GPU and as result it will be available to be drawn. The draw() function actually shows to screen a GPU memory image.

draw() Tip:Next paragraph we describe how works the process of drawing something within draw() function. You can skip this aspect for the future if you need to be proficient with playing the gui. All necessary steps are already implemented and you don't really need to know inside to have the gui working or to extend it.

How draw() function internally works

With OpenGL there are different methods to display a texture to the screen. Let's consider OpenGL is designed to play 3D graphics and the typical way is to place and stratch a texture over a 3D model. A deep explanation is in shaders and 3D texturing. In our 2D engine we assume to have a square flat model that occupy all the graphic context. Over this square model we apply our picture to have it visible and that's all. This is a simplifyed version of 3D graphics programming because for 3D objects there are generally codes at least and presents other behaviours. In our case is enough to bring the basics and that's all.