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. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    thnaks! now I realize there are several repos, I guess I just need the files from the PowerUI and the Engine to replace my local ones, or do I need any other?

    cheers!
     
  2. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    The main repository is PowerUI/UnityProject - pull that one and make sure it's a recursive pull (or do a submodule update) to pull all of those sub-modules - open up that project to see if your pull worked correctly :) If it did then you can copy over the PowerUI folder into your other project(s), typically after checking the commit messages first in case there's anything you need to be aware of when updating to the latest version :)
     
  3. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi, I've just cloned it and tested it. Now I find couple of differences between my page in Chrome and running on Unity

    as you can see, the margin on the header, and the degradation in colors but at as well the borders and the on hover effect or the text color, here you are a picture and the code:


    <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
    {
    max-width: 600px;
    max-height: 360px;
    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>


    cheers!
     

    Attached Files:

  4. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Also, when trying to compile with webgl the scene 1. Basics it gives the next error:

    Failed running C:\Program Files\Unity\Editor\Data\Tools/UnusedByteCodeStripper2/UnusedBytecodeStripper2.exe --api NET_2_0_Subset -out

    any idea why?
     
  5. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom PowerUI isn't a full browser - it's being built from scratch in order to make high performance UI's on any platform (so in short, there's differences, but it's generally within range of just some touching up). It's also worth noting that web technologies naturally vary from engine to engine anyway (I popped open your example in Chrome here and there's no gradients there either :) ).

    The WebGL error: You need to remove the Nitro compiler :) Check out the getting started guides and this one on IL2CPP.
     
  6. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestar, thanks for your help, right now I'm just testing to get general impressions of the current state. Not needing a full browser, I need to know that the css we write behaves in a compliant way and when a strange behaviour is

    a) because of a bug in the interpreter/compiler (to help indentifying it and report it)
    or b) a lack of adjustment in our css (eg. the special instructions for web-kit, ie, etc..)

    In this last sense, is there any kind of instruction in css like "background: -webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036));" but specific for powerui? if yes it would help us to customize our current css and keep them compatible with browsers. kind of "background: -powerui-gradient(linear, left bottom, left top, from(#5AE), to(#036));"

    Please don't consider my comments as complains : ) the work you've done is impressive, I'd like to help you as much as I can to identify possible bugs, specially those around the most used framworks (as bootstrap and angularsjs for instance) which in the end will make more attractive the asset to the developers.

    Btw thanks about the webgl comment, I'll wait till you replace it with Nitrassic, no hurry, I just could not help it to wait and start trying powerui ^_^

    cheers!
     
  7. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom No problem and thanks very much! We're constantly trying to push PowerUI's coverage and compliance so it supports as much of the web as possible - any help with that is greatly appreciated :)

    Vendor Prefixes
    PowerUI leans towards using the -moz- prefix (so content already on the web "just works" whenever possible). Spark is the name of PowerUI's web engine, so any custom functionality is implemented with the -spark- prefix (CSS -spark-any() for example, and document.sparkWindows - the window API).

    In that specific case though, PowerUI supports the standard version - specifically linear-gradient(to top,...).

    The WebGL thing: That would apply to Nitrassic too (it just involves ticking a box to make PowerUI automatically strip it for you :) ). WebGL is also one of the platforms that doesn't allow dynamic code at the moment (like iOS, it doesn't support the Reflection.Emit API) so that's why the error shows up - we just have to wait for Unity on that one.
     
  8. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestar! how are you doing with Nitrassic? I hope well : )

    We are in the meantime playing with the css as I told you, and the very first question that it comes to us is the body behavior:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style type='text/css'>

    body
    {
    background-color: black;
    }

    </style>

    This is not working (the screen remains white in Unity), but if I comment the reference to bootstrap then yes, is this possibly related to the order of the queue for css override? I guess that this could be affecting many other weird behaviors.

    cheers!
     
  9. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hello! @Genom: Quick update on Nitrassic - we recently started going over various JS libraries adding support for the Web API's they use - but it also turned out that some use parts of JS that we weren't intending on supporting until later for performance reasons (e.g. the delete keyword is used by jQuery). So, we decided to add in those parts of JS to try and get jQuery and similar libraries up and running right away for Nitrassic. That requires a lot more testing though, so it adds a few days to the release process (but I'm rather certain it'll be worth it! :) ).

    Remote Stylesheets in PowerUI
    In short, PowerUI is designed to use local stylesheets. So, the quick priority fix there is to just include the bootstrap CSS in your project. Drop in the CSS file, and rename it to e.g. .css.bytes (because Unity doesn't recognise .css as a text file type, and just entirely ignores them). The sprite animation example scene uses a separate CSS file if you'd like a specific example.

    Whilst it does load remote stylesheets, it assumes that all your stylesheets load in their declared order. In this case, they're not, so presumably there's a body{background:white} declaration or similar in bootstrap and as it's loading after your one, it "wins".
     
    Last edited: Mar 1, 2017
  10. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestar, as more compatible more fun : D

    Regarding the libraries and web apis, if I didn't understand it wrongly, it means that you are adapting nitrassic to understand the libraries (for instance. jquery.js or moment.js) not that you are creating "compatible versions of them" am I right?

    Btw you were right about the body, it is because of the loading order, once we set the bootstrap.css code embebed the body color is the right one. I attach you the file, you will notice that nows it loads almost pefect, just something with the "after" maybe wrong after the cursor hover. You can see as well a misterious padding (that we are correcting with -25 margint-top) and the text align (should be center vertically, I think you were mentioning something about text alingment somewhere but I don't remember where it was).

    One another question, could you please tell us how to locate and call the css and javascripts outside the html? maybe we need to locate them into a resources folder?

    thanks and good work!! :))

    pf: just changed the extenstion, because the forum does not allow html files
     

    Attached Files:

  11. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Yep that's correct - we're extending PowerUI and Nitrassic to support JS libraries so they "just work" :)

    The mysterious padding is most likely because PowerUI does a quick version of margin collapsing. That's also for performance reasons - A compliant browser checks the entire DOM for collapsible margins - PowerUI just checks siblings. Our testing suggested that collapsing only siblings covered the majority of cases (and anything is easily worked around), so as we focus mostly on performance, that seemed to be the most suitable option overall.

    Embedding CSS/JS as separate files in your project: That wiki article also covers linking them - In short, yep, they need to be in any folder called Resources, and you use the resources:// protocol whenever you need to (It's the default if your HTML comes from your project too)
     
  12. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Thanks! so I guess that just modifying the margin-top will make the work (we are going to start preparing a css extender for bootstrap and other ones)

    About the button after the hover, do you have any clue? should we try to find a work around or it is an unexpected behaviour of the css engine?

    cheers!
     
  13. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Yep! In the future we'll most likely support the full margin collapsing spec (and either make it optional or heavily optimize it), but up until that point that's the easiest route. Ah that hover is interesting (where it's going black the second time it's being hovered over) - Looks like a bug so I'll dive into that tomorrow and see what's going on there :)
     
  14. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    thanks Kulestar! I've seen you uploaded a new version to MyPowerUI, I'll test to see it if this working now. Btw, how is going with Nitrassic? I am expecting it like I was waiting to see Rogue One, with pop corns and extra dosis of chocolate and coke : D
     
    Last edited: Mar 4, 2017
  15. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Haha, it's exactly like that feeling - or Christmas eve! It's been doing some really awesome things (it gained Promise earlier, and it's now being added in to some of the existing API's too) - we've been mostly trying to go through as many of the smaller requests as possible at the moment.

    People have been asking for lots of awesome things so there's currently 4 new example scenes in the works including a rather pretty 'shattering' one, bringing the total up to 46 examples built in :)
     
  16. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Well, promises are very cool thing! in fact they are fundamental for Angularjs, so they are more than welcome : )

    Regarding the hover I've just tested and it seems not to be working yet.

    About compatibility, I wonder if at some point you could have some table like this one https://kangax.github.io/compat-table/es6/ (where PowerUI would be let's say a column more) but for all features (html, css, js) so it can help us to see where we are always and the priority of implementations (or maybe you already have it)

    regards!
     
  17. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestar! how are you doing with the project? we are looking forward to hear news about it : )

    cheers!

    pd: I've just updated the repo from git, hey dude, you've done a lot of work! : D
     
    Last edited: Mar 8, 2017
  18. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom I agree - promise can make some tricky things easy, and now they're available in PowerUI too (along with an example scene which uses them!)

    Compatibility table: Nitrassic is a heavily optimized version of Jurassic and we're occasionally copying over its ongoing ES6 efforts - there's a compatibility table on the homepage of that repository. Once Nitrassic stabilizes then I'll drop a compatibility table onto the wiki :) As for CSS/ HTML, PowerUI is designed to be extendible so the best way to see which ones you've got available is to check these two editor windows:

    Window > PowerUI > Supported Tags
    All HTML/ SVG/ MathML/ Language tags that PowerUI is recognising
    .

    Window > PowerUI > Supported CSS
    All CSS properties that PowerUI is recognising.

    There's been lots of changes over the last few days as its aligning for both SVG and the JS engine - SVG is 'winning' at the moment as the JS delete keyword is causing complications for IL2CPP; we've been considering editing jQuery to remove its use of delete as that appears to now be the only thing blocking jQuery from running - it would most likely make jQuery do unexpected things however!

    As an extra note, list-style-type is now supported too! PowerUI's support has gone considerably further than Chrome/ Edge/ Safari on this - it supports almost all of the counter styles level 3 specification, so you can define custom list styles too - it comes with just short of 50 list styles built in :)
     
    StevenPicard likes this.
  19. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi Kulestar, thanks for the info! yes I guess it must be a titanic effort, but the potential is huge.

    About the delete, it can be a big problem for a lot of libraries and frameworks, for instance Angularjs is full of them (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js - you can count 55 calls, though some of them are comments). In the other hand it seems to be mostly used for memory optimization, kind of dispose for the GC.

    In this sense, I think it should be better for the compiler (nitrassic) to ignore it somehow than to remove it manually from jquery code or other js libraries: having "versioned" libraries for each specific file (and keeping them update) would kill important parts of the incentives of powerui.

    Maybe you can share your and your team's thoughts about this so the community can try to help.

    Anyway, do you have in mind a possible date for Nitrassic to be added to the repo? And about the problem with the hover it is still there, despite the changes that were uploaded, just for information.

    regards!
     
  20. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom sorry for the delay in this reply! I'm actually in the process of moving house so the last week has been a rather sizeable operation of going through everything and getting rid of as much unwanted stuff as possible (particularly unwanted hideous stuff)! This is also why the repository has been moving a little slower over the past week, although some of the changes did have rather dramatic effects on a variety of websites.

    I have a nice gap today so I'm planning on going over Nitrassic and hopefully get a first version up onto the repository today/ tomorrow! Following your suggestion it will just be ignoring delete for now just to get something out there for you all to get started with. There is already a version of Nitrassic on GitHub, but it has come a long way since that one!

    As for hover: The cause has since been isolated (it's related to an interesting use of inherit) so a full fix should be on the way soon :)

    On a separate note, we're in the WebAssembly working group - the WebAssembly MVP recently stabilized and went 'live' in Firefox behind a flag. During the development process, we were also experimenting with PowerUI running WebAssembly - something which is ultimately rather straight forward (and a very experimental version only really took a few hours to make), so we're planning on adding WebAssembly support in the near future too!
     
    Last edited: Mar 14, 2017
    StevenPicard likes this.
  21. papiot

    papiot

    Joined:
    Jan 27, 2015
    Posts:
    10
    Hello!

    Has anyone tried this on Hololens?
     
  22. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hey @papiot !

    That's now becoming a common question - Yes they certainly have :) PowerUI now also has built in features which help out with AR/VR too, used together with WorldUI's (UI's in gameworld space).
     
    StevenPicard likes this.
  23. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    No prob man! I understand perfectly the developer's hectic life : )

    About the hover, I already tested it after you submited the last change and now it is working apparently fine. Once you have uploaded a permanent solution I'll retest it.

    About the Webassembly, I don't understand exactly that point, as far as I know just making powerui compatible webgl should let Unity (5.6) to compile to IL2CPP and then pack it to WASM. what do you mean with PowerUI running webasembly?

    About, nitrassic, well I cannot wait until have it in my hands : ) do you think you'll submit it today?

    cheers!

    pd: about AR/VR, this is very interesting topic, as soon as I can have one htc or oculus I test it as well
     
  24. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Hover: That's interesting - the inherit case is still around so I'll still consider it as being open until that's resolved :)

    WebAssembly: Ah I can see how that's confusing! (Webception!) PowerUI already does "just work" on the WebGL platform - this is WebAssembly running inside Unity. E.g: PowerUI being able to load .wasm files on mobile/ console/ desktop etc.

    (At some point, PowerUI would eventually support enough of the web specifications to be able to 'self host'/ actually perform 'webception' - i.e. drop a WebGL built Unity project into your Unity project, and it "just works" - this isn't exactly the goal here, but it would be very interesting anyway!)

    Nitrassic: Yes - I'm planning on getting it up in the next 12 hours or so - it really just depends how many emails etc I get up until then!
     
    StevenPicard likes this.
  25. papiot

    papiot

    Joined:
    Jan 27, 2015
    Posts:
    10
    @KulestarUK

    Alright, I'll buy it and try it out on the Hololens and let everyone know how it does. The goal is to be able to see a simple website inside the hololens :)
     
  26. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
  27. papiot

    papiot

    Joined:
    Jan 27, 2015
    Posts:
    10
    @KulestarUK

    Yep, I get that. I want to use it as UI builder, but I want the UI to be loaded at runtime, from a simple HTML that comes from a server.
     
  28. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @papiot Perfect ok - that's exactly the kind of thing it's built to do - please do feel free to ask if you have any questions!
     
  29. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Nitrassic didn't quite make it today unfortunately! I've gone as far as I could (it's a little after 1am and I'm up at 6 tomorrow :p) - it's made some great progress, but it's been a busy day so it's not quite stable enough yet (and I've not been able to chuck it at the testers) so I'll probably end up working on it all night tomorrow to get it through as soon as possible! :)
     
  30. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Take it easy, programming without proper sleeping is never a good idea : D

    Take your time, we are expecting a breakthru : )

    thanks!
     
  31. papiot

    papiot

    Joined:
    Jan 27, 2015
    Posts:
    10
    Hi Everyone, just wanted to say that this assets works on Hololens! Great job @KulestarUK
     
    KulestarUK likes this.
  32. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    good news that it works with Hololens @papiot : )

    Hi @KulestarUK , how is it going with the tests? any good feedback?

    regards!
     
  33. HittmanA

    HittmanA

    Joined:
    Jul 27, 2016
    Posts:
    45
    Hey just curious if anyone knows how well this works on Unity 5. Will it work? Thanks in advance!
     
  34. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi @KulestarUK, while waiting you to give feedback, we have been doing more tests with css and animations (you can see below the code) and we see the next issues:

    - The position attribute is not working (we change the value and the element is not affected)
    - Border-radius does not work neither with pixels nor %
    - animation does not work properly (for instance the speed is much slower in chrome than in Unity)
    - The ball (<div class="ball"></div>) is not centered in its parent box (<div class="ball-holder">) and the ball holder does not expand to size its parent "container-ball"

    - question [not an issue]: is there any way to explore in runtime the dom and css like in a Browser or in VS? if we could debug it we could help you to locate errors faster

    Still my impression is that there are couple of small but core errors preventing it work properly.
    regards

    <html>
    <head>
    <style type='text/css'>

    .container-ball
    {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: 100px auto;
    }
    .ball-holder
    {
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    /*left: 17px;
    top: 0;*/
    }

    .ball
    {
    /*position: absolute;*/
    /*top: -11px;
    left: 0;*/
    margin: 0 50%;
    width: 16px;
    height: 16px;
    border-radius: 25px;
    background: red;
    }
    .ball-holder {animation: loadingE 20.3s linear infinite;}

    @keyframes loadingE
    {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }
    </style>
    </head>

    <body>
    <div class="container-ball">
    <div class="ball-holder">
    <div class="ball"></div>
    </div>
    </div>
    </body>
    </html>
     
  35. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hello everybody - it's been a super busy week with lots of development going on! (Apologies for the delay - I also didn't get any notifications about the above messages :( ). A new package has just been released on My PowerUI (2.0.700) with another introduction to make!



    PowerTools is currently an early proof-of-concept preview with an open request for any additional design goals. It's intended to become a set of tools written in HTML which are used to e.g. make a PowerSlide timeline or your localisation files or credit rolls etc, potentially from any device with a browser too.

    @Genom A range of other things have been getting in the way of the Javascript engine at the moment - there was a CSS parser issue resolved recently which would've caused some issues if a UTF8 byte order mark was present, so it was most likely that which was causing issues with your position/ border-radius (as both of those are used in virtually all of the example scenes).

    Exploring the DOM/ CSS: Yep - there's a few inspectors in Window > PowerUI which can e.g. view the loaded DOM and styles. We're experimenting with Firebug as part of PowerTools too:



    Firebug does not currently bind to PowerUI documents - we're just running a preview to see how well this approach is supported (feedback would be greatly appreciated!). If it's all clear then we can go ahead and start linking up Firebug to PowerUI.

    @HittmanA Yes it fully supports Unity 5 :)

    As always thanks for everyone's support and ideas - PowerUI is developing faster than ever!
     
    StevenPicard likes this.
  36. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi @KulestarUK! great to hear from you, we have downloaded the new changes and running our tests.

    Comments:

    - this about Firebug would be awesome, we are trying to use it (downloaded Firebug with Firefox, and opening the Firebug window in Unity->windows->powertools, but we cannot see anything, is there any thing we have to do else to be able to use it?

    - during animation, border-radius (and possibly other attributes) stop working, it seems the rendering during the animation ignores it, for instance:

    ball-holder {
    animation: loadingE 20.3s linear infinite;
    }

    @keyframes loadingE {
    0% {
    transform: rotate(0deg);
    }

    100% {
    transform: rotate(360deg);
    }
    }

    - About javascript, I think the first priority should be making standard CSS stable, although if we could have a preview of Nitrassic we could help trying it.


    regards!
     
  37. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Firebug - great that's interesting; we're looking out for cases where it doesn't show - do you get any console messages at all and do you see the "PowerTools > About" window? :)

    border-radius during animation: That @keyframes works fine for me; there's an example scene which animates border-radius ("Css Animations" I believe) so you could possibly try that just as a safety check.

    JS: I entirely agree - our top priority is making PowerUI easy to use and, by extension, that means making it as compliant as possible. Hmm, preview wise that sounds like a good idea; it could possibly be added into the repository but as e.g. " type='text/javascript-x' " and worked on in public view (the version on Github is pretty outdated now). Unlike SVG, this hasn't been done just yet because it's primarily Nitro that causes some platform complications (and in the future, it'll be Nitrassic taking that spot instead) so we're being as careful as possible with it so we don't accidentally block builds with dead experimental code.
     
  38. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi @KulestarUK we can see the About (properly with the html) and Firebug window (empty, just a quick initial animation).

    I was having a look at the Firebug class but it has very little code, the only thing I could see is that the class RemoteDebug points to the url DebugAddress="uidebug.kulestar.com". But I cannot find any interaction with the Firebug pluging.

    I have a css guy testing different features (for instance he found something about the max-height and width causing problems). Even if your examples work I think that very standard css should work without specific customization, I can pack several tests in html and send them to you.

    About adding preview type='text/javascript-x', if it does not prevent builds to work it would be fantastic to have it.

    regards!
     
  39. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom The class called RemoteDebug isn't related to Firebug (it does something very different); the actual Firebug files are here:

    PowerUI/PowerTools/Editor/Screens/Firebug/

    If the screen is empty and the about screen is working then that suggests it's a Firebug Lite Javascript error which would be a little tricky to debug. You could try opening up firebug-lite-debug.rjs and surround it in a try/catch statement:

    try{

    // file contents

    }catch(err){
    var vDebug = "";
    for (var prop in err)
    {
    vDebug += "property: "+ prop+ " value: ["+ err[prop]+ "]<br>";
    }
    vDebug += "toString(): " + " value: [" + err.toString() + "]";
    document.body.innerHTML=vDebug;
    }

    that should hopefully print out a message stating what the issue is :) (As a side note, PowerTools works by using the private web browser embedded in the Unity editor for the asset store window; as it's private there's not much documentation about it and we're not sure how well the technique is supported!).

    Edit: The above try/catch is now built in so hopefully we'll be able to get more useful information to get Firebug up for everyone as soon as possible :)
     
    Last edited: Mar 24, 2017
  40. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi @Kulestar, we have just realized that the apostrofes in the comments are preventing the javascript to be executed, it may be caused for my language settings for instance

    // We dont need it anyway once it is outside the (popup) viewport, so we're

    the we'er is extending the comment to the rest of the code. We had to remove all the ' wihting the comments. Anyway, we can not make it work, and the try catch is to much general (the error must be within the funcitions) because it does not fail.

    Other topic, about some css, you can see PowerUI css (red) diferences with standard one (blue):

    PowerUI examples
    .title
    {
    color:white;
    font-size:4em;
    -webkit-text-stroke:3px rgb(51,193,190);
    text-shadow:3 3 rgb(51,193,190,0.3);
    -spark-text-background:linear-gradient(to bottom,white 0%,rgb(51,193,190) 100%);
    /* text-transform:uppercase; */

    }
    .aligner{
    height:100%;
    vertical-align:table-middle;
    text-align:center;
    }

    Code to do the same in css standard working with Chrome and Firefox
    .title
    {
    font-size: 8em;
    background: -webkit-linear-gradient(top, #eee 50%, #33c1be );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 3px 3px rgba(51,193,190,0.3);
    -webkit-text-stroke: 1px rgba(255,255,255,0.6);
    }
    .aligner {
    height: 100%;
    /*vertical-align: table-middle;*/
    text-align: center;
    margin-top: 15%;
    }

    regards!
     
  41. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom Apostrophies in comments wouldn't affect it (That Javascript is being run by Webkit and webkit is fine with things like that) - that sounds more like your code highlighting in whichever editor you opened the js file in :)

    Another option would be to open it in your browser; first open up PowerTools > About (that makes sure it's running) then open this in your browser:

    PowerUI/PowerTools/Editor/index.html#editor=1&screen=Firebug

    As for those points about CSS - keep in mind that PowerUI is a UI framework. It's much less strict about how you use it as, unlike a web browser, we don't have to force the author to write strictly conformant CSS. An authors CSS does not need to run on multiple web engines - there's only one web engine in use by PowerUI across all Unity platforms. This high level of consistency is more important for UI's than it is for a website.

    Or in other words, a CSS engine is supposed to silently ignore something that isn't conformant. That's a usability issue that exists because of requirements that apply to web browsers but not to UI frameworks. So, PowerUI can avoid the usability issue in cases when it understands the intention of the CSS anyway.

    - unitless numbers like '3' are acceptable wherever px is.
    - rgb and rgba are interchangeable.

    - table-middle however is a PowerUI vertical-align value. Vertical alignment is extremely common in UI's (but much less so on the web), so it's been added to give table like vertical alignment without all the overhead of a table - It's introduced in the performance getting started guide. It's generally better to use that in PowerUI than something like margin-top:15% (as the 15% is a 'magic number') or creating a whole table just for vertical alignment.
     
    Last edited: Mar 24, 2017
  42. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Ok, here you what I can see by opening it manually

    upload_2017-3-24_18-24-44.png

    once I inspect
    upload_2017-3-24_18-25-17.png

    but I cannot see it loading anything

    In Unity
    upload_2017-3-24_18-26-16.png
    upload_2017-3-24_18-26-36.png
     
  43. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom after a long search I discovered the single line which was causing Firebug to not appear for some Unity versions - it's hopefully just a case of pulling the latest commits and it should at least appear :) It turns out that some Unity versions use Gecko (Firefox) and some use Webkit (Safari) for the private web client built in to the editor (and used by the asset store window); neither produce line numbers so debugging the debugger it is very challenging but we seem to be making progress!
     
  44. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    wow @KulestarUK! must have been a hard work, many thanks! the screen is loading :)

    Now, I understand it just visualize the elements but it does not let to selected and see/modify their css attributes. So, what will be the next steps? do you have in plan to have something functional working soon or will it take some time?

    Btw, when we use the old Dom inspector there "#text" nodes everywhere and we are wondering what they are, the css guy suggests the possibility that those nodes are creating not empty space displacing down the next elements so we have to have negative margin-top everywhere to compensate, do you think he's right or it has nothing to do?

    About nitrassic, any further new?

    many thanks for your effort and regards! :)

    upload_2017-3-25_9-49-6.png
     
  45. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom After a long diversion into Loonim and a range of other changes (making existing functionality work better will always be a top priority), Nitrassic is the top focus again - it made great progress yesterday and will be going up onto the repository shortly provided nothing else gets in the way! :)

    Nitrassic - the important parts

    • It's a 'real' JavaScript engine.
    • It's designed to be an AOT javascript engine - that means it focuses on compiling the JavaScript for optimal runtime speed. Due to IL2CPP, that also has broad implications for the web too, as it can essentially compile JavaScript to highly optimized WebAssembly.
    • It's a merger of our Nitro engine and one called 'Jurassic'.
    • Jurassic isn't fast enough but had full coverage. Nitro is very fast but didn't have the coverage. Nitrassic takes the speed of Nitro and the coverage of Jurassic.
    • In many examples, we've clocked it at going over 60x faster than Jurassic!
    • Nitrassic had to ignore the slowest features of the language for a speed boost like that. We're gradually figuring out ways to add support for them too.
    • It probably won't support major libraries when it initially arrives on the repository - we're still just treading carefully with it at the moment.
    • We have seen major libraries like jQuery partially work, so we know that supporting major libraries is both very plausible and will be available in the near future!
    • During this initial experimental phase, it will be available under type='text/javascript-x'
    • Following the rest of PowerUI's simple namespaces, it's in a namespace called 'JavaScript'.
    • We've been testing to make sure it doesn't block builds. If you get build errors from Nitrassic files when it's in the repository, please tell us!
    • The Nitro Settings window does not apply to Nitrassic. It figures those things out for itself instead.
    • Nitrassic continues the 'it just works' approach, rather than needing to manually bind your classes to the JS engine (as is the case with Jurassic).

    '#text' nodes are the TextNode instances in your DOM - all newlines and whitespaces are preserved in the DOM (so things like the <pre> element work). Your indentation often generates those additional text nodes - the same is true on the web too, just a browser hides those isElementContentWhitespace nodes from you.

    As for Loonim, image effects are now working across more platforms than before - pull the latest commits and give -spark-filter a try!


    Fun with -spark-filter. Loonim, the underlying graphics engine, has over 100 effects we could apply - if you have any ideas for a function to make available in CSS, like -spark-filter: myFunction(100%), please do say!


    Edit: Nitrassic update! I spent much of the night trying to resolve the recursion type tracking problem. As Javascript doesn't declare return types Nitrassic automatically figures them out, however, in a recursive function, the functions return value can depend on its own return value - this type cycle results in a lot of complex edge cases. I'll be on Nitrassic all day tomorrow (and however long it takes to get it stable!)
     
    Last edited: Mar 30, 2017
  46. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Nice to hear you almost there @KulestarUK : )

    in the meantime I forward to you a couple of questions from the css team:

    1) have a look of the next picture, you'll see that the scroll is being affected by the padding (while it should stay close to the right side of its box)

    - you can see that the box is getting over the top one (left top corner) but I think maybe we can control that somehow
    upload_2017-3-30_19-6-25.png


    2) About the scrollbar itself, do you know how can we control it's apparence? (weight, color, arrows icons etc...)


    Also, after all the effort you are putting it Looming I trying to figure out how can we use it (we normally deal with Line Of Business Applications or recently games) is it for something like instagram pictures or similar? If you can provide some use cases a part of the solar filter it would help a lot .

    regards and cheer up! : )
     
    Last edited: Mar 30, 2017
  47. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Genom 1) As a quick guess it looks like the top overlapping is related to your top margin (I wouldn't know without seeing more of your CSS though). Scrollbars are known to overlap their contents - that's the subject of a long running debate; in short, most of the time scrolling content is padded anyway (so in general the overlapping doesn't matter) and correctly updating the width is very taxing on the reflow process - it has to "stall" the reflow and do it again. Reflow is already the most taxing thing PowerUI does, so anything that makes it run twice is too costly for our liking. As with many things we could add a flag for standard double reflow behaviour, but the quick fix is to just add some right padding - Mobile CPU's will thank you for it! :)

    2) Styling scrollbars: This is designed to be really straight forward and there's a wiki article on the topic :) You can also just edit the built in style sheet which is where the appearance originates from.

    Loonim: The best way to describe it is that it's like FilterForge, only it renders at realtime speeds using the GPU at runtime. It can create instagram-like filters or entirely procedural textures (it's the underlying rendering engine used by the experimental SVG system too). So, broadly, it's a very powerful rendering library. There's 2 Loonim example scenes included with one acting like an image filter and the other a relatively simple procedural texture :)
     
  48. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86
    Hi @KulestarUK thanks for the information, we are trying hard all the css features. How are you doing with the type reflection? I gues it has to be complicated, I am working with rosslyn to detect types in a C# code and I can imagine how hard would it be in javascript.

    Btw, I saw this in the powerui wiki (http://powerui.kulestar.com/wiki/index.php?title=Safely_using_CSS/JS_libraries)

    "Safely using CSS/JS libraries
    PowerUI is now at the point where it can make use of a range of existing libraries."

    Does it mean you already uploaded nitrassic? :DD

    cheers!
     
  49. jprocha101

    jprocha101

    Joined:
    Apr 8, 2015
    Posts:
    134
    @KulestarUK

    Hi, this asset looks amazing.

    Does it support ruby tags? Our requirement is to load a file from S3 that contains a div element that will be displayed to the user. The div will be a static height and width and will contain mostly ruby tags. Possibly some English text as well.

    Once loaded we will store the file on device for offline viewing.

    Thanks!
     
  50. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    86