Hi SergiuHulpe,
I am looking for the sample project in VUE.JS which you refer to, but I cannot find it. Are you referring to the project which comes with the plugin, available at
https://github.com/tracerinteractive/UnrealEngine/releases/download/4.27.0/WebUI-4.27.zip
in the directory that contains:
WebUI-4.27\Example\Content\HTML\sample.html
Thanks!
Hi! Protocasting,
I havenāt used this in a really long time, but as I remember, yes, the project which comes with the plugin has a webpage built using Vue.JS, but I think should confirm that.
Why are you interested in that? are you also trying to build the UI using Vue.JS?
Thanks @SergiuHulpe ,
Yes, I couldnāt find it there. Maybe the sample has been updated and no longer uses VUE.JS? @
I am actually trying to integrate an eCommerce API using VUE.JS to do a demo of real-world commerce from within Unreal Engine. So, linking virtual and physical worlds. e.g. you order a pizza from an in-game delivery man character and a delivery man comes to your actual door with pizza.
I was trying to use BLUI, but it seems like there are some problems with the DLLās from CEF. So, I figured itās worth a try with 's plugin.
It would be great to find an example using VUE.JS if you remember where you found the sample code (which plugin version). I want to use the API functions and also integrate that with a nice transparent overlay widget in Unreal.
Thanks!
I wonder if I can just use the Web Browser plugin, and VaREST to handle the JSON and REST communications? Maybe thatās simpler than taking a wholly forked version of the engine to be able to do this. Iām curious what your recommendation is as the developer, @ ?
@ - I had a question re: Transparency. When Enable Transparency is set to true, is there a way to find out via blueprints if the mouse is being blocked by UI or being passed through to the game?
The documentation states āThis directs the underlying slate widget to sample the pixel under the mouse position on each game tick and dynamically toggles the widget between Hit Test Invisible and Visible modes.ā
Based on the above, Iāve tried to sample the visibility value of my WebUI widget, however it does not appear to be changing dynamically when I print the visibility Enum to screen. It just stays at whatever the default setting is. Maybe Iāve interpreted the above wrong.
My use case is Iām performing a raycast in an event tick elsewhere in my app. I want to prevent the raycast from occurring when Iām hovering UI. I need to use the transparency feature because I have a complex, Vuetify based UI with multiple cards which runs as a full screen widget (to make full use of responsiveness etc)
I could check via Javascript what Iām hovering and send that back to UE4, but it seems unnecessary if youāre already sampling the transparency values to determine if the mouse input should pass through.
Hi everyone!
First of all I would like to thank you guys for sharing this plugin! It was a lifesaver to say the least! With it i was able to use Mansory js to create a mansory photo gallery in a way i could never replicate using only UMG slate panels.
In fact this is the reason i need some help. I followed the documentation until the and i could ship a āWindowsNoEditorā for my gallery using Shipping Build. It works just fine for windows builds but when i try to package it for my mobile (a Xiaomi Pocophone F1) it shows a black screen and an Android Logo on the top left corner. These are the pictures from the windows build and the android one:
As you guys can see: I have a vertical box with a text block and the pluginās browser component as children. For some reason the latter canāt render on mobileā¦
// HTML
</header>
<script src="./js/ue4-interface-script.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<head>
<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>
<body>
<div class="grid">
</div>
</body>
<script>
ue4("start")
ue.interface.drawImages=function(config){
console.log("load")
console.log(config)
let folder = "./imgs/gallery/"
let grid = document.querySelector(".grid")
config.names.forEach(name =>{
let finalPath = folder + name
ue4("printFileName",finalPath,function(fixedAbsolutePath)
{
finalPath = fixedAbsolutePath
},2)
let newImg = document.createElement("img");
newImg.classList.add("grid-item")
newImg.src=finalPath
//console.log(finalPath)
newImg.setAttribute("id",name)
newImg.style.width= (config.width + "px")
grid.appendChild(newImg)
newImg.addEventListener("click", e =>{
ue4("click!",e.path[0].id)
})
})
ue4("Images created!", {}, function(updateMasonry)
{
var options =
{
/*columnWidth:5,*/
itemSelector: '.grid-item',
gutter:10,
horizontalOrder:true,
transitionDuration:'1.0',
originTop:true,
resize: true,
fitWidth: true
}
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, options)
},3)
}
function imgClick(e)
{
ue4("click!")
console.log(e.id)
}
</script>
//Css
.grid-item{
margin-bottom: 10px;
}
.grid {
margin: 0% auto;
}
body{
background-color: aliceblue;
}
//Interface Script
// create the global ue4(...) helper function
"object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue4=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n});
Thank you in advance!
Did I miss something in the docs here regarding performance: https://cdn.tracerinteractive.com/webui/documentation.pdf ?
Iāve set up this plugin in a blank TPP project on 4.27, and in a few other projects I have on 4.27. The implementation is the 2-file widget hud barebones detailed in the above pdf. On the blank project best browser fps using the following code I can get is about 35-40 fps at 1080p, and about 15-17fps at 2160p. This is measured using the following js:
var lastCalledTime;
var fps;
const times = [];
function refreshLoop() {
window.requestAnimationFrame(() => {
const now = performance.now();
while (times.length > 0 && times[0] <= now - 1000) {
times.shift();
}
times.push(now);
fps = times.length;
$("#fpsMeter").text(fps.toFixed(1) + " FPS");
refreshLoop();
});
}I noticed this at first when css transitioned elements were taking a bit to respond. Maybe Iām just dumb and missed something. Thanks if you read this and thanks for the plugin - threw some food monies at your website.
Other specs if you care: i7-11700k, RTX 3090 - games at 120 cap.
Iāve got the same problem, looks like the WebView can not parse the custom url scheme.
Hi there, sorry if this has been mentioned already, but is it possible to stop people opening the developer tools with CTRL-SHIFT-I?
Yes it has been mentioned already. If you actually take the time to read the documentation, it literally says on page 29, and quoteā¦
āThe browser can be debugged by using CTRL+SHIFT+I when focused. This key combination
opens the Chrome DevTools and is only available in development and debug builds.ā
We found that keyboard input on the webpage will also be passed to the underlying UE scene. For example, as the above image shows, I input āwā on the webpage, not only āwā is captured by the webpage, but also my pawn will move forward.
So One question/issue: how to forbid input on the webpage being passed to UE? Thanks a lot!
The plugins have been updated for UE5ā¦
There are a few known issues after initial testing which are outlined on the releases page:
github.com/tracerinteractive/UnrealEngine/releases/tag/5.0.0
Tried with UE 5.0 and UE 4.24, but still impossible to get acceptable performance.
GTX 1080:
1080p ā 45 fps
2k ā 10 fps
Fantastic plugin but unusable.
Any tip on how to improve the performance?
Thanks
Thereās no way to improve the performance, because the UE CEF implementation lacks GPU acceleration. The whole thing runs on CPU. The plugin is completely useless if you aim for dynamic widget like this Examples - Apache ECharts chart for example.
That used to be true, but not anymore. As I already mentioned, there is a new feature that hasnāt been enabled yet called accelerated paint.
In fact I was just running some tests of my own, so that anyone else reading this wouldnāt be basing all their performance stats on only that other guy. I even used the same graphics card and performance website with the flying UFOsā¦
GTX 1080:
1080p ā 60 fps (with and without mouse transparency)
2K ā 20 fps (with mouse transparency) 30 fps (without)
ACCELERATED PAINT:
1080p ā 60 fps (with and without mouse transparency)
2K ā 60 fps (with and without mouse transparency)
If anyone wants to try accelerated paint before it is updated, then all you have to do is change this piece of code and recompile the plugin:
Source\WebBrowserUI\Private\CEF\CEFWebInterfaceBrowserWindow.cpp
Lol the guy asked nicely. If you werenāt hysterical and actually knew a thing about the plugin, you would know that it uses CEF without GPU acceleration for rendering. Thatās why the whole thing is utterly slow.
Btw when one needs to render something more complex than a simple online FPS counter, like a dynamic chart with many data points, they would easily fall below 10 FPS even @1080p.
No they didnāt ask nicely. Itās one thing to say āiām having trouble with thisā or ādid i do something wrongā or ādo you have any performance tipsā but itās another to just come in and say āthese are the performance numbers i got, so therefore this thing is uselessā which is exactly what they did.
Not only does it make the assumption their performance is the only one that matters, but also dismisses the fact that plenty of developers have been using this plugin for a long time. On top of that did you seriously just say I donāt know anything about the plugin? ā¦because Iām literally the OP. The fact that you think I donāt know this uses the CEF without GPU acceleration is beyond laughable. Why donāt you go back to your little vector graphics library and focus on the 10 people that downloaded that.
But it is useless for them if they need it to run above 45 FPS @1080p. Also, from my own experience, thereās also a noticeable lag between the user input and the pluginās response. Nobody said that the plugin doesnāt find its use in other projects made by other people. Suggesting to rewrite a line of code and completely ignore the warning just above that saying it may break the whole thing on multi-GPU systems is just beyond ridiculous. A polite answer like āYou canāt get better performance right now because of an issue Iāve been unable to solve so far, but you can do this and this to improve the performance for non-production purposes. Iāll let you know once I figure it out.ā probably would hurt your ego too much, I donāt know.
Obviously, in its current state, the plugin performs just terribly for some people. Itās very sad If you, the OP, canāt accept that simple fact. Once you solve the multi-GPU issue, I myself will be happy to use the plugin in a side project Iām working on.
Btw itās more like 272 people actually using my plugin including a carmaker with whom Iām working closely on implementing UE4&DP into their infotainment, but whoās countingā¦
Asking for tips on how to improve performance is exactly what I did. If you read my post entirely, I say at the end:
Any tip on how to improve the performance?
I am trying (just trying and for hobby) to do an entire UI with moving windows and other elements inside of it, entirely in a webpage adapted for UE Gameplay. Obviously, I am not a good UE developer, since I did not expend too much of my developer experience time in the UE ecosystem.
Sorry if I expressed myself wrong but maybe the correct way was to say that for my use case what unusable.
I didnāt just try for 1 hour and come here, I have been waiting for months to see if UE 5.0 with the updated browser makes any changes in performance. I posted in this same post several months ago for the same exact reason, and during that time I spent a lot of time trying to achieve an acceptable performance.
From a gaming-oriented perspective, 60 fps max limit is not acceptable (and I am not achieving even that). For competitive and intensive game players with 120hz screens, they usually want 100-120fps for a UI (at least if they have a good graphic card, like the 1080 is). This makes the plugin unusable for my use case and for any gaming use case that want to display a big interface with moving parts using this plugin, or maybe, I am missing the point, in that case, I am more than open to hearing and explanation for the reason and accept my mistake.
For this reason, I came here and ask for tips on how to improve it because it was unusable for my use case. I also had time to write that it is a fantastic plugin, but you only read my negative words and come to this forum with all your negativity.
I only can suggest you to chill and stop being rude to all the community, and comment with a more open-minded philosophy, because all here are very thankful for the fantastic job you did with the plugin and what you did publishing it completely for FREE, and we post with the best of our intentions.