Announcement

Collapse
No announcement yet.

BLUI Open Source HTML5/JS/CSS HUD/UI

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [PLUGIN] 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
    Attached Files
    Last edited by AaronShea; 11-13-2015, 02:06 PM.

    HTML/CSS/JS Powered UI - Free

  • #2
    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.

    Comment


    • #3
      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!

      HTML/CSS/JS Powered UI - Free

      Comment


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

        Comment


        • #5
          Thanks for the feedback!

          Quick Start Wiki!

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

          HTML/CSS/JS Powered UI - Free

          Comment


          • #6
            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, 05:07 PM.
            | Finite State Machine | Object-Pool Plugin | Auto-Save Plugin | Anti-Cheat Plugin |

            Comment


            • #7
              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

              HTML/CSS/JS Powered UI - Free

              Comment


              • #8
                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, 02:10 PM.
                | Finite State Machine | Object-Pool Plugin | Auto-Save Plugin | Anti-Cheat Plugin |

                Comment


                • #9
                  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.

                  HTML/CSS/JS Powered UI - Free

                  Comment


                  • #10
                    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, 03:52 PM.
                    | Finite State Machine | Object-Pool Plugin | Auto-Save Plugin | Anti-Cheat Plugin |

                    Comment


                    • #11
                      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

                      HTML/CSS/JS Powered UI - Free

                      Comment


                      • #12
                        Can't seem to get it work that I am seeing a gray ui. Could make project file. Using the plugin.

                        Comment


                        • #13
                          @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();
                          }
                          | Finite State Machine | Object-Pool Plugin | Auto-Save Plugin | Anti-Cheat Plugin |

                          Comment


                          • #14
                            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, 07:47 PM.

                            Comment


                            • #15
                              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

                              HTML/CSS/JS Powered UI - Free

                              Comment

                              Working...
                              X