GUI Tutorial - EdgarReynaldo/EagleGUI GitHub Wiki

Intro

In EAGLE, there is a fully functional graphics user interface system through which you can graphically get input from your user.

In Eagle, The WidgetBase class is responsible for all widget base class abilities. For the things that are common to all the widgets. Like a CSS Box layout, a set of colors to display in, a set of messages that they may pass through an EagleEventHandler or the WidgetHandler parent. A WidgetHandler takes care of all the necessary automatic workings of the widget system. They control the display and event handling of the GUI in Eagle. The third component is the LayoutBase base class, which controls placement and movement of widgets. Each WidgetHandler has a master layout that controls placement of widgets.

WidgetBase class

The WidgetBase class enables you to easily create your own widgets by overriding virtual functions. There is a drawing function, an event handling function, and an update function for animation. Override the PrivateDisplay function to draw the widget yourself. Change the events it responds to in the PrivateHandleEvent function to make the widget responsive. And pass dt into the PrivateUpdate function to run animations or create your own animation by overriding the PrivateUpate function.

Widgets have a CSS Box layout, an Inner and an Outer Area. The outer area is drawn by the widgetbase class automatically. Widgdets draw only to their Inner Area. The WidgetHandler class takes care of Z-order and dirty rectangle drawing of the widgets. The CSS Box layout has a border, a margin, and padding stored to automatically decorate widgets frames. You can customize the border, margin, and padding through the WidgetBase class functions through GetWidgetArea and SetWidgetArea.

See the Widget Tutorial for detailed information about the WidgetBase class.

WidgetHandler class

The WidgetHandler class automates most everything in the GUI for you. All you have to do is make sure to pass events to the WidgetHandler and make sure it has an area set. The default area of a WidgetHandler is 0x0. WidgetHandlers have both a background (solid or image based) and a graphics buffer. Double buffering is default, but you may run the WidgetHandler in full redraw mode as well, skipping the dirty rectangle checks. The default layout of a WidgetHandler is a DumbLayout object, which merely tracks the position of widgets. When using the default layout, you must set the position of the widgets yourself. To make it easier, try one of the pre-made layouts.

See the WidgetHandler Tutorial for detailed workings of the WidgetHandler class and objects.

LayoutBase class

In Eagle placement and position of widgets is controlled (or ignored) by the derived class objects of the LayoutBase class. Some layouts are dumb, some are more complicated. Some set the position and size of the widgets they hold and some do not. Read about the individual layout derived classes to get a grasp of the layouts possible in Eagle. Layouts include flowbox, vbox, hbox, menu, drop down lists, grid, listbox, pin, relative, scrollbar, scroller, scrollarea, a simple table, splitters, and sticky layouts.

See the Layout Tutorial for details on the specifics of the LayoutBase class and it's derived classes.