ULTRA APP KIT

[Robert_d1968]

Well, the first top half of the code produced a whit colored box. seems to be okay.

But the second box from the code below produced a darker colored box, with three objects to be clicked on.

No matter which one I clicked, nothing was drawn to the screen.

Robert

[Robert_d1968]

This was the code from it:

 

#include "UltraEngine.h"

using namespace UltraEngine;

#include <GL/GL.h>
#pragma comment (lib, "opengl32.lib")

bool ResizeViewport(const Event& ev, shared_ptr<Object> extra)
{
    if (ev.id == EVENT_WINDOWSIZE)
    {
        auto window = ev.source->As<Window>();
        iVec2 sz = window->ClientSize();
        auto subwindow = extra->As<Window>();
        subwindow->SetShape(200 + 1, 8 + 1, sz.x - 200 - 8 - 2, sz.y - 16 - 2);
    }
    return true;
}

int main(int argc, const char* argv[])
{
    //Get the available displays
    auto displays = ListDisplays();

    //Create a window
    auto window = CreateWindow("OpenGL Example", 0, 0, 800, 600, displays[0], WINDOW_TITLEBAR | WINDOW_RESIZABLE);

    //Create user interface
    auto ui = CreateInterface(window);
    iVec2 sz = ui->root->ClientSize();
    auto treeview = CreateTreeView(8, 8, 200 - 16, sz.y - 16, ui->root);
    treeview->SetLayout(1, 0, 1, 1);
    treeview->root->AddNode("Object 1");
    treeview->root->AddNode("Object 2");
    treeview->root->AddNode("Object 3");

    auto panel = CreatePanel(200, 8, sz.x - 200 - 8, sz.y - 16, ui->root, PANEL_BORDER);
    panel->SetLayout(1, 1, 1, 1);
    panel->SetColor(0.15, 0.15, 0.15, 1);

    //Create viewport window
    auto subwindow = CreateWindow("", 200 + 1, 8 + 1, sz.x - 200 - 8 - 1, sz.y - 16 - 1, window, WINDOW_CHILD);

    //Adjust the viewport size when main window resized
    ListenEvent(EVENT_WINDOWSIZE, window, ResizeViewport, subwindow);

    //Initialize OpenGL context
    HWND hwnd = subwindow->GetHandle();
    HDC hdc = GetDC(hwnd);

    PIXELFORMATDESCRIPTOR pfd =
    {
        sizeof(PIXELFORMATDESCRIPTOR),
        1,
        PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER,    // Flags
        PFD_TYPE_RGBA,        // The kind of framebuffer. RGBA or palette.
        32,                   // Colordepth of the framebuffer.
        0, 0, 0, 0, 0, 0,
        0,
        0,
        0,
        0, 0, 0, 0,
        24,                   // Number of bits for the depthbuffer
        8,                    // Number of bits for the stencilbuffer
        0,                    // Number of Aux buffers in the framebuffer.
        PFD_MAIN_PLANE,
        0,
        0, 0, 0
    };

    if (SetPixelFormat(hdc, 1, &pfd) == 0) RuntimeError("SetPixelFormat() failed.");

    HGLRC glcontext = wglCreateContext(hdc);

    if (glcontext == NULL) RuntimeError("wglCreateContext() failed.");

    wglMakeCurrent(hdc, glcontext);

    while (true)
    {
        //Check for events
        const Event ev = WaitEvent();
        switch (ev.id)
        {
        case EVENT_WINDOWPAINT:
            if (ev.source == subwindow)
            {
                iVec2 sz = subwindow->ClientSize();
                glViewport(0, 0, sz.x, sz.y);
                glClearColor(0.15f, 0.15f, 0.15f, 1.0f);
                glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

                glBegin(GL_TRIANGLES);
                glColor3f(1, 0, 0);
                glVertex3f(0, 0.5, 0);
                glColor3f(0, 1, 0);
                glVertex3f(0.5, -0.5, 0);
                glColor3f(0, 0, 1);
                glVertex3f(-0.5, -0.5, 0);
                glEnd();

                SwapBuffers(hdc);
            }
            break;
        case EVENT_WINDOWCLOSE:
            if (ev.source == window) return 0;
            break;
        }
    }
    return 0;
}

[Josh]

Insert this code somewhere in the main "while" loop:

auto err = glGetError();
if (err != 0) Print(err);

Does it print anything?

[Robert_d1968]

Not on the second window no, but on the first window I got a code of 1282 in the debug console.

Robert

[Robert_d1968]

when I place the code here:

 while (true)
    {

        auto err = glGetError();
        if (err != 0) Print(err);

        //Check for events
        const Event ev = WaitEvent();
        switch (ev.id)
        {
        case EVENT_WINDOWPAINT:
            if (ev.source == subwindow)
            {
                iVec2 sz = subwindow->ClientSize();
                glViewport(0, 0, sz.x, sz.y);
                glClearColor(0.15f, 0.15f, 0.15f, 1.0f);
                glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

                glBegin(GL_TRIANGLES);
                glColor3f(1, 0, 0);
                glVertex3f(0, 0.5, 0);
                glColor3f(0, 1, 0);
                glVertex3f(0.5, -0.5, 0);
                glColor3f(0, 0, 1);
                glVertex3f(-0.5, -0.5, 0);
                glEnd();
                auto err = glGetError();
               // if (err != 0) Print(err);
               // SwapBuffers(hdc);             
            }
            break;
        case EVENT_WINDOWCLOSE:
            if (ev.source == window) return 0;
            break;
        }
    }
    return 0;
}

 

I get nothing in the console and nothing printed where the graphics should be drawn.

Robert

 

[Josh]

Okay, I will need to test this on an AMD card.

[SlipperyBrick]

6 hours ago, Robert_d1968 said:

I get nothing in the console and nothing printed where the graphics should be drawn.

Robert

@Robert_d1968 try this code in your main.cpp

#include "UltraEngine.h"

#include <GL/GL.h>
#pragma comment (lib, "opengl32.lib")

using namespace UltraEngine;

// Callback function for resizing the viewport
bool ResizeViewport(const Event& ev, shared_ptr<Object> extra)
{
    // If the window resize event is captured
    if (ev.id == EVENT_WINDOWSIZE)
    {
        auto window = ev.source->As<Window>();

        // Get the new size of the applications window
        iVec2 sz = window->ClientSize();

        auto viewport = extra->As<Window>();

        // Set the position and size of the viewport window
        viewport->SetShape(200, 8, sz.x - 200 - 8, sz.y - 16);
    }

    return true;
}

int main(int argc, const char* argv[])
{
    // Get the available displays
    auto displays = ListDisplays();

    // Create a window
    auto window = CreateWindow("OpenGL Example", 0, 0, 800, 600, displays[0], WINDOW_TITLEBAR | WINDOW_RESIZABLE);

    // Create user interface
    auto ui = CreateInterface(window);

    // Get the size of the user-interface
    iVec2 sz = ui->root->ClientSize();

    // Create a treeview widget
    auto treeview = CreateTreeView(8, 8, 200 - 16, sz.y - 16, ui->root);

    // Anchor left, top and bottom of treeview widget
    treeview->SetLayout(1, 0, 1, 1);

    // Add nodes to the treeview widget
    treeview->root->AddNode("Object 1");
    treeview->root->AddNode("Object 2");
    treeview->root->AddNode("Object 3");

    // Create a viewport window
    auto viewport = CreateWindow("", 200, 8, sz.x - 200 - 8, sz.y - 16, window, WINDOW_CHILD);

    // Adjust the size of the viewport when the applications window is resized (this will callback to our ResizeViewport() function)
    ListenEvent(EVENT_WINDOWSIZE, window, ResizeViewport, viewport);

    // Initialize an OpenGL context (get a hdc)
    HWND hwnd = (HWND)(viewport->GetHandle());
    HDC hdc = GetDC(hwnd);

    // Specify the format of the default framebuffer
    PIXELFORMATDESCRIPTOR pfd =
    {
        sizeof(PIXELFORMATDESCRIPTOR),
        1,

        // Flags
        PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER,

        // Framebuffer colour format (R, G, B, A)
        PFD_TYPE_RGBA,

        // Framebuffer colour depth (32 bit)
        32,
        0, 0, 0, 0, 0, 0,
        0,
        0,
        0,
        0, 0, 0, 0,

        // Number of bits for depth-buffer
        24,

        // Number of bits for stencil-buffer
        8,

        // Number of render-targets in default framebuffer
        0,
        PFD_MAIN_PLANE,
        0,
        0, 0, 0
    };

    // Select an appropriate pixel format that is supported by the hdc
    int format = ChoosePixelFormat(hdc, &pfd);

    if (SetPixelFormat(hdc, format, &pfd) == 0)
    {
        RuntimeError("SetPixelFormat() failed.");
    }

    // Create an OpenGL rendering context using our current hdc
    HGLRC glcontext = wglCreateContext(hdc);

    if (glcontext == NULL)
    {
        RuntimeError("wglCreateContext() failed.");
    }

    wglMakeCurrent(hdc, glcontext);

    // Render loop (applications run loop)
    while (true)
    {
        // Check for events
        const Event ev = WaitEvent();

        switch (ev.id)
        {

        case EVENT_WINDOWPAINT:

            if (ev.source == viewport)
            {
                // Get and set the current size of the viewport
                iVec2 sz = viewport->ClientSize();
                glViewport(0, 0, sz.x, sz.y);

                // Set clear colour of viewport background
                glClearColor(0.15f, 0.15f, 0.15f, 1.0f);

                // Clear colour and depth buffers
                glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

                // Render our triangle
                glBegin(GL_TRIANGLES);

                // Vertex 1
                glColor3f(1, 0, 0);
                glVertex3f(0, 0.5, 0);

                // Vertex 2
                glColor3f(0, 1, 0);
                glVertex3f(0.5, -0.5, 0);

                // Vertex 3
                glColor3f(0, 0, 1);
                glVertex3f(-0.5, -0.5, 0);

                glEnd();

                SwapBuffers(hdc);
            }

            break;

        case EVENT_WINDOWCLOSE:

            if (ev.source == window)
            {
                return 0;
            }

            break;
        }
    }

    return 0;
}

Sorry for the bad indentation the online code formatter doesn't show indents. Copy and paste the above code and you should get a cool multicoloured triangle in your applications window along with a sweet looking treeview widget, just like in the documentation example ?

[SlipperyBrick]

@Josh the example code from the documentation seems to be missing this line of code.

// Select an appropriate pixel format that is supported by the hdc
int format = ChoosePixelFormat(hdc, &pfd);

if (SetPixelFormat(hdc, format, &pfd) == 0)
{
    RuntimeError("SetPixelFormat() failed.");
}

The call to SetPixelFormat() has a value of 1 as its second argument (in the documentation code example). It is apparently best practice to let Windows decide which pixel format should be set by calling ChoosePixelFormat() which selects a pixel format based on the hdc and pixel format descriptor.

I am definitely no pro with Win32 (never really used it as I've always leaned on other libraries such as GLFW to do the heavy work for me). When I did a straight copy, paste using the example code in the documentation I too had nothing rendered in the viewport (not even the clear colour). After some digging around the Win32 API documentation I came across the ChoosePixelFormat() function.

https://docs.microsoft.com/en-us/windows/win32/api/wingdi/nf-wingdi-choosepixelformat

[Robert_d1968]

Hey, thank you for that code it did draw the Triangle as it should.

But I did not notice a difference with the buttons, I will check it again..

 

Robert

 

 

[SlipperyBrick]

39 minutes ago, Robert_d1968 said:

Hey, thank you for that code it did draw the Triangle as it should.

But I did not notice a difference with the buttons, I will check it again..

 

Robert

 

 

The treeview isn't going to do anything as there is no functionality programmed for it. The example code simply renders a GUI to the window along with a viewport with some OpenGL code. It is down to you to start using UAK and leveraging the awesome GUI's you can create with it to accommodate your applications functionality.

I'd recommend to try something simple to start with, for example you could try and change the colour of the triangle using a button widget. Maybe style it so the buttons are radio buttons that are encapsulated in a panel object.

The hierarchy of a GUI (if you dissect the documentation examples) is as follows:

• You have a window (a context to render the GUI)
• You have an interface (a container for holding panels and widgets)
• You have a panel (optional, although handy for encapsulating various components of your GUI)
• You have the widgets (buttons, treeviews, labels, etc)

I'd maybe start by trying to code your way down the hierarchy. Make a window first, then an interface for the window, then a panel, then add some widgets to it.

Hope that helps! 

[Robert_d1968]

Thank you sir, I shall try that out. should do me some good.

 

Robert

[Josh]

Great, i updated the example code. Thank you.

[SlipperyBrick]

There seems to be a typo in the documentation for the LoadIcon() method. The return type is a std::shared_ptr<Icon>, yet the documentation says it is a std::shared_ptr<Pixmap>.

I am also having some issues displaying an icon. According to the documentation SetIcon() passes a path to a vector image, I am calling this on a panel object. Yet when I display my loaded vector image it looks pretty bad.

The image format is a .svg so I'm not entirely sure how it is being displayed like this.

[SlipperyBrick]

Ok problem solved. I use Affinity Designer to draw my vector graphics and I realised that my logo wasn't pixel perfect. After some adjustments (drawing it again) its looking great!

[SlipperyBrick]

The start of my GUI with Ultra App Kit (the empty space underneath the 3D viewport will have a console for output). Such a friendly API though, really easy to work with and it really doesn't take much to get great results! ?

Josh you are a GUI fiend! Thanks for sharing this with us and not locking it away from the world ??

[Josh]

3 hours ago, SlipperyBrick said:

There seems to be a typo in the documentation for the LoadIcon() method. The return type is a std::shared_ptr<Icon>, yet the documentation says it is a std::shared_ptr<Pixmap>.

Thanks, I fixed it here:
https://github.com/Leadwerks/Documentation/blob/master/CPP/LoadIcon.md

The documentation page will take a while to re-cache.

[Josh]

One thing that is very nice about the new technology is I am 100% committed to making everything perfect. I could not do this with Leadwerks because a point arrived where I knew everything was going to be replaced with new technology, so it did not make sense to put a lot of effort into every little detail.

[Josh]

@SlipperyBrickHow are you getting the dark titlebar in Windows?

[SlipperyBrick]

6 minutes ago, Josh said:

@SlipperyBrickHow are you getting the dark titlebar in Windows?

That's my personalise settings in Windows 10. If you right-click your desktop and go to Personalise > Colours. Scroll to the bottom of the window and you'll see "Show the accent colour on the following surfaces". You can check "Title bars and window borders" from there. The colour I have is called Storm.

[SlipperyBrick]

Ugh I hate Windows haha. How the heck do you change the titlebar default icon to one of your own. Stackoverflow and the Win32 documentation is sending me on a wild goose chase. I have added a resource and selected my .ico file but from there it seems a mystery to use the icon in the windows titlebar ?

[SlipperyBrick]

What a painful experience. For anyone who is looking to do the same you need to follow this process:

• In Solution Explorer find the "Resource Files" folder (if you work in "Show all files" mode like I do you may need to switch to see the folder)
• Right click "Resource Files" folder and select Add > Resource...
• From the window dialog select "Icon" and choose "Import" (your icon must be .ico format)

With those steps complete, head over to wherever you have created your window and add the following code:

// Get device context
HWND hwnd = m_Window->GetHandle();
HDC hdc = GetDC(hwnd);
	
// Load the icon for window titlebar and taskbar
HICON icon = LoadIconA(GetModuleHandle(NULL), (LPCSTR)IDI_ICON1);
SendMessage(hwnd, WM_SETICON, ICON_SMALL, reinterpret_cast<LPARAM>(icon));

I would recommend to clean up your projects directory by added a "res" folder and dragging in the files that were created when you added a resource to your project.

P.S. It should go without saying but whatever variable name you have provided for your window (mine is m_Window) replace that with your own.

[Josh]

I added x86 libraries, which means Ultra App Kit should now work with Leadwerks Game Engine:

shared_ptr<UltraEngine::Window> mainwindow = UltraEngine::CreateWindow("",0,0,800,600,display);
Leadwerks::Window* lewindow = Leadwerks::Window::Create(mainwindow->GetHandle());
Leadwerks::Context* context = Leadwerks::Context::Create(lewindow);

Who will be the first?

[reepblue]

BRB, Gotta integrate UAK with my game. 

[reepblue]

I don't think this will work. The engine is set for VS2017 and C++ 14. I'm uploading my project here. It would be very cool if you updated Leadwerks to support the app kit. It'll be an excuse to finish and release 4.7. ?

If you chose to do this, I'll definitely benefit. from this. 

UAKTest.7z

[Josh]

I think you can just switch the project settings to add C++17. I think it is likely to be backwards-compatible.