Search Unity

PowerUI - Powerful HTML/CSS UI Framework

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

  1. dacanzmelb

    dacanzmelb

    Joined:
    Nov 1, 2016
    Posts:
    1
    Hi, I am trying to render a webpage on the HoloLens using PowerUI but when I try build the project using Windows Store D3D and UWP 10 I receive these errors (20 in total). I haven't changed any code, I just downloaded PowerUI into my project and set it up for HoloLens Build. I'll be testing on an Enterprise and Consumer version of HoloLens. Any tips on resolving these?

    e.g. [Assets\PowerUI\Source\JavaScript\NitroV1\Engine\Compiler\BreakPoint.cs(26,10): error CS0246: The type or namespace name 'Label' could not be found (are you missing a using directive or an assembly reference?)]

    [Assets\PowerUI\Source\Decompressors\Zlib\Source\ZlibBaseStream.cs(173,30): error CS0115: 'ZlibBaseStream.Close()': no suitable method found to override]

    [Assets\PowerUI\Source\JavaScript\NitroV1\Engine\Compiler\CompiledMethod.cs(44,10): error CS0246: The type or namespace name 'MethodBuilder' could not be found (are you missing a using directive or an assembly reference?)]

    [Assets\PowerUI\Source\JavaScript\NitroV1\Engine\Compiler\CompiledMethod.cs(48,10): error CS0246: The type or namespace name 'LocalBuilder' could not be found (are you missing a using directive or an assembly reference?)]

    [Assets\PowerUI\Source\JavaScript\NitroV1\Engine\Compiler\CompiledClass.cs(37,10): error CS0246: The type or namespace name 'TypeBuilder' could not be found (are you missing a using directive or an assembly reference?)]

    [Assets\PowerUI\Source\JavaScript\NitroV1\Engine\Compiler\NitroCode.cs(65,10): error CS0246: The type or namespace name 'ModuleBuilder' could not be found (are you missing a using directive or an assembly reference?)]

    [Assets\PowerUI\Source\JavaScript\NitroV1\Engine\Compiler\NitroIL.cs(35,10): error CS0246: The type or namespace name 'ILGenerator' could not be found (are you missing a using directive or an assembly reference?)]

    [Assets\PowerUI\Source\JavaScript\NitroV1\Engine\Compiler\Variables\ParameterVariable.cs(28,10): error CS0246: The type or namespace name 'ParameterBuilder' could not be found (are you missing a using directive or an assembly reference?)]
     
  2. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hello everybody! Sorry for the delay here - I didn't get any email notifications and I've also been busy working on WebAssembly support for a few weeks (WebAssembly files run by Unity rather than the other way around) which is now available on the repository - check it out below!

    @jprocha101 - It currently recognizes ruby but it doesn't do any special formatting with those tags just yet - ruby is also something I've been interested in looking further into; if you'd like you're more than welcome to give it a free try and I'd be happy to look into extending ruby support :)

    @Genom - Yep - Nitrassic (the new Javascript engine) is now available! The WebAssembly engine was causing some complex changes but it's now all stabilizing and has been platform checked so I can now finally drop this here!



    This first version is experimental and it's under type='text/javascript-x'. We don't support the core Object API's at the moment but work will be continuing to make that (and the libraries like jQuery that depend on them) a reality. If anybody is interested in what makes Nitrassic so unique, I'll happily write a wiki article about it!



    If you haven't played with WebAssembly yet, you really should - it's awesome and it's going to make a big impact on the web over the next few years. We now have an experimental WebAssembly runtime in PowerUI too!

    What's special about a WebAssembly runtime?
    In short, WebAssembly is a brand new method of executing code on the web. It works alongside Javascript (thus the release together with the new Javascript engine) to bring you awesome performance. One of the most important things about WebAssembly is it's a great way to compile native code for the web. So, as the WebAssembly engine works for every Unity platform, that means you now have a way to compile native code once and it can just work across all targets.

    So, to give you an idea of what that can be used for, we've been experimenting with video codecs which will hopefully bring H.264 (potentially also H.265), VP8/VP9/VP10 and Daala video playback to all Unity platforms at near native speeds. It won't be hardware accelerated on the platforms that have hardware implementations of these codecs, but we've been trying a bunch of different routes to obtain that for a while now and with this route we can now finally leverage a lot of existing work without needing to drop in any platform specific native code.

    Stay tuned for more on those video codecs in the coming weeks!

    @dacanzmelb You'll need to disable the Nitro runtime by going to Window > PowerUI > Nitro Settings and then tick the bottom box and also grab the latest files from the repository as there was a fix which affected Hololens last week :)
     
    Last edited: Apr 21, 2017
    jprocha101 likes this.
  3. jprocha101

    jprocha101

    Joined:
    Apr 8, 2015
    Posts:
    134
    @KulestarUK I would love to try it out and see if it meets my other needs. Then we could work on getting ruby support up and running. I have sent a request via your support form.

    Thanks!
    Pablo R.
     
    KulestarUK likes this.
  4. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    71
    Hi @KulestarUK, nice to hear from you, I've been trying to create a test with nitrassic, just a simple like that, but could not make it work, could you please create a scene as example that helps to figure out how to use it?

    thanks!!

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title></title>

    <style>
    body
    {
    background-color:blueviolet;
    }
    </style>

    <script type="text/javascript-x">

    function SayHello()
    {
    document.getElementById("bt").innerHTML = "hola!";
    alert("hola");
    Console.log("hola");
    }

    </script>

    </head>

    <body>
    <div>

    <button id="bt" onclick="SayHello();">Say Hello</button>

    </div>
    </body>
    </html>
     
  5. noanoa

    noanoa

    Joined:
    Apr 17, 2014
    Posts:
    220
    Is there any plan to pack the scripts into DLL? "over 500 source scripts", this is actually con for me as it would slow down compiling and various unity operations. It's kind of an asset I'd love to use for every project otherwise.
     
  6. Pode

    Pode

    Joined:
    Nov 13, 2013
    Posts:
    110
    @KulestarUK : what is the best way to have a clickable image link with PowerUI ?

    I tried various combination and can't manage to change the loaded html page.

    When you put an <href> around a text, and click on that text, the page change.
    I need to have a clickable <img>. I tried to put an 'onclick' on it, andput an 'onclick' on an enclosing <div> but it doesn't work.
     
  7. mhernandez88

    mhernandez88

    Joined:
    Jul 20, 2016
    Posts:
    8
    @Pode : if you look in the examples for the windows examples, you can see popup windows that happen to use a widget. The widget is of type "floating". It is a built in. Looking through the source code, you can find that this code has resources with an image for the close button, and some html templates and styling.

    Looking in the template file, you can find the following code.
    Code (CSharp):
    1.     <div class='window-title-bar'>
    2.         <div style='display:inline;color:black;position:relative;top:3px;' -spark-title>
    3.             <!-- Title of the iframe will be placed in here -->
    4.         </div>
    5.         <div class='window-close' onmousedown='Widgets.Widget.CloseThis'>
    6.             <!-- The Widget.CloseThis method figures out which widget this is and closes it for you -->
    7.             <img src='resources://floating-CloseButton.png' style='position:relative; top: 4px;'>
    8.         </div>
    9.     </div>
    10.     <iframe class='window-iframe' resize-target="parent"></iframe>
    11. </div>
    As you can see, this code is utilizing onmousedown and an img wrapped in a div.
     
  8. Pode

    Pode

    Joined:
    Nov 13, 2013
    Posts:
    110
    @mhernandez88 : thanks for the idea !
    I looked inside the Widget class and found "Widgets.Widget.GoTo"
    Now I need to find how to pass the url of the webpage to that function.
     
  9. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    71
    Hi @KulestarUK, it would be "kool" and polite to at least answer back... unless something bad happend to you (which I hope didn't)

    We have been waiting for 2 months...
     
  10. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hello! @Genom Sorry for the huge delay - I don't seem to get notifications from the forum; I'll try to always check this thread frequently anyway, but the best way to get in touch is via Skype/ email - I always reply as soon as possible :)

    @Genom The focus has been on WebAssembly so we can port webkit and a variety of other libraries to "just work" in Unity - I'll push some more changes to Nitrassic asap to make it more workable.

    @noanoa PowerUI does have a built in precompiler which pre-packages it into a DLL for you :)

    @Pode Images accept all mouse events like onclick, onmousedown, onmousemove etc; it depends what you'd like to fire off when you click on it. If you want to load a page (you'll often want to add target='_blank' for this kind of thing) you should also be able to surround it in anchor tags:

    Code (HTML):
    1. <a href="http://site.com/">
    2. <img src='clickable_image.png' />
    3. </a>
    Or using an event attribute (note: this is generally outdated - see below):
    Code (HTML):
    1.  
    2. <img src='clickable_image.png'  onclick='MyCSharp.ImageClicked' />
    3.  
    Code (CSharp):
    1.  
    2. public static class MyCSharp{
    3.    
    4.     public static void ImageClicked(MouseEvent e){
    5.         // e.target is the img element.
    6.         // Use attributes on the element to pass extra information
    7.     }
    8.  
    9. }
    10.  
    Note that functions in attributes don't accept parameters because that would require the full Javascript parser (which isn't available on many Unity platforms).

    The best approach to pass extra information is to use addEventListener, because you can take advantage of C#'s scoping:

    Code (CSharp):
    1.  
    2. // E.g. inside an OnStart method:
    3.  
    4. var document = UI.document;
    5.  
    6. // Example of an object being used by a click handler:
    7. var gameworldLight = GameObject.Find("Light");
    8.  
    9. document.getElementById("my-clickable-button").addEventListener("mousedown", delegate(MouseEvent e){
    10.     // Runs when an element with id='my-clickable-button' was clicked.
    11.     // Importantly though, values from the script this is written in are all available (its properties, local variables etc):
    12.     gameworldLight.SetActive(true);
    13. });
    14.  
    15.  
     
  11. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    71
    Hi @KulestarUK thanks for not forgetting about us :rolleyes: I don't know if you could have a look of the code (#454) I sent you, could you please provide your skype? maybe we'll go faster to workaround the issue that prevent us to try nitrassic.

    thanks!
     
  12. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    Hey @Genom! Sure, it's also KulestarUK on Skype - feel free to email too (powerUI@kulestar.com) and I usually reply within a few hours (when I'm awake!) :) A quick look at your code: Nitrassic is case sensitive unlike Nitro, so Console.log isn't valid (but console.log is). I.e. a quick sample is like this:

    <script type='text/javascript-x'>
    console.log('Hello everyone!');
    </script>

    Currently all inline attributes point at the Nitro engine (it turns out a lot of people are using Nitro, so removing it to make way for Nitrassic is proving challenging!), so onclick="Hello();" won't work, but you can use addEventListener and e.g. document.querySelectorAll to grab elements and hook up events that way :)
     
    Arkade likes this.
  13. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    71
    Hi @KulestarUK I sent you skype message to add you as a contact (please accept it : ) anyway I think it is better to discuss most of things here so we can help future users.

    Regarding nistrassic, how can I make the code to point to ir instead to nitro? otherwise I cannot try standard javascript and html.

    You mention WebAssembly again, do you have an estimation about when it will be ready and more details about how it will work?

    I think it would be nice to update the estimations and complete progress bars you provided on February

    (https://forum.unity3d.com/threads/powerui-powerful-html-css-ui-framework.196144/page-8#post-2953736 and
    https://forum.unity3d.com/threads/powerui-powerful-html-css-ui-framework.196144/page-8#post-2974631)

    this original roadmap made us move to adquire the product (which I am sure it will be awesome once released)

    best regards!
     
  14. extra_G3

    extra_G3

    Joined:
    Jul 21, 2017
    Posts:
    1
    Informative vac thread very helpful.
     
    Last edited: Aug 4, 2017
  15. Pode

    Pode

    Joined:
    Nov 13, 2013
    Posts:
    110
    @KulestarUK : thanks for the tips !
    The binding to as static C# method did the trick for me.
    Since the method is static and I needed to access some public variables set by the user in the Unity Editor, I made a singleton helper class to help me communicate C# <=> HTML page.
     
  16. johnfbremerjr

    johnfbremerjr

    Joined:
    Apr 25, 2017
    Posts:
    2
    I'm getting the same error messages even if I check the boxes in the Nitro settings? Did you get this resolved? Thanks, -John
     
  17. johnfbremerjr

    johnfbremerjr

    Joined:
    Apr 25, 2017
    Posts:
    2
    Hi Papiot,
    Did you get compile errors when you tried to build the Visual Studio project for the HoloLens, and if so, how did you work through them. We tried to disable the Nitro runtime and we still get compile errors.
    Thanks,
    -John
     
  18. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    PowerUI 2.5 - Now with standard Javascript.

    Hello everybody! After a long and challenging journey, PowerUI is now getting first looks with completely standard Javascript - if you want to start experimenting with it straight away, go ahead and grab it from the git repository! As always we're committed to shipping on every platform and as many versions of the Unity editor as possible, so we're happy to say this feature is available everywhere - from Hololens to consoles to WebGL.

    We'll be continuing to extend PowerUI's DOM coverage to support as many libraries out of the box as possible. Once we're through some more platform testing, a package build along with release notes/ updated documentation will all be available shortly too. If you have any libraries that you're particularly interested in seeing support for, please add them to the library wiki page.

    As always, thanks to everyone! :)
     
    Arkade and StevenPicard like this.
  19. Genom

    Genom

    Joined:
    Dec 2, 2014
    Posts:
    71
    Hi @KulestarUK, my first test with javascript and jquery worked almost perfectly (except for the alert, which is not a big deal), congratulations! : ))


    I could not help it and I tried as well with a very simple AngularJS test page, but unfortunately didn't work (no error message recevied though)

    here you are the test, if you don't mind to have a quick look:

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>

    <style>
    body
    {
    background-color: blueviolet;
    }
    </style>

    </head>

    <body>
    <div ng-app>
    <p>My first expression: {{ 5 + 5 }}</p>
    </div>

    </body>
    </html>

    By the way, .min files (for javascript or css) are not properly recognized
     
  20. vlentini-axed

    vlentini-axed

    Joined:
    Sep 19, 2017
    Posts:
    3
    Hi,
    i try to export base example for Android Devices in the version 2, and i have a strange result. If i put some links in a page, only the first touch in chronologic order is working. After the first touch (worked) all others fail.

    Every link call a c# function in directly mode or with onmousedown option, but the result is the same.

    Can you help me please?

    Thank you!
     
  21. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @vlentini-axed Hey vlentini! What do you mean by chronologic order - the order they're in the DOM? Could you drop in some example HTML? :)
     
  22. vlentini-axed

    vlentini-axed

    Joined:
    Sep 19, 2017
    Posts:
    3
    @KulestarUK Thank you for your reply!

    The Html code is exactly the code in the example "5. Csharp Scripting", that i download from Unity Asset Store in the 2.0.700 version. If i try to export for Android this example, there are some clickable div where are linked some actions.

    Well, when i open the Android App, the first touch on any link i click is working. The second, third and others touch don't work. If i restart the App the situation is the same, only the first touch is working.

    I hope i was clear.

    Thank you!
     
  23. vlentini-axed

    vlentini-axed

    Joined:
    Sep 19, 2017
    Posts:
    3
    Hi @KulestarUK , i also try to download the git repository version (2.5) from MyPowerUI, but i can't because when i try to insert a git username i have a error message "Your account already appears to have a git username (try refreshing).", and i can't access to git repository.

    I hope in your help.

    Thank you!
     
  24. Eideren

    Eideren

    Joined:
    Aug 20, 2013
    Posts:
    289
    When setting display:none; for the scrollbutton, the console reports a nullref :
    Code (csharp):
    1. NullReferenceException: Object reference not set to an instance of an object
    2. PowerUI.HtmlScrollThumbElement.get_StartArrowSize () (at Assets/PowerUI/Source/Engine/Tags/scrollthumb.cs:196)
    Also, how are we supposed to style this white block ? It's not a scrollbutton and shows up whenever there's a scrollbar. His default size isn't linked to the scrollbar's size and seems to be pixel based(here 10/10 on a 100/100 UI). Scrollbutton_Issues.png
    It also shows up when a single vertical bar is visible.
    The .txt attached is the html I am using, unity doesn't allow .html uploading for some reason.
     

    Attached Files:

  25. Eideren

    Eideren

    Joined:
    Aug 20, 2013
    Posts:
    289
    Animations also never process the absolute last frame before ending which means that if the framerate dips during one of them we will always have elements styled with properties stopped mid-transition. Even at high framerates, you will never reach the end state because of that last frame skip.

    I worked around that by changing the content of Complete() inside AnimatedProperty.cs to
    Code (csharp):
    1.  
    2. Stop();
    3.  
    4. // Set target to the result.
    5.  
    6. /*Css.Value target=RawTarget.Copy();
    7.  
    8. // Write it straight out to the computed style:
    9. // (Internally handles any aliases for us)
    10. Animation.ComputedStyle[InnerPropertyInfo]=target;
    11.  
    12. // If it's not an alias, update hostValue:
    13. if(!InnerPropertyInfo.IsAlias){
    14.    PropertyValueObject=RawTarget;
    15. }*/
    16.  
    17. ValueObject.RawValue=RawTarget.GetDecimal(Animation.ComputedStyle.RenderData,InnerPropertyInfo);
    18.  
    19.  
    20. if(UpdateCss){
    21.    
    22.    // If we're the main animation (updateCss is true), tell the style it changed:
    23.    // Note that in grouped properties, only the last one actually runs the update.
    24.    Animation.ComputedStyle.ChangeProperty(PropertyInfo,PropertyValueObject);
    25.    
    26.    // And call the done function:
    27.    Animation.Finished();
    28.    
    29. }
    30.  
    Not really sure why it couldn't apply the target there and I don't really have time to look further, good luck.
     
  26. dmoroni

    dmoroni

    Joined:
    Mar 10, 2015
    Posts:
    23
    Hi, I'm having this kind of problems too, just using PowerUI in a very basic way.
    I just tried to build some of the examples, targeting for Android, never having them fully working. For example:

    - 5. Csharp Scripting: If I build it "as is" I can just see part of the page, with scroll bar not working. Moreover, the first div I touch is working correctly (see the purple text in attachment), while each subsequent div is not working at all.

    Example_5.png

    - 2. Localisation: If I build it "as is" I can only see part of the page with no scroll bars (see attachment), and the listbox "Select the language" is not working.

    Example_2.png

    I'm using Unity v. 2017.1.1f1, and all the examples work in Unity editor. The problems arise when I make the Android build. I'm testing everything on a Samsung S6.

    Is there some step I'm missing? Maybe some settings I should activate/modify?

    Thanks.
     
  27. Eideren

    Eideren

    Joined:
    Aug 20, 2013
    Posts:
    289
    Select html tag doesn't support the 'multiple' attribute.

    Edit: I ended up implementing it myself, PM or email me if you need it.
     
    Last edited: Sep 22, 2017
  28. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @vlentini-axed It looks like an email address got used in the username field which confused gitlab so I've just removed that username which will hopefully mean you can set one and pull the repo :) I've also been probing around at the Android input issue in Unity 2017 and I've found a possible cause which a fix will be available for shortly (and I'll also make a new package build as the repo is quite far ahead at the moment!)

    @Eideren That white box is the <resizer> element which can be targeted via css using that name and its default style is as follows:

    Code (CSS):
    1.  
    2. resizer{
    3.     display:block;
    4.     position:-spark-absolute-fixed;
    5.     width:17px;
    6.     height:17px;
    7.     background:rgb(248,248,248);
    8.     bottom:0px;
    9.     right:0px;
    10. }
    (Above is from the user agent style sheet, Resources/xhtml-style.html) - I've edited the wiki on scrollbars to also mention that resizer too :) Also what property where you animating which caused it to drop the last frame? The commented out code there is what should be setting the final value, so a rough guess is maybe because there's multiple animations trying to run on the same property (and one of them is attempting to set an older final value).
     
  29. Eideren

    Eideren

    Joined:
    Aug 20, 2013
    Posts:
    289
    @KulestarUK Two different divs under the same parent have their height going from 0%-100% for one of them and the other had the opposite running simultaneously, the animation is triggered when replacing the class name -Menu_Off- by -Menu_On- on the div and the other way around for the other div. Parent div doesn't have any animation attached to it, here's the css used :
    Code (csharp):
    1.  
    2. .-Menu_Off-
    3. {
    4.     animation-name: Menu_OnToOff;
    5.     animation-duration: 0.25s;
    6.     overflow: hidden;
    7. }
    8.  
    9. .-Menu_On-
    10. {
    11.     animation-name: Menu_OffToOn;
    12.     animation-duration: 0.25s;
    13.     overflow: hidden;
    14. }
    15.  
    16. @keyframes Menu_OnToOff
    17. {
    18.     from
    19.     {
    20.         height: 100% !important;
    21.     }
    22.     to
    23.     {
    24.         height: 0 !important;
    25.     }
    26. }
    27. @keyframes Menu_OffToOn
    28. {
    29.     to
    30.     {
    31.         height: 100% !important;
    32.     }
    33.     from
    34.     {
    35.         height: 0 !important;
    36.     }
    37. }
    38.  
    I purposefully changed Application.targetFrameRate inside unity to ~15 to verify that the work around actually worked, you might want to use that when debugging.

    I hate to be that guy but the caret doesn't align with the text at all.
    Select's text and option's text ignores css's text alignments (text-align and vertical-align) while standard <p> does it flawlessly.
    Using any type of transformation with transform in css is not taken into account when processing the canvas cutoff (perfect example of that is having a select inside a vertical scrolling div, when moving the scrollbar and the select goes off screen, it's the right border of the select button that is cutoff when it should be the top part because the select button has a transform:rotate(90deg)).
    animation-direction seems to be implemented but still defaults to forward, the value sent to AnimationDirection.Apply() is always of type Css.Keywords.None.
    The resizer's size doesn't change scrollbar's end points.
    -spark-z-index's inherit value doesn't actually inherit from the parent but any element (even descendants of those elements) declared before itself which makes it impossible to have a sub-child above a node declared later.

    I also implemented a technique similar to SDF on your shaders to create near pixel-perfect font rendering at any distance and angle without relying on the pixel perfect options of your UIs, here's how it looks compared to the base one :
    Font-Sharpening.png
    Both of those screenshots where taken using the same exact UI at the same resolution, I only changed a couple lines of shader code. It can also support custom font weights, in this case I slimmed down the base one. Is this something you want me to share with you @KulestarUK ?



    Edit : Added a bunch of other issues I stumbled on.
     
    Last edited: Sep 26, 2017
  30. Eideren

    Eideren

    Joined:
    Aug 20, 2013
    Posts:
    289
    This is ridiculous, I found even more issues, what are you guys doing ?
     
  31. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @Eideren PowerUI isn't a web browser - it's a UI framework; keep in mind that in order to get something like this working inside Unity across every platform, everything has to be built from scratch. It doesn't have full coverage of web specs simply because browsers are some of the largest pieces of software around - instead it focuses on the features most important to user interfaces, and on that front, it has far more features than anything else available in Unity. I also represent a tiny team of one :) Spending some 5 years writing over half a million lines of code which has collectively formed PowerUI as it is today - tested and used by thousands of developers. On something of that scale, issues are always going to get through, but I'm always going try and help out however I can. Missing specs almost always have workarounds too. Please just let me know what you've found - email always works fastest as I often don't get notified about this thread. Also make sure you're using the latest codebase from the repository too.
     
    Arkade, Mr-Logan and StevenPicard like this.
  32. dmoroni

    dmoroni

    Joined:
    Mar 10, 2015
    Posts:
    23
    Hi, I wrote here almost a month ago about many input problems I was having with PowerUI on Android, namely divs, listboxes and scrollbars from your basic examples not working at all in Unity 2017.1.1f1.

    I had no answers to my post, neither I saw any store update, so at present your plugin is virtually unusable to me. Is there any hope to see it working soon?

    Thanks.
     
  33. MHatfull

    MHatfull

    Joined:
    Aug 23, 2017
    Posts:
    7
    I have had such a hard time with this plug, in 2017 I have had to fight around and fix a lot of bugs within power ui but now I'm running memory tests and see that powerui is contributing 50 mb on top of our original 77 mb of memory usage in webgl. I'm desperately trying to find a fix for this as it will mean powerui is useless to us.
     
  34. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    Heya folks, do any of you know how I can go about adding a range bar to my UI?
    sort of like:
    <input type=range>
     
  35. KulestarUK

    KulestarUK

    Joined:
    Aug 16, 2013
    Posts:
    269
    @dmoroni @MHatfull make sure you're on the latest version of PowerUI (2.5) by pulling from the git repo - it's tested in 2017 and all the example scenes are working there :) To get the latest, check out the guide here:

    How to pull the latest version of PowerUI

    Also @MHatfull check out the performance getting started guide - it has a section on low memory environments. PowerUI defaults to using atlasing as that gives improved performance on most platforms, but it uses ~30mb of memory to do so - that can be completely turned off if you'd like to make that kind of saving:

    Reducing PowerUI's memory usage for low memory platforms

    @Mr-Logan Horizontal scrollbars work really well as range sliders - they fire off change events and can be completely customised style wise; check out the guide here for more info on how to do that (just leave out that 'target' attribute):

    Custom scrollbars

    As always please feel free to send over emails and I'll be more than happy to help out! :)
     
    StevenPicard and Mr-Logan like this.
  36. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    Thank you very much! :)
     
  37. aftokinito

    aftokinito

    Joined:
    Jan 30, 2013
    Posts:
    10
    Is the HTML5 canvas supported? PowerUI seems to ignore the <canvas> tag completely and renders the content inside the tag instead.
     
  38. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    I've never used canvas in any way before but I suspect it's such a complex and yet specialized thing that Kulestar simply has chosen not to implemented it. or at least yet.
     
  39. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    I'm trying to call a JS function from C#, according to the wiki:

    This is the closest I can figure out, however the "CallGlobalFunction" doesn't exist
    Code (CSharp):
    1. var doc = GetComponent<Manager>().document;
    2. doc.Engines["text/javascript"].Instance(doc).CallGlobalFunction
    Also when I search for the word through the entire solution I'm told that there are 0 instances of it found, so I'm figuring out that this approach is not used any more, is there a different way?
     
  40. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    I have an odd bug.
    I've got a piece of JS code:

    Code (JavaScript):
    1.  
    2. var str = "<table>";
    3.         for (var i = 0; i < profile.Buildings.Count; i++) {
    4.             var building = profile.Buildings[i];
    5.             str += "<tr><td>";
    6. //            str += "<img src='Icons/CantAfford/" + building.Name + "'/>";
    7.             str += "<p>" + building.Name + "</p>";
    8.             str += "<button onclick='BuyOne(" + building.Name + ")'>Buy one</button>";
    9.             str += "<button onclick='BuyHalf(" + building.Name + ")'>Buy 50%</button>";
    10.             str += "<button onclick='BuyMax(" + building.Name + ")'>Buy 100%</button>";
    11.             str += "</td></tr>";
    12.         }
    13.         str += "</table>";
    14. $('#buildingTable').html(str);
    15.  
    As you can see it creates a table and adds it to the div with id buildingTable.
    This works fine as long as I don't uncomment the line that says
    Code (JavaScript):
    1. str += "<img src='Icons/CantAfford/" + building.Name + "'/>";
    Also, if I was to just manually add this to the dom it would be just fine
    <img src='Icons/CantAfford/Apothecary'/>

    But if I uncomment the line and try to insert the image via JS, then unity just freezes up, kinda like it's hit an infinity loop.

    I've also tried adding
    <img src='Icons/CantAfford/Apothecary'/>
    via JS and again it freezes up.
    That file by the way does exist.

    Also I originally tried adding the content to a table, but it just kept complaining about stuff, I tested my code on JSFiddle, and it worked fine there, so I'm fairly certain my code wasn't the issue, however once I included the table tags in the string and just added everything to a div it worked fine.
     
  41. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    Ah
    document.Run("FunctionName");
    So much easier than what's on the wiki xD

    Edit
    I hope it's alright that I've edited the Wiki page for JS on how to call JS from C# ^^
     
    Last edited: Dec 1, 2017
  42. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    Hmm, ok so essentially what caused Unity to freeze up was that I in my body tag had added
    This worked fine right up until the point where I wanted to add photos too, I early on discovered that onload ran before Awake() did, and I'm assuming that means that something to do with images hadn't run yet.
     
  43. VTM_Digital_Limited

    VTM_Digital_Limited

    Joined:
    Jan 24, 2014
    Posts:
    4
    Hi all, I am a newbie of this plugin.
    Now I am using this with uGUI (Canvas+RawImage). And facing a problem about word-wrap.
    I am using word-wrap and word-break:


    But the result look strange:


    It seems like the word-break is set to keep-all. Any advise? thanks.
     
  44. Mr-Logan

    Mr-Logan

    Joined:
    Apr 13, 2006
    Posts:
    455
    I found a bug with onclick
    If you go to the drag to scroll test example you'll notice that you can actually scroll the parts that are not visible too.

    upload_2017-12-12_0-8-50.png

    Everything within the red triangle is dragable.
     
  45. Vagrod

    Vagrod

    Joined:
    Aug 4, 2017
    Posts:
    63
    Padding for divs working very strangely. Seems like right and bottom padding values are totally ignored (see scheme). Is there any workaround or fix for this? I used tables to make my layout somehow.

    And looks like for elements inside TD parent is whole table, not a cell. I.e. if I have td width=65% and td width=35%, and I have div width=100% inside first TD, this div will get whole table width.

    version 2.0.7, downloaded two days ago from website.

    I cannot use "PowerUI 2 Source Access" because it's saying that I already have access. I tried three different user names including random one.
     

    Attached Files:

    Last edited: Jan 3, 2018
  46. StevenPicard

    StevenPicard

    Joined:
    Mar 7, 2016
    Posts:
    623
    Is there an easy way to add a custom filter to the dynamic camera that is created for the UI?
     
  47. Vagrod

    Vagrod

    Joined:
    Aug 4, 2017
    Posts:
    63
    I'm trying to make anchor (a) to work. I have two html pages with some images (background mostly) inside. I make a link from one to another (<a href="Path/To/second.html">div is here</a>). It opens. Kinda. second page is loaded, but it is totally transparent: I see no images anywhere.
    Images are defined in css the same way, like:

    .tab-selected {
    position: fixed;
    width: 250px;
    height: 94px;
    background: url('MDUI/Assets/Tab-Selected.png');
    background-size: 100%;
    }


    All text elements are ok, everything's on its place, so css obviously works.
    Or maybe (a href) is not a correct way to switch pages in PowerUI?

    Okay, I got it. this url
    'MDUI/Assets/Tab-Selected.png'
    is not working when using (a href). This works instead:
    'resources://MDUI/Assets/Tab-Selected.png'

    UPD:
    After this experiments, I tried to make (a href) on my "real" html. Anchor is not clickable, it's not doing anything(
    Here is a part of my page (this href is on the last div):

    .<tr style="height:50%;">
    . <td>
    . <div class="panel-health">
    . <div class="panel-caption" id="panel-health-caption">

    . </div>
    . <div class="panel-line" />
    . <div class="panel-content">
    . <div class="health-indicator" style="top:95px;">
    . <div class="value" id="health-temperature-value"></div>
    . <div class="descr" id="health-temperature-caption"></div>
    . </div>
    . <div class="health-indicator" style="top:130px;">
    . <div class="value" id="health-pressure-value"></div>
    . <div class="descr" id="health-pressure-caption"></div>
    . </div>
    . <div class="health-indicator" style="top:165px;">
    . <div class="value" id="health-heart-value"></div>
    . <div class="descr" id="health-heart-caption"></div>
    . </div>
    . <div class="health-warning" id="health-warning">
    . <div class="line1" id="health-status-line1"></div>
    . <div class="line2" id="health-status-line2"></div>
    . <div class="line3" id="health-status-line3"></div>
    . </div>
    . <a href="resources://MDUI/medcenter.html">
    . <div class="open-medcenter-button">
    . <div class="text" id="open-med-scanner">

    . </div>
    . </div>
    . </a>
    . </div>
    . </div>
    . </td>
    . </tr>

    Maybe there is some way to change pages in code if this won't work?


    UPD 2
    For now, I removed all href's and now doing the same thing in code:
    PowerUI.UI.document.getElementById("open-medcenter-button").onclick = ev =>
    {
    PowerUI.UI.document.innerHTML = PowerUI.UI.LoadHTML("MDUI/medcenter.html");
    };

     
    Last edited: Jan 4, 2018
  48. StevenPicard

    StevenPicard

    Joined:
    Mar 7, 2016
    Posts:
    623
    Since Power UI is now free and open source I hope he still provides support especially for those of us who bought the asset.
     
  49. Vagrod

    Vagrod

    Joined:
    Aug 4, 2017
    Posts:
    63
    He will, after holidays I guess)

    I started using spas and three of them worked wonderfully, but this one (in the attachment) does not want to be shown. I created it totally the same way that those three before, and I can't understand what's wrong with it.
    I used version 2 because spas produces by version 3 shows lots of red question marks as a result.
     

    Attached Files:

  50. Vagrod

    Vagrod

    Joined:
    Aug 4, 2017
    Posts:
    63
    And is there any way to re-start spa animation from C# code? For now I am doing
    element.style.background = "none";
    element.style.background = "url('url to spa')";
     
    Last edited: Jan 5, 2018