BLUI Open Source HTML5/JS/CSS HUD/UI

ryanjon2040 · February 20, 2015, 11:05am

[QUOTE=;225513]
You’re probably right, however I’m a little unsure how to edit a poll…

Hopefully Epic Admins will do that.

[QUOTE=;225515]
BLUI was featured in the Twitch Community Spotlight stream!
Thanks for the support everyone!!
Twitch Recording

Congrats buddy! I saw the live stream and was pretty excited to see this :). You should edit the first post to include youtube link when its available.

By the way, which HTML editor are you using to create the UI? Edge Animate, Reflow, Google Web Designer or anything else?

Shammah · February 20, 2015, 11:55am

[QUOTE=ryanjon2040;225600]
Hopefully Epic Admins will do that.
By the way, which HTML editor are you using to create the UI? Edge Animate, Reflow, Google Web Designer or anything else?

Looked like plain Sublime Text to me, with some libs like JQuery

AaronShea · February 20, 2015, 1:27pm

[QUOTE=ryanjon2040;225600]

By the way, which HTML editor are you using to create the UI? Edge Animate, Reflow, Google Web Designer or anything else?

Usually I do plain HTML in Sublime Text 3, but I do recommend Adobe Edge Animate. Version 1.5 is free if you can track it down! Really any editor will work, use what you’re comfortable with! Flash is even supported embedded in the HTML.

EDIT: Somehow I’ve never seen the Google Web Designer, I’m gonna check that out

SchnitzelDude · February 20, 2015, 1:32pm

Thank you @! Building UIs with HTML is an trend. I will definitely try that out.

AaronShea · February 20, 2015, 1:39pm

[QUOTE=SchnitzelDude;225663]
Thank you @! Building UIs with HTML is an trend. I will definitely try that out.

No problem. While BLUI isn’t as comprehensive as things like Coherent UI, it’s indented to be that way. I’d rather just provide the methods and blueprint nodes so you developers can make exactly what you want with it.

And thanks

anonymous_user_b1c15813 · February 20, 2015, 7:42pm

Is there a way to bind button events like I have “Clicked Me” button HUD in Html and then when I clicked on it, it log some output in UE4?

Thanks,

AaronShea · February 20, 2015, 7:57pm

[QUOTE=;225946]
Is there a way to bind button events like I have “Clicked Me” button HUD in Html and then when I clicked on it, it log some output in UE4?

Thanks,

Hello again, this is very possible!

I haven’t written up the wiki on JavaScript events due to classes take up some time, but I’ll be doing that tonight.
Inside your JavaScript, you can call a native function called blu_event();



<a href="#" onclick="blu_event('my_button', 'clicked!')"></a>

Just a simple on click example up there ^

In blueprints you’d assign a script event emitter from BluEye instance, looking something like this:

Event Name would result in “my_button” and Event Message would be “clicked!”

you can pass booleans, strings, doubles, or integers in the 2nd argument of the JavaScript method

anonymous_user_b1c15813 · February 20, 2015, 8:22pm

[QUOTE=;225957]
Hello again, this is very possible!

I haven’t written up the wiki on JavaScript events due to classes take up some time, but I’ll be doing that tonight.
Inside your JavaScript, you can call a native function called blu_event();



<a href="#" onclick="blu_event('my_button', 'clicked!')"></a>

Just a simple on click example up there ^

In blueprints you’d assign a script event emitter from BluEye instance, looking something like this:

Event Name would result in “my_button” and Event Message would be “clicked!”

you can pass booleans, strings, doubles, or integers in the 2nd argument of the JavaScript method

Thanks for the quick reply and explaining how the system works.

Thanks,

KRushin · February 21, 2015, 4:11am

Got it up and running with 4.7 without a fuss.

Only have a couple basic prototypes working

Glad to see if works with UMG, rather than trying to completely replace it. Hopefully it continues so they can get benefits from each other
Quickly realized how much of the web still uses flash, haha. CEF and Flash working together is a bit tricky. Do you have any ideas on how you can get flash working from a packing/distribution standpoint (win only). I mainly ask cause a couple pieces of static content are flash based (not worried about mobile, so it’d be for win only). It would be a pain to say go to adobe.com and download flash, haha.
PIE and adobe flash won’t work well (it will run once, but trying again will crash)

AaronShea · February 21, 2015, 4:33am

Seeing as CEF and Chrome share the code looking for third party plugins like Flash it should function if flash is installed. As far as shipping flash I’m not sure about the legality.

It seems you can get small flash redistributable installers here: Adobe Flash Player Distribution

EDIT: Hm. Weird about flash and PIE. I’ll look into that!

KRushin · February 21, 2015, 5:13am

seems like it comes down to processes being spawn but not being shut down when exiting PIE? (load a youtube video (HTML5) and you will continue to hear sound). But great work man is really cool and will continue to play around with it

AaronShea · February 21, 2015, 5:39am

[QUOTE=KRushin;226194]
seems like it comes down to processes being spawn but not being shut down when exiting PIE? (load a youtube video (HTML5) and you will continue to hear sound). But great work man is really cool and will continue to play around with it

I’d assume that’s the major issue yeah. I’ll have to look into a bug fix for that. Thanks for the report!

anonymous_user_0d08e9d6 · February 21, 2015, 7:36am

This is amazing! Thank you so much!

AaronShea · February 21, 2015, 7:06pm

[QUOTE=;225946]
Is there a way to bind button events like I have “Clicked Me” button HUD in Html and then when I clicked on it, it log some output in UE4?

Thanks,

I’ve created the quick start guide on JavaScript events here:
https://github.com//BLUI/wiki/JavaScript-Events

KRushin · February 21, 2015, 8:50pm

I’m curious if you had any ideas in regards to CEF. I’ve been experiment with having twitch streams, but i think CEF doesn’t allow irc sockets to open (so no video streams/chat will load). Just curious if you had any ideas around this (as they don’t support any HTML5 yet)

AaronShea · February 22, 2015, 1:19am

[QUOTE=KRushin;226543]
I’m curious if you had any ideas in regards to CEF. I’ve been experiment with having twitch streams, but i think CEF doesn’t allow irc sockets to open (so no video streams/chat will load). Just curious if you had any ideas around this (as they don’t support any HTML5 yet)

That is an interesting issue… it seems that something in CEF doesn’t like Flash sockets… I’ll look into that.

In terms of chat, anything WebSocket based will work just fine.

KRushin · February 22, 2015, 2:13am

its such a hyper specific issues so don’t worry about it too much, but twitch is stuck in the 2000’s with flash and opening (flash) irc sockets, instead of HTMl5 / web socket based chat system, haha.

AaronShea · February 22, 2015, 2:21am

[QUOTE=KRushin;226661]
its such a hyper specific issues so don’t worry about it too much, but twitch is stuck in the 2000’s with flash and using irc sockets, instead of HTMl5 / web socket based chat system, haha.

Very true, haha.
Still, I’d like to look into it just to see if it can be resolved.
Glad you’re finding the plugin to at least be entertaining

AaronShea · February 23, 2015, 3:56am

Small update in the works for 2.1 release:

ss+(2015-02-22+at+04.26.35).png

No longer needing ANY C++ modifications

anonymous_user_b1c15813 · February 23, 2015, 3:54pm

How does the scrolling with mouse wheel works? Right now whenever I am trying to scroll a webpage it doesn’t work. Is it something that I have to do in Unreal to make it work.

Thanks,