Announcement

Collapse
No announcement yet.

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

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

  • replied
    Originally posted by DsyD View Post

    Ok thanks! I have been using Bootstrap but it seems a bit heavy and not well-suited to games. I'll check out jQuery UI...

    [Edit] Hmm, now that I look at it, it seems like it hasn't been updated in quite a while. Has that been a problem for you? Are there similar options that are more up-to-date?
    jQueryUI does indeed seem like it hasn't been updated for ages, but usually we use it for it's functionality and use our own CSS and HTML
    Other options to Bootstrap could be Modernizr although I prefer Bootstrap.

    Leave a comment:


  • replied
    Originally posted by spidershift View Post

    You are correct that the range sliders are fidgety as I have experienced this issue with the example project as well. It was happening well before the transparency update and the new dynamic mouse transparency didn't seem to change the way it bugs out. The entire browser widget is just very buggy when it comes to drag-n-drop operations so there hasn't been a way to address this issue directly in the engine.

    However in terms of a workaround there are a few things you can do. The easiest is to just not use range sliders or other weird input elements at all and just use JavaScript for everything. We actually use the jQuery UI for our form elements including range sliders and it removed a lot of hassle. Otherwise another potential workaround if you absolutely need to support native input elements could be to implement some kind of mouse position tracker in JavaScript which would manually remove focus from the slider if the mouse moves too far away. This could be achieved by manually triggering the mouseup event on the input element. But with that being said the jQuery UI is probably your best option with the fewest headaches.
    Ok thanks! I have been using Bootstrap but it seems a bit heavy and not well-suited to games. I'll check out jQuery UI...

    [Edit] Hmm, now that I look at it, it seems like it hasn't been updated in quite a while. Has that been a problem for you? Are there similar options that are more up-to-date?
    Last edited by DsyD; 09-11-2019, 02:51 PM.

    Leave a comment:


  • replied
    There are two ways to load content in the browser, the first being via LoadHTML() and the second through LoadURL(). As mentioned the LoadContent() function is just a wrapper for LoadHTML() by automatically reading a file as a string from your .pak file(s) and the LoadFile() function is essentially a wrapper for LoadURL() by resolving the absolute path of the file and using the file:/// URL. So we probably want to keep the abstraction of the file system being within the project itself, either by manually utilizing the /UI folder at the same level as your /Binaries or /Content folders or making use of the internal project settings to either copy or package files in your /Content folder.

    However you already mentioned a solution which is probably the appropriate implementation within the context of the plugin, and that is to setup your own custom loadSDCard() function within JavaScript. For instance if you load a dummy page using LoadFile() and the "Additional Non-Asset Directories To Copy" as outlined in the documentation you can then setup your own custom file loading function:

    Code:
    ue.interface.loadSDCard = function(url)
    {
        document.location.href = 'file:///' + url;
    };
    And since this page was already loaded using file:/// via the LoadFile() function in blueprints you can call your custom loadSDCard() function with the desired file path once the "ready" event is triggered:




    This is not possible if using LoadHTML() or LoadURL() directly since they utilize the http:// protocol and the browser will prevent you from using file:/// at that point. Note that this "dummy file" workaround is not a good idea for production as the absolute path could be different on various devices. The LoadFile() function is internally using GFilePathBase and this may be required to setup absolute file paths on mobile. So another option could be to use LoadFile() but prepend three ../../../ such that you can start your file path immediately after GFilePathBase. Here is how this would look in the example project:

    Leave a comment:


  • replied
    Originally posted by spidershift View Post

    Thank you for reporting this, I will look into it. The mobile workaround for data coming from the browser to the engine via the ue4() function is achieved through the URL itself and it's possible that something you have setup is breaking this functionality. However when performing mobile tests on Android the LoadFile() function seemed to work just fine and these URL changes were responsive. Are you sure you are not talking about the LoadContent() function? That is not the same as LoadFile() and manually reads the contents from your .pak file(s) and then uses LoadHTML() internally.
    You're right, we are using LoadContent right now for testing and we used LoadHTML prior to that for reading a file on a sdcard. The ideal solution for us would be to allow for opening HTML files outside of the application, we currently store most of our data on a sdcard so we can quickly switch out what we need for each situation. And the LoadFile function did not allow for that, tomorrow I will implement LoadFile and test with that.

    Do you have any plans on implementing a solution for opening files outside the application by path?
    If not I suppose a solution for us would be to use DOM manipulation after the initial LoadFile, and correct accordingly.

    Thank you for quick the response!
    Last edited by Tumenor; 09-11-2019, 10:38 AM.

    Leave a comment:


  • replied
    Originally posted by Tumenor View Post
    Sorted out the last issue, that was my mistake

    What I currently struggle with is the ue4 function on my android phone, I've applied the JS required to make it work however it only works on websites on the internet / local webservers where there is a proper URL, it does not work for me when loading the HTML directly or loading a local file.

    I've tried quite a lot, but it only returns undefined and no communication to UE4 is being picked up, I've applied events to both the interface and the URLchange and none of them trigger.

    It's using Android Webview 52
    Thank you for reporting this, I will look into it. The mobile workaround for data coming from the browser to the engine via the ue4() function is achieved through the URL itself and it's possible that something you have setup is breaking this functionality. However when performing mobile tests on Android the LoadFile() function seemed to work just fine and these URL changes were responsive. Are you sure you are not talking about the LoadContent() function? That is not the same as LoadFile() and manually reads the contents from your .pak file(s) and then uses LoadHTML() internally.

    Leave a comment:


  • replied
    Originally posted by DsyD View Post
    I seem to be having trouble getting range sliders to work properly. When mousing down on the slider "handle" and dragging, it may move for a short distance but then shortly stops responding. It seems like it stops processing if the mouse cursor moves off of the handle. This is on 4.22.3 editor on Windows 10, with the player controller input mode set to Input Mode Game and UI, with mouse transparency enabled on the web widget. Maybe it has to do with the new mouse-transparency functionality or my input mode?
    You are correct that the range sliders are fidgety as I have experienced this issue with the example project as well. It was happening well before the transparency update and the new dynamic mouse transparency didn't seem to change the way it bugs out. The entire browser widget is just very buggy when it comes to drag-n-drop operations so there hasn't been a way to address this issue directly in the engine.

    However in terms of a workaround there are a few things you can do. The easiest is to just not use range sliders or other weird input elements at all and just use JavaScript for everything. We actually use the jQuery UI for our form elements including range sliders and it removed a lot of hassle. Otherwise another potential workaround if you absolutely need to support native input elements could be to implement some kind of mouse position tracker in JavaScript which would manually remove focus from the slider if the mouse moves too far away. This could be achieved by manually triggering the mouseup event on the input element. But with that being said the jQuery UI is probably your best option with the fewest headaches.

    Leave a comment:


  • replied
    Sorted out the last issue, that was my mistake

    What I currently struggle with is the ue4 function on my android phone, I've applied the JS required to make it work however it only works on websites on the internet / local webservers where there is a proper URL, it does not work for me when loading the HTML directly or loading a local file.

    I've tried quite a lot, but it only returns undefined and no communication to UE4 is being picked up, I've applied events to both the interface and the URLchange and none of them trigger.

    It's using Android Webview 52
    Attached Files
    Last edited by Tumenor; 09-11-2019, 07:36 AM.

    Leave a comment:


  • replied
    I seem to be having trouble getting range sliders to work properly. When mousing down on the slider "handle" and dragging, it may move for a short distance but then shortly stops responding. It seems like it stops processing if the mouse cursor moves off of the handle. This is on 4.22.3 editor on Windows 10, with the player controller input mode set to Input Mode Game and UI, with mouse transparency enabled on the web widget. Maybe it has to do with the new mouse-transparency functionality or my input mode?

    Leave a comment:


  • replied
    Wow, they're completely dropping HTML5?

    Anyway, thanks for this super useful plugin. It has made UI development fun again

    Leave a comment:


  • replied
    Hi!

    I am currently struggling with mobile (VR) with a 3D widget. the widget itself is the full 1920x1080 I've set it to, however the browser itself seems to cut as if it believes it is in landscape mode perhaps?

    I am not getting the full height utilized, it's actually stretched. so the content on mobile seems wrong, it's squished in height.

    Any ideas?

    [SOLVED]
    Last edited by Tumenor; 09-11-2019, 06:32 AM.

    Leave a comment:


  • replied
    @spidershift

    Thanks for taking you time and providing us more background-informations.
    As you may noticed, I know almost nothing about unreal engine, and the fact that it run for some big OS, from my point of view, does not automaticaly mean is does not run in a Canvas-Element of a Browser. It maybe logic from a developer-view but not for not or an ignorant one as I am :-)

    I wish you a good day.

    Leave a comment:


  • replied
    Originally posted by FixundFoxi View Post
    Hi spidershift

    Sorry for my stupid question.
    But could you please tell me if WebUI is for Standalone Applications only (for example *.exe-Files on Windows) or does it also work for In-Browser-Applications (using the HTML-Canvas-Element)?

    Kind regards
    Alain
    I usually ignore questions that people are clearly able to find the answers to themselves but since you've asked multiple times here you go:





    However web-based user interfaces is probably the least of your concern right now. I would be worried about the fact that Epic Games just deprecated your entire platform in the 4.23 version of the engine:

    https://docs.unrealengine.com/en-US/...ML5/index.html
    https://github.com/EpicGames/UnrealE...416b71021eab53

    This is because if something doesn't benefit Fortnite or anything making them money they don't actually care at all, which is why Paragon was scrapped and now the entire H5 platform as well. It's only a matter of time before this engine reaches a breaking point. I think the CTO at my previous job put it best, which is that these engine developers are constantly adding new features without ever finishing anything they start and creating an evermore buggy and bloated product. I wouldn't be surprised if we all get to a point where we stop downloading the latest engine updates when things become too unstable. I mean they don't even bother to update their previous branches with bug fixes once they've moved on to the next version and seem to think 2-3 minor updates per engine version is enough to fix the bugs. Yet there are many times you find yourself needing to download the next major version of the engine just to fix an issue only to have new things completely broken in the new version. It's pretty apparent this engine doesn't even come close to the quality of the Source Engine and we didn't even realize what we had until it was gone. There's no question if the Source 2 Engine came out tomorrow our company would jump ship from this engine without ever thinking twice.

    Leave a comment:


  • replied
    Hi spidershift

    Sorry for my stupid question.
    But could you please tell me if WebUI is for Standalone Applications only (for example *.exe-Files on Windows) or does it also work for In-Browser-Applications (using the HTML-Canvas-Element)?

    Kind regards
    Alain

    Leave a comment:


  • replied
    Hey guys sorry for the delay. We've been really busy and were not able to get around to some of these updates until now. There are new versions available on GitHub and some updated documentation and examples will be posted soon. Here are some quick notes for these updates:

    WebUI
    - Native support for 60 FPS (no engine changes required)
    there is a new setting in the widget blueprint under the "behavior" section that allows you to specify the FPS for the browser instance of that widget

    - Dynamic mouse transparency
    another setting is available in the "behavior" section of the widget blueprint to enable mouse transparency which allows for clicking behind the interface

    - Debugging via the Chrome DevTools
    you can now press CTRL+SHIFT+I to open the devtools in development and debug builds for the currently focused browser widget

    - Access texture data
    new functions such as GetTextureWidth() and GetTextureHeight() along with ReadPixels() provide the ability to sample the browser pixels (this DOES NOT create a new render target and samples the existing slate texture on the render thread)

    - Focus browser elements
    new functions such as Focus() allow the browser to receive direct focus, when combined with JavaScript focus events you can now directly trigger focus into a browser input or textbox element (this was not previously possible because the browser required the player to click on the widget before receiving keyboard focus)

    - Load local files (mobile)
    you can new use functions such as LoadFile() on mobile browsers to directly access HTML files and load local image files, the file paths will be properly resolved for both Android and iOS (the updated example project will demonstrate full mobile support out of the box)

    - Custom mouse cursors
    new documentation will be provided for fixing engine-related issues that prevent custom mouse cursors from working with browser widgets

    - Support for WebGL
    new documentation will be provided for enabling WebGL in the UnrealCEFSubprocess (Windows, Mac, and Linux)

    - Support for 3D widgets (coming soon)
    the new ReadPixels() function when used with the widget interaction component allows for the 3D laser pointer to pass through transparent parts of the browser


    JSON Library
    - Direct reference checking
    you can now directly compare objects and lists via reference using the new Equals() function, subsequently new functions such as FindList() and RemoveList() have been added to the JSON array wrapper class

    - Primitive type coercion
    originally if you used GetBoolean() or GetFloat() or GetString() and the underlying JSON type did not match then the default value was returned, now these functions will automatically try to convert these values into the appropriate data type (the new equals function is now the equivalent of the JavaScript abstract equality operator)

    - Variable change tracking
    new delegate pins have been added to the Construct Object and Construct List nodes that allow for tracking variable changes (these events are only valid for the current reference and will no longer trigger if the object/array is accessed from a parent object or converted into a generic value)

    - Performance improvements
    the JSON wrapper classes now utilize the underlying FJsonValueArray and FJsonValueObject structures

    Leave a comment:


  • replied
    Hi
    We are buildung a project which we are exporting for the HTML-Player but the Web-UI seems not to work there.
    Is it only for Desktop Standalone Applications and not for Browser-Applications?

    Kind regards
    Alain

    Leave a comment:

Working...
X