Koui | User interface library for Armory and Kha

Hey!

Some of you might already have heard of Koui, my new UI (user interface) library for Armory (and pure Kha!) that I released in May. It is an alternative to Zui, focusing on usability and customizability. In this thread, I will keep you up-to-date about its updates.

koui_header

You can download Koui here: https://gitlab.com/koui/Koui. Also check out its documentation, there is also a page on getting started. If you encounter problems, please open an issue.

Example screenshot


The UI design in this screenshot was provided by Sebastian Becker. Follow him on Behance and Instagram!

Planned features

Some of the bigger features that are planned but not yet implemented:

  • Animations
  • Controller and touch support
  • More theme properties (gradients, rounded corners etc.). Theming already got a huge update in Koui 20.06!
  • Logic node pack for Armory3D. Currently working on this at the Koui Logic Nodes repository, an example file will be uploaded soon.
  • Automated testing for some build targets

List of UI elements

I’m really looking forward to hear about your experience with Koui! Have fun :slight_smile:

10 Likes

Little update:

Shadows, antialiased round corners, color gradients and an extendable CSS-like syntax for hover/click events are coming soon to Koui!

Example:
KouiButton

Also, when https://github.com/armory3d/armory/pull/1851 is merged, I will continue with working on the logic node pack to make Koui available to more people :slight_smile:

2 Likes

Hi @timodriaan, did you already had compared the performance of Koui and Zui? It looks really amazing and more complete. I plan to make some build tests for this purpose also to track this issue

No I haven’t done that yet, but its a good idea. It’s probably about the same in terms of speed, in theory Koui should allow more intelligent optimizations but both Koui and Zui use more or less the same techniques for rendering. Koui has probably a bit more overhead on the non-rendering side but that’s because it gives you much more freedom compared to Zui.

Is there any chance of this bug is becoming from Kha? I don’t know too much about how the UI is rendered, but Kha is responsible for it? Maybe i can open an issue there.

I think the problem is not overhead in this case, because UI shouldn’t take too much from the fps anyway.

When i have some patience to deal with android studio i will give more feedback for you UI. Thanks in advance :+1:

I have no idea, feel free to check if this also happens with Koui.

1 Like

I am going to test Koui, but i couldn’t get custom logic nodes working in Armory (not only the Koui ones).

Also i am getting this error with the minimal example script: …/…/Sources/arm/MyTrait.hx:15: characters 87-88 : Expected expression

Here is how i place the custom node files and Koui:

screenshot1

Inside Libraries folder:

screenshot2

The custom nodes .py need to be updated for the new version?

Maybe because of a change in the “description” in the Python file in the new version?
A version for nodes was added there.

Hi,

you didn’t install it correctly, the logic node package directory (not its files) must be in the Libraries folder and Koui itself in a folder called Subprojects (due to the nature of Kha). I will update the installation descriptions to make it more clear how the setup should look like :slight_smile: You can use different folders but then you have to tell Kha where to look.

The logic package itself should work (the big changes didn’t break backwards compatibility as far as I know), but there will be an update soon to make use of the new category system.

The example trait might be a bit out of date, I will test it and update it when there are errors (the message you pasted looks like I messed it up somewhere).

Koui must be in "project folder"/Subprojects/"Koui folder" or "project folder"/Subprojects/"Koui files"?

About the custom nodes, i can’t get it working. I don’t know if it is because of Linux or something i did wrong. These are the ways i tried:

  1. Create a Libraries folder in the project root.

  2. Inside the Libraries folder, i create another folder called "koui_logic_nodes".

  3. In the created folder, i put all these files:

screenshot1

No matter if i put the files in the created folder or in the Library folder, Armory never loads the custom nodes. I think that must have a practical example file (with a .blend, etc.) or some text as a branch hierarchy.

The former, always use folders for libraries.

Actually there was a problem with backwards compatibility but it should be fixed now (pushed another fix a minute ago). Can you please test again? If still nothing happens, can you look into the console and paste the error messages?

What was fixed is related to the logic nodes pack or the Koui?

I need some working script to test if it is working, since the example one is not working. Because there is a chance to the logic nodes not working for me. But anyway i can put them into Armory sources folder

The fix was related to the logic nodes package.

Also, the example script was out of date due some changes to the event system. Now everything should work again :slight_smile: Sorry about the inconveniences, there is a lot of work to keep everything always up to date.

I understand the inconveniences, there is no problem on that. :slightly_smiling_face:

Now the nodes are appearing for me. But just a noob question: how do i create a element? It is trough Canvas? Or Script? :sweat_smile:

I will try to find this info in your wiki

Perfect :slight_smile: The nodes are not documented yet (so many things are missing currently, so don’t expect too much right now) but the screenshot in the logic nodes pack repository can give you a good starting point.

Trying to use the script example return this error: iron.Scene:823: Error: Trait 'arm.MyTrait' referenced in object 'Scene' not found but it is probably my mistake somewhere. Also there is nothing in the screen just running this script. Is this the correct behavior?

Also this appeared in the console two times: sonnet.core: Missing trigrams for languages: QSet("en_NZ", "en_ZW", "en_IE", "en_AU", "en_TT", "en_CA", "en_ZA", "en_NA", "en_AG", "en_NG", "en_GH", "en_SG", "en_BZ", "en_PH", "en_JM", "en_BS", "en_DK", "en_HK", "en_GB", "en_IN", "en_BW") but i can’t affirm which action was caused it yet. Maybe it is because i used special characters in the file path. I will try to force it again and come with the answer.

Now i will check the screenshots and try the nodes :slightly_smiling_face:

This is because the trait class in the example is called KouiTrait but you probably named the file MyTrait.hx. So either rename the file or the class.

That second message is not related to Koui at all.

Indeed. After creating a new trait named as KouiTrait it is working, but i still get this error: .../test/Sources/arm/KouiTrait.hx:10: characters 87-88 : Expected expression

Can you send the .blend of this logic or it is already avaiable somewhere (image below)? I suggest you keep it avaiable in the wiki like the script is, this way users can test it faster and avoid logic errors.

What is an AnchorPane? I tough that “New Element” node create a button in the screen, but looking at your example looks like “AnchorPane Add” is doing this.

Following the image above i had created this logic:

I got this error: Invalid anchor type!

Looks why is better to provide a ready to test .blend: i was trying to run the logic node setup without adding the node to an object and thinking that the problem was in the ui not being rendered.

That’s not good. Using the example script works for me, so could you paste the problematic line and maybe a few lines around that?

I also get the error with Invalid anchor type, it’s related to the string socket bug from yesterday (so using a older Armory version will work but I’ll try to fix it ASAP).

I will inform you when it’s finally working again^^


Regarding the AnchorPane: this is the default layout type which places objects with their position used as an offset from an anchor. Anchors are the screen corners and the center points as you can see in that node dropdown.

New Element (not called Add Element by purpose) just creates a new element but doesn’t put it into a layout. Because there are different layout types you need to add it later to a layout of your choice.

That was a pretty quick explanation, if you have more questions just ask, a better documentation will follow. Currently you have to use the API to get information about the available Layouts. There is also a feature called Scenes that lets you switch fast between layouts: https://gitlab.com/koui/Koui/-/wikis/Documentation/Layouts#scenes