Announcement

Collapse
No announcement yet.

BLUI Open Source HTML5/JS/CSS HUD/UI

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

    @Zinglish

    BLUI does not actually handle mouse position (or any input capture) at all, it only takes a set of coordinates (x,y) that will place the virtual cursor at that location within the browser.
    The ExampleHUD I provided uses crude methods to translate the mouse position on the UE4 view to the local location on the browser. (As it's only an example, not meant to be used in production.) You may need to do a little math for this.

    HTML/CSS/JS Powered UI - Free

    Comment


      To help out, since it is just basic plugin stuff and not game specific related, here are some screenshots of the blueprint nodes I'm currently using to handle a responsive hud and how to get the correct mouse position.

      -Aric
      Attached Files

      Comment


        Originally posted by Aricwithana View Post
        To help out, since it is just basic plugin stuff and not game specific related, here are some screenshots of the blueprint nodes I'm currently using to handle a responsive hud and how to get the correct mouse position.

        -Aric
        Sweet! Alright I got the mouse to behave the way I wanted, however I can't seem to get the browser canvas to fill the viewport correctly, the closest I have come to is this:

        Where the canvas is the white. Here's my Blueprint (this is triggered when the game starts):

        Comment


          Oh yea, on the canvas widget side, change the anchor positions to the four corners (or the bottom right option in the menu). Then it doesn't require a specific size to be inputed.

          Comment


            BLUI and knockout.js

            Hi Aaron,

            first, thank you for the great work! BLUI is awesome!

            I am currently trying to get BLUI to work with knockout.js. It's a lightweight JS framework that allows quick and easy databinding, so I thought it might work great for passing data from UE to my local blui pages, while using blu_event calls to send data back to UE. The problem is, the button clicks don't register when I run it in Editor (they work with the same page in a standard browser), and I have no idea why .

            I am using this small script, based on an example from the knockout.js tutorials, and I display it through BLUI's ExampleHUD (other, normal JS stuff works fine):

            HTML Code:
            <html>
            <head>
            <title>CS BLUI Test with knockout.js</title>
            <script type='text/javascript' src='knockout-3.3.0.js'></script>
            <script type="text/javascript">
                var viewModel = {
                    numberOfClicks : ko.observable(0),
                    incrementClickCounter : function() {
                        var previousCount = this.numberOfClicks();
                        this.numberOfClicks(previousCount + 1);
                    }
                };
            </script>
            </head>
            <body>
            <div>
                You've clicked <span data-bind="text: numberOfClicks"></span> times
                <button data-bind="click: incrementClickCounter">Click me</button>
            </div>
            </body>
            <script type="text/javascript">
            // Activates knockout.js
            ko.applyBindings(viewModel);
            </script>
            </html>
            I am fairly new to JS, so I might just be stupid here. I was wondering if it could have something to do with how you inject your BLUI JS into the page.
            Any hints on how to debug this?

            Cheers,
            Bigtoe

            Comment


              Originally posted by MrBigtoe View Post
              Hi Aaron,

              first, thank you for the great work! BLUI is awesome!

              I am currently trying to get BLUI to work with knockout.js. It's a lightweight JS framework that allows quick and easy databinding, so I thought it might work great for passing data from UE to my local blui pages, while using blu_event calls to send data back to UE. The problem is, the button clicks don't register when I run it in Editor (they work with the same page in a standard browser), and I have no idea why .

              I am using this small script, based on an example from the knockout.js tutorials, and I display it through BLUI's ExampleHUD (other, normal JS stuff works fine):

              HTML Code:
              <html>
              <head>
              <title>CS BLUI Test with knockout.js</title>
              <script type='text/javascript' src='knockout-3.3.0.js'></script>
              <script type="text/javascript">
                  var viewModel = {
                      numberOfClicks : ko.observable(0),
                      incrementClickCounter : function() {
                          var previousCount = this.numberOfClicks();
                          this.numberOfClicks(previousCount + 1);
                      }
                  };
              </script>
              </head>
              <body>
              <div>
                  You've clicked <span data-bind="text: numberOfClicks"></span> times
                  <button data-bind="click: incrementClickCounter">Click me</button>
              </div>
              </body>
              <script type="text/javascript">
              // Activates knockout.js
              ko.applyBindings(viewModel);
              </script>
              </html>
              I am fairly new to JS, so I might just be stupid here. I was wondering if it could have something to do with how you inject your BLUI JS into the page.
              Any hints on how to debug this?

              Cheers,
              Bigtoe
              Hello, I'm assuming you also include the knockout.js file next to the HTML file, correct?

              HTML/CSS/JS Powered UI - Free

              Comment


                Yes, of course. Should've mentioned that :P. The same .html works fine if I call it in a standard browser.

                Comment


                  Originally posted by MrBigtoe View Post
                  Yes, of course. Should've mentioned that :P. The same .html works fine if I call it in a standard browser.
                  I just tested this in my BLUI testing level, and it all seemed to work just fine. This could be a mouse position issue, check the posts above your where Aricwithana did some awesome write ups on that

                  HTML/CSS/JS Powered UI - Free

                  Comment


                    Dammit, you were right ! It IS a mouse position issue! I wildly clicked around the top of the PIE screen vor a moment, and it worked! Thanks for the help!! You're awesome!

                    Comment


                      Is there way to do Mouse drag right now like I am not able to click the scrolling bar and drag it down to bottom of the page.

                      Thanks,

                      Comment


                        Originally posted by Shantaram View Post
                        Is there way to do Mouse drag right now like I am not able to click the scrolling bar and drag it down to bottom of the page.

                        Thanks,
                        Hi Aaron,

                        I would like to you if you have tackled this too.

                        Thanks
                        Currently working on PARGSoft Football

                        My day job is a C# ASP.NET Developer, I wish it was a games developer

                        Comment


                          Currently I am using 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.

                          Click image for larger version

Name:	msg1.JPG
Views:	2
Size:	19.9 KB
ID:	1092096

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

                          Click image for larger version

Name:	1.JPG
Views:	2
Size:	64.8 KB
ID:	1092097

                          Comment


                            BLUI Demo Project is currently out of date. I've been meaning to update it, in the mean time just make your own empty project and grab the latest release from Github.
                            Hopefully I'll update it this week.

                            HTML/CSS/JS Powered UI - Free

                            Comment


                              Hello!

                              You can implement this by not using a mouse click trigger, but rather using a mouse down trigger when they press the button and a mouse up trigger when they release it. Take a look at the Blueprint node list on the Github project's wiki.

                              HTML/CSS/JS Powered UI - Free

                              Comment


                                How did you get it to work in 4.9? I just tried a few times to simply activate it and I keep receiving a "missing or incompatible modules in BLUI plugin" and I have to disable it or the editor aborts start-up. Probably something obvious but I can't find it...

                                Comment

                                Working...
                                X