GUI design guidelines

Last update: 2018-07-30 by EGE3D

starting displaying with the render loop

As described in the introduction chapter, GUI design guidelines, we have seen that is necessary to create a graphic context, we have seen how to load and manipulate pictures and now with Tutorial-03 as supporting material, we are going to make a control loop that loads and unloads textures to memory and update the display with draw() call in sequence. This actually makes 24 fps rendering loop possible.
As general concept, to avoid dangling memory access, the gui works with two textures in memory. First texture is the actually displayed image and must be kept alive and untouched in order to leave the GPU display at it's own framerate(higher than 24 fps for sure). The second image is generally called backbuffer image and it's the image "under construction", this means that our code can manimpulate it in order to update content reflecting status changes for widgets controls that's aspect is modified due to user event action rise, like button clicks and consequent widget status change or status from field like a measure value to be updated for asyncronous event.
In the case we still act on backbuffer image.
Two images are instanciated into Tutorial-03 and are accessed through their pointers that are kept by "egeSwapBuffers()" class that switches forebuffer and backbuffer when swap happens, this means when backbuffer image is ready to be displayed.
Just for training pourposes, mainloop() function is called just a 1fps, but you can increase the divisor in usleep(1000000/1); from 1 to 24 to reach 24 fps. The numerator represents one second sleep, divisor fps you want to have
The tutorial-03 simply flips beetween two images loaded in memory in main and then loaded and unloaded from GPU memory inside "swp->update(pW,&jpg1);" function call. If you follow update method, you can see the first instruction is to load texture in gpu, then it display it making backbuffer as forebuffer, then it release the old forebuffer from GPU releasing it. Pointers are then updated ready for next swap. I hope this helps you in rendering loop mastering.

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.