Web UI (HTML/CSS/JS Interface)

After already dealing with the past two users, I don’t really care to respond to or even read any of what they have to say. I’m just here to let everyone know that the UE5 plugin has been updated:

  • accelerated paint is now enabled by default
    • this will cause issues with multi-gpu platforms
    • soon we’ll add support to detect multi-gpu platforms to temporarily disable it
  • a packaging issue has been fixed

Ok so I ended up catching a little bit of what the last guy posted after my reply popped in cause it was hard not to, and I therefore want to mention one very important thing since it seems there’s some confusion surrounding this plugin…

If you are using this plugin for GAMEPLAY elements then you are an idiot. This plugin is strictly designed for user-interface development, such as buttons and menus and all the things that float on the sides of the screen. It allows you to create rich interfaces that look a lot more professional, and you don’t have to deal with the basic slate form elements since you can style these things in CSS instead.

If you need for instance, names/text to hover on other players, you should be making that in slate using blueprints or C++. If you are trying to do this with a web interface, you are an idiot. If you need for instance crosshairs to be in the center of your screen, you should be making that in slate using blueprints or C++. If you are trying to do this with a web interface, you are an idiot.

So please don’t misuse a tool beyond its obvious intended expectations. That’s like trying to put a screw in a wall using a hammer. It just shows you have no idea what you’re doing.

It’s actually very funny when you’re talking about idiots not understanding absurd and totally counterintuitive limitations of your plugin. Why absurd? Because Chromium is capable of running much faster than your CEF implementation and has no problems with multi-gpu systems. Everybody who ever used Chrome browser knows that.

It took me less than 40 hours to modify the Epic’s code and implement CEF into UE5 running at ~94% of the speed of Chrome. Yes, there’ still a barely noticeable input lag, but crosshairs work just fine. This one will be particularly interesting for you: I was totally chill all the time and insulted exactly zero people in the process. Your plugin gives me black screen with accelerated paint enabled on my Dell G5 and on four other laptops with both dedicated and integrated GPUs. My implementation runs just fine on them all.

Once I’m done, you can buy my solution for $50 and study its guts. However, it certainly takes an experienced developer to understand how it works…

Hey guys! Let’s make sure we’re being civil and respectful to all members of the Unreal Engine community. You can check out the code of conduct here to see what we expect from all our members.

Best,
Panda

2 Likes

I forgot to mention something earlier due to all the distractions. There’s a new feature in the works that will be pretty useful. When we first started using the CEF for user interfaces any Steam profile images were just accessed via HTTPS online.

But this isn’t ideal especially in an offline scenario where profile images would still be cached in Steam. Therefore a method was developed using a custom scheme handler such as this:

jpg://steam/76561197960287930

That triggers a function in C++ or blueprints that allows you to return binary image data, and a corresponding scheme handler is available for PNG too. There you could call the SteamUtils()->GetImageSize() and SteamUtils()->GetImageRGBA() functions.

The custom pak:// scheme handler can also be used as well for engine materials. Normally this would load an image directly from disk or a PAK file in shipping builds.

However what if the JPG or PNG doesn’t exist but a file of the same name with a .uasset extension exists instead? Then we could convert the engine material to either a JPG or PNG at runtime:

pak://folder/filename.jpg or pak://folder/filename.png/Content/folder/filename.uasset

The plugin has been updated with texture/material redirects for browser images. More details can be found on the releases page:

https://github.com/tracerinteractive/UnrealEngine/releases

pak://StarterContent/Materials/M_Wood_Walnut.png or pak://StarterContent/Materials/M_Wood_Walnut.jpg → /Content/StarterContent/Materials/M_Wood_Walnut.uasset

pak://StarterContent/Textures/T_Metal_Steel_D.png or pak://StarterContent/Textures/T_Metal_Steel_D.jpg → /Content/StarterContent/Textures/T_Metal_Steel_D.uasset

Here is the update:

https://github.com/tracerinteractive/UnrealEngine/commit/5d7089daa39592fb2089dec28aa1437d8653fb4c

1 Like

The plugin has been updated again! The major issue with background-color: transparent has been fixed:

https://github.com/tracerinteractive/UnrealEngine/releases

This update also includes support for render targets as an asset type when using redirect engine images:

pak://MyFolder/RT_SomeRenderTarget.png → /Content/MyFolder/RT_SomeRenderTarget.uasset

Now you can generate images at runtime using various render targets, such as capturing an image from a camera component.

The update also includes support for query string parameters on redirected engine textures, materials, and render targets:

pak://StarterContent/Textures/T_Metal_Steel_D.png?w=1024 (maintains aspect ratio)
pak://StarterContent/Textures/T_Metal_Steel_D.png?h=2048 (maintains aspect ratio)
pak://StarterContent/Textures/T_Metal_Steel_D.png?w=1000&h=500 (stretches)
pak://StarterContent/Materials/M_Wood_Walnut.png?w=512&h=512 (required for materials)

2 Likes

Man I want thank you, or the person who has made this plugin, this is just GODLIKE, THANKYOU VERY MUCH!!!

My contriburion for this plugin in portuguese :slight_smile:

1 Like


Hello, when I put the UMG on the screen, and put the Actor into the scene, he can’t display the UMG correctly, but it’s black, but when I move the mouse over the black UMG, he can prompt me with the contents of the URL link ~ I don’t know what the problem is

I was getting this, too. I had to disable “accelerated paint” for it to work on my machine for some reason – I suspect it has to do with the split video cards MSI likes to run with, but I haven’t dug much around with it to figure it out. Eventually, I’ll sit down and troubleshoot it since I’m doing a bunch of CSS animations, but for now it’s working without accelerated paint, and I can live with that.

web ui not work with “accelerated paint” in UE5, but i have one gpu
help me please


Having this issue, I assume it’s related to “accelerated paint” right?

If you are experiencing any rendering issues, this is most likely due to “accelerated paint” being enabled by default in UE5. We have specifically enabled this feature in order to debug it in UE5 and provide any fixes necessary.

However, we have added a component that automatically detects if your system is using multiple GPUs which disables accelerated paint. But this is only in shipping builds, not while you are developing your game.

Therefore we do not recommend disabling it in shipping builds. But if you are developing using a laptop (I’m sorry you don’t have a real PC, wtf dude) or some kind of PC that has multiple GFX cards for some reason, then you should temporarily disable it before making a shipping build. But be sure to re-enable it before packaging your game.

Please note that this issue is not related to the WebUI plugin itself. Accelerated paint is a new UE5 feature that they recently added, so you will need to file a bug report with Epic Games if you have an issue with accelerated paint. We are not going to take the time to diagnose and fix this issue, that is what the Unreal Engine developers are paid to do.

I also encountered the problem that the widget is all black (IN UE5]. But when I upgrade the ue4 project to be compatible with ue5,this problem can also be solved ,the black screen is gone.

The newly updated version 5.0.3 still has this problem. Is it currently only possible to turn off the accelerated paint function?

By multiple GPU’s you mean SLI or Crossfire? I’m just using a single GTX 1070ti and it’s a desktop, if I were on my laptop it would go faster anyways as it is a 3060 mobile.

But yeah, I’m on my desktop, using UE5

The widget is black, It seems that only DX11 can be used.
It is black if I set DX12 in DefaultEngine.ini
[/Script/WindowsTargetPlatform.WindowsTargetSettings]
DefaultGraphicsRHI=DefaultGraphicsRHI_DX12

1 Like

Hiii! Thanks for the great plugin,
im using WEB UI in UE4.27 for reading a html file and trying to launch a Custom Event in UE4 after getting response from JavaScript when i scroll to the bottom.
It works fine with PC and Android , but not working in IOS.
I’ve already tried loading html with “Load Content” “Load URL” “Load HTML” “Load File” and UE4 doesn’t gave any response. even the javascript did work changing the URL.

so im thinking is there any issue on IOS for Javascript->UE4 in ver4.27?
any advice will be :smiley:

It can use DX12: In the WebInterface properties of the WebUI, set accelerated paint disabled

Hi.

It throws an error when compiling. I tried to build for Mac OS and Android. Help me solve it, please.

LogTemp: Display: /Applications/Xcode.app/Contents/Developer
UATHelper: Packaging (Mac): LogEditorDomain: Display: EditorDomain is Disabled
UATHelper: Packaging (Mac): LogCsvProfiler: Display: Metadata set : deviceprofile=“MacEditor”
UATHelper: Packaging (Mac): LogCEF3Utils: Error: Chromium loader initialization failed
UATHelper: Packaging (Mac): Failed to load the CEF framework.
PackagingResults: Error: Chromium loader initialization failed

1 Like