PowerUI - Powerful HTML/CSS UI Framework

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?)]

 

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

 

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

 

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>

 

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.

 

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

 

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

 

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

 

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

 

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.  

 

Hi @KulestarUK thanks for not forgetting about us 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!

 

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

 

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!

 

Informative vac thread very helpful.

 

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

 

I'm getting the same error messages even if I check the boxes in the Nitro settings? Did you get this resolved? Thanks, -John

 

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

 

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!

 

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

 

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!

 

@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?

 

@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!

 

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!

 

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

 

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.

 

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.



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



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.

 

Select html tag doesn't support the 'multiple' attribute.

Edit: I ended up implementing it myself, PM or email me if you need it.

 

@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).

 

@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 :

Spoiler

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.

 

This is ridiculous, I found even more issues, what are you guys doing ?

 

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

 

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.

 

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.

 

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>

 

@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!

 

Thank you very much!

 

Is the HTML5 canvas supported? PowerUI seems to ignore the <canvas> tag completely and renders the content inside the tag instead.

 

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.

 

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?

 

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.

 

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# ^^

 

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.

 

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.

 

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.



Everything within the red triangle is dragable.

 

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.

 

Is there an easy way to add a custom filter to the dynamic camera that is created for the UI?

 

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");
};

 

Since Power UI is now free and open source I hope he still provides support especially for those of us who bought the asset.

 

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.

 

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')";