Announcement

Collapse
No announcement yet.

FREE: Web UI (HTML/CSS/JS Interface)

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

    #46
    Downloads: https://github.com/tracerinteractive...ngine/releases
    Documentation: https://cdn.tracerinteractive.com/we...umentation.pdf

    This plugin includes a new 3D widget interaction component that leverages the transparency features from the update last year. It allows you to place a web interface widget in the physical world that's not only interactable but allows the virtual pointer to passthrough the transparent regions of the browser:




    The interface event has also been updated with a new callback feature that allows you to call a callback function in the browser. An updated global ue4(...) helper function is provided that generates a temporary callback on the ue.interface object:




    This new helper function forwards the UUID of the temporary callback to the engine which can then choose to call the callback with an optional data argument:




    The global ue4(...) helper also manages the lifetime of the callback and will automatically remove it from the ue.interface object after a specific timeout period.

    Finally the JSON library has been updated with support for vector, rotator, and transform object wrappers:


    Comment


      #47
      These new features look great, can't wait to try them out Thanks!

      Comment


        #48
        Love this plugin see what i've done so far

        Click image for larger version

Name:	WEBUI.png
Views:	447
Size:	728.8 KB
ID:	1790757
        ♥ Zoncan gsanimator@gmail.com

        Comment


          #49
          very useful, thank you!

          Comment


            #50
            Originally posted by zoncan View Post
            Love this plugin see what i've done so far

            Click image for larger version

Name:	WEBUI.png
Views:	447
Size:	728.8 KB
ID:	1790757
            Nice! Just curious, did you do those graphs using D3?

            Comment


              #51
              Originally posted by zoncan View Post
              Love this plugin see what i've done so far

              Click image for larger version

Name:	WEBUI.png
Views:	447
Size:	728.8 KB
ID:	1790757
              Sheesh. You are way better at HTML/CSS/JS than I am.

              Did you use a framework like React or something for this?

              Comment


                #52
                Originally posted by ronm6667 View Post

                Nice! Just curious, did you do those graphs using D3?
                I did graphs using EChart.js

                Originally posted by DsyD View Post

                Sheesh. You are way better at HTML/CSS/JS than I am.

                Did you use a framework like React or something for this?
                No framework just pure HTML + JS

                Zhong.
                ♥ Zoncan gsanimator@gmail.com

                Comment


                  #53
                  Is there a public link of this plugin still available? Looks like the github link for the repo is down.

                  Comment


                    #54
                    Try https://github.com/tracerinteractive...ngine/releases

                    Comment


                      #55
                      I first tested this out with the latest UE install and noticed the slider in the sample html wouldn't drag unless you moved the mouse really slowly. So then I compiled the latest, which is 4.25.3, and had to also recompile the webui and json plugins, with the webGL disabled and I'm still having that issue. Anyone else notice this?

                      Comment


                        #56
                        Yes, it seems the UE4 web browser widget is screwy with the HTML drag and range functionality - see here: https://forums.unrealengine.com/unre...87#post1663487

                        JavaScript-based dragging seems to work fine, though.

                        Comment


                          #57
                          Originally posted by DsyD View Post
                          Yes, it seems the UE4 web browser widget is screwy with the HTML drag and range functionality - see here: https://forums.unrealengine.com/unre...87#post1663487

                          JavaScript-based dragging seems to work fine, though.
                          Thanks much!

                          Comment


                            #58
                            I'm using UE 4.25 and using Webbrowser. Issues come from when I press some key when enable the IME option using another language different EN(Such as Ko,Jp, China..). IME allows the input of Windows change status enables to be disabled.

                            And history according to Release notes: https://docs.unrealengine.com/en-US/..._18/index.html

                            Release Note:New: Chromium Embedded Framework (CEF) upgraded to branch 3071 Win32/Win64/Mac. Added web browser support for foreign language character input via IME.

                            But Webbrowser still occur issues when user input IME. Facing on Windows OS 10, and many PC has the same issues. Please help me.

                            Comment


                              #59
                              Originally posted by spidershift View Post

                              This plugin includes a new 3D widget interaction component that leverages the transparency features from the update last year. It allows you to place a web interface widget in the physical world that's not only interactable but allows the virtual pointer to passthrough the transparent regions of the browser:

                              spidershift I'm having trouble using the 3D widget on Android builds. The Widget component doesn't show anything at all! I'm on UE 4.25 with the latest version of the plugins.

                              As a side note, I've tried with the vanilla WebBrowser from Epic, and it shows a Black rectangle where the widget component should be. My guess is these issues are related.

                              Is anybody else having the same issue?

                              Comment


                                #60
                                Originally posted by iletai121 View Post
                                I'm using UE 4.25 and using Webbrowser. Issues come from when I press some key when enable the IME option using another language different EN(Such as Ko,Jp, China..). IME allows the input of Windows change status enables to be disabled.

                                And history according to Release notes: https://docs.unrealengine.com/en-US/..._18/index.html

                                Release Note:New: Chromium Embedded Framework (CEF) upgraded to branch 3071 Win32/Win64/Mac. Added web browser support for foreign language character input via IME.

                                But Webbrowser still occur issues when user input IME. Facing on Windows OS 10, and many PC has the same issues. Please help me.
                                Thank you for reporting this issue. I already replied to your post on github, but double posting both here and on github is not necessary so please choose one or the other next time so we're not wasting time going over the same issue twice.

                                Originally posted by toddsdk View Post

                                spidershift I'm having trouble using the 3D widget on Android builds. The Widget component doesn't show anything at all! I'm on UE 4.25 with the latest version of the plugins.

                                As a side note, I've tried with the vanilla WebBrowser from Epic, and it shows a Black rectangle where the widget component should be. My guess is these issues are related.

                                Is anybody else having the same issue?
                                I'm not sure why the 3D widget component wouldn't render on mobile, but that's an engine related issue. The only modifications made by this plugin to 3D widgets is the implementation of a custom 3D widget interaction component, which isn't even the 3D widget itself. The interaction component is just the "laser pointer" that allows you to interact with the widget in a 3D space. It's completely built into the engine and they do all the mapping from 3D to 2D space, handling of the virtual mouse events, ect. So basically what this plugin does for 3D widgets is implement a custom interaction component that leverages the custom transparency features to allow this "laser pointer" to passthrough the transparent regions of the browser. Everything else involving 3D widgets is the vanilla engine and any issue you're having is an engine related issue.

                                Now focusing on the transparency feature itself, the 2D transparency would not work on mobile at all, or at least, not without a cursor since it requires the mouse position in order to do a transparency lookup and toggle whether or not the widget is hit testable. This simply doesn't translate to a touch-based user interface, and there isn't anything in the plugin that hooks into the engine event system that could handle or passthrough mouse/touch events based on the transparency of the browser at the location of the click/touch event.

                                However the 3D transparency could technically work on mobile since you could still utilize a laser pointer of sorts, but not really as intended. So I'm not really sure what you're looking to accomplish if you plan on using the 3D widget for anything other than rendering because 3D interaction probably isn't going to be really fluid on mobile. And again, this only relates to the interaction itself, because the component that actually renders the widgets in the 3D world is a built in engine feature and has nothing to do with the plugin. So if you cannot get the 3D widget component to render on Android, that's something you'll need to report to Epic Games.

                                Comment

                                Working...
                                X