[SOLVED] UI Queries

A few questions…

  1. What’s the best way to use imgui with haxe in Armory?
    I’m looking at this, but not sure.

  2. I’m looking at the docs on UI Editor, but when I select “Edit Script” I don’t see the toolbar.


    Rather, my code editor open.
    Is there something else I need to do?

  3. How would I go about creating custom panels, buttons, etc. to use in my UI?
    Are there any really ‘eyecandy’ UI libraries out there, which I can use in my projects?

Thanks.

See this Koui | User interface framework for Armory and Kha
Might suit your needs.

3 Likes

Hello. I think you’re looking at either an incorrect screenshot or you mistook Edit Script with Edit Canvas. You’re suppose to see and use Edit Canvas to edit your Armory Zui Canvas.

2 Likes

Thanks.
They look okay.
Are those fully customizable? Can I totally change them to something very different.

I’ll take a look.
I am still interested in imgui, and looking at that, as well as any others.

You’re right.
Where do I find “Edit Canvas” in the “ui_script2d” example?
I’m not seeing it under Armory Scene Traits.

Fun fact. After some research, Zui was actually inspired by Imgui.

https://github.com/armory3d/zui#custom-integration

image


After looking at the blend, you’re actually using a Haxe script, not a UI Canvas. So you can’t see it because it’s not a Canvas, but rather a Script. My mistake. I originally assumed you were using a Canvas because you mentioned the Armory 2D Editor.

To create and edit a UI Canvas, you need to create one.

Both Zui and imgui (and in fact also Blender’s UI library) are so-called “immediate mode” UI libraries, which basically means that the user’s UI code is directly drawing the UI and the UI is in some way reconstructed each frame. So both frameworks are pretty similar, even though Zui is less powerful and also not as stable as imgui.

Are you referring to Zui or Koui here? Zui has a few customization options, but apart from colors and fonts there is not much you can change unfortunately. Koui can do a lot more (rounded corners, gradients, smooth shadows, 9-slicing, etc.) all defined in a CSS-like language, but it’s not an immediate mode UI and you need to write Haxe scripts to use it or use the quite incomplete logic nodes for it. There is no 2D editor for it like Zui has one.

I think this library should work if you’re exporting to the html5 target, but on Hashlink/C targets (basically all the other Armory targets) it will not work since it only supports html5 and C++. However, Armory targets html5 and C, which in the Haxe world is unfortunately quite an incompatibility. There are these other imgui bindings specifically for Hashlink/C, but unfortunately they only work with the Heaps framework which doesn’t work with Armory (Armory is using Kha instead of Heaps). So I think if you want to have support for all Armory targets, you will need to write your own bindings unfortunately, or at least replace this file with Kha-specific code (there may be more work required, I don’t know).

@rpaladin Ah. I see.

@timodriaan thanks.

Hi. To double check, are all of your questions answered?

Oh, yes. Thanks.
I would say I’m satisfied.

1 Like

@kaiwas I’m looking at “Getting Started” using Koui.
What’s the subproject directory?

After you installed Koui, the folder structure of your project should look like this:

├── Subprojects/
│    └── Koui/
│
├─── project.blend (if using Armory)
└─── khafile.js (if using Kha. Armory will generate this automatically)

Is this the directory where dependencies will go?

directory tree when using KOUI
Scr_20221108_113320

1 Like

@kaiwas Thanks. Just to be sure… forgive the hard head. :wink:

dirTree

The directory build_playground is not the Subprojects directory. I need to create a folder, and name it Subprojects.
Is that correct?

build_playground is created automatically when you run or build your work.

“Subprojects” and “Libraries” are folders that you must create yourself and place the KOUI files in them.
In one KOUI itself, in the second there are logical nodes for them.

2 Likes

@kaiwas I am trying the example here, but getting errors.

…SceneMainUI.hx:6: characters 8-17 : Type not found : koui.Koui
…SceneMainUI.hx:8: characters 8-30 : Type not found : koui.events.MouseEvent
…SceneMainUI.hx:22: characters 4-8 : Type not found : Koui

Auto-completion worked fine, so I don’t understand why these errors occurred.
Does it have anything to do with the khafile.js which I placed in the Subprojects directory?
This is the Koui’s khafile.
I was getting an error of it missing.

My file structure looks like this…
koui

I have the same folder structure and also have this file. But I didn’t put it there. It was there originally from the unpacked KOUI archive.

I don’t know the details, but you can ask the submodule developer.

The errors occurred because of something I had done in the earlier stages. I started fresh, and no problem finding koui.
I do get errors in code though, so @timodriaan should be able to fix these.

…Subprojects\koui\Sources/koui/elements/layouts/ScrollPane.hx:65: characters 105-106 : Too many arguments
…Subprojects\koui\Sources/koui/Koui.hx:71: characters 107-115 : Too many arguments
…Subprojects\koui\Sources/koui/Koui.hx:261: characters 84-85 : Too many arguments

Removed last parameter, and the errors are gone.
I don’t know anything about it.
From here, the last parameter is a Boolean.
Maybe it changed, or haxe is different. I don’t know. I’m now using haxe for the first time. Me Clueless. :face_with_raised_eyebrow:
…but I’ll learn. :smile:

1 Like

Sorry for my late reply, I’m pretty busy lately. This issue is fixed in the latest master branch :slight_smile:

No problem.
I’ve been looking at using addons in Blender using Python, and Python GUI libraries looks awesome :star_struck:.

There are quite a lot of them to choose from too - kivi, for example, which is very popular, and as I discovered, easy to use. :+1:

Plus, I have used Python in the past, and like it a lot.
I always wanted to get back to coding with Python, so I think that’s where I am headed. :yum: