Announcement

Collapse
No announcement yet.

BLUI Open Source HTML5/JS/CSS HUD/UI

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

    Originally posted by Airwaves View Post
    I am new to all of this stuff but have been working with someone who knows blueprints. My game needs to have videos inside it much like what you are doing where the character can go up to a screen and watch a video. This can be through videos as part of the game or through my youtube channel. We have tried the media assets with little success as the sound does not easily match up so I then came across Coherent-labs UI but now I have found what you are doing. This looks like amazing stuff and I want to know if you can have it play through youtube with sound?

    Also my project is blueprint only so does this work with just blueprints? Are there people on the forums I could pay to have this setup for me? Any information would be awesome. Thanks
    This plugin requires you to have a C++ project, but you can use the plugin (for the most part) without writing any C++ code yourself.
    Simple create a C++ project and drop the BLUI folder into your project's Plugins folder. Should be good to go after a quick recompile of the project. (Make sure you have Visual Studio!)

    HTML/CSS/JS Powered UI - Free

    Comment


      @Aricwithana

      Try messing with the world's Anti-Aliasing settings, that something I've found to cause blurry text.

      HTML/CSS/JS Powered UI - Free

      Comment


        haha, yea I did that and that just made things jaggy. We've determined it is partly the fonts issue. It doesn't render well as white on color and in scene so we are just going to go black for ingame and white for HUD. lol

        Though it did occur to me while I was working with the HTMLMat, is there any way to adjust the render on a display widget like a normal texture/material? Modifications work great when rendering to a mesh surface but not when it is on the display widget. Been playing around with trying to make the UI components glow and keeping the black non-glowing. If the UI was static, that is easy but the UI's are all dynamic and will change and show real information.

        -Aric

        Comment


          Is there a way to debug the url loading in the console log in UE4 since I try to did a simple setup and it fail to load in 4.10. Trying to get the widget to work on the HUD. Plus I have work on the HUD so thing can break that I didn't wanted to redo my html or the setup.

          I compile in 64 bit on 4.9 and only show blank that I can't tell if fail to load.

          Comment


            Originally posted by Lightnet View Post
            Is there a way to debug the url loading in the console log in UE4 since I try to did a simple setup and it fail to load in 4.10. Trying to get the widget to work on the HUD. Plus I have work on the HUD so thing can break that I didn't wanted to redo my html or the setup.

            I compile in 64 bit on 4.9 and only show blank that I can't tell if fail to load.
            Are you calling the event tick blueprint node in your level blueprint?

            HTML/CSS/JS Powered UI - Free

            Comment


              Originally posted by Aricwithana View Post
              haha, yea I did that and that just made things jaggy. We've determined it is partly the fonts issue. It doesn't render well as white on color and in scene so we are just going to go black for ingame and white for HUD. lol

              Though it did occur to me while I was working with the HTMLMat, is there any way to adjust the render on a display widget like a normal texture/material? Modifications work great when rendering to a mesh surface but not when it is on the display widget. Been playing around with trying to make the UI components glow and keeping the black non-glowing. If the UI was static, that is easy but the UI's are all dynamic and will change and show real information.

              -Aric
              Have you tried piping the texture into a material instance? I'm not really one to ask when it comes to shaders etc.
              More of a programmer, hahah.

              HTML/CSS/JS Powered UI - Free

              Comment


                What am I doing wrong? I've created a blank C++ project - have your build into the plugins folder, followed all steps in order to generate VS2015 files & it builds fine without any errors. I have node for node copied your BP setup to produce a google.com web page as an html page draw to the mainhud. BP screenshot is shown below... I am getting a mid-grey splash with 0 web abilities. even tried blui://HTML/test.html and wont display that either.

                4.10 C++ blank code project

                Click image for larger version

Name:	capture.jpg
Views:	1
Size:	84.0 KB
ID:	1094200
                Click image for larger version

Name:	Capture1.JPG
Views:	1
Size:	118.1 KB
ID:	1094201
                Click image for larger version

Name:	capture2.jpg
Views:	1
Size:	47.5 KB
ID:	1094202
                Sincerely,
                Daniel Wallace
                3d Artist & Project Management Specialist
                walldiv@gmail.com
                Skype: Walldiv
                LinkedIn: www.linkedin.com/pub/daniel-wallace/8b/798/b39/
                Wix Profile: http://walldiv.wix.com/danwallace
                Demo Reel: https://www.youtube.com/watch?v=2gdI...ature=youtu.be

                Comment


                  Using the node "IsBrowserLoading" I see that it continuously loads.... never loads the page. Suggestions?
                  Sincerely,
                  Daniel Wallace
                  3d Artist & Project Management Specialist
                  walldiv@gmail.com
                  Skype: Walldiv
                  LinkedIn: www.linkedin.com/pub/daniel-wallace/8b/798/b39/
                  Wix Profile: http://walldiv.wix.com/danwallace
                  Demo Reel: https://www.youtube.com/watch?v=2gdI...ature=youtu.be

                  Comment


                    Originally posted by walldiv View Post
                    Using the node "IsBrowserLoading" I see that it continuously loads.... never loads the page. Suggestions?
                    EDIT: you're never calling the set size method (set width is never being called in your blueprint, therefore set height isn't being called either!)

                    HTML/CSS/JS Powered UI - Free

                    Comment


                      Originally posted by AaronShea View Post
                      EDIT: you're never calling the set size method (set width is never being called in your blueprint, therefore set height isn't being called either!)
                      aaron I specifically had shown them disconnected for a reason - I've tried it with both the sizes connected as well without. neither work
                      Sincerely,
                      Daniel Wallace
                      3d Artist & Project Management Specialist
                      walldiv@gmail.com
                      Skype: Walldiv
                      LinkedIn: www.linkedin.com/pub/daniel-wallace/8b/798/b39/
                      Wix Profile: http://walldiv.wix.com/danwallace
                      Demo Reel: https://www.youtube.com/watch?v=2gdI...ature=youtu.be

                      Comment


                        Originally posted by AaronShea View Post
                        Have you tried piping the texture into a material instance? I'm not really one to ask when it comes to shaders etc.
                        More of a programmer, hahah.
                        I'll give things a try and see how it goes!

                        I did notice on Git someone has some code that might help with this if he can submit a pull request for it. Our team would be more than happy to test out things. I want the ingame UI to be as pretty as the HUD. haha

                        -Aric

                        Comment


                          Hi,

                          I've been using Blui (Which is brilliant) to render some simple text using HTML. I've been doing it in a bit of a clunky way though - i've had a HTML file as a string in UE and done a search and replace for the key alterations I need - for example the text contents, then saved the string as a text file, then loaded it directly into a Blui buffer. This of course is madness. Can someone point me in the right direction?

                          I'm using a JQUERY script to center and scale my text to a fixed width called widetext. A line of my HTML looks like this:

                          <span class="scale-el" data-width="800"><div align="center">This is my text</div></span>

                          Here is 'Widetext' used in a website - you can see it at the top.

                          In my blueprint I switch the 'This is my text' for something else and save it. The great thing for me here is I can have many lines which exactly span to the same width

                          The scale-el/widetext class is javascript though - should I be able to generate my text using JS commands with blui? If so, how?

                          Is there an easy way to inject a string into the HTML through one of these JS calls?

                          Alternatively, is there a way to pass a whole HTML file into BLUI from a string rather than saving/loading? I already have my HTML stored in UE this way.

                          Please help!!! I'm rubbish at Java/HTML

                          Dan

                          Comment


                            Originally posted by Dannington View Post
                            Hi,

                            I've been using Blui (Which is brilliant) to render some simple text using HTML. I've been doing it in a bit of a clunky way though - i've had a HTML file as a string in UE and done a search and replace for the key alterations I need - for example the text contents, then saved the string as a text file, then loaded it directly into a Blui buffer. This of course is madness. Can someone point me in the right direction?

                            I'm using a JQUERY script to center and scale my text to a fixed width called widetext. A line of my HTML looks like this:

                            <span class="scale-el" data-width="800"><div align="center">This is my text</div></span>

                            Here is 'Widetext' used in a website - you can see it at the top.

                            In my blueprint I switch the 'This is my text' for something else and save it. The great thing for me here is I can have many lines which exactly span to the same width

                            The scale-el/widetext class is javascript though - should I be able to generate my text using JS commands with blui? If so, how?

                            Is there an easy way to inject a string into the HTML through one of these JS calls?

                            Alternatively, is there a way to pass a whole HTML file into BLUI from a string rather than saving/loading? I already have my HTML stored in UE this way.

                            Please help!!! I'm rubbish at Java/HTML

                            Dan
                            You can do this via both java & jquery. Hit me up on Skype and we can exchange.... I for the life of me cant even get BLUI to function in editor - and Aaron is non responsive to his UE4 grant funded project.....

                            Anyhow I have loads of html/jquery experience and can pull this off really easy - jquery is powerful and a great tool to use for stylized animations to pull off for BLUI (I used coherent on a past project - but its price is outstanding..... )


                            Skype: walldiv
                            Sincerely,
                            Daniel Wallace
                            3d Artist & Project Management Specialist
                            walldiv@gmail.com
                            Skype: Walldiv
                            LinkedIn: www.linkedin.com/pub/daniel-wallace/8b/798/b39/
                            Wix Profile: http://walldiv.wix.com/danwallace
                            Demo Reel: https://www.youtube.com/watch?v=2gdI...ature=youtu.be

                            Comment


                              Hi Walldiv,

                              After a few hours applied activity last night i've worked out how to get java to create a line of text in HTML - groundbreaking stuff! I think my ongoing concerns are more suited to a HTML forum than an Unreal one - this being I can't get the Jquery function to fire on the new lines of text i'm adding.

                              I'd like to help you if I can though, this is my blui init pipeline:

                              Click image for larger version

Name:	BluiInit.jpg
Views:	1
Size:	175.3 KB
ID:	1094595

                              Have you made a material with a parameter texture node which will accept the blui texture?

                              Dan

                              Comment


                                Ok, i'm making progress with this but i need to be able to refresh the DOM - i think.

                                In my chrome browser my text (lines which span a fixed width) refresh once I do a trick like hide then show. Unfortunately this doesn't work in Blui - My dynamic text function won't fire as I add new text with JS. Is there a JS script I can run to refresh the page without losing my dynamic lines?

                                Comment

                                Working...
                                X