So I am starting to customize stuff now.
When I understand .ksn correctly, (which I probably don’t ) _button > _root: takes its settings from _root.
So changes to _root affects button. Right?
Now I can see changes made to, let’s say cornerRadius , however
I can’t figure out how to change the button color and size.
(for example: _root: bg: #118a8e does nothing. _root: size: width: 350 does nothing as well.)
Also changing _root!hover: border: color: @globals.COLOR_PRIMARY_LIGHTER
does nothing…
So I think I am doing something wrong here. Any hints?
Yes, it should work like that. Do you have caching enabled in Armory? I recently found out that Koui only seem to re-parse the theme file for clean builds, so if you change something in the ksn you have to clear the build in Armory. I still have to find out why that happens but that could be the cause why the changes didn’t update for you. (Edit: probably Koui parses the file everytime but it parses the wrong, cached file)
One thing to know for ksn files (it’s not yet documented) is that if you override a property from a “parent element” that also is included in other states in the parent like !hover, you’ll sometimes have to reimplement the states on the child element as well. It’s ugly and I plan to someday improve this, it’s still not where I want it to be. The whole ksn thing is just a workaround to have more flexibility with styles which you wouldn’t have with json for example (it used json before). Unfortunately, including an own language usually is a lot of work and introduces more bugs than features but in this case I think it’s worth to have. Let me know of your experience with it
And another thing: I tested the Nodes now, can’t get 'em to work.
This is the error:
Uniform projectionMatrix not found.
Trace: TypeError: anchorPane.add is not a function
at armory_logicnode_KouiAnchorPaneAddElementNode.run (<anonymous>:730:14)
at armory_logicnode_KouiNewElementNode.runOutput (<anonymous>:639:8)
at armory_logicnode_KouiNewElementNode.run (<anonymous>:880:8)
at armory_logicnode_KouiInitNode.runOutput (<anonymous>:639:8)
at <anonymous>:745:11
at <anonymous>:46972:3
at onLoaded (<anonymous>:22056:4)
at kha_Assets.loadFont.fileName (<anonymous>:22028:5)
at <anonymous>:22129:3
at <anonymous>:23026:3
(EDIT: I forgot to connect the AnchorPane on the pic, but I did that afterwards. It still doesn’t work (gives red screen) and it still spits the same error. From code all is fine. So I am not sure if I connected them wrong or if the nodes themselves have a problem.)
The button color is missing indentation, indent it (make sure to use tabs) and everything should work. The error message may sound a bit weird in this case but it is because without indentation you set _button.bg which doesn’t exist when you should set _button.color.bg instead. I guess I should improve the error message a bit.
Edit: actually the error message should already include the group for which it fails, like Referenced group "button.bg" does not exist!, I wonder why this fails…
Regarding the second error: Did you also connect the label to the Element input? This shouldn’t be the issue but otherwise I have no idea right now. I will test it later today.
The SetPaddingNode should work now, please update to latest master and also update Koui as I fixed some padding-related stuff (previously the order in which padding/positions were set made a difference). Thanks for reporting as always
Regarding the warning message: this is because the custom shaders Koui uses do not use a uniform called projectionMatrix which Kha expects for 2D drawing IIRC (but so far we don’t need it, this might change in the future if I should decide to implement 3D UI support). There is no problem with it, and if I remember correctly, Robert said a while ago that he might remove that warning/the need for this uniform someday. For now, just ignore it.
Hmm… so I don’t get any errors on the padding node but as soon as I hook up the padding node
(no matter where in the chain —> before/after element node, before/after anchorPane,etc…) the element disappears.
(And the second thing is that I still can’t manage to use Koui from script and nodes at the same time… )
EDIT: Oh, and another thing: What does the anchorPanes ‘anchor’ input take?
And how do I get a Koui Node Element from a haxe script.?
Also it seems odd that text labels aren’t really center like buttons are.
When using anchor pane --> middle center on a text element,
the text starts at the center point and goes to the right from there.
That makes it quite difficult to align text that isn’t equal in character length.
Hmm, can you please share a picture of your node setup or maybe even your file? For me everything works.
There currently is no good way to combine both logic nodes and Haxe with Koui, as elements do not have an ID with which you could access certain objects (it is planned though). Also, you just need to initialize Koui once then, but because the trait order is not guaranteed and Koui loads asynchronous (it loads some assets in the background like fonts for example) it is generally not advised to use Koui both with Haxe or logic nodes unless you check if Koui is already initialized.
In general, Koui’s logic node are in a very early stage and missing loads of features, so Haxe is the best way to go for now.
Currently there is nothing you can connect to it (so use the dropdown of the unconnected socket), again because of still unimplemented nodes. I made the anchor a socket so that it is possible later to dynamically change the anchoring of elements.
Yes, that is by design to allow for more customization. Labels have two alignment properties (horizontal, vertical) for that but I think they are not yet exposed in the nodes (Haxe only again). I’m currently working on like 5 different things so when I get a bit more space I will implement that Also I’m planning on implementing multi-line support for text labels.
Basically, the anchor sets the position in the layout (= the corner of the parent in which the label/element is positioned) and the alignment states on which side on the label’s position the text is drawn.
Yeah, I like that better most of the time anyway.
Nodes are just faster to setup. But it doesn’t really matter.
I am happy now that there is Koui, as the A2D canvas is now completely broken on Mac. Pure Kha still works, but way too cumbersome. Zui in pure kha still works as well but for standard Ui stuff I really like Koui better.
I wonder if we can get render targets going with Koui. Didn’t test that yet.
Also I think there is no touch support yet, right? I wonder how much time this would take to implement at least an onTouch the button class.
Can you elaborate a bit what you mean with rendertargets in Koui? Should Koui draw to a custom rendertarget or the contents from a rendertarget as an image?
And no, there is no touch support yet. I tested it once on my Android phone and it didn’t work well, two touches were required for a click and so on. Still haven’t looked into it so I have no idea if it’s actually easy to do or if there is much work required. But it’s on my todo list
Edit: There is now very rudimentary touch support, dropdowns and text inputs still don’t work well but the rest should work.
Yeah, that’s pretty much what I meant. The first one is the one that’s more useful to me though.
I haven’t test that yet but it should be pretty much the same approach as with Zui?
If you are in like a situation where you can pull a team and you are less busy, is it possible to get like youtube tutorials and video showcases to make usage more clear.
I currently want to start using koui but I need a bit more aid with it and the wiki and api documentation don’t do enough justice, I’m really good with css but this is way more technical so it’s hard to switch to it.
I mean I get why it is the way it is, I mean after all it was built for haxe support, I’m just looking for a better way to understand this seeing as how I’m coming from css, html and javascript.
Plus I feel like going to YouTube would help get a lot more people in on koui since there is a good number of UI starved armory users that could use more guidance
The help so far is good but I feel video tutorials and stuff would better
Tho I get if your busy, but I’m just hoping you could try
Sorry you had to read all this, please take it into consideration😂
Thanks for all your hard work
It’s just that it’s experimental and changes often so it would be better if you had an easier way to explain it to users is all
We’ve already seen how much of a work around it is to learn.
you’re right, Koui is indeed lacking good documentation, but unfortunately so is my free time at the moment. I never really continued updating the documentation about the theme language/notation after I updated how theming works quite some time ago (in case that’s why you’ve mentioned CSS), so I’m sorry about that
If I get more time again I will try to finish updating that page and in general update the documentation to reflect the current state of Koui, a YouTube video sounds good as well but that’s lower priority for me since the wiki is more important and recording a (good) video is very time consuming.
It’s probably also a good idea to add a markdown file to the Koui repository that lists breaking changes of the public API so it’s easier to update older projects (there not many users so I currently don’t hesitate much to introduce big changes if it’s for the better).
But for now if you have some specific questions, feel free to ask them here, over on the Koui repository or on the Armory Discord
What if you share your test projects on git hub for developers to play around with
After all you I’d say in a previous post that you are making constant little updates so it would be nice if you could like copy and post updated test projects for us to play with
When your less busy ofcourse
[posting under presumption you save your test file to refer back to, I don’t when I’m developing lol.]
Hi, sorry about the delay, it looks like the forum software wrongfully silenced your post.
To install Koui, please follow the steps here: Getting Started · Wiki · koui / Koui · GitLab. If you clone the repository with Git, you will get a folder called “Koui” in the directory in which you executed the clone command, and if you downloaded it manually you need to extract the .zip (or whatever format you have selected) first.
The Subprojects folder needs to be in the root of your Armory project, so if you have your main blend file at /whatever/path/to/my/project/myproject.blend, you need to create /whatever/path/to/my/project/Subproject and move the Koui folder so that you have /whatever/path/to/my/project/Subproject/Koui.
I also need to know how to use nodes for visual programming.
Assuming that this is still related to Koui and not to logic nodes in general: there is an experimental repository for Koui logic nodes, but I haven’t tested whether it still works in the current SDK version. Also, it only has very limited functionality at the moment.
)
