MGC Installation

At the moment, the MGC is only available for Linux machines.

Download the MGC at https://files.linux4sam.org/pub/egt/mgc-egt/

Download the mgc-egt-x86_64.AppImage file.

There is no dependencies to install. The only constraint is that the GLIBC version may be equal to or greater than the one used to generate the AppImage. You can find the version used in the INSTALL.txt file.

Execute the mgc-egt-x86_64.AppImage file. You may need to set the execution permission with

chmod +x mgc-egt-x86_64.AppImage

Overview of the User Interface

MGC Overview

Main menu bar. At the top of the workspace are user menus that can be used to perform project tasks and configure the work environment.
Toolbar bar. Below the main menu is the toolbar. It contains convenience icons that can be clicked to perform commonly used tasks such as create/open/save/export a project, get a preview, and configure themes/palette/font.
Screen tree pane. At the left is the screen tree pane. It maintains a tree list of current screen items. It can be used to change the z-order of widgets and to move a widget to another container.
Screens pane. At the bottom left is the screens pane. Each screen is an EGT window. At least, one screen must be created. The visible property shows/hides the screen tab in the screen designer. The startup property shows/hides the window on the target.
Screen designer. In the middle of the workspace is the screen designer. It contains one or more screens. This is the area where widgets can be placed.
Console. Below the screen designer is the console that displays information messages, especially the version of the plugin and the EGT library one.
Tool box pane. At the top right side of the screen designer is the tool box. It contains a gallery of containers and widgets that can be picked and dropped in the screen designer.
Object editor. At the bottom left is the object editor pane. It displays the properties of the widget selected.

Overview of the Workflow

Set up the project: configure the screen resolution and the resources paths.
Design the UI by adding and configuring widgets. The preview allows checking the rendering of the current screen.
Export the project. A zip file is generated. It consists of the ui.xml file and, optionally of the assets used in the UI.
Write an EGT application that instantiates the UiLoader class to load the ui.xml file. Code actions.
Deploy the zip file and the EGT application on the target.

Building an EGT application with the MGC

Set up the Project

Launch the MGC.
./mgc-egt-x86_64.AppImage

The MGC starts with an empty project.

MGC: New Project

Set up the project.
- Configure the screen size: go to the Project menu, then Settings, and Screen Size. Set the size to 800x480 pixels.

MGC: Project Screen Size

If assets are going to be used, the MGC needs to know what is the base path. This base path will be removed from the real path of the assets during the export process to generate a relative path. For instance, if the asset is located in /home/tom/images/my_asset.png and the base path is set to home/tom, the exported path of the asset will be images/my_asset.png. Go to the Project menu, then Settings, and Resources Search Paths. Several paths can be set. When adding assets, it won't be possible to choose files that are not part of the base paths.

MGC: Project Resources Search Paths

Add a Screen

To be able to start the design of the UI, a screen is needed. Click on in the bottom-left Screens pane.

A new screen is added to the screen designer pane.

MGC: New Screen

The Visible checkbox displays or hides the screen from the screen designer. The Startup checkbox is used during the export process to decide which screen will be set as visible on the target.

Add Widgets

Let's add some widgets to the application. Drag and drop one HorizontalBoxSizer, one VerticalBoxSizer, one ImageLabel, two Labels, and one Button from the tool box pane to the screen designer.

MGC: Adding Widgets

The screen tree pane is updated as well, all the widgets added are children of the window widget.

Configure Widgets

Configure the HorizontalBoxSizer.
- Click on the HorizontalBoxSizer from the screen designer or the screen tree. The object editor pane displays the properties of the widget selected.
- Click on the cross button of the Align Flags property to expand the group. For the Horizontal AlignFlags property, select expand_horizontal. For the Vertical AlignFlags property, select top.
- Set the padding property to 5.

MGC: Object Editor

Configure the VerticalBoxSizer.
- Set the Horizontal AlignFlags property to expand_horizontal. For the Vertical AlignFlags property, select bottom.
Configure the ImageLabel.
- Select the ImageLabel and unselect Show Label.
- Click on the URI property to open a file dialog to select the image. Navigation is limited to the resources search paths. Select an image (the one used here is egt_logo_icon.png 128px).
Configure the Labels.
- Select the first Label and set the text property to HelloWorld, press the Enter key to validate.
- Let's set a custom font for this widget, click on the Inherited button from the Fonts property. Set the Size to 24.
- Select the second Label and set Text to Loading....
Configure the Button.
- Select the Button and set Text to Start.
- Let's change the color of the button. Click on the Inherited button of the Palette property. In the normal state column, click on button_bg and choose the color you want.

MGC: UI

Position the widgets.
- Let's move the logo and HelloWorld label to the HorizontalBoxSizer. Click on the logo, press the Ctrl key and drag&drop it to the HorizontalBoxSizer.
- Do the same with HelloWorld. Notice that the screen tree pane is updated to reflect the new parent of these two widgets.
- Let's move the button and the remaining label to the VerticalBoxSizer. This time, use the screen tree pane to do it. Select the button and drag&drop into the VerticalBoxSizer. Do the same for the Label.
- Select the Loading... Label and uncheck the Visible property.

The UI looks like this:

MGC: UI

Check the UI with the preview.

The preview displays the current screen as it will be rendered by an EGT application. In the toolbar, click on to get it.

Export and Save the Project

Export the project.

The project can be exported by clicking on in the toolbar. Select the path by clicking on

MGC: Export Project

If assets don't need to be exported, the Export resources checkbox can be unchecked.

Save the project.

The project can be saved to be modified later. Click on in the toolbar.

Create the EGT Application

The UI part is done. Now, it's time to create the EGT application that will load this UI.

#include <egt/ui>
#include <egt/uiloader.h>
 
int main(int argc, char** argv)
{
    egt::Application app(argc, argv);
 
    egt::experimental::UiLoader loader;
    auto window = loader.load("file:ui.xml");
 
    window->show();
    return app.run();
}

Let's display the Loading... label when we click on the Start button. These widgets have to be retrieved from the XML file to be able to use them in the code.

#include <memory>
 
#include <egt/ui>
#include <egt/uiloader.h>
 
int main(int argc, char** argv)
{
    egt::Application app(argc, argv);
 
    egt::experimental::UiLoader loader;
    auto window = std::static_pointer_cast<egt::Window>(loader.load("file:ui.xml"));
 
    auto label = window->find_child<egt::Label>("Label6");
 
    auto button = window->find_child<egt::Button>("Button7");
    button->on_click([&label](egt::Event&)
    {
        label->visible(true);
    });
 
    window->show();
    return app.run();
}

Compile this program. Copy and unzip the ui.zip file at the same location as the program.

ls

128px app app.cpp ui.xml ui.zip

Run the application and click on the button.

MGC: Application

Table of Contents