New UI Manager System

All things HTML5 or text based engines, or really any web based engines.
Post Reply
User avatar
coolbloke1324
Posts: 181
Joined: Mon Jan 23, 2012 5:20 pm

New UI Manager System

Post by coolbloke1324 »

Hi folks,

The dev branch of the premium version has just been updated to version 1.2.3 and includes a new UI manager.

The new UI system (UI manager) allows new UI elements (IgeUiElement instances) to be created, styled and interacted with in a similar way to the HTML DOM except it is all happening inside the canvas element with NO DOM interaction at all.

For instance, you can define a style using ige.ui.style():

Code: Select all

ige.ui.style('.div', {
	'backgroundColor': '#000000',
	'borderColor': '#ffffff',
	'borderWidth': 1,
	'borderRadius': 5,
	'width': 300,
	'height': 24,
	'left': '10%',
	'top': '10%',
	'bottom': '10%',
	'right': '10%'
});
You can then create a new UI element that will use this style via:

Code: Select all

var div1 = new IgeUiElement()
	.id('div1')
	.styleClass('div');
The call to styleClass() passing the style 'div' uses the style class defined above with the call to ige.ui.style(). When defining a style *class* just like in CSS you specify a period in front of the class name e.g. ".div" and the omit the period when assigning the class to a ui element.

You can also specify style states e.g.:

Code: Select all

ige.ui.style('.div:hover', {
	'borderColor': '#00ff00'
});
Then when your element is hovered, the border will change colour automatically.

You can also specify styling via an id to target individual elements using a #:

Code: Select all

ige.ui.style('#div1:focus', {
	'borderColor': '#ffff00'
});
This will change the border colour of the element with the id "div1" when it has focus.

Observant users will also note that you can now use percentages in the top, right, left and bottom style values as well as calling those directly on IgeUiEntity instances (which IgeUiElement extends) e.g.:

Code: Select all

var uiEntity = new IgeUiEntity()
    .left('10%')
    .right('10%');
That will cause the entity to position to left 10% of the parent entity and stretch it's width to 10% from the right of the parent. The same works for bottom and top values.

If you set both a left and right value then width is ignored. Both bottom and top means height is ignored.

You can turn off any value by passing null e.g.:

Code: Select all

var uiEntity = new IgeUiEntity()
    .left('10%')
    .right('10%');

// Now switch off the right value
uiEntity.right(null);
The 5.1-ui example has been updated to show the new IgeUiTextBox working using the new UI system as well.

Further updates are on their way to allow elements to "flow" like the HTML DOM so they will effectively auto-position themselves inside a parent based on the dimensions of the elements and their parent element.

All of this is available in the dev branch on the premium repo.

P.S. the IgeUiEntity class has been left mostly alone to provide non-breaking compatibility with existing code.

Please give it a go and let me know if you see any issues arise from the code or changes to IgeUiEntity.

Thanks!
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: New UI Manager System

Post by Xaleph »

Looks cool, makes for a way better UI managing class then i`ve seen before. Just a quick question though, are the UI elements redrawn every tick? All those parameters require a lot of draw calls, seems kind of heavy?
User avatar
coolbloke1324
Posts: 181
Joined: Mon Jan 23, 2012 5:20 pm

Re: New UI Manager System

Post by coolbloke1324 »

Xaleph wrote:Looks cool, makes for a way better UI managing class then i`ve seen before. Just a quick question though, are the UI elements redrawn every tick? All those parameters require a lot of draw calls, seems kind of heavy?
Hey ya,

While techinically they are all drawn each tick, you can enable caching on heavy ones which will stop them being composited every tick and instead drawn from cache.

All entities have a cache mode which can be switched on so because the UI elements are derivatives of IgeEntity they have it too :)

That said, the draw calls do not appear to take up much in the way of CPU cycles so far!
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

±

Post by Xaleph »

That`s.. amazing! I`ve been working on an canvas engine as well ( last year, long time ago ) and when I created the UI elements, I had to cache them all because of the gigantic overhead ( and overload) of the drawcalls. In certain cases, my drawcalls went from ~30 (avg) up to ~500 (!!!) when dealing with different panes and all their seperate parameters, like borders, border radii, colors et cetera. Even when cached, it was more logical to just start creating images for the UI rather then drawing them up in the canvas elements. Gotta hand it to you, nice job!
User avatar
coolbloke1324
Posts: 181
Joined: Mon Jan 23, 2012 5:20 pm

Re: ±

Post by coolbloke1324 »

Xaleph wrote:That`s.. amazing! I`ve been working on an canvas engine as well ( last year, long time ago ) and when I created the UI elements, I had to cache them all because of the gigantic overhead ( and overload) of the drawcalls. In certain cases, my drawcalls went from ~30 (avg) up to ~500 (!!!) when dealing with different panes and all their seperate parameters, like borders, border radii, colors et cetera. Even when cached, it was more logical to just start creating images for the UI rather then drawing them up in the canvas elements. Gotta hand it to you, nice job!
Cheers mate :)
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
Post Reply

Return to “HTML5/Web Engines”