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 / [Plugin] Nuklear an immediate-mode graphical user interface

Author
Message
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 4th Oct 2020 21:01 Edited at: 18th Oct 2020 15:09
Hi,

now I am ready to release the plugin. I know there are still some flaws in it. But I think together we will be able to find them and hopefully fix them. Some of them are already known but I can't solve them easily because they are deep inside the nuclear library.

I will update this first post from time to time. Here I will keep a todo list, list fixed bugs and update the download of the plugin.
It might be worth to have a look from time to time. I will announce new versions in this thread as well.

The second post in this thread is kept free for documentation. So the plan!

I hope I will have the discipline to do this regular.

To the plugin:
This plugin is a kind of wrapper around the NuclearUI library for AGK. With over 300 new commands.
A quotation from the nuclear project side.
Quote: ""This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain. It was designed as a simple embeddable user interface for application and does not have any dependencies, a default render backend or OS window/input handling but instead provides a highly modular, library-based approach, with simple input state for input and draw commands describing primitive shapes as output. So instead of providing a layered library that tries to abstract over a number of platform and render backends, it focuses only on the actual UI.""

Since this library works a lot with pointers I had to write some workarounds for AppGameKit to preserve the functionality.



What do you find in this package?
Two directories and a text file.
In the directory AGK-Project you can find several example projects. These are not very well documented but it is worth to have a look inside.
The directory Plugins contains the actual plugin. How a Plugin is installed, you can find out here. The Plugin is for Windows, Windows64 and Linux.
The text file is a not quite complete function overview. This can be helpful for the many function parameters, which require some functions.



Known issues:
  • Progressbar: When setting values the bar loses focus when leaving the widget.
  • AGK-Window: When scaling the AGK-window the nuclear surface is not scaled. I assumed I had fixed this problem but then found that there were errors within group windows with scrollbar. So I had to go back to the old method. This method automatically adjusts the virtual resolution to the window size.



TODO:
  • Dokumentation of all commands.
  • Reference sheet with all commands.
  • UTF-8 support



Bugs:
coming soon.


Change Log:
[2020-10-18]
- [CHG] TreeElementPush & TreeElementImagePush do not work as they should. For internal node identification C/C++ uses the source code name and the source code line of the calling program. This function is missing in AppGameKit and cannot be simulated. It is recommended to use TreeElementPushID & TreeElementImagePushID instead.
- [ADD] EditGetCursorPosition
- [ADD] EditGetMarkStart
- [ADD] EditGetMarkEnd
- [ADD] EditSetMarkStart
- [ADD] EditSetMarkEnd
- [ADD] EditSetCursorPosition
- [FIX] No images were handled under AGK-Studio.
- [FIX] Crash of the app under AGK-Studio. Fixed by creating a dummy object.


If you would like to support this wrapper you are welcome to donate some coins. I am happy about every cent I get.

Please enjoy this plugin and stay healthy.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)

Attachments

Login to view attachments
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 4th Oct 2020 21:02 Edited at: 17th Oct 2020 06:33
Table of contents




First Steps

Let me show you the code first. After that come the explanations.
Here is a simple example. It opens only a window without function and content.



The first line includes the plugin. Just like any other. The following lines until 'UseNewDefaultFonts' is the AppGameKit default code. I will not explain it now.
With '#insert "Nuklear.agc"' some important constants and functions written in AGK-Basic are included. So it is also important.
'nkInit()' initializes the GUI-engine.

Now comes the main loop. In order for Nuklear to respond to the user's input, the input must be passed from AppGameKit to Nuklear. This can be done with the command 'nk.HandleInput()'.
Next we initialize our first window. For this 'nk.WindowBegin' is responsible with the parameters (from left to right) window title, position of the window (x,y) width and height of the window and the window flags.

Why 'WindowBegin' is in an if statement has the following reason: Nuclear remembers which status the window has. If it is minimized now, the content should not be shown anymore. So 'WindowBegin' returns 0 (false) in this case.

Between 'if' and 'endif' there are all the controls that should appear in the window.
With 'nk.WindowEnd()' we finish the construction of the window.

In order for AppGameKit to display our window, 'nkSync' must be called. The AGK-Sync does not have to be called anymore. This is done by nkSync.
Note that there are commands with and without a dot after nk ( nkSync and nk.WindowEnd() ). The ones with the dot are pure plugin commands and the ones without are commands in AGK-Basic that were inserted via '#insert "../Nuklear.agc"'.



Now we fill our window with some controls. First of all we have to specify which space our controls are allowed to occupy. We do this with 'nk.LayoutRowStatic' which waits for 3 parameters. Height and width of the controls and how many controls are placed next to each other.



Continue with two buttons. Because we want to react to the buttons, we put them into an if statement. We decide to use normal label buttons. Therefore you only need a string parameter as label for the button.


The buttons set or clears the variable 'hello_text$'.

Last but not least we want to bring our variable on the screen/window. For this we have 'nk.Label' which shows a string. The parameters are - the text to display and a flag how the text should be displayed.



NK_TEXT_CENTERED only says that it will be centered vertically and horizontally in the available space.
However, since we want to make the entire window width available to our text, we must first change the layout.


This time we took a dynamic layout. This gives the layout the full width of the window. Again with a height of 30 pixels and the window width is divided into one column.
With NK_TEXT_CENTERED our text is finally displayed in the horizontal center of the window and in the vertical center of the row (30).



The code now looks like this.



I hope this is enough for a short introduction.

next About Window
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
Lupo4mica37
User Offline
Joined: 1st Jun 2020
Location:
Posted: 5th Oct 2020 03:10
Awesome!

Does it support Japanese fonts?
????????
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 5th Oct 2020 19:28
Hi MadBit,
I'll use the plugin as soon as possible for a 2D editor that I need.
Right now I am busy at my free time with a game but the editor is a the second priority for me.
Thank you for the release
The Donate button does not work for me. I use the Edge browser
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 5th Oct 2020 20:29
@Lupo4mica37:
Unfortunately not yet. There is still a structure and some functions missing. I will put it on the TODO list. But with low priority.

@george++:
I am looking forward to see what you or the others can achieve with the plugin.
The button should work now. Thanks for the message.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
Lupo4mica37
User Offline
Joined: 1st Jun 2020
Location:
Posted: 6th Oct 2020 00:29
Thank you.
????????
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 6th Oct 2020 04:47 Edited at: 6th Oct 2020 04:48
I did a donation.
I hope that community members will support you, since the AppGameKit lacks of a serious Graphical User Interface lib, for the implementation of the tools we need for game development.
When I'll have some stuff that uses your plugin, then I'll post a demo
Good luck with the TODO list
DannyD
3
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 11th Oct 2020 14:05
Thanks Madbit... appreciate the effort and hard work....
Check your email.. donation made...
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 13th Oct 2020 07:34
Thank you Danny and George for your donations.

UPDATE:
Parts of the documentation have been updated.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 15th Oct 2020 07:38
UPDATE:
Parts of the documentation have been updated.
About Menus
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
janbo
11
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 17th Oct 2020 15:00 Edited at: 17th Oct 2020 16:28
Wow, this is impressive !
Also it runs on Studio if you use #renderer "Basic", except for images I think.
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 17th Oct 2020 21:50 Edited at: 18th Oct 2020 03:40
Run the following program without movung the mouse pointer:


You'll notice that the initial coordinates of the mouse are not correct. After the first mouse move, the coordinates will update
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 18th Oct 2020 06:57
@janbo:
Thanks for this report. I think i've solve this issue.

@george++:
You use the AppGameKit basic functions to determine the mouse coordinates. If they show something wrong, I will not be able to change that.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
janbo
11
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 18th Oct 2020 12:50
Did you already made an update ?
I also cant find the nkWindowGetStoredPanelBounds(1) command when testing the demo with those LinkNodes.
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 18th Oct 2020 15:10 Edited at: 18th Oct 2020 15:10
Sorry, not yet but now.

Changelog:
[2020-10-18]
- [CHG] TreeElementPush & TreeElementImagePush do not work as they should. For internal node identification C/C++ uses the source code name and the source code line of the calling program. This function is missing in AppGameKit and cannot be simulated. It is recommended to use TreeElementPushID & TreeElementImagePushID instead.
- [ADD] EditGetCursorPosition
- [ADD] EditGetMarkStart
- [ADD] EditGetMarkEnd
- [ADD] EditSetMarkStart
- [ADD] EditSetMarkEnd
- [ADD] EditSetCursorPosition
- [FIX] No images were handled under AGK-Studio.
- [FIX] Crash of the app under AGK-Studio. Fixed by creating a dummy object.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 18th Oct 2020 18:50 Edited at: 18th Oct 2020 19:38
Quote: "You use the AppGameKit basic functions to determine the mouse coordinates"

Do you mean that I have to use 'nuklear' functions? How can I determine the mouse coordinates?
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 18th Oct 2020 19:22
No. Nuklear use the AppGameKit funtion to get the Mouse coordinates.

You will definitely have this problem with or without the nuclear plugin.

With Nuclear you can get the delta position, but not the absolute coordinates.
InputGetMouseDeltaX
InputGetMouseDeltaY

Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 18th Oct 2020 19:58
OK, thank you MadBit
FYI: In full screen mode the AppGameKit will ignore the virtual screen resolution setting and will use the maximum device resolution
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 18th Oct 2020 20:40
Quote: "FYI: In full screen mode the AppGameKit will ignore the virtual screen resolution setting and will use the maximum device resolution"


Yes, this is a known problem. I described it in the first post. It is the same as the one with the agk-window scaling.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 19th Oct 2020 20:24 Edited at: 19th Oct 2020 20:32
Is there any way to change the size of the Message Box. Please see the image below.


The code is simple:


I noticed that I can write my a message dialog box to replace the 'nkMessageBox' but I post here to note that the calculation of the dialog size may be false
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 20th Oct 2020 04:56
thank you.

Until the next update you can fix it yourself.
In the file NuklearDlg.agc in line 126 you can add the flag NK_WINDOW_DYNAMIC to the flags parameter.
The line should then look like this
nkPopupBegin(NK_POPUP_STATIC, title, NK_WINDOW_DYNAMIC||NK_WINDOW_NO_SCROLLBAR||NK_WINDOW_TITLE, box)
That should be it.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 20th Oct 2020 19:04 Edited at: 20th Oct 2020 19:08
Hi MadBit,
I am having difficulties in creating a window that will display images stored in the media folder. Each image may differ in size from others.
When I load the images I cannot maintain the aspect ratio of each image.

Any idea?
Here is how I load the images

and here is how I display the window (no issues here).
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 21st Oct 2020 05:29 Edited at: 22nd Oct 2020 04:52
Unfortunately there is no function that maintains the aspect ratio.

I would put each of the images into a UDT when loading. and store it in an array.
This UDT would look like this



width, height and aspect do not necessarily have to be saved. It is just easier to access it later.
images[x].width is easier than GetImageWidth(images[x].id).

the load could look like this.

The display in a window looks like this.



The displayed code is not tested and may contain errors. But I hope I could give you one or the other suggestion.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 21st Oct 2020 05:48
Thank you MadBit.
Can't wait to check your suggestion. I am on business trip away from my personal workspace.
I wish I could serve a beer!
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 21st Oct 2020 20:40 Edited at: 21st Oct 2020 20:42
It works for images having the width larger than the height
In the following screenshot you can see the image with the green circle, it is a bit stretched (it is 64x128 pixels. The image with the blue circle it is OK. Its dimensions are 128x64 pixels
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 22nd Oct 2020 04:43
Can I see the code that represents your window?
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 22nd Oct 2020 07:34 Edited at: 22nd Oct 2020 07:34
Quote: "Can I see the code that represents your window?"

Sure, I followed your instructions. Here is how I create the slots:

and here is how I represent the window

I can send you the whole project if you have the time to take a look at it
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 22nd Oct 2020 12:15
I was able to reproduce the problem with the code snippets well.

You can easily solve the problem by adding additional 8 pixels to the width of the button.
nk.LayoutRowPush(64*gWinSprite.img[i].aspect+8)

Why is this so?
The layout automatically sets spaces between the controls, and the button also has spaces between the border and the image, so the image is displayed slightly distorted.
If you add 8 there you will compensate for this.

To see a comparison you can test it by replacing nk.ButtonImage with nk.Image and you will see that the layout is not distorted anymore because nk.Image does not contain a border.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 22nd Oct 2020 12:31
Thank you very much for clarifying it in detail.
Is this an issue that can be resolved later by your plugin, or it depends on the nuklear project itself?
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 22nd Oct 2020 12:47 Edited at: 22nd Oct 2020 12:49
One can dispute whether this is a bug or not. In any case it is caused by the nuclear core.

It would be desirable if ButtonImage had a flag that keeps the aspect ratio of the image.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
Ranietz
AGK Gold Backer
16
Years of Service
User Offline
Joined: 2nd Sep 2004
Location: Norway
Posted: 22nd Oct 2020 23:29
Hi. Thanks for making this plugin.

I'm trying to use the command "nk.WindowGetWidth()" but it just crash the program (AGK Studio v2020.07.28). Is it not implemented yet or is it a bug?

Here's what I'm trying to do:
Ranietz
AGK Gold Backer
16
Years of Service
User Offline
Joined: 2nd Sep 2004
Location: Norway
Posted: 23rd Oct 2020 02:48
Sorry. My mistake. I missed the documentation threads in the AppGameKit Classic forum. I see what I did wrong now.
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 24th Oct 2020 09:25
Hi MadBit,
A quick question: Is it possible to disable input handling for specific windows?
MadBit
Valued Member
11
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 24th Oct 2020 20:01
yes, with the window flag NK_WINDOW_NOT_INTERACTIVE the window is drawn, but without any function.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 25th Oct 2020 08:40
Thank you. I missed that. This will help to prevent the user interaction when this is needed.
george++
AGK Tool Maker
13
Years of Service
User Offline
Joined: 13th May 2007
Location: Thessaloniki, Hellas
Posted: 25th Oct 2020 08:41
Thank you. I missed that. This will help to prevent the user interaction when this is needed.

Login to post a reply

Server time is: 2020-10-28 11:44:10
Your offset time is: 2020-10-28 11:44:10