armory3d / zui Goto Github PK

I just updated Zui to test with hashlink and it appears like the slider has got some weird behavior added to it.

Is there a way to turn off text highlighting in both scenarios?

Unless text is highlighted, the backspace key has no effect.

I tracked this down to the line

text = text.substr(0, highlightStart) + text.substr(highlightEnd, text.length);
which has no effect when highlightStart == highlightEnd, and this is often the case as just a few lines later
setHighlight(cursorX, cursorX);
will indeed set them as equal.

I noticed that in your kode garden demo the backspace worked as expected in textinputs: http://kodegarden.org/#23ae97114a4d60f249ce6054ba443c25e7264579

I took the code from there and combined it with the erroneous line to produce:

if (highlightStart == highlightEnd && highlightStart == cursorX)
text = text.substr(0, cursorX - 1) + text.substr(cursorX);
else
text = text.substr(0, highlightStart) + text.substr(highlightEnd, text.length);

which seems to fix it.
Jake

Inconsistency in window function parameters:
x:Int, y:Int, - are in screen coordinates, not taking scaleFactor into account
w:Int, h:Int, - are in scaled coordinates, so real width and height in screen coordinates are w * scaleFactor and h * scaleFactor.

Hi, I was wondering if custom skinning might be possible for the widgets in zui - is this currently doable?

Thank you for this useful and functional library.

I have noticed that when making use of multiple calls to zui.window the tooltips do not show. I tracked this down to the line
tooltipText = "";
in the .window method. I think this would be better performed in the begin() method, so that it is only called once per frame, not once per window.
Even with this fix, tooltips are only showing in the first window called.

Also, I was having issues with the window being blacked out which I tracked down to the globalG.color being switched within the drawTooltip() method. My overridden method simply stores the incoming globalG.color at the beginning of the method and restores it at the end.

Finally, if I could request that tooltips background and type colors be read from the Theme.

override function drawTooltip() {
//do not call super
var saveColor = globalG.color; //jake
globalG.color = 0xfffeff9c;//postit yellow. was 0xffefefef;
var lines = tooltipText.split("\n");
var tooltipW:Float = 0;
for (line in lines) {
var lineTooltipW = ops.font.width(fontSize, line);
if (lineTooltipW > tooltipW) tooltipW = lineTooltipW;
}
tooltipX = Math.min(tooltipX, kha.System.windowWidth() - tooltipW - 20);
globalG.fillRect(tooltipX, tooltipY, tooltipW + 20, ELEMENT_H() * lines.length * 0.6);
globalG.font = ops.font;
globalG.fontSize = fontSize;
globalG.color = 0xff111111;
for (i in 0...lines.length) {
globalG.drawString(lines[i], tooltipX + 5, tooltipY + i * fontSize);
}
globalG.color = saveColor; //jake
}

I was thinking of going back to using Zui and perhaps contributing some major changes to make it more "complete" so that I may use it as part of a project I am working on. However, I have found a crucial issue with regards to text rendering.

In certain contexts, text rendering appears to be smooth and anti-aliased as expected, and in other contexts not.

I decided to create a simple example comparing a simple drawString call directly from g2 context and one from zui context:

g2.font = Assets.fonts.MavenPro_Regular;
g2.fontSize = 20;
g2.color = Color.Black;
g2.drawString("This is some text.", 100, 300);


ui.begin(g2);

if (ui.window(Id.handle(), 10, 10, 500, 120))
{
	ui.row([0.2, 0.5, 0.3]);
	ui.text("Module:", Right);
	ui.combo(Id.handle(), ["Human Resources"]);
}

ui.end();

To try to replicate as much as possible, I have also adjusted the font size in the light theme and changed all text colour values to black.

This is the result:

The text at the bottom is directly rendered from g2 context, which is exactly what I would expect to see when using zui context. Strangely, the combo box contents are fine:

I have taken a look behind the scenes and it appears that whenever drawString is called, there are times when globalG.begin() is called, with it's relevant end() call, and other times neither is called, like inside the text() call context, which is likely the reason for this unusual text rendering behaviour. This, in my opinion, could be easily fixed by refactoring all the draw calls within a single begin() and end() wrapper and there would be no need for all these begin() and end() wrappers floating aimlessly in the code base.

For background fills on the window, for example, these could simply be fillRect() calls directly from the g variable.

I will happily fix this issue, but I was wondering firstly if there was a good reason to have a globalG variable.

Does zui have built-in menu bars? (like that of imgui?)
This seems like a really basic thing, but I can't find it in the examples nor in the README.

For clarification, I mean the bar at the top of many programs with drop-down menu items like "File", "Edit", "View", etc.

If this is not yet implemented, what can I do to mimic it? Is it planned to be added in the near feature?

Thanks in advance,

UIElements is a Unity UI framework, which is a subsequent version of IMGUI for UI construction in editor extensions.

https://docs.unity3d.com/Manual/UIElements.html

Hello,
I takes example from kode garden. All is ok with html5 from kode studio, or native windows application. But when I'm using android ( not native ) , android studio, start black sreeen on phone but nothing else .
Regards,
nicolas

Allow to set a reference screen resolution and adapt scaleFacotor to mach different screens.

it would be great to allow any mouse interactions that happen below the ui to stop

so say if i am drawing or positioning something with the mouse click, it would be good if that mouse click was not registered when using the mouse with the ui. so it only allows the change in the ui, but does not register the click underneath to what you are editing

if that makes sense?

When creating a window with a panel on webgl it looks like this :

https://i.imgur.com/MQST5AZ.png

But on windows :

https://i.imgur.com/tw0MIeC.png

I'm assuming the windows version is the correct behavior? I'd really like to have the window to automatically adapt to the panel. Which is what happens in webgl.

                    ui.begin(g);
			if(ui.window(Id.handle(), 0,0,360,640,false)){
			 	panel = ui.panel(Id.handle(),'Debug Panel FPS: ${util.FPSCounter.fps}');
				if(panel){
				var check = ui.check(Id.handle(),"Allow Diagonal Matching");
					game.allowDiagonalMatching = check;

					check = ui.check(Id.handle(),"Allow Horizontal Clash");
					game.allowHorizontalClash = check;

					
					check = ui.check(Id.handle(),"Allow Synergy");
					game.allowSynergy = check;
					if(ui.button("Clear Row")){
						game.clearRow(0);
					}

					game.setSFXVolume(ui.slider(Id.handle(),"SFX Volume",0.0,1.0,true,100,true));
			}
		}
		ui.end();

I'm passing the Zui object down into several other objects to draw their own thing. I'm trying to render to a render target like so:

	if(ui.panel(panelID,header)){
		for(m in messages.keys()){
			ui.text('${m}: ${messages[m]}');
		}
	}

	ui.separator();

	ui.end();

	fpsCanvas.g2.begin(true, 0);
	fpsPoints[0] = messages['Scene time'];

	for(i in 0...fpsPoints.length){
		fpsCanvas.g2.drawRect((200 - ratio) * i, fpsPoints[i]*60,1,1);
	}

	fpsCanvas.g2.end();

	ui.begin(); <----- problem

In this scope I do not have the g2 object and I can't call begin without pointing to a g2. To fix this I'm also passing the g2 object into the function to pass it back into the begin call.

perhaps there should be something like continue() considering globalG is already set.

No idea if im using it wrong.

Edit: I just realized calling end actually flushes the whole thing, any advice?

When parent element's height and width is change, child height and width remain the same.
Can be tested with canvas example or armory2d
When parent element's size and rotation is changed, children should adapt to these change

this is something ive just come thorugh as well.

gui is outside the render path of the render in the Project.hx - but when doing a translate with my line/entity. it moves the UI, but also does not move the editable elements. so it shows the UI in the other corner, but the elements in which i click stay in the top left

here is a gif to show

same code as the previous #10

just spotted this. but when i retract the UI element, it stops the things on screen from updating.
would be great if it still updated.

here is a gif to show

Zui.hx:83: characters 9-16 : Type not found : kha.Key

Just pulled the repo this morning and received the aforementioned error. There were also issues with adding the library to a Kha project via cloning to Libraries as well as via haxelib (project.addLibrary('zui') is currently in my khafile.js); I am not sure if these issues are related. I am new to Haxe, Kha and ZUI in general so if I made a rookie mistake please let me know!

Is it possible to do emoji or glyphs?

• create so much ui that you get a scrollable window
• create a zui.combo element
• click the combo to open it
• scroll via mousewheel
• the combo scrolls up correctly, but it's content stays in place where it was opened

Trying to use float field inputs:

var x:Float = ui.floatInput(Id.handle({ value: 10.0 }), "x");

You get an empty input box, and the value of 10.0 isn't applied.

But if you use:

var x:Float = ui.floatInput(Id.handle({ text: "10.0" }), "x");

Then it works as expected, though it is counter-intuitive to give a floating point value as text instead of its actual value.

As originally discussed here:
http://forum.kode.tech/topic/122/how-to-draw-unicode-characters

I've encountered an issue whereby it seems that the font sizes passed into the Zui constructor somehow prevent those particular font sizes from rendering unicode glyphs via g2.drawString calls.

I've put together a small example program here:
https://github.com/thoughton/kha-InputThing

In particular, see this code on line 20 of Project.hx in that example:

// Issue:
//  The font sizes passed to Zui here cause the unicode glyphs to fail to render when g.drawString is called for text of either of these sizes.
//  Changing these sizes changes the size of unicode glyphs that fail to draw.
//  Commenting out or removing this Zui instatiation will re-enable unicode glyph rendering at all font sizes. 
m_zui = new Zui(Assets.fonts.NDS12, 24, 12, 0, 1.0, 1.0);

Here's an image of the output using the above snippet of code:

It would be nice to be able to have some labels bolded or in different fonts (for example, headings).

I want the UI not only to provide a mechanism to change values but also to show that values even when it is modified from outside the UI

Currently I set

handle.value = <newValues>

and I need to do

windowHandle.redraws = 2;

maybe setting valuye on a handle should set redraws to 2 to itself and all its ancestors

Hi @luboslenco ,

Thanks a lot for Iron, Armory and Zui.
I'm learning Haxe thanks to your projects.

I wanted to know if there is a prefered way of contributing to Zui ? Do you think it should stay as simple and streamlined as it is or are you open to improvements?

For now, I rely on Static Extensions to avoid touching to Zui source and this is what I added:

• Box Selection
• Clicking outside a node unselect it
• Autolayout
  ...

But for instance I wanted to change the hardcoded label color for the nodes, I think this is not possible without touching Zui directly. As I did not wrap my head around Iron (everything is a Trait ?) I'm not sure of your approach for ArmoryPaint, but it seems you added all of that in arm ?

aye... it would be cool if you could drag the nest of ui elements around

just as a additional thing. it would be cool if you could have a slider/toggle/radio etc, start at a certain value. so just before setting say the minimum value or after the max value, have a startAt variable. so when you set it at say 200, it opens all the time at 200, also sending that value out right away

I'm currently formatting my document like the following:

class Foo {
    public var ui:Zui;
    public var window_a = new Handle();
    public var window_b = new Handle();
    //....
    public function render(graphics) {
        this.window_a.redraws = 2;
        this.window_b.redraws = 2;        
    }
}

If I don't set redraw outside of the render loop it doesn't update frequently enough (eg in the class constructor). Is there a "correct way" to do this?

If not, I could add an alwaysUpdate bool to Handle and just have it reset draws to 2.

As title says.

Happens in Zui.hx line 190:

	function bakeElements() {
		if (checkSelectImage != null) {
			checkSelectImage.unload();
		}
		checkSelectImage = kha.Image.createRenderTarget(Std.int(CHECK_SELECT_SIZE()), Std.int(CHECK_SELECT_SIZE()), null, NoDepthAndStencil, 1, ops.khaWindowId);
		var g = checkSelectImage.g2;
		g.begin(true, 0x00000000); //<--------here
....
	}

While the Id.handle() function call is nice, it would be better if default values, or the state of a series of elements returned to "defaults" via a call such as ui.clearCache().

To give an example where this would be useful, I am trying to put together a "PropertyBox" for multiple items on the game scene.

class PropertyBox
{

	static var lastSelected:Int;

	public static function show(gui:Zui, scene:Scene)
	{
		var command = scene.commands[scene.selectedIndex];

		if (gui.panel(Id.handle(), "Properties"))
		{
			if (command.type == DRAW_LINE)
			{
				var defaultX, defaultY, defaultX2, defaultY2, defaultR, defaultG, defaultB, defaultA, defaultStrength;
				if (lastSelected != scene.selectedIndex)
				{
					defaultX = { text: "0" };
					defaultY = { text: "0" };
					defaultX2 = { text: "50" };
					defaultY2 = { text: "50" };
					defaultStrength = { text: "1" };
					defaultR = { value: 0.0 };
					defaultG = { value: 0.0 };
					defaultB = { value: 0.0 };
					defaultA = { value: 1.0 };
				}

				gui.text("First Position");
				gui.row([0.5, 0.5]);
				var x = Std.parseInt(gui.textInput(Id.handle(defaultX), "X"));
				command.x = x != null ? x : 0;
				var y = Std.parseInt(gui.textInput(Id.handle(defaultY), "Y"));
				command.y = y != null ? y : 0;

				gui.text("Second Position");
				gui.row([0.5, 0.5]);
				var x2 = Std.parseInt(gui.textInput(Id.handle(defaultX2), "X2"));
				command.x2 = x2 != null ? x2 : 50;
				var y2 = Std.parseInt(gui.textInput(Id.handle(defaultY2), "Y2"));
				command.y2 = y2 != null ? y2 : 50;

				var strength = Std.parseFloat(gui.textInput(Id.handle(defaultStrength), "Line Strength"));
				command.lineStrength = strength != null ? strength : 1;

				gui.separator();
				gui.text("Line Color");
				var red = gui.slider(Id.handle(defaultR), "R", 0, 1);
				var green = gui.slider(Id.handle(defaultG), "G", 0, 1);
				var blue = gui.slider(Id.handle(defaultB), "B", 0, 1);
				var alpha = gui.slider(Id.handle(defaultA), "A", 0, 1);
				command.color = Color.fromFloats(red, green, blue, alpha);
			}
		}

		lastSelected = scene.selectedIndex;
	}

}

Now, I tried using the Id.handle call to set defaults, but realised it's macro based and won't work at runtime. This means that if an object is added to the scene for rendering, and the PropertyBox remains at the values it was since the previously added object, the new object then takes the properties of the previous object. In a way, the newly added object shares the properties of the previous object, as long as that object is the same type.

Now, I could operate on every draw command as a separate PropertyBox, and only display the PropertyBox for the currently selected element as I iterate through each one, but that sounds like something that would slow the program down.

Ideally, what I would like to do is, within the call if (lastSelected != scene.selectedIndex) is do gui.clearCache() which would remove all states that had not been previously changed since the last frame, and be able to set default values at runtime so that the next selected object does not end up "sharing" the same properties as the previously selected object.

Is this something that can be implemented?

When you add more height to canvas button than default height, hovering over this new height are make button unclickable

Try canvas example for reproducing bug

Edit: setting ELEMENT_H to element's height works, but setting BUTTON_H do not work.

Above happen only on krom, works fine on html5
Kha and krom taken from Kode

Edit: Happen on native too (MacOS)

Is there a reason you say ZUI is mainly useful for debugging? Performance reasons? I am planning on making a desktop application that will require windows being drawn. I don't see any reason ZUI wouldn't work for that purpose. I'd say give yourself more credit unless I'm missing something!

i know i have talked about this regarding moving objects that were located in update. but on objects, which are static, they are affected by the node window and the cursor moving away from it.

its really weird. i know its an odd setting with my button used to move the block. but strange that it moves without anything. i know it is about stopping it another way. but something not even updating is being fired off.
here is a gif to show. also shows the code and cursor not even touching the button, but the block still moves, once it is away from the node window

I feel like this is a bug in how the Id macro works, though I don't understand the code enough to fix it.

Here's a video of the bug in my game: https://video.twimg.com/tweet_video/DAgsMXhXoAA_ugk.mp4
And the code the produces the bug: https://pbs.twimg.com/media/DAgsaCYXsAE0q5r.jpg:large

Thanks!

If having two or more instances of zui, first instance of zui sets isScrolling to false in onMouseUp handler and other instances of zui fail to set windowStates and sliderStates 'scrolling' field to false.

= should be : I believee

Hi, was going through the examples again, do you support multiline TextInput/text areas?

If not is there a roadmap for when it would be added?

It looks like img ui supports it: https://github.com/ocornut/imgui/search?utf8=%E2%9C%93&q=multiline&type=

If I have several input fields in a row (or however), it would be nice to be able to tab between them (for example if I have 3 float fields in a row to denote a 3D position, and I want to type the coords in, it would be nice to type 0.0 <tab> 1.5 <tab> -0.3 instead of clicking on each field individually and then typing)

I need to update something if the value change that I would not like to update every frame if possible.

I could store the previous value I guess but if zui could tell me if the value was updated that frame it would be great. If there is a current method (if even if it access private member I am all ears)

this is something that i have recently tried to fix.
but im using backbuffer/framebuffer or scaling things. but dont want the ui to be affected. tried a few other methods. but the ui still seems to be moving/scaling.

how can the ui be seperate completely so does not scale at all, but stays in the top left corner [or wherever you choose to place it?

just as the title says ;)

hello zui will need changes due to the addition of KeyCode & kha.Key not existing now ;)

tried, but ran into a head scratch moments

when trying to re-draw zui's elements that isn't a window element than it would not re-draw
eg:

buttonHandle.redraws = 2;//Does nothing
//But
windowHandleThatContainAboveButton.redraws = 2;//Re-draws now

Is it supposed to work like this?

While I type text in a zui text input, the keys are still propagated in kha resulting in things hapenning while I type.

I guess this needs some support from kha to stop propagation (a la javascript?)

sliders are very useful, but it only allows getting of values. It does not allow values to be set from some other process (such as a randomiser).

a quick fix would be to expose the sliderState field, and that will allow programs to set the value directly, and the UI would update correctly as well. The other *state fields could also be exposed in a similar fashion to allow for finer grain control of the UI states.

A la Unity's BeginChangeCheck:

EditorGUI.BeginChangeCheck ();

// Block of code with controls
// that may set GUI.changed to true.

if (EditorGUI.EndChangeCheck ()) {
    // Code to execute if GUI.changed
    // was set to true inside the block of code above.
}

Not absolutely necessary as I can get around it by using temporary variables for now, and it might add a lot of code headache, but it would certainly be handy for me.