Announcement

**Sami Vuorela** · 09-18-2016, 09:13 AM

Managed to fix my keyboard events in 4.12!
Apparently some focus-related setting is no longer enabled by default in 4.12 and you have to enable it manually.

Here's how I fixed it when using the ExampleHUD asset:

Open the asset.
Select Designer mode from the top right.
In the Hierarchy pane, select ExampleHUD.
In the Details pane, tick the box "Interaction -> Is Focusable".

Now my BLUI browser actually gets some keyboard events after I focus it by clicking once.

**AaronShea** · 09-18-2016, 10:35 AM

Originally posted by qdelpeche View Post

Unfortunately there is no progress here. I can't even get the plugin to build with the scripts that were provided to me and the instructions provided weren't very clear at all. Every time I try to do a build it takes upwards of 2 hours and then fails at the end ... I try to tweak a few things ...try the build again and it fails.

I will gladly defer to anyone who can try to build BLUI themselves but I am afraid to say the CoherentUI seems to be the only alternative now ... or we have to work together to modify the current UE4 HTML Widget to provide us with the key events we need.

I have been looking at ways of using the UE4 HTML Widget, which is also based on CEF, and have come up with a novel event system but it is not elegant.

Unfortunately that's basically how it goes when building Chromium from source, (I had that experience for over two weeks straight when first doing this) and it's one of the reasons I don't have the time to build new releases of CEF3 anymore. College has to take some priority, I appologize for not replying to anyone lately
If you post whatever errors your getting I may be able to point you in the right direction.

**Aricwithana** · 09-20-2016, 12:22 AM

Originally posted by Sami Vuorela View Post

Managed to fix my keyboard events in 4.12!
Apparently some focus-related setting is no longer enabled by default in 4.12 and you have to enable it manually.

Here's how I fixed it when using the ExampleHUD asset:

Open the asset.
Select Designer mode from the top right.
In the Hierarchy pane, select ExampleHUD.
In the Details pane, tick the box "Interaction -> Is Focusable".

Now my BLUI browser actually gets some keyboard events after I focus it by clicking once.

Perfect!! This worked and keys are now firing. Thanks for noticing!

Originally posted by AaronShea View Post

Unfortunately that's basically how it goes when building Chromium from source, (I had that experience for over two weeks straight when first doing this) and it's one of the reasons I don't have the time to build new releases of CEF3 anymore. College has to take some priority, I appologize for not replying to anyone lately
If you post whatever errors your getting I may be able to point you in the right direction.

Maybe, atm, instead of continual updates, a specific version needs to utilized and only updated when necessary? Some of the CEF really needs to be edited and tweaked for performance and more so just being able to pull straight from CEF might not be something that Blui should aspire to for performance.

**Muzaheed** · 09-20-2016, 02:11 AM

is it possible to use webrtc or any web based voice/video chatting using this plugin?

**CrashAngel** · 09-29-2016, 11:28 PM

Hi This Plugin Work In Last Version 4.13??? Im trying and receive various errors...

**Dodgin** · 10-23-2016, 10:39 AM

Has anyone experimented with using the transparent area of CEF as a click-through event?

**Zinglish** · 10-26-2016, 04:36 AM

Originally posted by Dodgin View Post

Has anyone experimented with using the transparent area of CEF as a click-through event?

I have been looking at this myself. The only solution I came up with was forcing the input to UI only on start, then in Javascript you capture a mouse down event and call a blu_event() when clicking on <body> which calls a C++ function that switches the input to game only and then trigger your game's mouse down event. You switch back to UI only input once you're done with input.

I'm fairly sure there's a better way around this, for instance: Switch input to game and UI, grab the zbuffer off the BLUI material, test against that and pass the click event to the game if the pixel clicked is transparent.

EDIT: It seems the overly priced Coherent UI has transparent click through implemented by default and they seem to be using the transparency method I wrote about above. It's about half way down the page. Search for "input on transparent".

As described by the documentation they have a canvas over both BLUI and game, this captures mouse events, tests the pixel under the cursor for transparency in BLUI (I assume it checks raw pixels from the material, like this). If it's transparent then it passes the input to the game, if the pixel's opacity above a certain threshold then it passes the input to the BLUI instance.

I will definitely be looking into this in the next few days if I decide to stick with BLUI and will post my results here.

**Dodgin** · 10-28-2016, 10:25 AM

Originally posted by Zinglish View Post

I have been looking at this myself. The only solution I came up with was forcing the input to UI only on start, then in Javascript you capture a mouse down event and call a blu_event() when clicking on <body> which calls a C++ function that switches the input to game only and then trigger your game's mouse down event. You switch back to UI only input once you're done with input.

I'm fairly sure there's a better way around this, for instance: Switch input to game and UI, grab the zbuffer off the BLUI material, test against that and pass the click event to the game if the pixel clicked is transparent.

EDIT: It seems the overly priced Coherent UI has transparent click through implemented by default and they seem to be using the transparency method I wrote about above. It's about half way down the page. Search for "input on transparent".

As described by the documentation they have a canvas over both BLUI and game, this captures mouse events, tests the pixel under the cursor for transparency in BLUI (I assume it checks raw pixels from the material, like this). If it's transparent then it passes the input to the game, if the pixel's opacity above a certain threshold then it passes the input to the BLUI instance.

I will definitely be looking into this in the next few days if I decide to stick with BLUI and will post my results here.

I've been meddling with having CEF just test for DOM element body in the click event. Essentially if you clicked the body, you didn't click an element, and it should pass through.

**Dodgin** · 10-31-2016, 09:53 AM

[MENTION=50673]Zinglish[/MENTION], I've got it running pretty smoothly using a communication that updates on mousemove, since that has to be forwarded to CEF anyways. Sure beats temporarily freezing the render buffer and causing crashes.

Anywho - I've got my game's UI set up on a single CEF overlay, and then a few dynamic spool-ups for 3D uis. If anyone is curious how to do I can explain further.

**Zinglish** · 10-31-2016, 12:42 PM

Originally posted by Dodgin View Post

[MENTION=50673]Zinglish[/MENTION], I've got it running pretty smoothly using a communication that updates on mousemove, since that has to be forwarded to CEF anyways. Sure beats temporarily freezing the render buffer and causing crashes.

Anywho - I've got my game's UI set up on a single CEF overlay, and then a few dynamic spool-ups for 3D uis. If anyone is curious how to do I can explain further.

I ended up moving over to UMG / Slate since CEF ended up being complete overkill. Can I ask why you are choosing a CEF UI over UMG?

I found that the things I could do in UMG were pretty close to or better than any HTML, CSS and JS I could have made, not to mention UMG was quicker development time, less fiddly and less resource hungry than BLUI. I am having a hard time thinking about reasons I actually need CEF in my UI now.

**Dodgin** · 10-31-2016, 12:55 PM

Originally posted by Zinglish View Post

I ended up moving over to UMG / Slate since CEF ended up being complete overkill. Can I ask why you are choosing a CEF UI over UMG?

I found that the things I could do in UMG were pretty close to or better than any HTML, CSS and JS I could have made, not to mention UMG was quicker development time, less fiddly and less resource hungry than BLUI. I am having a hard time thinking about reasons I actually need CEF in my UI now.

Three reasons, one is anecdotal:

1. My team has years of experience building feature-rich AngularJS application front-ends. The flow is quick and powerful with AngularJS + CSS3 for us. CSS3 + HTML + JS has been developed and honed specifically for the exact purpose of user interaction.
2. Complete separation of the UI from the game, via our standarized API allows for the UI to be made completely standalone, then the API is just plugged up.
3. We initially started with UMG/Slate, but a few corrupted saves later and inconsistency in scaling and we were done with that as a permanent user-facing solution.

**SrGeneroso** · 11-07-2016, 09:12 PM

Dodgin

Anywho - I've got my game's UI set up on a single CEF overlay, and then a few dynamic spool-ups for 3D uis. If anyone is curious how to do I can explain further.

For sure, I'm not still there but blui sounds awesome and any help will be awesome. I guess the hardest part to me is understand both the unreal integration and the web design together. A youtube video or a demo level sure will help a lot of us to discover this new feature. If I can help you or any other (as much as my skills lets me= in any way let me know.

**RayReadyRay** · 11-16-2016, 04:15 PM

This plugin has solved some otherwise incredibly difficult problems in my project, Aaron, thanks for developing it.
That said, I could REALLY use the functionality added to recent CEF versions. Do you see that happening? If there is any information you can provide to the community that may help that process please share.
I understand school takes priority, thanks again.

**plangton** · 11-29-2016, 01:53 PM

Hi
I am trying to use this plugin to simulate the drag and drop but it is not successful
bassically I trigger the leftmousedown and then when I want leftmouseup
but no drag is happening, can someone give me a hint ?

**plangton** · 11-29-2016, 07:22 PM

Okay I managed to make the simple drag and drop. but it does not work in soe cases
for example it does not work with html 5 . try your code with : http://www.w3schools.com/html/html5_draganddrop.asp
However it works with https://jqueryui.com/draggable/
additionally I can't do a multi line selection.

can anyone help me with this ?

Announcement

BLUI Open Source HTML5/JS/CSS HUD/UI

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment