Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit/AppGameKit Studio Showcase / [GUI Plugin] Nuklear an immediate-mode graphical user interface

Author
Message
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 17th Nov 2020 19:32
Thank you,
Personally, I can live without it, but I believe it would be a nice addition
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 19th Nov 2020 11:38 Edited at: 19th Nov 2020 11:42
Hi,

Now it is time for an update.

The documentation is now ready.
This should be enough to get a sufficient overview of the functions of the nuclear engine.
In the download there is another folder ("doc"). In it you can find the PDF. And a directory ("Source") which contains the source code of the examples in the documentation.

Beside the documentation some new commands were added and bugfixes were made.
But the most important change is that the engine now supports UTF-8 encoding. (to a certain degree).
The Unicode ranges have to be added by hand. Otherwise the font texture (atlas) would become much too big if all possible languages were supported.
An example can be found in the documentation (Listing 17).





The first post in this thread was updated (change log and download)

Have fun with it and stay healthy.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 19th Nov 2020 18:51 Edited at: 19th Nov 2020 19:18
You are doing a great job MadBit
I'll download and test it on my editor which is development stage
Thank you

EDIT: I welcome the mouse wheel behavior on window scrolling
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 23rd Nov 2020 19:14
Hi,
Is there any quick way to add a space between two icons without using a blank image?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 24th Nov 2020 05:28
Only if you create your layout with LayoutRowBegin/...End. Then you can use Spacing() which in a way inserts an empty widget in the next layout column. You can also use the Spacing() function for the other layouts but there are predefined widths of the columns.

Example:
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 24th Nov 2020 17:15 Edited at: 24th Nov 2020 19:32
I was confused with the "LayoutSpaceBegin(...)" command

Thank you
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 25th Nov 2020 15:02
That looks good.
to the info: LayouSpace... commands are there to place the widgets freely on a panel. There is the Node example.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 26th Nov 2020 14:58 Edited at: 26th Nov 2020 14:59
Hi MadBit,
Is it possible to create the following layout:

I cannot figure out how to create it

EDIT: x, y, a, b are labels, the boxes are edit fields and there is an OK button
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 26th Nov 2020 16:43
I think, I found a way.
I can use the following code
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 26th Nov 2020 17:59
Yes I think this is the right way. But you need 4 fields horizontally. So you would have to divide your ratio a little bit different.
Maybe like this:
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 27th Nov 2020 08:21 Edited at: 27th Nov 2020 08:22
Quote: "But you need 4 fields horizontally. So you would have to divide your ratio a little bit different."

You are right.
My snippet was only to demonstrate how I can divide a row
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 28th Nov 2020 12:33 Edited at: 28th Nov 2020 13:05
Hi MadBit,
I suggest, if it is possible, to change the position of the Tooltips. I noticed that they appear at the top left corner of the mouse and they are partially overlapped by the mouse
This is not the case in most of the applications:
MikeHart
AGK Bronze Backer
20
Years of Service
User Offline
Joined: 9th Jun 2003
Location:
Posted: 28th Nov 2020 13:18
Great job Madbit. Question, are there static libs that can be linked to inside Tier 2 projects, or is it just a plugin for Tier1?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 28th Nov 2020 17:38 Edited at: 28th Nov 2020 18:46
@george++
Unfortunately not. But I can change the function TooltipBegin so that the function accepts offset parameters. Would that help?

@MikeHeart
It is a pure Tier1 plugin. But with some work you could use Nuklear directly.
There are some renderers that serve as orientation.
For Allegro,SDL, OpenGL, DirectX, SFML, ect.
It is worth to have a look at the GIT-Hub project.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 28th Nov 2020 17:48 Edited at: 28th Nov 2020 17:58
Quote: "Unfortunately not. But I can change the function TooltipBegin so that the function accepts offset parameters. Would that help?"

Ofcourse!
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 29th Nov 2020 06:52
Ok, it's done for the next update.
Then it is possible to specify an offset for the tooltip box. ( TooltipBegin(txt, x, y) & Tooltip(txt, x, y) ).
If you leave the offset parameter at 0.0 or use the function without offset parameter the text will be automatically moved one line up.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 2nd Dec 2020 13:42 Edited at: 2nd Dec 2020 13:44
Quote: "Ok, it's done for the next update"

Thank you.
Could please let me know how I'll center horizontally an image on a window?
I need to display an About window.
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 2nd Dec 2020 18:39 Edited at: 2nd Dec 2020 18:45
Create a LayouRow with 3 columns (NK_STATIC)
You have to calculate the first column by taking the window width minus image width and then divide it by two.
In the second column you place your image.

Here a snippet how I mean that. ( the value 256 is the image width and height)


You can also do this with DrawImage but this only makes sense if you want to center your image vertically or place it freely on the surface.

Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)

Attachments

Login to view attachments
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 2nd Dec 2020 20:01 Edited at: 2nd Dec 2020 20:02
Thank you very much MadBit.
With your help I managed to build my first application with the NUKLEAR WRAPPER in a very short time.
A learned a lot on how I can use the wrapper with the AppGameKit in order to include a nice and efficient user interface
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 2nd Dec 2020 20:59
Thank you! You are welcome.
I am very happy that I could help you.

I'll take a look at your app in a minute.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 4th Dec 2020 22:40
Is there anyway we could get a mac version of this?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 5th Dec 2020 07:44
If I should own a mac at some point in time then for sure
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 6th Dec 2020 18:43
Hi,
Is there any way to restore the default font style if I change it before, using the 'nk.StyleSetFont' function?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 6th Dec 2020 20:56
Yes with nk.StyleSetFont("default") you can switch back to the default font.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 7th Dec 2020 06:09
Thank you
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 7th Dec 2020 22:25 Edited at: 7th Dec 2020 22:27
Hi MadBit,
It seems that NUKLEAR apps refuses to run in debug mode when using the

command. I think it cannot find the font files even if the full path is correct

The same applies in non debug mode, if you omit the "media/" part of the path
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 8th Dec 2020 05:10
nk.StyleSetFont cannot load a font. It only sets a previously loaded font.
How to use fonts you can find in the example 'extended-demo'.

But here is the most important in short.


But you are right. In debug mode the program aborts. This is probably because AppGameKit is started in debug mode from a different directory ($(AGK_BASE_FOLDER)\Tier 1\Compiler\interpreters\).
I will release a new update as soon as I have solved this problem.

In the meantime, you can work around this problem by specifying the Full Path to the font. With drive letters without "raw:".
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 12th Dec 2020 07:32 Edited at: 12th Dec 2020 07:32
Ok it is done. New version is online in the first post.
But I think it is necessary that you change some things in your code.
If your path definition is a relative path, you must start your path with a slash.

TIP: Base folder is the folder of the app and not the media folder.

Example
nk.FontAtlasAddFromFile("roboto14", "media/ttf/Roboto-Regular.ttf", 14)
becomes
nk.FontAtlasAddFromFile("roboto14", "/media/ttf/Roboto-Regular.ttf", 14)
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 12th Dec 2020 18:04
Thank you MadBit, I also noticed that the mouse pointer does not overlap the tooltip
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 23rd Dec 2020 19:41 Edited at: 27th Dec 2020 04:19
Hi MadBit,
I have a suggestion regarding the behavior of window resizing
Please watch the following video:

In the video above I resize the window to the minimum width and continue the mouse movement far left from the window handle. When I start to move the mouse right, the window starts resizing immediately and before the mouse reach the resize handle.

This does not happen in native windows:

What are your thoughts on this? Do you think that this behavior should change, if it is possible?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 27th Dec 2020 13:17
Thank you for reporting this.
It will be fixed with the next update.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
n00bstar
20
Years of Service
User Offline
Joined: 9th Feb 2004
Location: Montreal, Canada.
Posted: 4th Jan 2021 20:50
I might have found a small bug in nk.Render. Well not really a bug per say, but something is not being passed along between AppGameKit and NuklearUI. Or it may be something that's hardcoded into the actual NuklearUI library, I don't know.

I use a 1920x1200 window (my desktop resolution) and a 1920x1080 virtual resolution, because I want my game to pixel-perfect on both 16/9 and 16/10 displays.

Normally AppGameKit will center the 1080 field in the 1200 window, giving me a 60 pixels black bar up and down. When I switch from Sync() to nkSync() the entire thing gets moved to the top, and results in a 120 pixels black bar at the bottom.

Looking into nkSync(), it seems to be nk.Render(1) that's causing this because if I rem it out, the screen is positioned correctly in the window (but of course.... I lose the UI)

I can adjust the graphics back in the right place with SetViewOffset(0,-60) but that only affects the native graphics, not what is rendered by nk.Render().

Is this something that can be adjusted on your side?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 5th Jan 2021 06:35
This issue is known. This is also in the first post as the second point in the 'Known Issues'.
When the window size is changed I adjust the virtual resolution accordingly.
If I don't do that, there would be a very strange behavior when rendering the UI surface.

I just got an idea that I haven't tried yet. It's more of a workaround than a direct solution but if this is handled in the plugin the user outside won't notice.
The idea is to simply render the surface to a RenderImage with the size of the virtual resolution. Then scale and place it on the screen accordingly.
Sounds simple but the problem will be that the mouse input commands will have to be adjusted as well.

I will need some time to try this out. But I think it is worth to follow up.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
n00bstar
20
Years of Service
User Offline
Joined: 9th Feb 2004
Location: Montreal, Canada.
Posted: 5th Jan 2021 09:11
Quote: "This issue is known. This is also in the first post as the second point in the 'Known Issues'."


Awh crap sorry, I'm usually pretty good at reading those before posting :/


Maybe there's a way to add a kind of SetUIOffet(x,y) and SetUIScissor(x,y,size,size)? That way the user can offset his native graphics and have the UI follow along?

There are ways to work around this on my end so if nothing can be done, I just hadn't noticed it until I added a background image
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 5th Jan 2021 18:35
Quote: "Maybe there's a way to add a kind of SetUIOffet(x,y) and SetUIScissor(x,y,size,size)? "


I had already followed a similar approach but with consideration of window scaling.
You can see the result in this post.
What you don't see, however, is the problem I have already described.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
nickydemon
8
Years of Service
User Offline
Joined: 19th May 2015
Location:
Posted: 6th Jan 2021 13:21
Hi MadBit, is it possible to use this plugin inside visual studio 2019 project in c++?
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 7th Jan 2021 07:42 Edited at: 7th Jan 2021 07:42
MadBit,
Is it possible to make the labels of menu items have left alignment?
So far it seems that they are centered on the menu, without the option to change it?

Attachments

Login to view attachments
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 7th Jan 2021 18:10
It seems that MenuItemLabel gives you the option to position your label.
But with the MenuItemImageLabel you can only choose on which side the image should be displayed.
But the label is always centred.

As a woraround I can only suggest you two things
1. you could split the MenuImageItem into two calls. As an image and a label. Then you can tell the label on which side it should be aligned.
2. you measure the exact width of your MenuItemImageLabel (image width + text length in pixels) and provide it to your item via LayoutRow(NK_STATIC, exact_width, 1).



@nickydemon
Quote: "Hi MadBit, is it possible to use this plugin inside visual studio 2019 project in c++?"

Not in the way it exists now. I don't have any header files for it at the moment, but that wouldn't necessarily be a problem.
If more people need a C/C++ package of Nuklear, I could create one.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 7th Jan 2021 18:56
OK, I go it, thank you
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 9th Jan 2021 22:51
@george++
I have fiddled around a bit to create an appropriate menuitem. I think it can also serve as an example to build your own controls.
You can also adapt it to your needs.

Here is the code:

It can be used in the same way as the normal MenuItemImageLabel. The only difference is that there is an additional parameter for aligning the label.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 10th Jan 2021 11:27
Thank you very much
I tried to modify you code in order to use slot numbers, since I already use the slot numbers for images in my editor.
I didn't manage to draw an image with the nkDrawImage command. Please take a look:
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 10th Jan 2021 14:21 Edited at: 11th Jan 2021 07:33
I think I 'm done (I am not sure if this is the proper way, though...)


EDIT:
I noticed that the menu does not close after the click on a menu item
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 11th Jan 2021 11:38
Oh yes, you are right. But you can solve this easily.

Add the ContextualClose() command in the If statement from lines 32-36.



Why do you use DrawImage you can also just add an image element with Image like in my example. But if it works for you, you can keep it that way.
If you keep it like this, you can also use nk.Spacing(1) instead of inserting an empty string (nk.Label("", txt_align)).
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 11th Jan 2021 12:16 Edited at: 11th Jan 2021 12:33
Quote: "Why do you use DrawImage you can also just add an image element with Image like in my example."

I use the DrawImage because during application initialization, I load all image icons and assign them to slots (ImageToSlot). If I'll use the nk.Image now, then I must change a lot of the existing code
I'll check the code above ASAP
Thank you
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 11th Jan 2021 17:37
Quote: " I load all image icons and assign them to slots (ImageToSlot). If I'll use the nk.Image now, then I must change a lot of the existing code"


You can also use the nk.Image command with slots. It is available in both forms.

nk.Image(image_name as String)
nk.Image(image_slot as Integer)
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 11th Jan 2021 19:23 Edited at: 11th Jan 2021 19:24
Quote: "You can also use the nk.Image command with slots. It is available in both forms."

I had not noticed that. Thank you. I've already adopted your original version of the nkMenuItemImageLabel function.
In the video below, you can watch the menus with left alignment as it is in the windows native menus and something that I am trying to fix and I need your advice.
I place some sprites on the screen and then I select one in order to delete it with the [DEL] key. If I press the [DEL] key while in an edit box widget the selected sprite will be deleted too.
This is something that I want to avoid.
Is there any function, let's say nk.WidgetHasAnyFocus to help me detect that an edit box has the focus and prevent the deletion of the sprite?

MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 11th Jan 2021 21:15 Edited at: 11th Jan 2021 21:17
With GetLastEditEvent you can get the status of the editbox.

returns one or combination of
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 11th Jan 2021 22:40
It works!
I spent a few minutes, to figure it how to get a 'not active' event from any edit widget in the app.
This thing' s amazing!
Thank you
george++
AGK Tool Maker
16
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 16th Jan 2021 20:39 Edited at: 17th Jan 2021 13:48
Hi MadBit,
I found the following issue:

Do you think that you can reproduce it?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 17th Jan 2021 08:22
Hmm, thats realy a bug.
I am working on it. Thank you for finding it.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)

Login to post a reply

Server time is: 2024-04-19 21:55:28
Your offset time is: 2024-04-19 21:55:28