PowerUI - Powerful HTML/CSS UI Framework

That's a shader draw order thing you're looking at, and is caused by them having alpha - the black colour your seeing is the camera background. Which version of PowerUI are you using, and similarly which version of the SPA creator are you using? If you check out the sandbox (http://powerui.kulestar.com/example, 'Sprite Animations' button) which is using exactly the same SPA files, you might see something different if the version you've got is older.

If a sprite frame is a PNG (this is the default), it doesn't need an alpha frame at all as PNG holds alpha anyway. 'hasAlphaFrame' is only true if you use compressed SPA's and your input frames have alpha; this is a rare situation, but still that if shouldn't be empty so I'll see what's happened there

I'm also on live chat at the moment if there's anything you'd like to ask me directly.

 

Latest version of everything...just started using it last week.

I'll PM you the entire section of code that is blank on the SPA creator.

There's a way to change the shader on PowerUI? Or should I change the camera clear flags?

 

If you take a look at the actual meshes in your scene view, you should see that their transparent - What you're seeing is really unusual though; does it also occur if you take a look at the one in the sandbox?

As for the creator it looks like the version on the site is a little out of date and is missing some of the JPEG compression in there thus the blank if so I'll update that asap

 

PowerUI 1.5.18 was accepted by Unity onto the store just a few minutes ago so you could give the latest version a try and see if that is any different

 

-Is PowerUI supposed to support comments?
http://www.w3schools.com/tags/tag_comment.asp
So far comments cause a crash...

-Any chance of supporting this color tag?

 

Yep PowerUI does support comments in your html, but their pretty restricted on what can go inside them at the moment - just plain text works well; you may get unbalanced tag errors if they contain html in there otherwise (this will be changing in the future as comments make their way downward into the parser level)

I guess by the colour tag you mean the rgb(..) function? That's supported too in it's full form as rgba(r,g,b[,a]) where those values are from 0->1 e.g. red is color:rgba(1,0,0) or with optional alpha color:rgba(1,0,0,1)

 

This causes a crash on the comment. It is a normal comment like this: <!--comment-->

HTML:

<div id='scrollingBox' style='padding:35px;background:#fff;border:3px solid #000;width:100%;height:80%;color:#000000;overflow-y:scroll;overflow-x:hidden;' onmousedown='DragScroller.StartScroll' onmousemove='DragScroller.ScrollNow'>

	<center>
		<br><br><br><span style='font-size:20px;'><b>text</b></span><br><br><br>
	</center>

	<div><img src="picture.jpg" /></div><div><br /></div><div>text</div><div>text</div><!--comment--><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div><br /></div><div>text</div><div>text</div><div><br /></div><div>text</div>
</div>
		
<div style='position:fixed;width:100%;height:50px;bottom:0px;left:0px;background:#FFFFFF'>
<img src='picture.jpg' height='45px' width='124'/>
</div>

Thanks, this color tag works:

HTML:

<span style="color: rgba(0, 176, 240,1)">some text</span>

 

Ah you need a space after the <!-- for it to identify it correctly; This will be changing in the future though where it will be much more relaxed about what can go inside the comments

 

Noted. Thanks!

 

A couple of feature requests:

-Make a radio button look like a radio button instead of a checkbox.
-Support for mouse wheel scrolling in the scrolling example.
-Add inertial scrolling to the scrolling example.
-Pressing Enter after writing in a password text field adds an "enter" character to the password text field. Send a "form submit" event instead.

By the way, if anyone else likes GUI-only Unity apps, please vote for some features we need:
http://feedback.unity3d.com/suggestions/better-support-for-guionly-appl
http://feedback.unity3d.com/suggestions/realtime-input-framerate-indepe

 

Hey everybody!

PowerUI now has a free demo version which you can grab on the Asset Store. It has all the great features of the latest version of PowerUI and has already had a lot of attention, so do check it out!

As for the above feature requests we ended up chatting about them a little on live chat and they are all in consideration - thanks Elecman!

 

Any change of drawing lines with this?
http://www.w3schools.com/tags/tag_hr.asp

 

The best way of drawing a line would be using a border on a div - for example something like this:

Code (csharp):

1.  
2.  
3. <div style='border:solid #339900;border-bottom:1px;'></div>
4.  
5.  

Will produce a single pixel green line

Edit: The original structure of a line with the hr tag is obsolete as of html5, so the above approach is the recommended method to use.

 

Thanks

How about this?

HTML:

height: calc(100% - 60px);

 

No problem! Calc itself is a new method (new with html5) and hasn't been supported by PowerUI just yet; previously (and still very much today) in web browsers this was done with scripting and can also be done with padding/margins depending on the kind of effect you're after E.g. Something like this would do a similar job in straight html:

Code (csharp):

1.  
2.  
3. <div style='padding-bottom:60px;height:100%;'>
4.  
5. <div style='height:100%;background:#339900;'>This element is 100%-60px high</div>
6.  
7. </div>
8.  

Edit: Padding-bottom must go before height otherwise the padding won't be applied. Coincidentally this exposed what was causing the padding order problem (as different css properties should be order agnostic), so this will be fixed in the next release

It's of course a lot more html than the css calc function, so I'll certainly see if it can be supported for you guys as it would certainly be useful

 

Thanks, it works

One other thing. I noticed that scroll bars can overlay pictures and text. Perhaps the "div width" should take the size of the scroll bar into account?

 

I believe there are cases where it does, but that has certainly required a revisit for a little while - that's a left over from a time long ago when PowerUI didn't scroll, and in order to preserve some backwards compatibility it got a little limited

But as per your feature requests, as of the latest version:

-> Fixed an issue with padding; it no longer depends on order.
-> <!-- Comments --> moved to parser level. As a result their faster, can be used from localisation files and are more flexible.
-> Added rgb(..) alias alongside existing rgba(..) for colours.
-> Characters like enter no longer end up in input boxes.*

* Your original request also mentioned "Send a "form submit" event instead." here - this ones currently underway too

Edit: The above has now also been implemented too

 

Good news

If you can implement a scroll event when the user clicks on the empty scroll bar space (like a browser and win/mac file explorer does), that would be awesome.

 

Sure thing! I'll add that as a feature request for you - we'll be revisiting scrolling shortly so that will certainly be considered as well. The img tag also now retains aspect by default too!

 

Awesome. Also, I noticed that borders are not drawn on the right side of the screen...

 

That one's correct behaviour; width defines the space contained within your border, so a width of 100% (the default for some elements, such as a div) pushes that right hand side out of view

Edit: This one is actually a little subject to browsers; IE puts the border inside (this is known as the IE "box model bug" and resulted in the "compatibility mode" option in modern day IE), Firefox puts it outside (so PowerUI in this case acts like Firefox).

 

From looking further into the above, W3C added a 'box-sizing' CSS property to allow browsers like Firefox to render like IE does, with the border contained within your width. I believe this property could be really handy, so I'd be happy to add support for it

 

Anything to make it look good B-)

By the way, I just loaded my project on an Asus Transformer Prime TF201 and unfortunately the new pixel-perfect feature which looks great in the Editor looks so-so on my Android...

Also, all the text just got garbled up on the Android, converted into small black blocks. It happened when I re-loaded some html code. I have never seen that in the Editor :-(

 

That's really interesting as you're not actually the first to report this happening - it seems there's been a bit of a trade off in the latest version, so we have been looking into that further. A quick fix is to relocate the UI camera, e.g. UI.CameraTransform.position.z+=0.1f; or UI.CameraTransform.position.z-=0.1f; right after UI.Start(); and see how that goes

 

Will try. It should be this by the way, as you can't modify individual position variables:

Code (csharp):

1.  
2. UI.CameraTransform.position = new Vector3(0, 0, 0.1f);
3.  

What is your recommended method to deal with different screen resolutions? Small text on an old iPhone might look great, but on a tablet you need a magnifying glass. In the documentation I something like

Code (csharp):

1. float PowerUI.ResolutionInfo.Scale =1f

but I haven't got that to work yet.

Edit:
-I tried the position transform but it makes no difference.

-This is what the text and buttons look like after I re-load the html. Fortunately it is reproducible:

 

The position change should be a delta thing as it starts off at -60 by default so you'd need to pull it and put it back (sorry if that was unclear! The above was a shorthand). Something like this:

Code (csharp):

1.  
2. Vector3 position=UI.CameraTransform.position;
3. position.z+=0.1f;
4. UI.CameraTransform.position=position;
5.  

Wowie that's quite something, and I suppose it's only doing it on Android and not in the editor? It might actually be related to those files that were sent as I've not seen/ heard of the released version doing anything like that.

As for the resolution thing, there's a getting started guide for it which you might find useful Essentially, UI.Resolution is your friend (which is one of those ResolutionInfo objects). Check out the guide here - let me know if there's anything that doesn't make sense

 

Using the new position code still doesn't have an effect. Even large text sometimes has "bites" out of it. Some gremlins in there

With the original PowerUI code (loaded from the asset store), the pixel perfect text still looks so-so.

Also, with the original PowerUI code, I saw some blocked text like in the example below. The blocks are supposed to read "Answer:". This is with a 1.5f scale, and in the Editor, TF201, and HTC one:



I had seen this blocked effect on Android as well once where all the text looked like that but unfortunately I wasn't able to reproduce that.

Also, with the original PowerUI code, the text and buttons still are garbled up if I re-load the html as in the screenshot of my previous post. This is on the TF201 but not the HTC one.

Thanks for the resolution guide. I forgot about that one . However, at large scale, the scrollbar doesn't work correctly. It doesn't scroll all the way to the top and at the bottom range, the bar totally overflows to the bottom, out of its intended range. Also the bar jumps when scrolled at the end of its range.

 

Hmm are you using the font for anything else? The blockey text has been known to occur if the same font is being used in e.g. some other UI framework, as some significant performance gains that PowerUI makes get thrown off.

As for resolution vs. the scrollbar I have a feeling what might be causing that; I'm heading off for the night shortly so I'll check out both of these tommorrow asap for you

 

I am only using PowerUI in my project, no other system which uses fonts.

Feature request for the scale function: use only one large picture and scale that down accordingly instead of using a high and low res version of the same picture.

 

Hey Elecman!

That's really interesting then; is your font size set to 16 in the font itself? If you click on the font in your project then check out it's details in the inspector, you should see a 'font size' property which must also be 16. If it's not, then really bizarre things may happen there too. Otherwise I'm really not too sure what else that could be as a problem like that can come from just about anywhere; due to it being right at the very bottom levels of PowerUI's rendering, it can come from any of the upper levels. If you wouldn't mind sending a repeating project (even if the issue still is unreliable/ doesn't repeat each time) then that would be wonderfully useful

As for the feature request, I do believe that's possible already if you omit the first property and just provide a scale, e.g. new ResolutionInfo(2f). Do be aware that with any scaled images it will likely go pixelated, so pre-scaling your imagery may be prettier overall.

Edit: Just did a sanity check and yep the above is true with the latest img tag

 

The blocked text has a missing Font Texture. If I manually select the Vera Bold texture in the inspector, it suddenly works. The size is set to 20px in code. There is no 'font size' property in the inspector on any of the Game Objects though. I'll send you the project.

Edit:
By the way, I had something really strange happen. The dynamic textures stopped working. Viewing the Inspector revealed a missing texture on every dynamic texture. Deleting all the PowerUI files and re-importing it via the asset store had no effect. I had to export my entire project (minus the PowerUI files), make a new project, and then import everything again. Then re-import PowerUI from the asset store and it all worked again. Edit4: I traced down what was causing it. Dynamic textures don't work in the Editor when Android is selected as the build platform and subsequently don't work on Android itself either :'(

Edit2:
Some more feature requests:
-Out of the box pinch-to-zoom a-la mobile browser.
-Better support for scaling buttons, checkboxes, scroll bars, etc using

Code (csharp):

1. UI.Resolution=new ResolutionInfo(2f);

These items can be scaled using that function but you will have to provide px values beforehand. This requires second guessing the default size, especially for buttons where the text needs to fit in the button.
-Dynamic textures are not affected by ResolutionInfo. It would be awesome if it would.
-Ability to set bilinear filtering for images but point filtering for text.
-There is a delay before the "click style" is visible when a button is pressed. The result is that the click animation is not visible with a fast mouse click, only a slow one.
-My radio-star png file doesn't scale with ResolutionInfo, even if I set the width and height in px. If it would somehow respond to scaling, that would be great.

Edit3:
-I just noticed that on the HTC One, a texture which has nothing to do with the dynamic texture I am using ended up on the dynamic texture. All the text is blocky as well and unreadable. Some weird texture trashing going on for the button texture as well. This happens when ResolutionInfo is set to 3f.

Edit5:
If the user changes the screen resolution (or auto rotation event), I set the text size to a different scale using ResolutionInfo. In order to re-draw the text using the new scale, I call this:

Code (csharp):

1.  
2. string html = UI.document.body.innerHTML;
3. UI.document.body.innerHTML = html;
4.  

Isn't there a more elegant way of doing that?

 

I made a simple function to fetch the correct picture size if ResolutionInfo is used.

Usage:
-Lets say you have a SVG picture called "star". Convert it to PNG with a bunch of different resolutions, for example 10x10, 15x15, 20x20, etc.
-The pictures should be called star-1.png, star-2.png, star-3.png, etc.
-Set the following variables in GetPictureID(): baseID, baseRes, lowestID, highestID, and step. See the comments for some details.

Edit: code fixed

Code (csharp):

1.  
2. string pictureID = GetPictureID(scale);
3. UI.Resolution = new ResolutionInfo(pictureID, scale);
4.  
5. string GetPictureID(float scale){
6.  
7.     //The ID of the picture which should be used if the scale is 1.
8.     float baseID = 4;
9.  
10.     //The x resolution of the base picture (picture to be used if scale is 1).
11.     float baseRes = 25;
12.  
13.     //The lowest and highest picture ID available.
14.     int lowestID = 1;
15.     int highestID = 19;
16.  
17.     //The x pixel difference between each picture ID. For example, if
18.     //the pictures are resolution 10x10, 15x15, 20x20, etc, then the step should be 5.
19.     float step = 5;
20.  
21.     //Use a linear function to get the correct scaled picture
22.     int ID = Mathf.RoundToInt(((scale * baseRes) / step) + (baseID - (baseRes / step)));
23.  
24.     //clamp
25.     if(ID > highestID){
26.  
27.         ID = highestID;
28.     }
29.     if(ID < lowestID){
30.  
31.         ID = lowestID;
32.     }
33.  
34.     return ID.ToString();
35. }
36.  

Note:
This will only work if all pictures have the same variables as set in GetPictureID().

 

Heya! That's really nice - does it work in all cases though? As far as I can tell it would also require the pixel size of the 'base' image too as it's converting scale to pixels.

E.g. star-4 could be 30px wide, star-5 35px wide etc:

-> Scale of 1 results in an ID of 4, this is correct.
-> Scale of 2 results in an ID of 9; This would display at 60px (twice as big as the image at scale 1), but image #9 is 30+((9-4)*5) = 55px wide, where as ID 10 is actually 60px wide.


An alternative approach might be to go up in terms of percentages (e.g. star-5 is 20% larger than star-4). From this we can deduce that there are 5 images from scale 1 to scale 2, giving possibly a simpler model to run from. ID then is ((Scale-1) / 0.2) + BaseID; very similar but essentially the difference between the images is defined as a percentage

 

You were right, it actually didn't work in all cases. I have fixed it now.

By the way, I have made some more feature requests here:
http://powerui.kulestar.com/forum/category/24

 

Great, thanks a lot for the submission!

As for the other forum I've gone over your feature requests and their all great (Not sure what's happened to the 'Code formatting on this forum' one, but fortunately the title is self explanatory!). Sorry for the delay there - most support requests come in through live chat as you've likely noticed but I'll reply to those for you right now

 

Thanks. Yeah, some gremlins got hold of my code formatting post. I can't edit it either. But indeed, it's about the

Code (csharp):

1.  tag.

 

You've got some replies hehe - as for the

Code (csharp):

1.  tag we did originally have a code editor/viewer available to the PowerUI site so I'll do some digging and see if I can apply it to the forums as that would make things much tidier.

 

hey mate, just saw PowerUI in the asset store (its in the big featured spot). I'm very interested!

Question: can I do fluid / percentage based layouts and/or media query style stuff? Or is it necessary to use the UI.Resolution thingy..

another question. I'm still studying up on the unity input manager, and adding gamepad support and stuff, and I just stumbled across PowerUI - so excuse my noobness. But, would it be possible to write some code that maps keyboard / mouse, touch events, and gamepads to interact with powerUI?

 

Heya Phil!

Yep you sure can do percentage based UI's; for example <img src='..' style='width:50%;'> or <img src='..' width=50%> kind of thing would create an image 50% the width of it's parent, which could be the screen depending on where it is in your html. Percentage based font sizes and positions etc (left:10%) is all supported The resolution thingie is there as PowerUI creates pixel perfect UI's, so as a result on super high resolution screens a pixel perfect UI needs to be scaled up in some way.

As for input, yes absolutely; PowerUI has a DOM (like a browser; it's basically a way of interacting with the stuff on screen from code) so you can call the standard events like mousedown/mouseup etc for any particular element in totally custom ways if you wish. PowerUI also has an automatic (and totally overrideable) 'focus graph' too designed for consoles. This is where pressing arrow keys for example will change which element is currently focused. Using e.g. Focus.MoveUp(); will hop the focus to the nearest element above the one currently focused

Hopefully that makes sense! Please let us know if there's anything else we can help out with (even if it is nooby!)

 

OK, cool - so percentage based fluid layout is possible. That's great and gets me a good portion of the way there.

What about media queries? Can powerui do "responsive" layout somehow, based on screen size or other conditionals? Like a CSS max-width media query?

It sounds like its possible one way or another, just curious if I can do it all within the CSS or if I'll have to write some conditional code based on the screen size to change CSS.

I'm going to buy this tomorrow and study up, apologize for the blind questions - I'm just excited and curious xD

 

Hehe no problem at all! Excited questions are the best to read

Media queries are unfortunately not supported though (so it would be some conditional code, or use other CSS like display:inline-block), but PowerUI does support e.g. max-width, max-height etc which might be useful. As Unity is very rarely resized anyway (especially on mobiles of course) I'd recommend separating the UI's as that makes it lots simpler and more performant, and just leave text content down the the localization system

Edit: calc() is partially supported in the unreleased version we've got here so this may be of use in the near future too!

 

I had a couple of simple questions I didn't see a quick answer for. Can I make it 'pass through' that is, display some of the elements semi-transparently, but pass any clicks/taps through to the underlying Unity model for the some elements, but not for others? That is, a translucent background image that's pass through with buttons that are clickable. Also, When you say one draw call, if I have elements scattered around the screen, does that still apply?

 

Heya Ralph! Yes that's certainly possible; PowerUI supports the opacity: CSS property and any semi-transparent elements are still clickable. Any elements actually behind the semi-transparent one would also receive a click/tap unless the semi-transparent interface prevents that click/tap from 'bubbling' to them which can be easily done from the mousedown/up events, so it's quite simple to direct too

Yes one draw call applies in most cases; it only doesn't apply when you're using videos or animations which have an additional draw call each, or if you disable PowerUI's batching. I hope that helps!

 

I bought it but.... when i import it... it comes many errors..

 

Okay..... i think it fight with the Ultimative Fight Engine

Guys.... every Programmer need a prefix.... so that something like this never happend!!!

UFE is the Prefix for the Fight Engine...
UFE_CharacterInfo.cs

and for your Product is it PUI_CharacterInfo.cs

If every Programmer use this... than there where never Problems with scripts!

EDIT:

Now i must change it Manual... and after every Update.... i hate this!!!

Make your Prefix "PUI_" on every script... and then it is all good...please...


EDIT:

I have no Idea.... ....

UFE create a Script via Script named CharacterInfo.. but i don't find the Original Script CharacterInfo...from PowerUI

EDIT Again xD

Okay... i know it now ... Your CharacterInfo is the Unity own..


So i set "UnityEngine." before your CharacterInfo and now it works...

 

Hey Neo!

'CharacterInfo' is a Unity3D class; it's not one of our own so we unfortunately can't rename it.

PowerUI itself is contained within a namespace called PowerUI (This is equivelent to a prefix) - this prevents it colliding with anything else. The problem you're seeing is Fight Engine has created a class with the same name as a Unity class, and PowerUI can't tell the difference - it's expecting to use the Unity3D CharacterInfo class, but the compiler is confusing it with Fight Engines - you'd have to ask them about this one rather than us unfortunately.

Edit: Yep prefixing CharacterInfo with UnityEngine works - it's a bit awkward (ideally there shouldn't be two classes with the same name at all) but that's unfortunately out of our hands - glad you got it sorted though!

 

I created an Editor script Which sets the size of the Game window to match the physical screen of a mobile device. This way you can test for example if the size of text is not too small on HD devices. Very handy for use with PowerUI.

http://wiki.unity3d.com/index.php/MobileSimulator

 

Heya! Fabulous, that is really handy - great work! I'm sure much of the Unity community would be grateful of your efforts there

 

You're welcome

 

Hello, I would like to make a small contribution.

With great help from Luke over the chat I have created a very simple slider (no scrollbar necessary).
The slider is basically a div with a background that contains a single div (the knob) that gets moved around.

[EDIT] I should note, this slider requires the newer version of PowerUI (small fix made it possible).

I will post the solution here in the most straight forward way possible, you can separate the css and change it around as needed.

First off, I am using a very simple pair of images for the background and knob.
They need to be placed on the path Resources/ExtraHtml/images/ (or just change the path on the html).



The html looks like this:

<div id="slider" style="width:80%; height:20px; left:10%; background-image:ExtraHtml/images/sliderBack.png;">
<div id="knob" style="width:20px; height:20px; left:50%; background-image:ExtraHtml/images/sliderKnob.png;"></div>
</div>


On your class, you need to add the following code when you create the UI:

sideUI.document.getElementById("slider").OnMouseDown += SliderDown;
sideUI.document.getElementById("slider").OnMouseUp += SliderUp;
sideUI.document.getElementById("slider").OnMouseMove += SliderChange;


Now you have 3 functions registered, one for mouse up, one for mouse down and one for the mouse drag.
This 3 functions are as follows:

//Focuses the slider back and places the knob
//Focus in case the user drags out of the slider bounds, places in case he just clicks without dragging
public void SliderDown(UIEvent myEvent)
{
myEvent.target.Focus();
PlaceSliderKnob(myEvent);
}

//Upon a drag just place the knob correctly
public void SliderChange(UIEvent myEvent)
{
PlaceSliderKnob(myEvent);
}

//Upon mouse up unfocus.
public void SliderUp(UIEvent myEvent)
{
if (Focus.Current != null)
Focus.Current.Unfocus();
}

//Place the knob using percentages on the left parameter (goes from 0% to 100%)
//Adapt this to be top or bottom for a vertical slider (that increases going up or down).
private void PlaceSliderKnob(UIEvent myEvent)
{
float percentage = (float)(myEvent.clientX - Focus.Current.style.Computed.OffsetLeft)/(float)Focus.Current.style.Computed.PixelWidth;
if (percentage > 1f)
percentage = 1f;
if (percentage < 0f)
percentage = 0f;

//The adapted percentage just pulls the knob half it's width to the left, making it center itself on the actual percentage
float adaptedPercentage = percentage - Focus.Current.firstChild.style.Computed.PixelWidth*0.5f/Focus.Current.style.Computed.PixelWidth;
adaptedPercentage *= 100;
Focus.Current.firstChild.style.left = ""+(int)adaptedPercentage+"%";

//TODO put your actual code to handle slider change
print ("Slider value changed to " + percentage);
}


That should move the knob around (even if the mouse is dragged bellow/above the slider).
The code also prints the slider value (from 0 to 1, including both ends).

Again, thanks Luke for the help. Hope it is useful!