PowerUI - Powerful HTML/CSS UI Framework

Is it possible to get the state of a checkbox without submitting a form?

 

Hey!

Yep there's a few ways - the simplest is to check value being 1:

Code (csharp):

1.  
2. if(yourCheckbox["value"]=="1"){
3.    // It's checked!
4. }
5.  

 

Sorry, I meant a radio button. They look identical in PowerUI

This is without submitting a form and without "checked" added in the html code.

element["checked"] is always "1" on the same element and null on the rest, regardless which one is checked. That is right after I get a callback from onmousedown from that same element.

element.checked is not supported.

I could submit the radio buttons own form each time I click on it, but this is kind of hacky as I have to do some other stuff if the real submit button is pressed.

Edit:
I found out that the equivalent of

Code (csharp):

1. element.checked

is

Code (csharp):

1. ((InputTag)(element.Handler)).Checked;

Support for the official CSS element.checked would be nice

 

Ah right okay - yes in which case grabbing the checked state from the handler is the best way to go; element["checked"] itself wasn't being updated (but is now).

As for element.checked, "checked" is actually a C# keyword, so the closest it can get is element.Checked (or element.@checked) which is a little awkward - this is why it's not currently included in there. Nitro is not case sensitive though, so it would look like element.checked there. I'll add it in with the capital C though; although non-standard it's as close as it can get!

 

Lols I agree

 

Hello all,

Another adition I can share: file:// protocol for images!

In order to have support for this, just create a class (ideally outside the PowerUI folder so that you can update more easily) called DriveProtocol.

Edit: I changed "path.pathname" to "path.Path" -- the full path works on androids (other one bugged out)
The code is:

Code (csharp):

1. using System;
2. using UnityEngine;
3. using PowerUI.Css;
4.  
5. namespace PowerUI{
6.    
7.     /// <summary>
8.     /// This protocol is used if you have an image file on the screen.
9.     /// You must use file://pathToImage.png to access it.
10.     /// Nota that this will not work on all platforms (namely it won't work on webplayer)
11.     /// </summary>
12.    
13.     public class DriveProtocol:FileProtocol{
14.        
15.         /// <summary>Returns all protocol names:// that can be used for this protocol.</summary>
16.         public override string[] GetNames(){
17.             return new string[]{"file"};
18.         }
19.        
20.         /// <summary>Attempts to get a graphic from the given location using this protocol.</summary>
21.         /// <param name="package">The image request. GotGraphic must be called on this when the protocol is done.</param>
22.         /// <param name="path">The location of the file to retrieve using this protocol.</param>
23.         public override void OnGetGraphic(ImagePackage package,FilePath path){
24.             Texture2D tex = new Texture2D(0,0);
25.             tex.LoadImage(System.IO.File.ReadAllBytes(path.Path));
26.  
27.             package.GotGraphic(tex);
28.         }
29.        
30.     }
31.    
32. }

That should allow you do define an image as <img src="file://Path/To/Image/In/Drive/name.png" ...

Anyhow, credit goes to Luke, he outlined the whole thing, I pretty much pasted from chat to code.
Do notice that this will not work on webplayer (as expected).

edit: This creates a compressed image by default, you can use:

Code (csharp):

1.  
2. Texture2D tex = new Texture2D(0,0, TextureFormat.RGB24, false);
3.  

For a non compressed one, looks nicer on some cases.

 

Thanks!

 

Version 1.6 supports <ul> and <li> tags but they lack the added dot (•) as shown here:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists4

This is how to fix it:
Open up li.cs and add this to the class:

Code (csharp):

1.  
2. public override void OnTagLoaded(){
3.  
4.     if(Element.innerHTML[0] != '•'){
5.  
6.         Element.innerHTML = Element.innerHTML.Insert(0, "• ");
7.     }
8. }
9.  

If your font doesn't support the dot, you can replace it with another character. The font (Vera) which comes with PowerUI does support that dot.

 

Heya!

The li tag is only partially supported at the moment (see http://powerui.kulestar.com/tags) as in standard HTML it's done with a CSS property (list-style); inserting it into the HTML as above will make the dot be present in the DOM so do be aware of that one if that's not intended.

 

Strange, the dot shows up correctly on Android but on IOS it is replaced with a question mark (?) but they both use exactly the same font. Could that DOM thing have anything to do with it?

 

Is it a textual question mark, or is it a red one on a white background (an image)?

 

It is a textual question mark. If I replace the dot with a dash (-) then is shows up correctly.

 

I believe that could be a Unity issue - It was for the same reason that radio buttons use an 'x' character rather than the bullet point in PowerUI (as well as bullet points themselves not quite being in every font). Maybe you could try using an o instead?

 

How do I make scrolling to work if I mouse-down and drag on a clickable element such as a checkbox?

 

Heya!

It's been a slightly manic few days recently

You'd need to allow the click event to bubble/ propagate - in the input element onclick function, right near the bottom you'll see something like clickEvent.stopPropagation() - either remove this, or move it into the if's brackets just above

 

This works. However, I will have to change stopPropagation() of most elements. For example, If you click on a label tag (linked to a checkbox), the propagation logic has to be modified as well.

I am investigating modifying the source on a deeper level. The only place a down click should be used is for scrolling. None of the elements should eat up a down click. Perhaps I should modify GotClicked() in Element.cs so it only accepts a "click" on a mouse up, AND if the mouse hasn't moved (much) between the last mouse down.

Edit:
In fact, just moving stopPropagation() up or deleting it doesn't work either, because if you scroll and your finger happens to be on top of a clickable element, that element unintentially receives a click if you remove your finger from the screen.

 

I have a partial solution for this. It solves the problem of unintentionally generating a click on an element after the user finishes scrolling. Modifying the stopPropagation() logic enables scrolling when the mouse is over a clickable element. However, that function needs to be modified in many tag handlers. I am looking for a more top down solution but I am lost in the forest.

Do you have a solution for this?

Mod so far:
In Input.cs, add this:

Code (csharp):

1.  
2. public static Vector2 LastMousePosition;
3. public static bool MouseWasDragged;
4. private static float DragThreshold = (float)Screen.height * 0.01f; //1% of the screen height.
5.  

Then, in OnMouseDown(), add this:

Code (csharp):

1.  
2. //Log the position of the mouse when it was pressed down.
3. LastMousePosition = MousePosition;
4.  

In OnMouseUp(), add this:

Code (csharp):

1.  
2. //Check if the user dragged the mouse.
3. if(Vector2.Distance(MousePosition, LastMousePosition) > DragThreshold){
4.     MouseWasDragged = true;
5. }
6. else{
7.     MouseWasDragged = false;
8. }
9.  

In input.cs, change this:

Code (csharp):

1.  
2. if(!clickEvent.heldDown  Element.MouseWasDown()){
3.  

Into this:

Code (csharp):

1.  
2. if(!clickEvent.heldDown  !Input.MouseWasDragged){
3.  

 

Hmm I think there's scope for a more general solution as the above makes use of a magic number (1% of the screen) which wouldn't be suitable for everybody - for example physically large vs. physically small screens. It could be more "one finger worth of pixels", but that's still a magic number especially as finger size varies a huge amount and the actual touch area size is unavailable in Unity.

The problem itself is of course a very general one which doesn't just affect PowerUI (my phone can scroll an element across practically the whole screen and still 'click' it when a finger is released) so it might be worth asking yourself if it's a problem worth spending time on as a solution that works for every phone and everybody using it would be very time consuming to come by in my opinion.

 

With both IOS and Android native browsers it works quite well. You can always scroll, even if you mouse down on a clickable element, and if you do scroll, all click/select events are disabled. Perhaps they don't use 1% of the screen but don't allow any drag/scroll at all. That should work as well, although probably slightly more temperamental when a touch screen is used instead of a mouse.

What probably would be a better idea though is using Element.MouseWasDown() and then getting some feedback from the DragScroller, so if a scroll is detected, the "element select event" will not fire.

Anyway, I modified all the tags my project uses so clickEvent.stopPropagation() is not called if a scroll is detected. If I find a better solution, I will post it on the upcoming wiki

Edit:
I ran into some weird bugs while converting everything to "select when mouse released". This is due to the entire PowerUI system being based on "select when mouse is pressed down". Unfortunately though, this is not the way web browsers work (with checkboxes etc.). I think it is better to make PowerUI behave the same as web browsers purely for the sake of user familiarity as well as fixing the scrolling issue. Just my 2 cents.

 

Using tab key to switch between input field seems to not work. Can it be added?

I see in Focus.cs:

/// <summary>Moves the focus to the next element as defined by tabindex. If there is no currently focused element,
/// a tabindex of 0 will be searched for. If that's not found, then the first focusable element in the DOM will be used.</summary>
public static void TabNext(){
// Commit Pending
}

Is there a reason for this is still pending?

It seems that input.cs need a couple of new cases in OnKeyPress.

Need info about tab order....

Tab works, but not shift-tab because MoveUp() and MoveLeft() always return same element.

Added to input.cs line 440:

if(key==KeyCode.Tab) {
if (pressEvent.shiftKey) {
Element e = Focus.Current;
Focus.MoveLeft();
if (e == Focus.Current) Focus.MoveUp();
} else
{
Element e = Focus.Current;
Focus.MoveRight();
if (e == Focus.Current) Focus.MoveDown();
}
} else

 

Heya!

'Focus graphs' (basically a graph which you move around focusable stuff when you hit tab or any other input - e.g. arrow keys in the focus graph example scene) were a partial commit as there wasn't much demand for them at all, so other things were considered more important at the time. The person who was originally after it wanted something that worked on consoles, so moving around through the graph in a directional manner (e.g. move to the focusable element visually 'above' the current one) was committed before tabbing through it was. By the standard, hitting tab moves to the next or previous element in the DOM, or if the "tabindex" value is used, the next/previous numeric one. It's a different way of travelling around on the focus graph than in directions... that was a little intense so hopefully it all makes sense!

Rather ironically, the tab method of jumping through the focus graph is way simpler than the visual directional stuff, so I'm more than happy to finish that off if you would find it useful

 

Thank you KulestarUK! On all targets with keyboard, many use tab to navigate to next entry field. Important for the overall user experience.

 

UPDATE:

Just add (as stated earlier in thread):
<img src="images/btn-anim.spa" onClick="submitWithNitro">

function submitWithNitro(e:UIEvent){
this.form.submit();
// or e.target.form.submit();
}

Works perfectly.

 

FormExampleHandler.onSubmit is just an example function so it uses fields which are probably undefined in your forms - you can see it's source if you pop open this file:

Path/To/PowerUI/Examples-RemoveOnPublish/6. Forms/FormExampleHandler.cs

Notice how the function does e.g. getElementById("csMessage") - this is part of the example and elements with the ID "csMessage" probably don't exist in your HTML; the best way is to either write your own C# form submit handler or a Nitro one (like your above example ) - hopefully that clears up how that works

 

Thank you!
I notice that there are a few differences in layout when using HTML and CSS from live site, but it is good enough. Next step is to include the correct fonts to get make it better than good enough. (Already much better than expected!)

Just one more thing I need to make it complete:
How to handle links.
When you click on an external link <A>, it complains it is not found.

If I want a C# function be called instead, how do I do it? Perhaps redirect to a different local HTML file.

 

Sure thing - in order for a link to work, the file you're linking to needs to be in any Resources folder, e.g.:

HtmlPages/Resources/Main/bank.html


<a href="Main/bank.html">Open the bank</a>

Alternatively you can of course use a full web address (http://..), or alternatively you can make your own protocol:// and direct it in a totally custom way, but that's more advanced stuff

Another alternative is you might find iframes useful - their popular to stack on top of each other to create modular interfaces as they have no particular overheads.

If you'd just like to run some NItro/C# when something is clicked, the best thing is to use onmousedown or onclick, e.g:

<div onclick="ACSharpClass.AStaticCSharpMethod">I run C#!</div>

<div onclick="aNitroFunctionName">I run Nitro!</div>

The above applies to every kind of event; there's a full example of C# vs. Nitro in the forms example and the onsubmit event

 

Thanks again. The forms example is very good, but if you use onclick="..." to connect to a C# function (e.g. public static void OnSubmit(FormData form)) I get an error stating it can't convert parameter, but if I change the parameter to object -> it works!
What parameter should the C# function have if using JavaScript onclick?

 

Is it compatible with jQuery?

 

onclick like onmousedown/onmouseup receives a "UIEvent"

It's not directly compatible with jQuery although somebody was working on a version of jQuery that is - I'm not sure if they've released it yet though.

P.s. Happy Easter!

 

Thanks again for excellent support!

Happy Easter!

 

I'll tried compile trial scenes and get this:

Version 4.3.1f1
OS X Maverick
Build for iOS

Can you help me?

 

Hiya!

As far as I'm aware the demo DLL doesn't compile for OSX; that's something only the full version does (which is full source code) - this is because the demo DLL contains Unity Editor specific stuff in some places

 

ok. thanks.

 

Hello. I am thinking about buying this package. but I've 2 questions.
Fist of all, congrats for making a plugin that finally works in the webplayer. all other UI solutions that supported CSS + HTML lacked webplayer support.

Now. I've been testing the demo package, and my questions are- is it possible to add selectable text on the textfields (or how hard would be to implement it?) and the other question- is it hard to make the scrollbars scroll on the mousewheel event ?

Thank you !

 

Thanks! We directly target the webplayer so we won't be dropping it anytime soon!

Selecting is something which has been requested a few times - some have actually implemented it themselves through using background colours, although we're planning on adding support for it directly some point in the future.

As for the mousewheel it would be quite simple to scroll the current focused element with e.g. Focus.Current.scrollTo(..); by using your preferred method of grabbing the mousewheel in Unity (there's a few approaches!) and then calling that one liner

I hope that helps!

 

Is CSS opacity not supported? I've tried to use it with a class on an input of type submit but the whole button disappears then.

 

Hiya!

Yes opacity is supported - it's value ranges from 0-1 so it might be that the values you were using went out of range. E.g:

<div style="opacity:0.5;">I'm half transparent!</div>

Any property which accepts a colour in PowerUI can be rgba too:

<div style="color:#ff00ff88;">I'm half transparent!</div>
<div style="color:rgba(1,0,1,0.5);">I'm half transparent!</div>
<div style="color-overlay:rgba(1,0,1,0.5);">I'm half transparent!</div>
<div style="color-a:0.5;">I'm half transparent!</div>

I hope that helps! Let me know if it doesn't work for you

 

Thanks for the quick response!

See the code below, it works if I use opacity as inline style but not using a class. I would prefer to keep my CSS separated and not inline.

Code (csharp):

1.  
2. <style type='text/css'>
3. .padded {
4.     padding:5px 10xp;
5. }
6. body{
7.     overflow-y:auto;
8.     text-clip:clip;
9. }
10. .main {
11.     text-align: center;
12. }
13. .test2 {
14.     opacity: 0.85;
15. }
16. .test {
17.     border: 1px solid #fff;
18.     background-color: #272822;
19.     color: #BCBCBC;
20.     padding: 5px 10px 5px 10px;
21.     background-image: none;
22.     font-size: 14px;
23.     opacity: 0.5; <!-- doesnt work -->
24. }
25. </style>
26.  
27. <div class="main">
28.     <h1 class="test2">Title</h1>
29.     <input type="submit" name="Multiplayer"/>
30.     <input type="submit" name="Multiplayer" class="test"/> <!-- doesnt work, element does not appear at all -->
31.     <input type="submit" name="Settings" />
32.     <input type="submit" name="Quit" />
33.     <div style="opacity:0.5;">I'm half transparent!</div> <!-- works -->
34.     <table>
35.         <tr>
36.             <td>
37.             test
38.             </td>
39.                         <td>
40.             test
41.             </td>
42.         </tr>
43.     </table>
44. </div>

 

Hmm that's odd - as far as I know some of the examples use opacity in classes so it should be ok; one thing that sticks out is "background-image: none;" which isn't required but might be causing weird issues. I'm just going to give the above a swing here too so I'll let you know if I see anything shortly!

Edit: It works if you use a full color-overlay like this:

color-overlay:#ffffff88;

Or

color-overlay:#ffffff;
opacity:0.5;

But it's looking a lot like a bug to me! I'm going to do a little more digging and see if I can spot what's going on here.

 

Thanks, this works, BUT, I think I figured something else out. This works:

Code (csharp):

1. .test {
2.     color-overlay: #25B6D8;
3.     opacity: 0.5;
4. }

This doesn't:

Code (csharp):

1. .test {
2.     opacity: 0.5;
3.     color-overlay: #25B6D8;
4. }

Is this behavior documented? If not it should be documented. I'm just evaluating it so far, but looks promising, besides these issues I like your asset. But I would expect that the order of the CSS doesn't matter.

Let me know what I can do to help tracking these issues down.

 

Normally the order doesn't matter at all but in this case that underlying issue with opacity is what's causing it to be order sensitive. I'll try my best to describe what's going on!

PowerUI needed a way of applying full colour overlays across a whole UI. That is quite a popular technique in many games - think of a screen going red as a character is low on health for example. Nothing like this exists in the CSS spec, so along came color-overlay. Opacity is also a type of overlay so for performance purposes opacity is internally the alpha channel of the color-overlay property. In short, opacity == color-overlay-a.

When just opacity is set, PowerUI has to figure out what those other 3 channels are (r,g,b) and it does this based on information available from the current element it's applying style to. In the case of a class, that element hasn't been fully initialised yet. Somewhere along the lines, this causes a conflict which makes PowerUI ignore the value and set the whole thing to zero. I'm currently on a hot trail so it should actually be resolved shortly!

 

Thanks again for that passionate support on a Sunday evening!

Great explanation as well, I've got the point, but that's a trap for the users of your asset. I don't know how you parse the properties but couldn't you simply push the opacity property always at the end of the list to avoid somebody getting caught in this situation? Just a suggestion. If opacity as always parsed as the last property in the list, wouldn't that resolve the internal issue as well?

Yet another question: Which CSS3 properties are supported? I've just tried text-shadow, and it doesn't seem to work either. How about the gradients? These two alone would often reduce the need to great images.

 

No problem! More than happy to help

Unfortunately as you might have guessed it's not quite that simple - PowerUI was built from scratch for performance, so it's actually applying CSS immediately after it's been parsed a character at a time (in the same way as your average browser does). This is because the slowest part of a normal web browser is the internet or file I/O, so whilst it's waiting for the next characters it might as well be doing something.

This one is a bug though (which I was unaware of until you spotted it) so it won't be around for much longer! It's a bit special because opacity is internally a unique property - it's the only one which maps directly to some other property. I'm currently on it so I'll be posting here when it's patched up and I'd be happy to send over the latest package for you with the fix in it

Edit: Just spotted your question; the best spot to see CSS coverage is over in the Engine/Css/Properties folder which is a condensed listing - it's possible to add custom CSS properties too; that's quite a popular way of extending PowerUI's animation abilities in custom ways. Text-shadow is currently something which is in the works (little awkward because Unities internal text rendering is super restrictive), but I've seen people mimic it by layering text on top of itself

 

I found something even better then the script I wrote here:
http://wiki.unity3d.com/index.php/MobileSimulator

You can find it here:
http://forum.unity3d.com/threads/196174-xARM-Aspect-and-Resolution-Master

This should be very handy for PowerUI.

 

Heya!

Great thanks for that - it looks very interesting! They say they support all mainstream UI frameworks so presumably that includes PowerUI too.

P.s. There's been some great changes recently! border-radius is now supported and a rare renderer issue got caught which was actually causing those pesky text problems.

 

Thanks, I saw that on your site. That is good news!

Does that mean that round radio buttons are now supported by default?

 

Yes it sure does; They are now round by default too!

 

A source of joy

 

Found a bug. A page that render ok in browser did not work in PowerUI.

Please change line 73 in td.cs (function WidthChanged) from

if(Table==null){

to

if(Table==null || Table.ColumnWidths==null){