Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

PowerUI - Powerful HTML/CSS UI Framework

Discussion in 'Assets and Asset Store' started by KulestarUK, Aug 16, 2013.

  1. crystani

    crystani

    Joined:
    Jul 29, 2011
    Posts:
    68
    Any update on the schedule of version 2? I am definitely interested and considering to purchase a license.
     
    ratking likes this.
  2. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hey crystani!

    PowerUI 2 is currently available as a pre-alpha to everybody with any existing PowerUI license - it was previously released as preview packages over email but you can now get it straight from our git repository :) Just create an account on there and send us a message to gain access to the repo's.

    The current status including a rough roadmap and what's actually being worked on right now is available on this status page. Making float inside inline-block spec conformant has been very challenging (it's supposed to happen in two passes - we do it in just one for better performance) so that's been an unexpected delay, but progress has been fast over the last few days with two large commits, so that roadmap is looking promising at the moment!
     
  3. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    Hey there,

    I bought this asset because it looks really promising, but almost immediately I ran into what seems to be a pretty basic feature that is unsupported -- any sort of basic CSS selector use!

    For example, if I have the selector

    li { }

    it works fine, but if I do

    .menu li {}

    it doesn't pick up the CSS at all! Am I doing something wrong or does it really not support any sort of nested basic CSS selection?

    I noticed that PowerUI 2 has more advanced CSS, I sent you a note to get access to it (riley@orbusvr.com), so if that's supported in v2 I can try that instead, but I was certainly expecting that to work in v1...
     
  4. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hey there!

    You've got to keep in mind that PowerUI is a UI framework. I call this the "uncanny valley of web browsers" problem - PowerUI's coverage makes it feel like a web browser, yet it doesn't have some features that are basic for a browser.

    There's a couple reasons why this happens:
    • UI's have completely different performance requirements - those selectors run slow. PowerUI typically goes considerably faster than a web browser does because I've been picky about only supporting fast features that are suitable for use on UI's. It basically lets you be more aware about the performance characteristics which is extremely important to game devs.

    • UI's need tight integration with your game code. If you want a web browser, embed one (there's free projects around that do just that too) but keep in mind that it won't work on all Unity platforms and it also operates in a sandbox which makes the communication with your game code awkward.

    • Web browsers are enormous pieces of technology! All of it has to be re-implemented in C# in order to get it all "just working" on any Unity target platform. PowerUI goes for general coverage because there's only so much one person can do :) It's also worth pointing out that the list of available layout features is enormous compared to other frameworks on the asset store.

      However! PowerUI 2 largely ignores the performance requirement and just goes for coverage. Those selectors are supported although as of right now, it's really unstable because the whole layout system is being changed around.

      Hopefully that helps anyway! In short, don't try to treat it like a browser. In the meantime, PowerUI 2 is attempting to bridge the gap over that giant valley.
     
    Last edited: Dec 1, 2016
  5. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    Thanks for the reply. Is there someplace where these 'gotchas' are outlined? For example I found the CSS coverage page but it doesn't make any mention of this. I don't mind working around these limitations (since, as you said, it's not a browser) but it's been really frustrating/confusing so far since I've basically just been doing trial and error to try and find out what works and what doesn't.

    I can work around the nested selectors if needed (by manually adding them myself to the DOM), but the one that's really going to cause issues for me is the ">" selector as in "a > b". I guess I'll just have to use a lot of Nitro to basically simulate what the CSS would normally handle on its own.

    Just as an example of what I'm trying to do right now, I'm trying to build a basic layered menu. So you select an option, it shows a sub-option, etc. The way I would normally approach that with CSS is just to add an "active" class to the selected option, then nest the sub-menu inside of it and then use ".active > submenu" to show it. Instead I guess I'll just use Nitro to show the sub-menu by setting its display: none to display: block in JS. So, not trying to use it like a browser, just a really simple example that doesn't work super well without Level 1 CSS selectors :)

    Again, thanks for the quick response.
     
  6. crystani

    crystani

    Joined:
    Jul 29, 2011
    Posts:
    68
    Thank you KulestarUK, I joined the repository. But I wonder I am asking permission properly. I just asked to gain access to PowerUI group because I couldn't find anything other than this. I couldn't find any projects visible other than those groups. :)
     
  7. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    No problem! I got the request and sent you an email about an hour ago with some information - hopefully you got that :)
     
  8. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    The general rule for 1.9 is if a selector involves visiting 2+ elements, it's not supported. So that's pseudo-elements like ::after and anything like a ~ b. If it gets a direct hit, like .class/#id, or deals directly on a single element like :hover, it's typically fine. This rule generally works better than a list - PowerUI 2 supports it all and has a list of its supported CSS properties built in.

    Currently I'd advise using C# instead as Nitro is being swapped out - the new Nitro engine is mostly backwards compatible but it'll just be easier to start new with C#. the DOM calls are all the same; you essentially just start from UI.document instead. There's lots of convenience functions to help with this process:

    Code (csharp):
    1.  
    2.  
    3. // Standard element methods which are relevant to CSS:
    4. document.getElementById();
    5. document.getElementByClassName();
    6. document.getElementByTagName();
    7. document.getElementByAttribute();
    8.  
    9. // Elements variant:
    10. document.getElementsByClassName();
    11. document.getElementsByTagName();
    12. document.getElementsByAttribute();
    13.  
    14. // All of the above are available relative to an element:
    15. element.getElementsByClassName("aChildOfElement");
    16.  
    17.  
    Using those I've just pulled together a rough a>b simulator and attached it for you - I haven't tested it but it's fairly easy to follow/ there's not that much to it :)
     

    Attached Files:

    Last edited: Dec 1, 2016
  9. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    I spent today hacking away at the in-game menu for my VR MMO and this is what I have so far:

    https://gfycat.com/SpanishFatherlyGreatargus

    It's 100% built with PowerUI, including all the animations, etc. A few tips I learned in case anyone else stumbles across this later via Google:

    - Stick to single-class names for your CSS, like ".active", not "li .active".
    - If you override a property on e.g. :hover, be sure to define the default otherwise sometimes for example my background would just disappear. But as long as I defined the default state in the class that was last on the list of classes, it worked.
    - In Nitro, it seems like you can't really hold on to variables between calls even with the global scope unless it's a really simple variable like a number. The best thing I found was just to define an Instance in a C# class, and then basically set up an API on it that Nitro could call out to frequently (e.g. "Instance.MutePlayer(playerid)" instead of trying to get a reference to the actual player in Nitro and call .Mute() on it directly).
    - For the translate properties, you can use "translate-x" in the CSS and animate() function with a "px" suffix, but it's "translateY" without "px" (e.g. just "50") when accessing it in Nitro.
    - It's style.Computed.OffsetLeft, not just style.offsetLeft.

    Anyway, now that I've figured most of that stuff out, I think it should go pretty quickly from here on in. I'll be building an auction house with this later on and I'll post back when I do that. Possibly also an inventory system.

    Thanks!
     
    KulestarUK likes this.
  10. oatsbarley

    oatsbarley

    Joined:
    Sep 13, 2013
    Posts:
    4
    Hey, I tried to PM you on these forums about getting access to the repo, not sure if you got it or not.

    I registered and everything, just need to be given permission, I think. Thanks!
     
  11. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Ah nope not until just now, sorry! It seems to be totally random when (if at all) that inbox sends out email notifications - I'll set it up for you now :)
     
  12. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    Hey there -- another quick question for you. With PowerUI 1x, is it possible to use a < camera > tag inside of an in-world UI? When I do the camera tag it shows up as an overlay on the camera but it doesn't actually put it inside of the in-world UI. Or is there a way to have the camera output to a texture and then display a texture in the in-world UI like an image?
     
  13. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    There's a modified version of the <camera> tag hanging around which can do exactly that - as it seems you've noticed, the built in version essentially just modifies the pixelRect of a camera (originally to support free users, but it's also to reduce memory usage).

    Without modifying anything, the intended route is to use the ImageCache class - specifically do ImageCache.Add("aName",aRenderTexture); then "cache://aName" where you'd like it to appear.

    I prefer the modified tag (which is now the default in PowerUI 2) so I'll see if I can find that for you :)
     
  14. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Here you go! You'll need to swap out two files - both of which are in the attached zip (along with the locations they'll need to go). The usage is the same except this one supports being transformed/ used on a WorldUI as it's actually an inline image instead.
     

    Attached Files:

  15. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    Great, thanks!
     
  16. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    KulestarUK and StevenPicard like this.
  17. StevenPicard

    StevenPicard

    Joined:
    Mar 7, 2016
    Posts:
    859
    Awesome work! Very inspiring.
     
  18. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    That's awesome - I love the style!
    That's awesome - I really love the style; certainly looking forward to seeing more of your project!
     
  19. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    Thanks for the help!

    I had one more thing that's blocking me right now. If I have the following C# code:

    public void FetchItem(string itemid, Action<ItemDescription> callback) {
    //... do stuff, then
    callback(newItemDescription);
    }

    How can I call that from PowerUI/Nitro and use a JS function as the callback? Right now I'm trying:

    FetchItem("1", function(desc:ItemDescription) {
    //do something with desc here...
    });

    and it's giving me the error:

    Unrecognised object being used where a method (to use as a delegate) was expected.

    Is it possible to pass an anonymous function from PowerUI over the C# side as an Action like that? Or is there something else I should do instead? Basically I just need to "wait" for the result to come back (because it's fetching something from the server).
     
  20. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    No problem!

    You'll end up with a Nitro.DynamicMethod<ReturnType>; if there's no return type then it'll be Nitro.DynamicMethod<Nitro.Void>. To invoke it, use:

    theMethod.Run(arg1,arg2,...);

    Code (csharp):
    1.  
    2.  
    3. public void FetchItem(string itemid, Nitro.DynamicMethod<Nitro.Void> callback) {
    4.  
    5. ItemDescription itemDesc=..;
    6.  
    7. ..
    8.  
    9. callback.Run(itemDesc);
    10.  
    11. }
    12.  
    This kind of pattern occurs a lot and as a side note it's something that has been revised in Nitro 2/ PowerUI 2. Essentially it's just any ordinary delegate/ Action, and the Nitro will try to force itself to conform to whatever delegate you used:

    Code (csharp):
    1.  
    2. // V2
    3. public delegate void MyCallbackDelegate(ItemDescription itemD);
    4.  
    5. public void FetchItem(string itemid, MyCallbackDelegate callback) {}
    6.  
    Code (csharp):
    1.  
    2. // V2 JS (conformant)
    3.  
    4. something.fetchItem("3",function(itemDesc){
    5. // itemDesc.name
    6. });
    7.  
    8.  

    Hopefully that helps - Happy holidays!
     
  21. orrbain

    orrbain

    Joined:
    Aug 12, 2015
    Posts:
    20
    Worked perfectly, thanks so much!
     
    KulestarUK likes this.
  22. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hey everybody; PowerUI 2 feature update - it's gaining 3 new things!

    A window manager

    The basis of the other features, this manages UI windows - stacking them etc. Supports custom templates and an awesome protocol to pop them open:

    HTML:
    
    <!--
       'floating' is the type of window.
       It refers to one of the templates (and 'floating' is the name of a built in template for a classic draggable/ resizable window).
    
    
       'bank' is the content to put inside the window. It's a URL. Just 'bank' like this refers to Resources/bank/index.html.
    
    -->
    
    <a href='window://floating/bank' class='bankButton'>Open/Close the bank!</a>
    
    
    We've also got an in consideration CSS API for styling those buttons:

    Code (csharp):
    1.  
    2. /* Makes the link red when the bank is visible */
    3.  
    4. .bankButton:open-window("floating/bank"){
    5.  
    6.   color:red;
    7.  
    8. }
    9.  
    Windows can be opened directly from code via a DOM API ( document.sparkWindows.open(...) or more usually .cycle(..) ) and they also support setting global variables for any JS inside the windows content:

    window://floating/numberSelector?start=40

    HTML:
    
    <!-- numberSelector/index.html -->
    
    <script type='text/javascript'>
    
    console.log("The window opener passed us "+start+"! (40)");
    
    </script>
    
    
    Dialogue trees
    A JSON based dialogue (speech) system. Supports cues from e.g. audio and creates cues for e.g. cutscenes, as well as handling speech synthesizers. Uses the window template system to display the dialogue.


    Context menus
    Classic right-click context menu's (but can be hooked up to any input sequence). Supports clicking on UI/ 3D objects and a range value so it can fail if something is too far away. Also uses the window template system to display the menu itself.


    At the moment all 3 are in early stages (and your thoughts/ input would be very helpful!), but ideally it'll help form the basis for drop in parts like a general purpose inventory/ minimap etc. It's an exciting year ahead for PowerUI so I do hope you all have a wonderful start to 2017! :)
     
    StevenPicard likes this.
  23. StevenPicard

    StevenPicard

    Joined:
    Mar 7, 2016
    Posts:
    859
    Sounds amazing!!
     
  24. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Version announcement - PowerUI 2 stable will be released on the 14th of February!
    Yep. Valentine's day.

    200,000
    lines of code.
    Hundreds of new effects.
    Masses of new features.
    Huge convenience improvements.
    As a free update made with love!

    You will not believe what I have been through. :p

    Thanks once again to everyone who has been so supportive throughout this process (and for all the feedback from those brave enough to use the new parts of PowerUI 2 throughout the alpha/ beta testing phases)!

    The roadmap ahead

    It's now at a point where I can rather safely predict the remainder of the release cycle - the testing phase was completely unpredictable in length due to the sheer size of this project. So:

    to 14th:
    - Clear the 3 outstanding majors and 3 minors.

    14th:
    - "stable-2.0" branch will appear in the git repository.
    - 2.0 Package will appear on My PowerUI
    - Package will be uploaded to the Unity Asset Store (keep in mind that the store review times are anywhere up to 2 weeks)

    to 18th:
    - "basics" branch will appear in the git repository. This one's a stripped down entry level version.
    - "PowerUI Basics" package will appear on My PowerUI
    - Basics will be uploaded to the Asset Store as a separate, $20 package.

    to 28th:

    The Nitrassic engine (the total rebuild of the Javascript engine). Old Nitro will then be completely removed from PowerUI and the new engine will join in as PowerUI 2.1.

    Onwards:
    - Package up other parts of PowerUI into extensions for the basics package.
    - Flexbox!
    - Finish SVG
    - Expanding the Javascript coverage such that it can run things like jQuery
     
    StevenPicard likes this.
  25. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestart! this asset seems impressive, I've been following it during years but now with the version 2, I think I will bet for it and buy it.

    I'm just wondering about couple of things now you mention JQuery:

    - would it be compatible as well with Bootstrap and/or with Angularjs?
    - does it work pure multiplatform? (WebGl, android-il2cpp, iOS, windows, etc..)

    cheers!
     
  26. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Thanks! Bootstrap and Angularjs: Ideally yes - JavaScript is extremely difficult to get working correctly on all platforms so currently the top priorities are jQuery and video codecs. Once those are up and ready to go then the next ones in line would be other popular JS libraries like Bootstrap :)

    However though, do keep in mind that you have the entire Unity, .NET and PowerUI's API's all available to help out (and if it's required, manually porting Bootstrap would certainly be possible). PowerUI isn't a "web browser in a box" so you've got the full availability of multiple huge libraries.

    Multi-platform: Yes, all of them! PowerUI has been built from scratch so it can "just work" (It's all C#). During these first few weeks of PowerUI 2 on full public release, there may be a few platform bumps - if that's the case then do just let me know :)
     
  27. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269


    PowerUI 2 is now available! PowerUI 2 is now available!

    Grab the package over on the PowerUI website - anybody with a valid PowerUI license can access the download at no extra cost.

    So what's new!?


    PowerSlide - dialogue/ animation sequences. Now built in.

    It's extremely common to need one animation to follow another - that's where PowerSlide steps in. You can completely avoid writing any scripting and instead just list the elements and animations.



    Loonim - Crazy GPU procedural graphics.
    Generate extremely complex realtime effects. Loonim is node based so you can define "filters" using over 100 distinct nodes.

    What else!?

    Thousands of things (Literally - thousands of things!) Massive new modules, compliant DOM, W3C event flow, awesome image effects, epic animations, a HTML5 parser, an all new CSS engine, broad usability improvements, lots of new example scenes, GIF's, vast coverage improvements, a new window system, float/clear, built in context menu's, media queries, extruded text, text effects (any of the hundreds of Loonim nodes can be joined together and then applied to text too!), so, much, more!

    The best way to experience it? Go ahead and grab the package over on the PowerUI website to check it out for yourself! Make sure you check out all of the example scenes too.

    Asset Store Users
    If you've already got a PowerUI license, just drop your invoice number into the PowerUI site and you'll be able to access it. PowerUI 2 is a free upgrade. We'll now finally be able to update the Asset store to the latest package too, as well as break PowerUI down into a variety of smaller packages to help as many as possible make use of the thousands of development hours that have been poured into this project.

    Thanks once again to everybody! It's been a wonderful journey and I think I'm now going to have a little bit of an evening :)

    With love to you all!
    Luke
     
    Last edited: Feb 15, 2017
  28. ratking

    ratking

    Joined:
    Feb 24, 2010
    Posts:
    349
    Very cool, but the website doesn't work :p
     
  29. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Great! reading about it makes me wonder about the jquery function load (eg. $( "#DivContent" ).load( "MyView.html" );

    will it work once JQuery is supported? (considering IL2CPP iOS AOT restrictons)

    and what about nested CSS (bootstrap.css is full of them)

    regards!
     
  30. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @ratking Ahh whoops - that's what two all-nighters in a row does :p I've fixed the links in the post above (should've been http://powerui.kulestar.com/me). Thanks!

    @Genom - When precompiling Javascript for iOS, PowerUI goes through all .html files in your project and checks for Javascript within them; assuming your html files were in the project, then the load function should be capable of dealing with that correctly (theoretical at the moment though of course!)

    Nested CSS: Do you mean the <style> tag? Those are fully supported already - the CSS parser operates at runtime so it can handle streamed CSS on all platforms too :)
     
  31. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestar, this leads me to more specific questions

    is it eval() allowed? (specifically for iOS) I guess this part could not get on wery well with AOT.

    For instance I'm reading about the differences between Angular 1 and 2 about JIT and AOT and it seems that Angular 2 could much more AOT friendly (http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/)

    Another question, related to user interaction with mobility: how are you translating touch events like drag and drop or zoom? for instance scrolling through a list with more elements that the size of the screen. Is this transparent for the developer or is any mechanism to be taken into account?

    thanks and regards!


    pd: just read this within the Angularjs file "
    The use of `eval()`, `Function(string)` and similar functions to dynamically create and execute
    * code from strings is forbidden." so maybe it will be dynamic code free and AOT friendly, I'll keep researching
     
    Last edited: Feb 15, 2017
  32. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom it's because of Apple's policy - in short, they don't allow dynamic code. e.g. PowerUI isn't allowed to compile Javascript at runtime, such as via an eval("function(){..}") call (or stream Javascript from the web and compile that at runtime - it must be included in the project).

    This is also why Nitro isn't the same as normal Javascript - Nitro is designed to be capable of getting precompiled to work with that policy, whereas real Javascript is much, much harder to precompile (although we have just about managed to pull it off in the newer versions of Nitro!)

    Touch input: The same as it is on the web; Each "pointer" (i.e. each finger) is essentially a mouse, so multitouch does "just work" - no particular effort needed :) The events triggered are currently always e.g. onmousedown etc too.
     
    Last edited: Feb 15, 2017
  33. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    For anybody upgrading from PowerUI 1.9 to PowerUI 2, a lot has changed so there's an upgrade guide over on the wiki - it will be getting added to with any common questions. If you're struggling with something, please do just get in touch!
     
  34. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Cool! then I cannot wait to try it : ))

    One more question (you see I have plenty of them) what about ES6? is Nitrassic going to be compatible with it? (arrow functions, classes, etc..) Maybe TypeScript? ;)

    cheers!
     
  35. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Parts of ES6 are already in Nitrassic, so yes, that's the plan! Existing Nitro is already very similar to TypeScript too :)
     
  36. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestar! how are you doing with Nitrassic, me and probably others are coming daily to look for updates : )

    Next week I'll buy the plugin and put my hands on it, I'm really looking forward to see it with Nitrassic : D
     
  37. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hello! :D So far so good on that front - the target date was the 28th and it's still looking like we'll be hitting that one :)

    We slightly skipped a step - over the last 10 days there have been a very wide range of requests, particularly around the new PowerSlide system, so we decided to entirely focus on those rather than the stripped down "basics" version. As a result, a new package was released yesterday with another PowerSlide example scene along with a broad range of new additions too.

    Following on with those requests, today is mostly an Infinitext day - Infinitext is PowerUI's text engine (it loads up openType files directly, so it can access the font metadata to e.g. kern perfectly) and there have been a few requests for 'mark-to-mark' opentype support so the plan is to get a basic version of that up today, which would interestingly be a first within Unity.

    After that, it's full steam ahead on Nitrassic (another first here too - real Javascript inside Unity on any platform!); there's only two things remaining with it at the moment, so it's looking likely that it'll be hitting PowerUI on the 28th!

    The release plan

    On/ around the 28th, Nitrassic will be added in to the Git repository alongside the existing Nitro engine, and the older Nitro compiler will begin emitting big obvious warnings whenever it's being run. Shortly afterwards, possibly the following day, old Nitro will then be entirely removed and any example scenes using it will be updated to use type="text/javascript" instead of the current type="text/nitro".

    From that point onwards, after platform testing, the big rush to support Web API's used by libraries like jQuery will begin; one very interesting aspect of how PowerUI works is that jQuery and libraries like it could potentially be used on gameobjects too (as it's all running inside Unity), so no doubt that will open up a hugely interesting area to ultimately help people make awesome games faster than ever!
     
    StevenPicard likes this.
  38. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Overall Status Update

    Hello everybody! Those of you following the Git repository would've noticed a major Web API commit yesterday - it was broadly focused on adding the API's that jQuery depends on, amongst a much broader Web API coverage update. Nitrassic (the Javascript engine) is only one thing being worked on though - Here's a rough guideline as to where various incoming API's are at as of right now, roughly in order of priority:



    As always, the above is all included with every existing PowerUI license. I certainly can't wait to see all of these new API's coming together - SVG's combined with a full CSS engine and filter support, for example. Real Javascript inside Unity. Runtime VP8/ VP9/ H.264/ MP3/ AAC playback on any platform. That, is the PowerUI way.

    Also incoming at some point: A video series!
     
  39. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Great!! thanks for the update : )) we are looking forward for it to be released

    Btw, one question, if I create an object (maybe from a class?) in javascript/nitrassic, can I see it as an object in C# side? this comes from the perspective that Nitrassic will compile it to IL, let me write an example:

    Javascript side:

    User = function(name, age)
    {
    var self = this;

    self.Name = name;
    self.Age = age;
    }

    var miUser = new User();
    miUser.Name = "Genom";
    miUser.Age = 3;

    C# side

    var miUser = NitroAPI.FindObjectSomehow<User>("miUser");
    Debug.Log(miUser.Name);

    If yes, this would open very interesting ways to make wrappers for angularjs controllers (and to many other things...)

    cheers!
     
  40. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Yep that's possible - the Nitrassic compiler generates ordinary classes i.e. you would end up with the equivalent of this in your project:

    Code (csharp):
    1.  
    2. public class User{
    3.     public string Name;
    4.     public int Age;
    5. }
    6.  
    (Nitrassic figures out the most appropriate type when possible - it would be successful with your example)

    To access it from the C# side, the current API for that is simply this:

    Code (csharp):
    1.  
    2. object miUser=aDocument["miUser"]; // It's a User object
    3.  
    That API currently points at Nitro globals, but it'll be redirected to Nitrassic ones instead.

    It's worth noting though that as your C# is compiled first, it isn't aware that the 'User' class exists so it'll just remain as an 'object'. However, it should be possible to use it directly from C# if you precompile both the Javascript and PowerUI - I've not yet tried that out though, so some experimentation is required, but I don't see why that wouldn't work :)

    The alternative is to define the class in C# - just like existing Nitro, Nitrassic also has full access to both the Unity API and your own code, so if you defined any classes in C# then they essentially act like globals available to the JS.
     
  41. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Well, this open plenty of possibilities I'm going to put my hands over it inmediatley. Btw, I've just purchased it by the asset store. How do I access to the git repo?

    regards!
     
  42. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom great thanks! You can access the Git repository (and PowerUI 2) from the My PowerUI website - you just need to drop in your asset store number and it'll give you all the information you need as well as download links too :)

    At the moment it's the older version of Nitro in there - I'm currently expecting the full Nitrassic commit to happen at some point in the next 24 hours :) (And in the meantime, do checkout the example scenes - there's a lot of functionality in there to play around with!)
     
  43. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Cool! thanks!

    in the meantime, do you know why this does not wokr with the 1.9 version?

    <body>

    <div>

    Hola<br />
    <input id="pepe" type="button" onclick="Start()" value="Start" /><br />
    <input id="lolo" type="button" onclick="change('llamando a lolo')" value="llamar a lolo a toda costa" />
    </div>

    <script type="text/nitro">
    function change(name:string)
    {
    document.getElementById('lolo').value = name;
    }
    change('llamando a lolo');

    </script>
    </body>
     
  44. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    As the Nitro compiler isn't allowed to run on iOS or most consoles, you can't use script inside attributes (this applies to version 2 too) - that would require the compiler to be present. So this part:

    onclick="change('llamando a lolo')" (requires the compiler)

    Should be like this:

    onclick="change" myname="llamando a lolo"

    To refer to a Nitro method. Alternatively, hook it up via addEventListener or the anElement.onclick method. Usage in Nitro is then like this:

    function change(e:MouseEvent)
    {
    document.getElementById('lolo').value = e.target["myname"]; // or the standard e.target.getAttribute("myname")
    }
     
  45. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    thanks Kulestar, I'm testing pure css now, just with a link tag to Bootstrap (no js) and it is making it crash in the editor, I could trace it somehow to the Before selector:

    <html>
    <head>
    <title>Greetings</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style type='text/css'>

    body
    {
    background-color:black;
    }

    .PanelCenter
    {
    width: 500px;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    }

    </style>

    </head>

    <body>

    <div class="panel panel-default PanelCenter">
    <div class="panel-heading">Greetings area</div>
    <div class="panel-body">
    <button class="btn btn-primary btn-block"> labas!</button><br />
    <button class="btn btn-warning btn-block"> hello!</button><br />
    <button class="btn btn-success btn-block"> hola!</button><br />
    </div>
    </div>
    </body>
    </html>

    I've tried to put all the bootrap css within the style tag, just in case it is the link to an internet resources failing but it seems to be the same error. Could you please have a look to see if I am doing something wrong?

    Another thing, downloding the package for the 2.0.6 it seems to be couple of simple errors in the file Symbols.cs:
    - couple of directives should be #elif instead #elseif
    - the UnityEditor namespace is missing in one the lines

    About the git, I don't know why but I see it empty with no access to current code, is it a question on permissions or maybe you are just touching something?

    regards!
     
  46. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom - Symbols.cs was updated about a week ago (elseif works on Windows but not Mac) so that one's correct in the repo; That sounds like a permissions thing - I take it you clicked on the "grant access" button inside "My PowerUI"? As for bootstrap there was a crash issue fixed just yesterday so it might be related to that - I'll double check it anyway :)
     
  47. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    I see "You don't have access to any projects right now" as soon as I can get the code I'll check it as well : )
     
  48. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
  49. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    yes sorry '^_^
     
  50. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom The bootstrap ::before issue has also just been fixed and committed too - it was a known minor causing it :)