Web UI (HTML/CSS/JS Interface)

I’m a really newbie i just started code for a few months, sorry if i made you feel like i was kidding you.
Anyway thank you very much for your answer I think it will help me a lot.
Have a nice day and keep it up your job is awesome

Alright understandable and I appreciate that. It’s just something that is not only a little outside the scope of web-based user interfaces, but what you’re asking to do isn’t something that comes off as “good” either along with the context you provided. If you’re asking about how to obtain image data from other websites that’s accessed dynamically using JavaScript it usually means you’re trying to access/scrape information that you shouldn’t be. So when someone shows up acting very innocent saying they don’t know stuff, but then starts asking those kinds of questions, it can sometimes mean they are just “playing dumb” because they’re asking about doing something they shouldn’t be. Perhaps you’re just trying to do something and don’t understand the proper way to go about it, so this is the solution you’ve come up with, or maybe not. That would also make sense if you are new to all this stuff. I’ll never know for sure, nor does it really matter at this point since I already addressed your question. But again I appreciate what you said and hope you didn’t take any offense. Good luck on your project.

1 Like

Ok, I’m back!

Was out for a couple of days trying different ways to get this to work. First I tried using a Virtual Machine, running OSX, but I couldn’t get epic games launcher to work because or directX issues with VM, wasted a couple of hours doing that.

Today I got my hands on a macbook pro, after setting everything up, finally managed to compile both WebUI (the latest version from you git that includes the 4.26 iOS fix) and JSON Library. I was so excited!! So I opened up the example project, pressed Play, and… Crash!

I’m getting this error.

LoginId:a5d6e83b7246bb90989ee6a2315742a1
EpicAccountId:2c4b950a8ac1439e8b281ab95fbbde97

Caught signal

FWebInterfaceSchemeHandler::~FWebInterfaceSchemeHandler() Address = 0x2fb6bdd6e [/Users/sergiuhulpe/Desktop/UE4 Projects/WEB_UI_Sample/Plugins/WebUI/Source/WebUI/Private/WebInterfaceSchemeHandler.cpp, line 17] [in UE4Editor-WebUI.dylib]
FCefSchemeHandler::~FCefSchemeHandler() Address = 0x2fb4f7b66 [/Users/sergiuhulpe/Desktop/UE4 Projects/WEB_UI_Sample/Plugins/WebUI/Source/WebBrowserUI/Private/CEF/CEFInterfaceSchemeHandler.cpp, line 82] [in UE4Editor-WebBrowserUI.dylib]
FCefSchemeHandler::Release() const Address = 0x2fb4f7ae2 [/Users/sergiuhulpe/Desktop/UE4 Projects/WEB_UI_Sample/Plugins/WebUI/Source/WebBrowserUI/Private/CEF/CEFInterfaceSchemeHandler.cpp, line 136] [in UE4Editor-WebBrowserUI.dylib]
CefCppToCRefCounted<CefResourceHandlerCppToC, CefResourceHandler, _cef_resource_handler_t>::Release() const Address = 0x2fb49e96f [/Users/Wes/Documents/dev/cef_3071/chromium/src/out/Release_GN_x64/…/…/cef/libcef_dll/cpptoc/cpptoc_ref_counted.h, line 84] [in UE4Editor-WebBrowserUI.dylib]
CefCppToCRefCounted<CefResourceHandlerCppToC, CefResourceHandler, _cef_resource_handler_t>::struct_release(_cef_base_ref_counted_t*) Address = 0x2fb49ea13 [/Users/Wes/Documents/dev/cef_3071/chromium/src/out/Release_GN_x64/…/…/cef/libcef_dll/cpptoc/cpptoc_ref_counted.h, line 177] [in UE4Editor-WebBrowserUI.dylib]

Then I thought, ok, maybe this doesn’t work on mac, because the guy before said he was compiling for iOS. So still optimistic, I went ahead and packaged my project for iOS. The package went ahead without any errors.

When I open the app on Ipad, it loads the scene but doesn’t load the HTML.

So I did a lot of tests, with different Load functions, and when I was about to quit, I had the idea of trying a simple HTML file, and indeed, a magnificent “Hello World” appeared both on my Mac and my Ipad.

I uploaded the crash report files, but also the mac builds for WebUI 4.26 and JsonLibrary 4.26 here., maybe someone else is interested in doing some tests to iron this out.

I will do more tests with different html pages to see when it breaks, and report back here.

Best,
Sergiu

Wow that’s excellent work! I’m sorry things are crashing for you on the Mac itself, but that could also be due to a number of different reasons and not necessarily the plugins themselves (especially if you’re trying it on a laptop). If you got everything working for iOS though and it isn’t crashing but you don’t see any interface, why not start with loading a website first? That way you eliminate the potential for a file lookup issue or something. In fact the current example project is setup for desktop and while it had mobile support when we added it in 2019 I’m fairly certain that the new example project might not support mobile anymore.

At the end of last year we added support for embedding your entire interface (images and everything) in PAK files using a custom pak:// scheme handler. However this is only supported on desktop using the custom browser that comes with the engine. But on mobile devices the native browser of the phone is used, which won’t support that custom pak:// handler.

That means the sample project probably won’t work anymore on mobile. So I would make sure you test it first using a regular website such as google.com to start. Then you can edit the config in the sample project from DirectoriesToAlwaysStageAsUFS to DirectoriesToAlwaysStageAsNonUFS instead. This will cause your files in the /HTML directory to no longer be embedded in the PAK files and will return to the previous functionality of the example project by copying the entire folder over with the PAK files rather than embedding them.

Oh I also forgot to mention cause I was downloading and reviewing your crash report as I was posting…but since you took the time to compile all this I would be happy to connect with you on Discord (if you’re open to that) to debug the scheme handler crash on Mac and see if we can fix it. That way we can make whatever updates we need before uploading the Mac/iOS builds to GitHub if they need to be updated anyway. I will send you a private message on here with our Discord username.

I ended up actually loading some basic HTML pages, both on Mac and iOS. So it’s definitely working. Also tried some JQUERY and that is also loading without a problem. I saw your sample project is made using VUE.JS, I’m not sure which part of that might be an issue.

Happy to connect with you and work together to make this work! Send you a PM.

The WebUI plugin has been updated for versions 4.23-4.26 on GitHub. This update addresses a crash on Mac/Linux along with fixing a packaging issue for Android. The latest downloads are on the releases page of GitHub. Thank you to everyone that made us aware of these issues.

Thanks for all the work. The plugin works great with a single page html and javascript.

Now I was trying to include a web assembly solution like a blazor website for example. The browser supports webassembly but while I was able to reference individually some of the files, images, etc I was unable to reference and get to run the _framework directory with js file and assemblies for a full webassembly website like the blazor default sample that runs fine on the unreal browser without the plug in. It doesn’t work in desktop or any platform. I tried with my own html and with a website and it throws a failed to load the js error.

Any pointers/guides will be appreciated. I can provide a very small/simple example project that shows the issue if that helps.

There is literally no difference between the UnrealCefSubprocess used in this plugin and the default web browser widget that comes with the engine (with the exception of GPU features being disabled by default). You can test the plugin with these features enabled using the -webgl parameter on the command line, except that will significantly degrade performance.

But I’m not going to sit here and figure out anything for webassembly or go through your project to get your custom framework working for you. Perhaps you should choose a more realistic and lightweight framework? As long as the browser works and the JavaScript executes (which it does) then we’ve already done our job. In fact, I heard about this little library called jQuery, it’s usually all I ever need to build a web interface…

So mark my words, any time I’ve been at a company using some stupid framework that uses databindings it usually goes absolutely nowhere, causes more headaches than it’s worth, and becomes obsolete in a few years. But hey if you need blazor or razor or tazer to make something of quality, go for it I guess. Good luck though.

Like I said in my first line. I got the plug in to work fine.

Now this is ue4 community forum post about the plug in so I posted here not to ask for your help but rather any pointer from the community participating in this thread and anyone who is interested in it. Also for tracking purposes so anyone else who attempts the same thing and goes through this thread like I did knows that it won’t work right away with that framework, even if the plugin works fine.

I didn’t ask, neither do I need you to sit and figure anything out. What you do is up to you.

This is a community forum not a support thread so I used it to share my attempt with the community as is related to the plug in.

I will follow up if I ended up getting it to work or I get more in detail information.

1 Like

Any plans on UE5 support or any work in progress?
I know UE5 is still on early access but I checked it and Unreal have updated the chrome version to 84 so I am curious if that makes any changes to WebGL performance or full-screen performance without having to compile from source.
Really nice work with the plugin by the way.

1 Like

Oh hallelujah - thanks for this info, good to hear!

Yes I’m sure we’ll update for UE5 when it is released. We don’t plan on using it internally any time soon, especially since they left UE4 completely broken for VR support before moving on (although it looks like they might be doing UE4.27 now? but it will still be broken anyway). So we don’t really have any hope as things are most likely just going to worse, not better, as this engine continues to get bloated.

But yea, since the browser widget itself doesn’t really change much between engine versions and they update all the rendering aspects themselves anyway we should have no problem maintaining UE5 support without actually using it.

https://github.com/tracerinteractive/UnrealEngine/issues/34

Oh and you don’t need UE5 to fix the performance issues. We already made an update a few months ago that completely forks the source code of the web browser widget, and now you have full 60 FPS and no WebGL slowing things down. So you don’t need to make any engine changes anymore, not even for custom cursor support. Check the patch notes from April on the releases page.

Thanks a lot, amazing plugin.

Additional 10ms will be used for each frame when using webui plugin in my project, detailed info:

Engine: 4.26.2
WebUI: May 19 version
Platform: Win10(64)

For the web browser object, two settings:

  • disable transparency
  • enable transparency (about additional 10ms for each frame)

Using stat gpu, main cost is about Visibility Commands.

Currently I have no clue to optimize it, need your help, thank you!

When enabling mouse transparency:
image

stat GPU: visibility commands cost 8+ms

After disabling mouse transparency or move mouse out of UE Game window, the cost is reduced to under 1ms:

If anything more needed, pls. let me know. Thank you!

https://github.com/tracerinteractive/UnrealEngine/commit/0503c3409c8a4f6eee2e28bb2828be2866a54e71

An update has been released to support transparency throttling for improved performance. There is a new tick setting on the interface widget:

This is enabled by default in version 4.27 of the WebUI plugin.

There is also an update to the core browser integration where there were still some duplicate symbol names. This has been corrected for anyone experiencing packaging errors on Linux.

WebUI: 4.27

Thanks a lot! Will you patch 4.26? I will try to merge it first and have a try

Kudos!

For everyone, this is a MUST-HAVE update.