FREE: Web UI (HTML/CSS/JS Interface)

[spidershift]

Hello,
Thank you for the great plugin and your efforts. I have followed the setup instructions and created my widget on UE 4.25. I seem to have a problem about Focus. The default BP setup shown in HUD is not focusing after creation. Player needs to click on the widget to gain focus. But adding a delay(min 0.3s) after last node which is Load File and calling helper function Focus on Browser(variable returned from GetBrowser) after the delay seems to fix this. Calling Focus function just after Load File also doesn't seem to work. This might be related to load times and instances not being available at the time. Can we double check this if this is a bug or if this is just an error on my side. Thank you.

What you're discovering is the disconnect between the game instance and the browser instance and there is already a mechanism in the example project that handles all of this for you that you might be overlooking.

Basically there's no reason to be calling Focus() immediately after the LoadFile() function. In fact if the browser widget hasn't even created the internal viewport widget yet, there is no way for the Focus() function to find it, so it won't even work anyway if you call it prematurely before the widget has fully initialized. Instead let's go over a typical setup which is demonstrated for you in the example project...

You first create the browser widget, add it to the viewport (set it to hidden) and load your initial file. During this time you could be displaying a loading image or a loading widget while the browser widget is hidden. At this point you've handed off control to the browser instance, so the game instance should be waiting for some kind of confirmation from the browser instance that the page was successfully loaded before making the widget visible.

So what you do is register a jQuery.ready() event in your HTML page that will send an event to the game instance once the page is ready. In terms of JavaScript this means the $.ready() function calls ue4("ready") which then changes the browser widget visibility from hidden to visible (and could hide your loading image/widget).

It is here in the UE4 ready event (the moment you make it visible) that you want to set focus to the browser widget. This guarantees the internal viewport widget has already been created, and that your page actually loaded correctly before handing off focus. Otherwise if your ready event is not called after a certain amount of time, you can assume the browser did not load correctly and handle your error (such as sending a report using the HTTP blueprint plugin or displaying an error widget).

So long story short, create a boolean variable in your blueprint called "ready" and setup a 5-10 second delay node after you call the LoadFile() function (and initially hide the browser widget). If the boolean is still false after the delay, then handle your "interface failed to load" error situation. Now create a "ready" case in the switch of your broadcast event and have it set the boolean variable to true, make the widget visible, and then focus the browser widget (don't forget to register a jQuery ready event that will broadcast your UE4 ready event).

[plyroth]

Hello,
Thank you for the great plugin and your efforts. I have followed the setup instructions and created my widget on UE 4.25. I seem to have a problem about Focus. The default BP setup shown in HUD is not focusing after creation. Player needs to click on the widget to gain focus. But adding a delay(min 0.3s) after last node which is Load File and calling helper function Focus on Browser(variable returned from GetBrowser) after the delay seems to fix this. Calling Focus function just after Load File also doesn't seem to work. This might be related to load times and instances not being available at the time. Can we double check this if this is a bug or if this is just an error on my side. Thank you.

[spidershift]

I'm using UE 4.25 and using Webbrowser. Issues come from when I press some key when enable the IME option using another language different EN(Such as Ko,Jp, China..). IME allows the input of Windows change status enables to be disabled.

And history according to Release notes: https://docs.unrealengine.com/en-US/..._18/index.html

Release Note:New: Chromium Embedded Framework (CEF) upgraded to branch 3071 Win32/Win64/Mac. Added web browser support for foreign language character input via IME.

But Webbrowser still occur issues when user input IME. Facing on Windows OS 10, and many PC has the same issues. Please help me.

Thank you for reporting this issue. I already replied to your post on github, but double posting both here and on github is not necessary so please choose one or the other next time so we're not wasting time going over the same issue twice.

spidershift I'm having trouble using the 3D widget on Android builds. The Widget component doesn't show anything at all! I'm on UE 4.25 with the latest version of the plugins.

As a side note, I've tried with the vanilla WebBrowser from Epic, and it shows a Black rectangle where the widget component should be. My guess is these issues are related.

Is anybody else having the same issue?

I'm not sure why the 3D widget component wouldn't render on mobile, but that's an engine related issue. The only modifications made by this plugin to 3D widgets is the implementation of a custom 3D widget interaction component, which isn't even the 3D widget itself. The interaction component is just the "laser pointer" that allows you to interact with the widget in a 3D space. It's completely built into the engine and they do all the mapping from 3D to 2D space, handling of the virtual mouse events, ect. So basically what this plugin does for 3D widgets is implement a custom interaction component that leverages the custom transparency features to allow this "laser pointer" to passthrough the transparent regions of the browser. Everything else involving 3D widgets is the vanilla engine and any issue you're having is an engine related issue.

Now focusing on the transparency feature itself, the 2D transparency would not work on mobile at all, or at least, not without a cursor since it requires the mouse position in order to do a transparency lookup and toggle whether or not the widget is hit testable. This simply doesn't translate to a touch-based user interface, and there isn't anything in the plugin that hooks into the engine event system that could handle or passthrough mouse/touch events based on the transparency of the browser at the location of the click/touch event.

However the 3D transparency could technically work on mobile since you could still utilize a laser pointer of sorts, but not really as intended. So I'm not really sure what you're looking to accomplish if you plan on using the 3D widget for anything other than rendering because 3D interaction probably isn't going to be really fluid on mobile. And again, this only relates to the interaction itself, because the component that actually renders the widgets in the 3D world is a built in engine feature and has nothing to do with the plugin. So if you cannot get the 3D widget component to render on Android, that's something you'll need to report to Epic Games.

[toddsdk]

This plugin includes a new 3D widget interaction component that leverages the transparency features from the update last year. It allows you to place a web interface widget in the physical world that's not only interactable but allows the virtual pointer to passthrough the transparent regions of the browser:

spidershift I'm having trouble using the 3D widget on Android builds. The Widget component doesn't show anything at all! I'm on UE 4.25 with the latest version of the plugins.

As a side note, I've tried with the vanilla WebBrowser from Epic, and it shows a Black rectangle where the widget component should be. My guess is these issues are related.

Is anybody else having the same issue?

[iletai121]

I'm using UE 4.25 and using Webbrowser. Issues come from when I press some key when enable the IME option using another language different EN(Such as Ko,Jp, China..). IME allows the input of Windows change status enables to be disabled.

And history according to Release notes: https://docs.unrealengine.com/en-US/..._18/index.html

Release Note:New: Chromium Embedded Framework (CEF) upgraded to branch 3071 Win32/Win64/Mac. Added web browser support for foreign language character input via IME.

But Webbrowser still occur issues when user input IME. Facing on Windows OS 10, and many PC has the same issues. Please help me.

[kilrain]

Yes, it seems the UE4 web browser widget is screwy with the HTML drag and range functionality - see here: https://forums.unrealengine.com/unre...87#post1663487

JavaScript-based dragging seems to work fine, though.

Thanks much!

[DsyD]

Yes, it seems the UE4 web browser widget is screwy with the HTML drag and range functionality - see here: https://forums.unrealengine.com/unre...87#post1663487

JavaScript-based dragging seems to work fine, though.

[kilrain]

I first tested this out with the latest UE install and noticed the slider in the sample html wouldn't drag unless you moved the mouse really slowly. So then I compiled the latest, which is 4.25.3, and had to also recompile the webui and json plugins, with the webGL disabled and I'm still having that issue. Anyone else notice this?

[DsyD]

Try https://github.com/tracerinteractive...ngine/releases

[Jameson]

Is there a public link of this plugin still available? Looks like the github link for the repo is down.

[zoncan]

Nice! Just curious, did you do those graphs using D3?

I did graphs using EChart.js

Sheesh. You are way better at HTML/CSS/JS than I am.

Did you use a framework like React or something for this?

No framework just pure HTML + JS

Zhong.

[DsyD]

Love this plugin see what i've done so far

Sheesh. You are way better at HTML/CSS/JS than I am.

Did you use a framework like React or something for this?

[ronm6667]

Love this plugin see what i've done so far

Nice! Just curious, did you do those graphs using D3?

[Gutvarev]

very useful, thank you!

[zoncan]

Love this plugin see what i've done so far