PowerUI - Powerful HTML/CSS UI Framework

Hey there! A while back we were experimenting with a particle-system CSS property/ a <particles> tag, although in short it didn't feel like it provided enough flexibility. However, to get something to show up on the UI (and this goes for general meshes too) there's not too much to do:

1. Instance it like you normally would (e.g. GameObject.Instance(..) )
2. Make sure it's on the "PowerUI" layer. That's yourGameObject.layer=UI.Layer;
3. Parent it to UI.GUINode

At this point, you'll now need to make sure it gets positioned in the correct location. To map a screen space coordinate (which could come from e.g. the UIEvent created by a click) to the transform position to use, the PixelToWorldUnit method comes in handy:

Vector3 transformPosition=UI.GetRenderer().PixelToWorldUnit(x,y,depth);

That depth value is similar to z-index. To get the depth value used by a particular element:

anElement.style.Computed.ZIndex;

Something really important to note at this point is the weird and wonderful world of alpha sorting. Because of how it works in Unity, the depth value you choose won't work as you'd expect on all platforms. You've gotta change the material.renderQueue value of your particle systems material in order for it to be totally reliable. Assuming that your particle system will probably be in front of everything anyway, a simple approach is to just set it to 3100 (meaning the Unity transparent queue + 100).

I'll have a play around with that particles tag to see what state it's in; I'll drop the source here shortly

 

And here it is! I had forgotten how fun this tag was - I've made it more usable and it's also built in from now on too (the previously built in particle-system CSS property is now depreciated)

Attached are 3 new things:
- <particles> tag
- particles-scale CSS property
- particles-rotate CSS property

Drop the files anywhere in your project. As they're built in, their built in locations are:
PowerUI/Source/Engine/TagHandlers/particles.cs
PowerUI/Source/Engine/Css/Properties/particlesScale.cs
PowerUI/Source/Engine/Css/Properties/particlesRotate.cs


Usage

<particles path='hierarchy/path/to/your/system' style='particles-rotate:0deg 180deg 0deg;particles-scale:300% 100% 200%'/>

..Or..

<particles src='path/in/resources' style='particles-rotate:0deg 180deg 0deg;particles-scale:300% 100% 200%'/>


Side note: particles-scale only works when your particle system is set to simulate in world space (rotate works all the time anyway).

So the easiest thing to do is either use document.createElement or innerHTML+= and place the element where you want it using CSS (then destroy it when you're done).

 

Awesome. Thanks for the help!

 

I could see a similar tag for displaying 3D objects. That would be useful. I know I would definitely use it.

 

Once upon a time there was actually a <mesh> tag but it basically got dropped in favour of <camera> - if you think it would be useful then there's certainly nothing stopping it making a comeback; it would be a really simple add

 

Personally, I'd love to see that feature. The cool thing about the flexibility of PowerUI is how it can go beyond just basic HTML and CSS.

I'll be using this asset in most if not all of my projects.

 

Hello, I use PowerUI for few months with use of NitroScript and I would like to export to iOS platform.

Unfortunately, I can't make PowerUI working on iOS. I checked and tested all options in all positions with my project (Precompiled NitroCode, NoRuntime, Precompile all).

I also tried with the simple sample "3. NitroScripting" in the demo set and it didn't work too.
So, PowerUI seems to be very limited now with iOS platform or maybe I am not using it in the good way...

 

Hey Sebastien!

Which part of it isn't working for you - I guess it's just the Nitro code? Are you getting any error messages when running it? If you're getting graphical problems, one thing I can think of is that some versions of Unity have problems with transparency when you've got Unity's graphics target on iOS to "Metal" so that could be causing visual issues.

iOS doesn't allow runtime compiled code which is why that "precompile" checkbox is necessary (as described on the mobile UI's getting started guide at http://help.kulestar.com/mobile-powerui/ - it looks like you've been following that). You could try unchecking then rechecking the "precompile Nitro" checkbox, or reloading the Unity Editor as it's DLL cache occasionally doesn't update properly.

Nitro certainly should work on iOS as the example scenes have all been tested as working like this:

- Create a clean project
- Drop in PowerUI
- Set platform to iOS
- Add e.g. the Nitro scripting example scene to build settings
- Tick the precompile checkbox in Window - PowerUI - Nitro Settings
- Build and run on device
- Should (hopefully!) be fine for you too

Another alternative is to avoid Nitro and use C# instead - Nitro is totally optional as everything PowerUI does is written in C# and is entirely accessible from .NET languages. Hopefully something there helps but please do let us know if you're still stuck!

 

Hello,

I just tried what you said and I always have the same JIT compile error.
- New project
- Add PowerUI 1_9_204
- Open nitro scene and add it to the build
- Tick the case PowerUI/Nitro Settings/Precompile Nitro Code
- Build and run on iPad Air1 with iOS 8.3

I am using Unity 5.4.0p3 with XCode 7.3.1

-------------------- This is the error message:
2016-09-03 11:33:52.377 ProductName[1245:239997] -> registered mono modules 0x100e76550
-> applicationDidFinishLaunching()
-> applicationDidBecomeActive()
GfxDevice: creating device client; threaded=1
Init: screen size 1536x2048
Initializing Metal device caps: Apple A7 GPU
Initialize engine version: 5.4.0p3 (dac96b578024)
UnloadTime: 2.774875 ms
Script error (At resources://): System.NotSupportedException: /Users/builduser/buildslave/unity/build/Tools/il2cpp/il2cpp/libil2cpp/icalls/mscorlib/System.Reflection.Emit/AssemblyBuilder.cpp(22) : Unsupported internal call for IL2CPP:AssemblyBuilder::basic_init - System.Reflection.Emit is not supported.
at System.Reflection.Emit.AssemblyBuilder..ctor (System.Reflection.AssemblyName n, System.String directory, AssemblyBuilderAccess access, Boolean corlib_internal) [0x00000] in <filename unknown>:0
at System.AppDomain.DefineDynamicAssembly (System.Reflection.AssemblyName name, AssemblyBuilderAccess access, System.String dir, System.Security.Policy.Evidence evidence, System.Security.PermissionSet requiredPermissions, System.Security.PermissionSet optionalPermissions, System.Security.PermissionSet refusedPermissions, Boolean isSynchronized) [0x00000] in <filename unknown>:0
at System.AppDomain.DefineDynamicAssembly (System.Reflection.AssemblyName name, AssemblyBuilderAccess access, System.String dir) [0x00000] in <filename unknown>:0
at Nitro.NitroCode.Compile (System.String code, System.Type baseType, System.String aotFile, System.String aotAssemblyName) [0x00000] in <filename unknown>:0
at PowerUI.NitroScriptEngine.Compile (System.String codeToCompile) [0x00000] in <filename unknown>:0
at PowerUI.ScriptEngine.TryCompile () [0x00000] in <filename unknown>:0
at PowerUI.Document.TryCompile () [0x00000] in <filename unknown>:0
at PowerUI.Document.NewBody () [0x00000] in <filename unknown>:0
PowerUI.NitroScriptEngine:Compile(String)
PowerUI.ScriptEngine:TryCompile()
PowerUI.Document:TryCompile()
PowerUI.Document:NewBody()
(Filename: /Users/builduser/buildslave/unity/build/artifacts/generated/common/runtime/UnityEngineDebugBindings.gen.cpp Line: 42)


So, for now, I will use C# code instead of Nitro script.

 

Hello everybody - time for some awesome news!



PowerUI 2 - Release cycle starting shortly

For those who are interested in a little bit of history..
PowerUI 2 has been extremely challenging to say the least. "One does not simply build a web browser inside Unity" (but we'll do it anyway!) is the phrase that has been chucked around a lot. I likened this particular update to ripping the engine out of a car and replacing it with a new and entirely different one which also had to be built from scratch, whilst simultaneously attempting to preserve backwards compatibility as much as possible. The "all or nothing" approach required was difficult to debug and a series of wildly unstable previews resulted.

However, this was until about 4 weeks ago when there was a major breakthrough. Rather than replacing the whole thing in one go, I had found a way of replacing tiny parts one at a time into the stable 1.9 series until the whole thing was covered. Some of these changes were released too and are currently available over on the My PowerUI site. Last weekend that process completed and oh my gosh! Seeing the myriad of new features working together for the first time was wonderfully awesome. Ever since then it's been non-stop testing and planning out what's happening next!

The new features - what's coming next?

PowerUI now consists of over 1000 source files with a bonkers amount of functionality. As it's all written in C#, it just works everywhere and you can directly call PowerUI's internal functions for whatever purpose in your projects.

As always it's still modular, so if you don't want certain features you can just rip them out. The minimal version is now actually a little smaller than what it used to be.



- Extensive CSS selector coverage!
Requested since the beginning of time itself, this one is now present! CSS selector coverage is believed to be CSS3 complete (more testing required at this point).

- Extensive CSS value coverage!
color:red, width:calc(100% - 80px), font-size:20pt. You name it, we've probably got it!

- Advanced CSS properties
text-shadow and text-stroke join the party. filter is currently a work in progress.



- 3D Text API now stable
Localise it, animate it, use CSS to style it. Your wish is PowerUI's command. It's as simple as adding text-extrude:2; to your CSS.



- Media Queries!
Use media queries alongside PowerUI's resolution functionality to target a wide array of screen shapes and sizes. We've also added the DOM matchMedia method too.

- @Keyframes!
Use CSS animations in your UI's, alongside element.animate().

- Custom shading
shader-family: "standard lit"; instantly makes the targeted elements lit. Create and name your own shader family and apply it using this simple CSS property.



- GIF support
Built on top of PowerUI's SPA system, your UI's can go GIF crazy! Like with anything else PowerUI, you can instance GIF's anywhere, including on meshes.

- Loonim
A GPU accelerated "loony" image generator, spanning hundreds of files on its own. Included for filter effects but is also capable of generating images from Filter Forge at runtime using the GPU.

- Improved DOM function support
Some of these have already been pushed back into the 1.9 series and are available to use already.

- Cookie Support
PowerUI now supports any number of cookies.

Things that are currently in progress but not in the current preview (or are partially in the preview):

- SVG support (Not in current preview)
Provided all goes well, this should be including filters too!

- Improved canvas coverage (Not in current preview)
Built on top of the same foundations as the SVG system.

- Nitro 2, a rebuild of PowerUI's JavaScript engine (Not in current preview)
We're pushing Nitro to the limit by getting it to run video codecs such as ogv.js and route9.js. That'll then allow seekable, streamable video that works on all Unity platforms, plus it opens the door for the entire web of Javascript libraries.

- Text selection! (Not in current preview)
Currently one of the most often asked questions, PowerUI can now support selectable text, styled using the ::selection psuedo-element.

What will it cost me?

- If you're already a PowerUI owner, absolutely nothing! PowerUI 2 is a free update.

- For people who don't currently have PowerUI, the package will be the same price as it is now. Alternatively..

PowerUI 2 Core.The core of PowerUI.

For free.

We'll be splitting PowerUI into 6 packages alongside the existing one. A totally free, closed-source "core" plus 5 $20 extensions:

PowerUI Core (open source)
Sparkplug (Spark is the CSS engine. This is things like keyframes, media queries, tags, CSS properties etc).
Loonim (+Filter, canvas)
Nitro (+Javascript)
SVG (+SVG images. For filters, requires Loonim)

More information on these shortly! Power to the people

A quick note about previews: Previews are non-public but if you want to give it a try just drop us a message! Really looking forward to seeing what you guys get up to with this. As always, thanks to everyone for your support! None of the above would be possible without all of you

 

This sounds awesome! I am very excited to work with the new version!

 

Overnight PowerUI 2 gained GIF support! The above post has been updated

Edit: It also gained cookie support too!

 

In an earlier post I asked about adding 3D object support. Is this something you can add into the new version? There are a couple games I am working on that use PowerUI exclusively because I found it very good for what I needed to do and adding the 3D object support (basically using them similar to how I would use images - being able to show them inside div, spans and tables with percentage and proportional based sizing) would really expand my options. It would also be great for inventory windows, scores, etc.

BTW, this new version is really going to help elevate my games to look even better!

 

Hey Steven, awesome I can't wait! Sure we could certainly add something in there; earlier there was essentially a lack of consensus about how best to structure the API (there's a huge range of options!). Generally the use cases seem to fit into 3 categories:

- Displaying the player on the UI (e.g. to check equipment stats/ personalise it)
- Displaying items on the UI
- Making the UI itself 3D

As for the API, these things start with "how would it be done on the web?" - in this case, WebGL. Supporting a WebGL canvas would be fairly straight forward - we're inside Unity after all - but that would be way too "raw" for the above use cases; straight dropping a Unity mesh on the UI would be much better. At the moment that can be done by parenting it to the UI, but that's also too raw - it would be pretty neat to use CSS/HTML to stylize them.

So, API wise, there's either the choice of a HTML tag or CSS. CSS is my personal favourite choice because of animating, but there's an upcoming SVG API which uses the word 'mesh', so it's kind of getting in the way! That then landed on possibly this:

background:mesh("path/in/scene/hierarchy");

Which was nice and similar to the CSS shapes module (circle() etc), so we could then potentially add things like:

ellipse3d(..) or circle3d(..) to cover the 3rd use case and it generally seems pretty nice. Then there's this though!

text-extrude:2; // This exists, so it follows that..
border-extrude:2; // Would make lots of sense, but..
background-extrude: mesh()..? Not sure! Seems like it'd be awkward to know to use this for the other 2 use cases.

It's fixed with a mesh tag, but it collides with that SVG specification which is kind of awkward (i.e. something like <mesh path="path/in/scene/hierarchy"> which internally uses background-extrude).

Do you have any ideas on how you'd like to use it - which do you prefer the look of?

 

Personally, I like the HTML mesh tag approach. It would seem to make it easier for me to dynamically generate HTML and modify the tags from within code. CSS would obviously work, too, but I could see something like:
<mesh path="..." texture="...." shader="..." etc.>

BTW, I really appreciate you giving me the code for the particle effects but will this code be added as a standard part of PowerUI now?

 

I am curious how extensive of a support Nitro will have for JavaScript libraries. I couldn't expect it to support all of them, the codec support alone is awesome, but will it support libraries that handle touches (one or multiple fingers), swipes, etc. (ex. http://stereobit.github.io/dragend/ or http://hammerjs.github.io/)?

 

Awesome ok, the collision with SVG shouldn't be too much of a problem considering it's SVG and this is HTML anyway. As a quick guess, the "shader" attribute would be a little awkward if texture references e.g. a GIF/ SPA/ video, like this:

<mesh path=".." texture="http://awesomesite.com/anOnlineGif.gif"> <- requires the SPA shader for this to work

.. But it seems like a fun concept allowing a texture ref like that so I'll have a play around with it as a tag - the CSS engine is taking priority at the moment though of course so it'll probably happen sometime in the next 24 hours

Particle effects: Yep, that's now built in (You'll also find it in the latest 1.9 packages too)

Nitro and JS libraries: Yep you're right, it won't be covering all of them - the major problem is the pre-compilation thing on platforms like iOS; it has to be able to recover type information ahead-of-time so there's a huge amount of work going into just getting fully compliant JS syntax on those platforms. There's been some fairly wide reaching extensions to the DOM API's but the major focus is on that syntax at the moment. Once the new CSS stabilises then this will be the priority - a big push to cover as many DOM API's as possible.

 

Phenomenal work!! I am very impressed.

 

Hello,

I wonder if I could use this plug-in to fulfill the requirements of a new feature I have to implement. I need to be able to display random html messages I receive as popups. I don't know which templates are sent beforehand but I need to display it with most accuracy.

To sum it up:
- I need to show html in a new popup window with scroll (and preferable re-sizable and dragable panel) like a browser borderless window.
- Close the popup with X button.
- Need to "best fit" to the size of the message.
- Links to get opened in the user default browser.


Can I achieve all of that with your plugin without overly hard effort ?

 

Hey!

Usually yes - a project I worked on had very similar pop-ups so it's certainly possible. Some quick pointers:

The window: The easiest thing to do is display it in an iframe so it scrolls by default, or use a div with overflow auto and a specific width/height. Pop it up by adding the new HTML to your main UI using e.g. (From C#) UI.document.createElement("iframe") and then UI.document.appendChild(theElement). The DOM API is structured the same as it is on the web. (i.e. UI.document.body.innerHTML=".." works fine too). A few of the example scenes use iframes, e.g. the "modular" example scene might be a starting point.

Links: Any external links would need to use target="_blank" as by default they would open "in" PowerUI otherwise. PowerUI is totally open source though so this is a relatively easy default to change if needed (PowerUI/Source/Engine/TagHandlers/a.cs is where the <a> tag's source is).

Close button etc: You'd need to design the appearance of the window itself, e.g with <div class='closeButton' onmousedown='Popups.Close'></div> as your close button

Best fitting the size of the message: There's quite a few formatting CSS properties available such as min-width which would typically get used for this on the web. display:inline-block elements 'grow' as they do on the web, so something like:

<div style='display:inline-block;min-width:300px;padding:10px;' class='myContent'>Hello!</div>

Alternatively, element metrics like anElement.contentWidth are available from the DOM for more advanced use cases.

 

Any ETA when version 2 will be available? That's going to be a game changer, literally!

 

Hi and thanks for the fast response.

The window: got it so basically I have to create a wrapper html that looks like a popup but it wont be able to move (user can't drag it with mouse). I think I can work with it.

Links: Great!, that seems easy enough to do.

Close Button: Yes, I guessed that's what I have to do, I add it to the wrapper one time and forget about it so It's not a big deal. Btw, can I change mouse pointer when hovered on links like in the browser ?

Best Fitting: Okay that is something that I'll have to test on several templates but I don't see how anElement.contentWidth would "guess" the exact content size. I have seen template that has no fixed size. But maybe that's our problem

again Thanks !

 

@StevenPicard the current projection is mid October, so in about 2 weeks or so There's currently some complex issues with the inline part of the new box model which has caused the latest preview to get delayed; overall though it's not a major problem (although visually it looks like one!) so it won't be delaying the overall release.

 

@yossi-elimelech no problem! There's a drag to scroll example scene included in the package too which often gets re-purposed for click-drag things; you could use an onmousemove event on there to make it draggable. As a quick note about events, they can be either C# or Nitro (PowerUI's JS-like language).

Mouse pointer: Unfortunately Unity doesn't expose the API we need for this one; there's been a lot of discussion to include images of various different pointers from all the OS's that Unity supports in order to do it in software but there's so many cases where it'll look wrong that it doesn't seem particularly suitable at the moment.

clientWidth, contentWidth and scrollWidth are the same as on the web - they compute the size after the content has been placed in the DOM so no guessing is necessary; i.e. that's the "actual" size I.e. drop it in the DOM, measure, respond accordingly by changing style properties.

 

Awesome! I am very anxious for it.

 

Hi @KulestarUK ,

I tried what you offered and I got some progress but I still struggle.

I made a static wrapper.html file that I want to inject my html messages into. I used some of your examples and got this, that is almost answering my needs I just didn't understand how to change the size (here it's 800x600) dynamically to fit the size of my inner content. (btw I didn't succeed to use styles with iframe so I wrapped the iframe with a div).

If I get html with rows of text ,for example when the text will break ? if I use the DOM to get the size of the elements will it not just spread to max size ? I'm not even mentioning the word "responsive" yet

oh and btw, I can't get the "floating:right" of the closing button to work.

Code (JavaScript):

1. <style type="text/css">
2.  
3. .modal {
4.     display: inline-block;
5.     position: fixed;
6.     left: 0;
7.     top: 0;
8.     min-width:300px;
9.     width: 800px;
10.     height: 600px;
11.     overflow: hidden;
12.     margin: -300px 0 0 -400px;
13.     top:50%;
14.     left:50%;
15.     background-color: rgb(0,0,0);
16.     background-color: rgba(0,0,0,0.4);
17. }
18.  
19.  
20. .header {
21.     height: 30px;
22.     border-bottom: 1px solid #EEE;
23.     background-color: #000;
24.     }
25.  
26. .close {
27.     color: #aaaaaa;
28.     float: right;
29.     font-size: 15px;
30.     font-weight: bold;
31. }
32.  
33. </style>
34. <div class="modal">
35.     <div>
36.         <span class="close">x</span>
37.     </div>
38.     <iframe src="http://www.google.com/" width="100%" height="100%"></iframe>
39. </div>

 

Hello! I assume you want it to sit in the middle of the screen whilst having no specific dimensions? I would do it using vertical-align and text-align as well as inline-block like this:

Code (csharp):

1.  
2. <style type='text/css'>
3.  
4. .aligner{
5.    height:100%; /* Full screen height so our vertical-align works */
6.    text-align:center; /* Middle on x */
7.    vertical-align:middle; /* Middle on y */
8. }
9.  
10. .modal{
11.    display:inline-block; /* So the width/height is set by the content */
12.    min-width:400px; /* (Optional) So it isn't tiny */
13.    background-color:rgba(0,0,0,0.4); /* Background so we can see the box */
14.    text-align:left; /* Put the text back over to the left */
15.    color: #fff; /* White text */
16. }
17.  
18. .close{
19.    position:absolute; /* Relative to our 'modal' element */
20.    top:0px; /* Top right corner */
21.    right:-20px;
22.    width:20px; /* Specific size */
23.    height:20px;
24.    background-color:#f00; /* Background so we can see it as a red button */
25. }
26.  
27. </style>
28.  
29. <div class='aligner'>
30.    <div class='modal'>
31.      
32.      <div class='close' onmousedown='Windows.HandleClose'></div>
33.      
34.      Hello!
35.      
36.    </div>
37. </div>
38.  
39.  

Standards note: PowerUI defines page height as the height of the screen so this doesn't require a table display mode as it would on the web for the vertical-align to work. The same applies to margin:auto which vertically aligns when it typically wouldn't on the web. This is a convenience thing for PowerUI's use cases (it doesn't make much sense for the entire UI to scroll!)

 

A few extra pointers: You could use e.g. max-width:80% and max-height:80% on the modal element to make sure it doesn't cover the entire screen, along with overflow:auto so it scrolls when it needs to A rough close/open:

Code (csharp):

1.  
2.  
3. using PowerUI;
4.  
5. public static class Windows{
6.  
7.  public static void HandleClose(UIEvent e){
8.    
9.    // e.target is the close button; it's parent is the modal element
10.    e.target.parentNode.style.display="none";
11.    
12.  }
13.  
14.  public static void Popup(string popupHtml){
15.    // You'll need a way of getting to that modal elements content, which could be like so:
16.    // <span id='popupContent'>Hello!</span>
17.  
18.   // So, get that span:
19.   Element ourSpan=UI.document.getElementById("popupContent");
20.  
21.   // Write the innerHTML:
22.   ourSpan.innerHTML=popupHtml;
23.  
24.  // Make the modal element visible:
25.  // (It's the parent node again; this time of ourSpan):
26.  ourSpan.parentNode.style.display="inline-block";
27.  
28.  }
29.  
30. }
31.  
32.  

 

Wow this is so good thank you so much I gonna try playing with it a bit more later!

 

Hi! This looks great - I've got a quick question before I buy:
1. Can this be used to stream video from an url, render it in worldspace and link the audio to a 3D positional AudioSource in Unity?

 

Hello! Yes it can, but it'll only work with .ogg as it internally uses Unity's MovieTexture so it has the same limitations as that. The AudioClip is available via the DOM so you can grab it via aVideoElement.audioTrack and then place it wherever you'd like.

A note for the future: PowerUI 2 should run asm.js ported video codecs (it's in heavy testing at the moment) so it'll no longer be limited to just ogg only, and it'll gain the ability to seek the video. We're mainly focusing on supporting the VP8 codec as it's majorly used by Youtube.

 

Hey everybody! Quick update on PowerUI 2 - I had intended to get an alpha out on the 20th but the decision was made to make some rather extensive last minute changes, specifically to the structure of the DOM API, the parser and event/ input handling. (I wasn't particularly keen to release a public preview only to change those core API's so shortly after!)

The end result is that they're now standards compliant which is also making adding SVG and MathML much smoother too. So since the last feature post, a quick roundup of some of the new things we've gained:

- A HTML5 compliant parser

- Compliant event flow

- Web Touch API and improved input pointer coverage

- XMLHttpRequest

- MathML syntax support

- Broke out the CSS engine, essentially making it depend on the DOM API rather than the HTML API. In short, this allows non-HTML documents like MathML to use the CSS engine as they're supposed to. It also means the CSS engine is much more open for use in custom ways (For example, selecting Unity GameObjects).

- Experimented with NPAPI for things like flash support. This will almost certainly require unsafe code so its coverage will naturally be rather limited.

- Updated some DOM API's to ensure they're threading safe.

- Revisited the Callback API so it's now really straight forward to run something on Unity's main thread.

- Added blocking dialogues like alert and confirm.

- Added an error handling system so you can deal with things like 404 pages in custom ways.

- Improved URI schema:// support. It's now even easier to add custom ones and they can respond with custom headers too (particularly "Partial Content" which is heavily used by JS video loaders).

- DataTransfer Web API (built in drag and drop)

- Revisited InfiniText; started things like smallcaps support.

- Added a wide variety of HTML tags, bumping the coverage all the way up to 100%.

- You'll no longer need to turn on "custom input handling" (in 1.9's General settings window) to deal with clicks/ keyboard events that the UI didn't handle. Instead, any event that passes straight through the UI is now given to a special event target called UI.Unhandled, so you can, for example, do:

Code (csharp):

1.  
2. UI.Unhandled.addEventListener("keydown",
3. delegate(KeyboardEvent e){
4.   // I run when the UI didn't deal with me!
5. });
6.  

(Note that KeyboardEvent is what you think it is!).

- Restructured PowerUI's localization system and exposed it as a Web API too, document.languages. This makes it a lot easier to localize entirely runtime content (i.e. it's easy to stream in the variable files now).

- A goodie bag of other Web API's; geolocation, history, navigator, localStorage etc. There's still a lot of work to do in this department but as mentioned before that'll be a post-release feature rush.

- "Standard" hit testing (it's not actually standardised, but we now follow what Firefox does). This also means the introduction of API's like document.elementFromPoint().

- Quite a bit more!

All of the above has occurred during the last 3 weeks and the new feature door is now closing so we can hopefully see the alpha being publicly available at some point over the next week (Current target date: 31st).

As always, thanks for your support! Please do feel free to get in touch if you've got any questions or if you're interested in trying out a pre-alpha.

 

Amazing work! I am quite excited to work with the alpha soon,

 

Hey, sorry for the late response, I tried your suggestion and I stumbled on some issues.

Issue1:

if my modal is overflow:auto max-height:80% max-width:80% and I put big html message inside ourSpan

Code (CSharp):

1. ourSpan.innerHTML = popupHtml.text;

the scroll bars are glitching (I see x2 scrollbars and it's doing some weird scrolling).
the close button will also disappear.

issue2:

trying to set the modal' width and height by ourSpan solves issue1 but create a new problem where the height is too small for the message size.

Code (CSharp):

1. ourSpan.parentNode.style.display="inline-block"; [COLOR=#ff9999](tried before and after this line).[/COLOR]
2. ourSpan.parentNode.style.width = ourSpan.contentWidth.ToString() + "px";
3. ourSpan.parentNode.style.height = ourSpan.contentHeight.ToString() + "px";

I'm not sure if it's the best place to do this "best fit to child elements"...
anyways I added my sample project thanks.

 

(Replied to the previous post via PM )

Quick update on PowerUI 2! Another last minute decision was made to totally open up our version control (currently it's a VIP license only thing, but not for long!) so we can make use of GitHub-style issues plus so everyone, regardless of which license they have, can always stay right up to date. It took around 4 days to get that all setup and ready to go - you're welcome to setup an account!

A lot of unexpected progress has also been made on Loonim, an image generation library (included in PowerUI 2), mainly because in short CSS 'filter'/ SVG filter effects has been very challenging because of the unique all-GPU approach that PowerUI takes. I'm thinking of temporarily dropping these features from the first alpha - Loonim will be present but CSS filter won't just yet - in order to push out the rest of the alpha public release.

As usual though if you'd like to have a play with it as it currently stands, please just let us know!

 

Howdy, I'm looking at HTML/CSS solutions for my UI -- you mention PowerUI 2. Should I wait and jump on board PowerUI when you release 2? Is the API very different from the current asset store version?

 

Hey there! It's mostly a coverage update (i.e. it's gained a lot of new features) but it depends on which parts of the API you'd be using as they've each been affected differently. The core layout hasn't changed too much - the features that the current version supports are already quite compliant anyway - so we're expecting that most HTML in 1.9 (current) should just work in 2 too. The internals are very widely different though!

However, PowerUI 2 is easier to get started with as it's got that broader feature set so it'd be worth the wait from that point of view; all licenses come with the ability to play around with any part of 2 though so it's more the difference of trying out the experimental versions vs. waiting for those stable releases

 

Ok, great - purchasing now!

 

One thing I'm noticing as I start building with this. If I add content to a div with innerHTML=, the html added does not seem to get any of the CSS defined in my style block. E.g. I'm building a tabbed panel system and when I inject a panel's html composed from C#, it is unstyled. Is this expected behaviour? Is there a way I can have the parent document's css apply to the injected html?

 

Disregard! I was appending the html to a span. Appending to a div fixed the issue

 

I'd like to play with the current version and I'd happily give you feedback. Will that be available on the download page (on your web site?)

 

Sure thing! Up until about a week ago it was provided as packages (just via email), but now it's available on the git site - create an account on there and I can then add you into the various repo's (expect a mini barrage of emails! It's spread over ~20 separate repositories, and each one lets you know that you've got access to it).

 

Okay, I registered with user name StevePicard.

 

I've also registered under the username 'britg'

 

What's the best way to determine if the mouse is above a UI element? For instance, the mouse wheel zooms the camera during normal play, but when the mouse is over a UI element I'd like for it to scroll that element and not zoom the camera.

In the Unity UI I do something like:

if (EventSystem.current.IsPointerOverGameObject()) {
return;
}

Thanks for your help, and I'm loving the system so far

 

Great ok I'll hook up both your accounts shortly! Please do just keep in mind that it's the bleeding edge so large chunks of it are unstable (but it's also a great way to see what's coming directly as well as to see the structure of the APIs - structure wise, that's stabilizing; no more large changes are expected).

This is one example of something that has changed from 1.9 to 2; in 1.9:

To test it in the same way as you would for Unity UI:

Code (csharp):

1.  
2. if(PowerUI.Input.MouseOverUI){
3.     return;
4. }
5.  

For more advanced input uses, there's quite a lot of functionality in that Input class. To handle input exactly when you want to, pop open Window > PowerUI > General Settings and tick the custom input checkbox; that'll then let you call UI.HandleInput(); directly (it returns true if the UI handled the current event).

In PowerUI 2, the event flow has been made as consistent as possible, so essentially any W3C event that isn't handled by the UI gets sent to the Input.Unhandled EventTarget. So, for example:

Code (csharp):

1.  
2. Input.Unhandled.addEventListener("keydown",delegate(KeyboardEvent e){
3.  // A key was pressed but whilst no UI element was focused.
4. });
5.  

 

Any thoughts on a templating system? e.g. I have an html view to display a dynamic list of items. Each item in the list has the same markup, just different data for e.g. 'name', 'description', etc.

Right now I'm storing that template in a different html file, attaching it to my component, and then cloning that template repeatedly, string.Replace'ing placeholders with the dynamic data.

Just wondering if I'm missing some sort of built-in support for templating like this, or this ad-hoc solution is indeed what I should be using?

 

In 1.9 the general route is to use the localization system as it treats &namedEntities; as a nice way of obtaining variable content. It's not designed to deal with lists though as the name->value process isn't context aware. For lists, I would follow the HTML5 template tag pattern (see link below) - essentially, rather than using replace, drop the new list row into the DOM then use the DOM itself to insert your values. For example:

Code (csharp):

1.  
2.  
3. string template="<div><div class='list-username'></div><div class='list-points'></div></div>";
4.  
5. // drop it into the DOM somewhere:
6. someElement.innerHTML=template;
7.  
8. // Use the DOM functions to update values:
9.  
10. someElement.getElementByClassName("list-username").innerHTML="[Row value]";
11.  
12. // Wrap all of the above into some convenience function
13.  
14.  

PowerUI 2: Gaining support for the standard template tag so it will be recommended to use that in the future. The tag is already present but it's not fully linked up just yet. As it's also generally expected to run most Javascript in the longer term, template frameworks should work too (post MVP).

 

It's probably also worth mentioning that despite being non-standard, the localization system is very much a part of PowerUI 2 - it's one of the most appreciated features so it's not going anywhere anytime soon! It's simply received a little bit of an upgrade - it gained an easy to use web API as well as becoming easier to stream translated text amongst a few other usability changes.

 

Great, thank you for your quick informative replies. PowerUI feels like the UI system that should have been included from the beginning, at least as someone who comes from a web application background. I'm also glad to hear you're staying on top of the HTML5 spec