User Tag List

Page 1 of 14 12311 ... LastLast
Results 1 to 40 of 543

Thread: BLUI Open Source HTML5/JS/CSS HUD/UI

  1. #1
    4

    BLUI Open Source HTML5/JS/CSS HUD/UI

    Greetings!

    Current Release:

    Check GitHub release page for changelog

    You may have seen my post about my Chromium Embedded Framework powered UI engine. But it's made so many strides recently that I've decided it needs a new thread.
    First off, it's completely redone!

    Here's a few demos:



    and





    Grab it here!

    Quick Start Wiki

    JavaScript Events Wiki

    Demo Project (currently needs to be updated to 3.0, hang tight!)

    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!

    As you can see, we're using plain old HTML loaded from disk, rendered to a texture, then painted on an image widget using a UMG brush!

    I'm trying to make the blueprint system as simple as possible, there aren't any dependencies on specific display methods, allowing you to instantiate a "BluEye" within ANY blueprint, set the options using blueprints, then grab the material instance using a node that you can paint on ANYTHING you like. There are also helper nodes and functions to pass mouse input, and keyboard input into the "browser."

    Once again. It's free, MIT licensed, and is powered by CEF.

    GitHub Link: https://github.com/AaronShea/BLUI


    Here's a quick technical run down on how it works!

    • The plugin spawns off a CEF process in the background
    • This process is like the Chrome browser, it will take care of loading the page, js, css etc.
    • The plugin sips off the render buffer of CEF
    • Translates that into a texture
    • And forwards any input to the browser
    • That's it!


    There is minimal impact on performance as all the HTML page loading happens in another process. The texture also only updates when Chromium requests a redraw, it does not redraw every tick!

    This is open source! If you find bugs, hit me up or file an issue on the Github page! Better yet, fix it yourself if you're up to the challenge and make a pull request!

    Please make pull requests, leave feedback, and let me know what you think! I hope this makes your lives easier while developing with the awesome UE engine!

    BLUI got featured on the community spotlight!

    At time marker 45:15

    BLUI Got a Dev Grant!

    Check out the batch of grants here!

    This is an awesome honor! I never expected any of my projects to advance this far! I only have you guys to thank so....

    Thanks guys!

    -Aaron Shea
    Last edited by AaronShea; 11-13-2015 at 02:06 PM.

  2. #2
    0
    Aaron looking sweet. Seems just like radiantsdk.com which is good cause I can't make that work and my game really needs something like this...development is so much more important but will there be an how to videos any time soon to walk us through it.

  3. #3
    0
    Quote Originally Posted by bronergames View Post
    Aaron looking sweet. Seems just like radiantsdk.com which is good cause I can't make that work and my game really needs something like this...development is so much more important but will there be an how to videos any time soon to walk us through it.
    I will be creating a video! Hopefully tomorrow!

  4. #4
    0
    Sounds good, Ill def be one of the first to try it out, nice work

  5. #5
    0
    Thanks for the feedback!

    Quick Start Wiki!

    Should give some more information on how to get going!
    Last edited by AaronShea; 02-06-2015 at 12:49 PM.

  6. #6
    0
    This looks interesting!
    Copy all contents of shipping into your packaged game's GameName/Binaries/Win64, these are the required files for the Chromium process.
    But what about Win32??
    Can I add a "web browser" which opens youtube in game for example? How are keyboard/mouse inputs handled?
    Last edited by BrUnO XaVIeR; 02-09-2015 at 05:07 PM.

  7. #7
    0
    Quote Originally Posted by BrUnO XaVIeR View Post
    This looks interesting!

    But what about Win32??
    Can I add a "web browser" which opens youtube in game for example? How are keyboard/mouse inputs handled?
    The CEF Build used with BLUI is only Windows 64 bit, with some work you could replace these libraries with the 32 bit version from the CEF Builds site.

    As far as input goes, take a look at the Example HUD blueprint in the Release zip file, there are blueprint nodes in the BluEye class for help with input

  8. #8
    0
    I mean, how to handle input on a plane like I were navigating in Chrome, not HUD controls.
    Show mouse cursor on the plane, make it receive keyboard input, etc.

    I've tested it and looks pretty great and simple install. The simpler one I've seen so far; But it's early in development, right.
    There's no way to shutdown a instance, it is still running until I close UE4 Editor.
    Even when I stop playing the game it is still running.

    I mean, if I set it to disabled, rendering will stop; But try doing that on a page of a video online. The video is still running on the background even if the rendering of the plane in-game has stopped.
    Also, the rendering is always on square texture?!
    Last edited by BrUnO XaVIeR; 02-10-2015 at 02:10 PM.

  9. #9
    0
    Quote Originally Posted by BrUnO XaVIeR View Post
    I mean, how to handle input on a plane like I were navigating in Chrome, not HUD controls.
    Show mouse cursor on the plane, make it receive keyboard input, etc.

    I've tested it and looks pretty great and simple install. The simpler one I've seen so far; But it's early in development, right.
    There's no way to shutdown a instance, it is still running until I close UE4 Editor.
    Even when I stop playing the game it is still running.

    I mean, if I set it to disabled, rendering will stop; But try doing that on a page of a video online. The video is still running on the background even if the rendering of the plane in-game has stopped.
    Also, the rendering is always on square texture?!
    Hello again, BLUI tries to not be in the way at all and only provide the functions necessary to create your own custom solutions. It does not assume anything about the project.
    That being said, BluEye instances shut down their browsers when they are destroyed by the engine. The processes you see (should be about two) while the editor is idle are simply something CEF3 must do. They also provide the remote page inspection tools page on port 7777.

    If you want to stop a video, use something like the youtube player API and execute javascript to pause the video when you pause rendering. Destroying a BluEye is like closing the tab in chrome, it will lose all state.
    But if you want to close the browser by force I'll be adding a method for this in the next 1.2 release.

    For keyboard input, I would recommend overriding the viewport class in C++ and intercepting the key input events from there. For mouse input, without a UMG widget in 3D space you need to take care of calculating mouse input yourself. On a plane, it won't be to hard, just fire a trace and figure out where it hits, translate that to X,Y coords and run the mouse click method.

    I'm not sure what you mean by

    Also, the rendering is always on square texture?!
    It's a simple texture created from the buffer from CEF's paint event

    It is very early in development, so please keep this in mind, hope this answered your questions.

  10. #10
    0
    Thank you for the reply. the thing with 'square texture' is, I'm trying to have the page rendering on a 19:6 quad but the output image is always a "browser window" of around 512x512 with scrollbars on it.
    I guess is the default "window size" ?! If you could point to me where in the source I can change that to go on and keep experimenting with the plugin would be great.

    Edit: nevermind. Found it

    I've added a blueprint to destroy the "tab" process because I want it to stop running when Player leaves by overlapping a trigger box.
    Now I will take a look at input routines... But hope a 'force destroy' function is added when you update as well. Thank you, this plugin is great
    Last edited by BrUnO XaVIeR; 02-10-2015 at 03:52 PM.

  11. #11
    0
    Quote Originally Posted by BrUnO XaVIeR View Post
    Thank you for the reply. the thing with 'square texture' is, I'm trying to have the page rendering on a 19:6 quad but the output image is always a "browser window" of around 512x512 with scrollbars on it.
    I guess is the default "window size" ?! If you could point to me where in the source I can change that to go on and keep experimenting with the plugin would be great.

    Edit: nevermind. Found it

    I've added a blueprint to destroy the "tab" process because I want it to stop running when Player leaves by overlapping a trigger box.
    Now I will take a look at input routines... But hope a 'force destroy' function is added when you update as well. Thank you, this plugin is great
    Yup, just change the size values (Width and Height) before calling init() (you can also set these in blueprints) on the BluEye instance. Thanks for the feedback, I'll be making a force destroy method in 1.2

  12. #12
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    22
    Can't seem to get it work that I am seeing a gray ui. Could make project file. Using the plugin.

  13. #13
    0
    @Lightnet You have to set for current Level in your 'World Settings' your custom GameMode which ticks the BluManagerLoop()...

    The Tick override would be something like this:
    Code:
    void APROJECTNAMEGameMode::Tick(float DeltaSeconds){
    	Super::Tick(DeltaSeconds);
    	BluManager::doBluMessageLoop();
    }

  14. #14
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    22
    I did that and nothing happen. I am using the UE 4.6.1 version.

    ---
    Never mind there was just a bug for some reason it didn't run right. Had to make a new project.
    Last edited by Lightnet; 02-11-2015 at 07:47 PM.

  15. #15
    0
    Quote Originally Posted by Lightnet View Post
    I did that and nothing happen. I am using the UE 4.6.1 version.

    ---
    Never mind there was just a bug for some reason it didn't run right. Had to make a new project.
    Glad you could resolve it

  16. #16
    0
    Hey Aaron, just for my only early education. Does your plugin support adding a camera view? I want to be able to build a lil hud that can slide open and show a in game security camera.

  17. #17
    0
    blu_ue4_process instances are supposed to get killed when we hit the "Stop" button in editor, but the only fade away is if we close UE4 Editor itself. Any ideas on how to fix that? I don't know if UE4 fires an event whe finishing Play mode that Blui could hookup the BeginDestroy() function.
    At current state it causes sever memory leaks in Editor, if you hit Play/Stop many times a lot of parentless processes and textures will be left in memory with no use for them.

  18. #18
    0
    Quote Originally Posted by BrUnO XaVIeR View Post
    blu_ue4_process instances are supposed to get killed when we hit the "Stop" button in editor, but the only fade away is if we close UE4 Editor itself. Any ideas on how to fix that? I don't know if UE4 fires an event whe finishing Play mode that Blui could hookup the BeginDestroy() function.
    At current state it causes sever memory leaks in Editor, if you hit Play/Stop many times a lot of parentless processes and textures will be left in memory with no use for them.
    Hello again, I am not getting this behavior on my end, this might be because the UMG widget in my test project does fire the begindestory method, I can see the blu_ue4_process close as soon as I hit "Stop" in editor. It shouldn't be too difficult to add a method to close the browser yourself:

    Code:
    void UBluEye::CloseBrowser()
    {
    
    	if (browser)
    	{
    		browser->GetHost()->CloseBrowser(false);
    	}
    
    	DestroyTexture();
    
    }
    EDIT: I'll be adding this method in the next update

  19. #19
    0
    Quote Originally Posted by bronergames View Post
    Hey Aaron, just for my only early education. Does your plugin support adding a camera view? I want to be able to build a lil hud that can slide open and show a in game security camera.
    Hello, current it does not support this. However, it would be possible to mix UMG and BLUI together, and simply use a basic Render Target to create your camera effect

  20. #20
    0
    Thanks Aaron, I will give it a try and let you know if it works. Should be a cool option for anyone to use.

  21. #21
    0
    Quote Originally Posted by BrUnO XaVIeR View Post
    blu_ue4_process instances are supposed to get killed when we hit the "Stop" button in editor, but the only fade away is if we close UE4 Editor itself. Any ideas on how to fix that? I don't know if UE4 fires an event whe finishing Play mode that Blui could hookup the BeginDestroy() function.
    At current state it causes sever memory leaks in Editor, if you hit Play/Stop many times a lot of parentless processes and textures will be left in memory with no use for them.
    Hey @BrUnO XaVIeR, I now see your issue. It seems Unreal Engine calls the constructor script not only on "Play" but then you open the 3D component view of a blueprint. And closing the editor window does not destroy them.
    I'm looking into this issue now

  22. #22
    0
    So is there a way to check if object exists before going on creation process all over again everytime the Blueprint is open?
    Or maybe destroy it everytime the view is closed?! ... I don't know, good luck :S

  23. #23
    0
    Quote Originally Posted by BrUnO XaVIeR View Post
    So is there a way to check if object exists before going on creation process all over again everytime the Blueprint is open?
    Or maybe destroy it everytime the view is closed?! ... I don't know, good luck :S
    I actually was able to solve this using the following snippet:

    Code:
    	if (GEngine)
    	{
    		if (GEngine->IsEditor() && !GWorld->IsPlayInEditor())
    		{
    			UE_LOG(LogBlu, Log, TEXT("Notice: not playing - Component Will Not Initialize"));
    			return;
    		}
    	}
    It checks if we're in editor when we want to init() the BluEye, but then checks to ensure we're in a play state inside the editor. Preventing the process from spawning.

    There are some other changes I made, so take a look at the Github version if you want!

  24. #24
    0
    Niiice!
    Downloading, thank you!

  25. #25
    0
    We looked into Coherent, but the pricing was way too high in our opinion. This looks like a cool alternative! Does it support javascript canvas rendering? Can we also give game data to the webpage so we can for example render a minimap of the level?

    EDIT: ah, just read the github readme; looks like it's possible! MIT License is nice as well. I will definitely look into it!
    Last edited by Shammah; 02-14-2015 at 06:18 PM.

  26. #26
    0
    Quote Originally Posted by Shammah View Post
    We looked into Coherent, but the pricing was way too high in our opinion. This looks like a cool alternative! Does it support javascript canvas rendering? Can we also give game data to the webpage so we can for example render a minimap of the level?

    EDIT: ah, just read the github readme; looks like it's possible! MIT License is nice as well. I will definitely look into it!
    Hello! Thanks for trying it out!
    I'm going to be doing more advanced JavaScript data binding soon. If you happen to use us, spread the word!

  27. #27
    0
    I found myself a few hours today to give it a try:
    http://puu.sh/fXgPV/4333463f8f.jpg
    http://puu.sh/fXnSr/b018587716.jpg

    If I for example want to create a healthbar and set the health, I assume the only way for now is to execute Javascript code when the health changes; eg: "setHealth(50);"?

    Looking forward to see how well this will function when we'll create our minimap and radar, as it is already implemented in our UDK version:
    http://small-games.info/s/f/s/supraball_6.jpg

    I also looked at http://paperjs.org/
    It didn't really render smoothly like it does in my normal browser, it felt like it was being rendered at 30FPS with a lot of hiccups.
    Last edited by Shammah; 02-15-2015 at 04:26 PM.

  28. #28
    0
    Quote Originally Posted by Shammah View Post
    I found myself a few hours today to give it a try:
    http://puu.sh/fXgPV/4333463f8f.jpg
    http://puu.sh/fXnSr/b018587716.jpg

    If I for example want to create a healthbar and set the health, I assume the only way for now is to execute Javascript code when the health changes; eg: "setHealth(50);"?

    Looking forward to see how well this will function when we'll create our minimap and radar, as it is already implemented in our UDK version:
    http://small-games.info/s/f/s/supraball_6.jpg

    I also looked at http://paperjs.org/
    It didn't really render smoothly like it does in my normal browser, it felt like it was being rendered at 30FPS with a lot of hiccups.
    Hello there!

    As it's still in early development things are still being finely tuned. As for the issues you reported I can see them myself as well. I'm working on release 2.0, which includes a ton of revamped methods as well as looking into optimization!

  29. #29
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    22
    Need bit of the help on how deal with the String to array to an object. It something to pass through the unreal to web and doesn't seem to read it right. As well how to scale the screen to want to see the UI better.

  30. #30
    0
    Quote Originally Posted by Lightnet View Post
    Need bit of the help on how deal with the String to array to an object. It something to pass through the unreal to web and doesn't seem to read it right. As well how to scale the screen to want to see the UI better.
    If you could explain your situation a little bit more that'd be great!
    If you want to pass an entire object from Unreal to the browser you need to make it into a properly formatted JSON string, then parse that string in the page's javascript.
    As for scaling, take a look and make sure you set the Width and Height variables properly for your implementation

    Hope this helps!

  31. #31
    0
    Samaritan
    Join Date
    Mar 2014
    Posts
    122
    Question: is it possible to access the microphone/webcam like normal chrome browser ?

  32. #32
    0
    Quote Originally Posted by Xces View Post
    Question: is it possible to access the microphone/webcam like normal chrome browser ?
    It should work, though I have not tested it yet. The user permisson prompt may be an issue and something you might have to look into

  33. #33
    0
    Update

    I thought I should post a small tip here, I have discovered that surrounding your UI display in game with a Post Processing Volume with AA set to "NONE" results in no ghosting of text during movement.

  34. #34
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    22
    Here an example:

    custom add string to add together to make up something like this:

    AddList('{name:"item",drop:false,used:false}');

    When try to get unreal to web that it display nothing. When I try the json and it didn't work.

    This is from web.

    function AddList(stringdata){
    myObject = JSON.parse(stringdata);
    console.log(myObject .name)
    }

    It didn't display any text when I custom and check if the string would display the name.


    When I do fullscreen or window or expand for border mode the HUD seem off as fixed on the preset settings.
    Last edited by Lightnet; 02-18-2015 at 10:04 PM.

  35. #35
    0
    Quote Originally Posted by Lightnet View Post
    Here an example:

    custom add string to add together to make up something like this:

    AddList('{name:"item",drop:false,used:false}');

    When try to get unreal to web that it display nothing. When I try the json and it didn't work.

    This is from web.

    function AddList(stringdata){
    myObject = JSON.parse(stringdata);
    console.log(myObject .name)
    }

    It didn't display any text when I custom and check if the string would display the name.


    When I do fullscreen or window or expand for border mode the HUD seem off as fixed on the preset settings.
    Hello again, you should take a look at the remote debugger on port 7777
    (open the editor, and hit run to start the web view. Then go to http://localhost:7777)

    However, your issue is you did not put quotes around your JSON property names like so:

    {"name":"item","drop":false,"used":false}

    As for the issue with re-sizing, BLUI does not support re-sizing on the fly (yet!) but that's on the list of things to add. Ensure you spawn with the max width and height you want so you know you can scale without issue
    Last edited by AaronShea; 02-19-2015 at 09:23 AM.

  36. #36
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    22
    how open the editor to remote debugger on port 7777?

  37. #37
    0
    You should be able to open it up in a browser, such as Chrome.
    By navigating to http://localhost:7777 when you have the game running in editor

  38. #38

  39. #39
    0
    Quote Originally Posted by ryanjon2040 View Post
    @AaronShea: I think your poll should have multiple selections allowed.
    You're probably right, however I'm a little unsure how to edit a poll..

  40. #40
    0
    BLUI was featured in the Twitch Community Spotlight stream!
    Thanks for the support everyone!!
    Twitch Recording

Page 1 of 14 12311 ... LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •