ashea-code/blui

Rich HTML UI engine for UE4

Getnamo Fork Notes

Fork made to support small additions and changes for certain use cases.

To install check out the latest releases https://github.com/getnamo/BLUI/releases and drag and drop Plugins folder into your project root folder

Download and Fullscreen Support

Contains changes to allow downloading of files via the inbuilt browser.

Updated CEF build to 3.2556 to support fullscreen videos.

Convenience Blueprints

The native plugin didn't contain any self contained drag and drop examples so I've added some.

BluiWidget

A user widget (UMG) blueprint which embeds a BLU texture as an image brush. Contains various utility functions to allow loading and parsing urls easily. Call InitBluEye with starting url and browser window size to start this widget. See BluiWorldWidgetActorExample for an example of how it's used in practice.

BluiWorldWidgetActorExample

Encapsulated BluiWidget user widget in an actor. Drag and drop this actor into your scene and it will auto-spawn the required BluTickActor to make everything work.

3 BluiWorldWIdgetActorExample actors with youtube.com, blui ue4 and local://test.html specified as their URL respectively

Url

By default the actor will check the url for local:// protocol and load local content first if detected. This should be placed inside the following directory: {project root}/Content/html. NB: You can still use the vanilla blui:// protocol which will load content relative to your project root.

e.g. having a test.html file inside your Content/html folder

Basic URL validity is also tested, but you can safely ignore http:// etc. E.g. just specifying youtube.com will resolve correctly

If your URL isn't valid however, it will redirect the string as a search term e.g. typing a sentance or a search term.

You can untick Should Auto Search Invalid Url to disable this behavior.

Resize

By default the actor has a BLUI resolution of 1000x1000, you can change this by just changing the user widget draw size.

BluTickActor

Instead of ticking in your level bp, I prefer to use a simple actor to do the ticking. Other convenience blueprints may spawn this as necessary so if you use those, you don't ever need to use this directly.

//End Fork Notes

HTML powered UI and HUD for Unreal Engine 4

(Hit up the wiki for a quick start guide!)

Do you use BLUI in your project? I'd really love it if you credit me and it! You can even use the logo right here!

License: MIT

What is it?

BLUI is an Unreal Engine 4 plugin that allows easy interaction with the Chromium Embedded Framework. It provides a simple Material Instance and input functions to help streamline the rendering of rich HTML interfaces.

BLUI tries to stay out of the way as much as possible. All rendering of the DOM and processing of the JavaScript happens in a separate process, just like Chromium. BLUI only updates the texture inside the material instance when Chromium requests a redraw, not every tick, saving a bit more processing along the way.

Features

• Chromium Powered (same thing that powers Google Chrome!)
• Fully compatible with every web technology that Chrome/Chromium works with. (HTML5, WebAudio, WebSockets etc.)
• No specific ties to any in game class, simple use Blueprints (or C++) to create a new "BluEye" object and grab its material instance, then you can paint it on anything!
• Execute JavaScript in the "browser" from your game to pass data to the web page
• Using blu_event JS native function you can pass data from the page's JavaScript back into UE4!
• C++ or Blueprints, works with both!

Setting up the editor and project

Then copy the BLUI folder into the "Plugins" folder within your project directory, and enable the plugin.

Re-generate your project's Visual Studio file and load up the editor. Then check the plugin list to ensure it has been loaded!

Updating the CEF event loop

You must call the BluManager::doBluMessageLoop(); method every tick in order for the CEF process to update properly. To do this, override the default GameMode's Tick function and include the Blu/Public/BluManager.h header file. You can then call the appropriate method.

As of now, you no longer need to do this. You can simply call a blueprint node to Tick the CEF loop every tick of the level blueprint.

Loading Local Files

Set your default URL or use the "Load URL" node/method to load a URL that starts with blui:// this will point to the directory root of the project or the game (if packaged). So if you wanted to load an HTML file from YourProject/UI/file.html, set the URL to blui://UI/file.html

HUD Example Blueprint

Within the release, you'll find an ExampleHUD blueprint file, place this into your project's blueprints directory to try it out! (It's a simple UMG widget pre-configures to accept keyboard and mouse input, with a BluEye instance hooked up to a canvas)

Shipping Your Game (Linux)

Copy all contents of the Linux shipping files into your packaged game's GameName/Binaries/{Linux}, these are the required files for the Chromium process.

blui's Issues

"Updating the CEF event loop" How?

Hey, I'm mostly using Blueprints for the game I'm working on, Why is the function BluManager::doBluMessageLoop() not exposed?

Can I add it to a blueprint function library?

How to get keyboard input?

I really dont know how?

It seems the two events Get Key Down and Get Event Char are needed, however I dont find a widget which provides those.

[LINUX] Chromium Sandbox won't let BLUI run

Hey, when I try to start the editor on linux, I get the error:
"[0305/164432:ERROR:browser_main_loop.cc(170)] Running without the SUID sandbox! See https://code.google.com/p/chromium/wiki/LinuxSUIDSandboxDevelopment for more information on developing with the sandbox on.
[0100/000000:ERROR:zygote_linux.cc(585)] write: Broken pipe
"
And the editor wont start up. The project compiled fine (by Clang)

File organization issues

Hey Aaron,

I stumbled upon your project through your video on YouTube and very much like what you're doing here. Peeking at the code, I noticed a few problems with how you organize your files, so I'd like to throw some suggestions your way:

1. The 'Classes' folder is obsolete and no longer required. You can now put UObject declarations into Public and Private

2. Your public header files in Classes include BluPrivatePCH.h. This is not desirable, because that forces your users to include a private header. By definition, the "Private Pre-Compiled Header" file should only be used internally and not be accessible outside your module.

3. BluPrivatePCH.h should be included only by your .cpp files, not any of the private or public header files. If your private/public header files require other headers in your module, then you should include those header files explicitly.

4. In general, you should minimize the number of other header files that any given header file depends on. Ideally, no header file should include any other header files. This can almost always be accomplished by using forward declaration of types. One of the common exceptions is when you derive from an external type, i.e. IModuleInterface. Note that most types declared in Core do not require explicit inclusion as the majority of Core headers are always included automatically.

5. You may want to limit your plug-in to those platforms that actually support and are set up to compile CEF by white-listing them in your .uplugin file.

I'm looking forward to seeing how you send JavaScript events back to UE4. Some Blueprint integration would be nice. Good luck :)

Unreal 4 10.3 (last release under 4)

Was hoping to check your code out...but unfortunately...the plugin wont load under 4.10.3

;-)

FPS Issues

paulv2k4 experiences performance drops on large maps using the ExampleHUD. Currently unsure of the cause.

Quote from his forum post:

Ok, so I did some testing and came to some rough conclusions.

It seems this only works properly on a blank map and being run in a standalone process, in the editor window or (probably best) in a packaged game. Any other instance like "new editor window" drops the fps by at least 20 fps (in certain this is Slate/UMG issue). Put that with any decent size/complex map and your fps will soon become 10-20fps. (unchecking "use single process", does not seem to improve this)

Also there is substantial fps dips occurring every 1-3 seconds bringing the fps down another 5-15fps, which is a little odd.

There seems to be a slight 0.5s - 1.5s pause between a mouse click/hover/interaction and the page actually doing something.

In that case I can not see this usable as a HUD but Menu UI will be fine as long as you keep the 3D background small (which games tend not to do anymore).

I do know that Slate (UMG) is incredibly slow too which could be hindering the process (the profiler proves this). This made me wonder whether I should put this on a plane to see if it improves things.

My concern is that if you were to ship the game and someone with a much worse CPU/GPU were using it, they would notice a more significant performance drop.

Adding BluI instance during Event Possessed

Simple enough.
Creating a BLUI instance during a Event Possessed of a pawn (Player pawn to be exact) results in
LogBlu:Warning: NO BROWSER ACCESS OR NOT ENABLED

No other information is provided regarding why the failure occurred. Attempted adding Delay node in case of startup delay of the blui process to no avail.
Also attempted to setup the BluI instance during the constructor, same results.

Missing demo from release

Hello,

3.1 appears to be missing the demo widget (ExampleHUD) referenced throughout the wiki.
Missing from atleast source and windows/linux binary release.

Can be found in 2.8 release but new users are unlikely to search through previous version.

Thoughts on awesomium

Hello,

Been doing some research on the requirements to replace chromium with awesomium that has its goals setup more in line with our usage pattern. This would also remove the heavy requirement of two separate projects (Blui and BluBrowser) as awesomium already implements IPC and isolation processes in a suitable manner.

My only concern is the licensing for awesomium is not permissive (Free for <100K revenue, non-commercial and education).

Any thoughts on this? Looking at the existing code this would be a heavy overhaul but the benefits are pretty vast.

Thanks

Video tag in web browser not working

If you write a simple web page with a video tag, no video will actually be played even though it plays in web browser.

Installation Instructions

Hi @AaronShea,

Thanks for the plugin, extremely exciting - especially as a web developer.

I'm not good at computer. Any installation instructions would be appreciated, cheers!

EDIT: https://github.com/AaronShea/BLUI/wiki/Simple-Setup-(Windows-64-Bit)

http://ue4.ninja/blui

http://ue4.ninja/blui
404 not found！！

Mac and Linux version

Hello! Thank you for great plugin!

Where I can find version for MacOS and Linux, or source code of blu_ue4_process?

Does it work with Unreal Engine 4.8.1?

Hi there, I followed the instructions.

1. Installed Unreal Engine 4.8.1
2. Place the contents of latest release of BLUI "Windows Shipping" folder into C:\Program Files\Epic Games\4.8\Engine\Binaries\Win64
3. Downloaded your demo application, tried to open it "BLUIDemo.uproject", it asked to rebuild some DLL, I said yes
4. Run demo, no browser showing, just white rectangles where the browser should be

Can I provide more information? What else can I try?

Demo project has build errors

Hi,

I am trying to use the demo project and get started with BLUI but the project does not build. I am using unreal engine 4.10 and Visual Studio 2015. Also tried opening with ue4.7 and 4.9 but same issue.

Here is the log

1>------ Build started: Project: UE4, Configuration: BuiltWithUnrealBuildTool Win32 ------
2>------ Build started: Project: BLUIDemo, Configuration: Development_Editor x64 ------
2>  Performing full C++ include scan (building a new target)
2>  Creating makefile for BLUIDemoEditor (no existing makefile)
2>  Performing 9 actions (9 in parallel)
2>  PCH.BluPrivatePCH.h.cpp
2>D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(182): error C3646: 'EMIT_DEPRECATED_WARNING_MESSAGE': unknown override specifier
2>D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(182): error C4430: missing type specifier - int assumed. Note: C++ does not support default-int
2>D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(182): error C2059: syntax error: '('
2>D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(182): error C2555: 'base::DCheckAsserter::warn': overriding virtual function return type differs and is not covariant from 'base::AsserterBase::warn'
2>  D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(177): note: see declaration of 'base::AsserterBase::warn'
2>D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(183): error C2143: syntax error: missing ')' before ';'
2>D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(183): error C2143: syntax error: missing ';' before ')'
2>D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\ThirdParty\cef\Win\include/base/cef_thread_collision_warner.h(183): error C2059: syntax error: ')'
2>  -------- End Detailed Actions Stats -----------------------------------------------------------
2>ERROR : UBT error : Failed to produce item: D:\Unreal Projects\BLUIDemo 4.10\Plugins\BLUI\Binaries\Win64\UE4Editor-Blu.dll
2>  Total build time: 13,93 seconds
2>C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Microsoft.MakeFile.Targets(37,5): error MSB3073: The command ""C:\Program Files\Epic Games\4.10\Engine\Build\BatchFiles\Build.bat" BLUIDemoEditor Win64 Development "D:\Unreal Projects\BLUIDemo 4.10\BLUIDemo.uproject" -rocket -waitmutex -2015" exited with code -1.
========== Build: 1 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

Am I doing something wrong here?
Thanks in advance.

Is there something like local html sample exist?

I'm looking forward to get a html vs ue4 sample.

Add scroll

It seems theres no scroll option right now available.

Click on widget doen't trigger

When a widget with a click override binding is used, and the unhandled event is returned, the click doens't register, unless the user double clicks
Tested in UE 4.8.3 with BLUI 3.1

Rework render code

Rather than trying to update per tick, only update using the OnPaint event in CEF

Flash process not terminating on PIE

For some reason the PIE mode makes the Flash plugin keep the browser open, which can create an issue when stopping and starting the game in editor.

UI Widget causes engine crash, tried different embed scenarios

So I have a mainmenu widget with a vertical panel. On the left side I want a seperate website to be displayed in a widget switcher, on the right side another website. Now I tried to switch from a widget switched to "custom created widget" and than tried to drag it in into the canvas, but that caused in both cases, widgetswitcher and the "custom created widget" an engine crash. The base web-canvas widget is the ExampleHUD Widget from master branch.

cef\Win\include/base/cef_ref_counted.h(329): error C2027: use of undefined type 'BrowserClient'

Problem with including BluEye within another cpp file

cef\Win\include/base/cef_ref_counted.h(329): error C2027: use of undefined type 'BrowserClient'

[Critical] Resize Function Crashes Video Drivers

I've narrowed down why this happens, patch in the works

Improve Mouse Click position

I tried to embed multiple html canvas on a mainmenu widget blueprint. But it seems the input gets handled for the whole mainwidget blueprint, instead of only in the area of the html canvas. I wonder what can be done about it :/?

Right now its like you have to click into very weird spots on the screen (example fullhd), and its not where the html content in reality is.

Default Texture

Display a default texture while not active (such as glass etc.)

[Feature] Advanced Javascript Events

I'll be used this issue as a scratchpad for improving BLUI's Javascript integration.

• Support named/custom events to avoid "name drilldown" in code
• Support more types for return values
• Nested JSON improvements
• Live bindings?

[Updated 8/3/2015]

Blu processes keep spawning in editor

This is caused with the experimental Widget component inside the component editor.
Simply need to ensure we are actually playing in editor, not just viewing.

How to send Keyinputs without using the UMG Class

Hey,

At the moment, the blui function KeyDown, takes a KeyEvent as Input. we can only use it if its part of a UMG class (Since it overrides the Keydown method, which already passes a KeyEvent in by default), BUT how do use it if we wan't to call inputs to it directly? (Using Any of the Keyboard nodes in Blueprint (Enter, Shift, A,Z,W,S etc..)

Javascript Events

Notify the game of javascript events from the browser

[Mac] UE 4.8 Declaration shadows a field of RenderHandler

When trying to compile the Plugin on Unreal Engine 4.8 in a Mac, Xcode returns an error in the RenderHandler.cpp file with the message: Declaration shadows a field of RenderHandler
The error happens because the declaration of the local variables "width" and "height" being named the same as the constructor parameters. I'm not a C++ expert programmer and I doubt why the error is thrown in UE 4.8 but not in UE 4.7, maybe there is some pragma declaration in Unreal code, no idea.

Changing the RenderHandler local variables "with" and "height" names fixes the issue, and the plugin is compiled.

Sorry to not send a PR, I downloaded the plugin package file and I didn't fork the repository.

Files that needs to be updated:

RenderHandler.h
change local "width" and "height" variable names to, for example, "_width" and "_height" on lines 22 and 23
RenderHandler.cpp
Update local "width" and "height" variable names on lines 5,6,12
BluEye.cpp
Update RenderHandler instance "width" and "height" variable names on lines 225,226

Cheers

mouse focus problem

in the BLUIDemo test-javascript.html,when I shift f1 use mouse to control spin or not ,then I can't go back to the prev state,it seems the blui occupy the mouse never to release it again.

Thanks in advance

Installation Issue

Currently I am using Unreal engine 4.9 version.There is a problem in installation.I had downloaded the Demo project. When I tried to launch project it will ask for rebuild the project manually.

Whenever I build from Visual Studio 2013 it gives errors. What should I have to do?

Input

Mouse and Keyboard input

Cannot get teh plugin installed

This seams like an awesome plugin but I have issues trying to install the plugin in UE4.9.2 (and also 4.8.3).

1. I did a git checkout of master.
2. Copied the BLUI to the plugin folder of UE (as the docs mention)
3. The docs says: "Copy the files located inside the 'shipping' folder... " but I cannot find the shipping folder in the BLUI branch. So I am not sure what to do here...
4. Start UE4 4.9.2 and enable the plugin.
5. After restart, a popup appears with text "Plugin missing opr incompatible: Missing or incompatible modules in BLUI plugin - would you like to disable it? You will no longer be able to open any assets created using it."

What must I do to use the plugin? Any help is more than welcome

Example for RTCDataChannel?

I'd love to do data transfer (send and receive) with RTCDataChannel, but I can't really grasp on how to do this in BLUI/UE4.

If I pass the channel back to UE4, what type will it be, if possible at all?

Event reply needs to return a value

Just a heads up that when following the setup instructions here: https://github.com/AaronShea/BLUI/wiki/Simple-Setup-(Windows-64-Bit)

You might need to add one more step about making the 4 Return nodes have a Return Value (I just used Unhandled, not sure what the difference is, but I think Handled messed with clicks bubbling up).

Screenshot of BLUI example blueprint complaining:

LogInit:Warning: Incompatible or missing module: libUE4Editor-Blu.so

Copied "BLUI 2.5 Release OSX Beta/Linux Shipping" to "UnrealEngine-4.8.0-release/Engine/Binaries/Linux/Blu"
"BLUI 2.5 Release OSX Beta/BLUI" to "Plugins"

And after start editor see a message that says "Missing module libUE4Editor-Blu.so".

In compilation process I have an error.
error: typedef redefinition with different types ('long' vs 'FPlatformTypes::int64' (aka 'long long'))
typedef long int64; // NOLINT(runtime/int)
^
Runtime/Core/Public/HAL/Platform.h:601:32: note: previous definition is here
typedef FPlatformTypes::int64 int64; ///< A 64-bit signed integer.

Can't find Shipping folder

Hello, I am trying to install your plugin but cannot seem to find the shipping folder you mention in the installation instructions. It is not in the folder I downloaded for your plugin, the UE4 project, or UE4 installation folders. Where can I find the shipping folder?

Syntax error in BluEye.h

I was trying to do a very basic setup with a c++ Actor class, here is the code:
http://pastebin.com/yQq76fbv

And when I built the project, Visual Studio tells me that there are 27 errors inside BluEye.h:
http://pastebin.com/qh2f93V3

I installed BLUI just as you told in the wiki, but as I'm very new to UE4 it would be very likely that the mistake is on my side.

Ty in advance

JSON object composing

Add the ability to compose an object into a JSON string via blueprints or C++ code

Viewport clicks are off

When using an extended BluWidget on the viewport the click coord are off. Should be a simple fix.

JQuery rendering/positioning issue

Hello and goodnight,
It seems BLUI has issues with JQuery effects, it seems to be detecting the wrong positions of the HTML elements when I use "mouseenter" or "mouseleave" functions, making it very imprecise, not detecting correctly nor the location or element width/height.

Severe mouse lag on low end computer

Hey, just wanted to mention that I'm experiencing severe lag with my mouse cursor on a MacBook Pro 2014 2,8 GHz Intel Core i7 16 GB 1600 MHz DDR3 Intel Iris 1536 MB UE 4.10.2

As if the mouse acceleration goes bananas if you move it to fast. It went away when I removed BLUI

Just wanted to mention it, I'm not able to help out at the moment unfortunately.

I think this plugin seems really awesome (and perfect for a webdev like me) to make in game UIs, especially those you put on a material on an actor in the world, as I'm planning to do with my game. If I have time I'll try it out on my windows computer with better perfomance.

Thanks for writing a great plugin

Cheers

Black rectangles when play full HD youtube video in fullscreen

You need to make copy of buffer when you pass it into:
parentUI->TextureUpdate(buffer, updateRegions, dirtyRects.size());

This is why, when you copy it to render target in
void UBluEye::TextureUpdate(const void *buffer, FUpdateTextureRegion2D *updateRegions, uint32 regionCount)
you use ENQUEUE_UNIQUE_RENDER_COMMAND_ONEPARAMETER

So if image large, then we have black artefacts on it, because during copying in render thread it changes in browser thread.
I think you can alloc buffer in RenderHandler::RenderHandler(int32 width, int32 height, UBluEye* ui), if size doens't changed.

I've tested solution (not optimized with allocs on each update) and it works.

Texture Created in multiple paths with improper settings.

Hello,

The U4 Texture creation should have a single place where its created rather than within Resize/Recreate texture, this makes modifications and debugging confusing. It should also enter a error state when GetTexture() is called and no texture is generated rather than creating a blank texture silently.

The texture creation is also missing filter, compression and mip generation settings that are needed for textures that are at very close range to the player or you get blurry due to poor default in filtering.

Can submit a pull if requested.

Transparency and HUD

Working HUD/Viewport, requires transparency to function properly.

Replace BluiBrowser with WebBrowser

I've had medium success in replacing BluiBrowser process with the Epic provided CEF process. This reduces overall footprint needed by Blui and provides some extra scripting capacity via WebJS that is included in WebBrowser.

If any desire I'd be happy to help with a pull request.

https://github.com/EpicGames/UnrealEngine/tree/ab9713f2c0346236b0fdd271d3304cf0991d23de/Engine/Source/Runtime/WebBrowser

https://github.com/EpicGames/UnrealEngine/blob/ab9713f2c0346236b0fdd271d3304cf0991d23de/Engine/Source/Runtime/WebBrowser/Public/WebJSFunction.h

https://github.com/EpicGames/UnrealEngine/blob/ab9713f2c0346236b0fdd271d3304cf0991d23de/Engine/Source/Runtime/WebBrowser/Public/IWebBrowserWindow.h

Unreal ships with CEF, why doesn't the project take advantage of that?

Looking over this and the UE source. Why doesn't BLUI take advantage of the CEF that is already distributed with the Unreal Engine? I see there isn't Linux support in the Engine/Source/ThirdParty/CEF3, but maybe this is something to bring up with Epic?

Debugger Session

Hello,

I see the process opens port 7777 on loopback interface. Connecting via telnet or web browser fails.
Is there a method to access this debugging console? Is it documented anywhere?

Connecting To localhost...Could not open connection to the host 127.0.0., on port 7777: Connect failed

Unreal.JS integration

Hello,

Possible enhancement suggestions to interface the JS runtime with https://github.com/ncsoft/Unreal.JS

Unreal.JS makes use of the UE reflection system so real-time binding can be achieved. I'm mainly interested in this to bind variables between actors <-> BLUI to prevent the constantly execution of javascript functions for updating variables that can quickly get out of sync.

Thanks!