[Plugin] Web UI framework plugin ()

[anonymous_user_9ac5e4ce]

Hi all!

I’ve made an example drag and drop HUD in JavaScript which can be used with .

Callbacks and engine side coding are not implemented yet (but should be easy to do). It’s just the GUI.

Please, have a look. Opinions and suggestions are very welcome!

[ufna]

@Amiot;108470

And how can i do it ?
please help me ! i loved your plugin and i want to use it

Unfortunately I worked with it so long time ago so I can’t give precise advice You should configure Qt manually (it requires some magic and deep Qt knowledge) and then build it with MSVS compiler.

@awwuwei;111634

Hi :
In my test , the UVaQuoleHUDComponent can be rendered properly , And the method UpdateScriptEvents can be invoked too while clicking the buttons on the web . But the EventName and EventMessage are invalid both in C++ and bp . Do you know what’s the problem ?

I have no idea What compiler do you use?

@;111985

I tried to make a simple UI using jquery ui library and unfortunately it doesn’t seem to be supported very well.
You can test it by setting the url to Draggable | jQuery UI for example and you will see that a lot of things do not function.

Is a limitation with QWebView? can it be fixed?

Particular examples won’t work because of internal QWebView limitations. But you can check nice example with implemented draggable elements.

@Alarial;112894

Hey , thanks for the awesome plugin. What do I need to do to get working on OSX? I use both Windows and OSX for development so I’d like to ensure I can have working on both.

It should be definitely possible, but I’m not familiar with OSX and have no Mac to make my own tests. You should check how to build Qt projects with XCode.

@SchnitzelDude;113254

I am quite nooby and because of that I have a little problem. My HUD doesnt display the Website and after some minutes Unreal crashs with the following massage:

Maybe there is something wrong within my HUD-Blueprint?

I recommend to add component to components list, not by BP function.

@OceanCom;113848

I’ve made an example drag and drop HUD in JavaScript which can be used with .

Callbacks and engine side coding are not implemented yet (but should be easy to do). It’s just the GUI.

Please, have a look. Opinions and suggestions are very welcome!

It’s great and works! Really nice example. Thank you so much!

[TK-Master]

Thanks , I solved the problem by messing around with different js libraries but I ended up coding the functionality I need from scratch anyway however I’m still getting weird rendering issues with movable stuff that force me to do extra steps/hacks to partially refresh the page which is kinda inconvenient since I have to keep testing the page in-game since sometimes it reacts very differently from a browser.

But unfortunately that’s not my main problem :rolleyes: I noticed that my fps drop from ~100 to ~50 (even with the default nearly empty page) is just me? that’s a huge performance hit! :eek:
I think the reason for that is probably because I’m using a fullscreen UI instead of chunks but I need to have movable windows around! so I don’t have much of a choice.

[EVRTOP]

How to package?

[EVRTOP]

@sy49;107248

, With your help everything goes well , but I also get 2 big problems.

1.My packaged Game sometimes run OK, sometimes breakdown, I just “Click the button , then open another Map” ;

2.The transparent not always goes well , like :

你是中国人吧？能请教一下你是怎么打包出来的吗？为什么我打包出来的都提示缺少文件的错误？

[anonymous_user_9ac5e4ce]

@;114882

It’s great and works! Really nice example. Thank you so much!

Thanks, ! I’ll write off when I have it in-game.

BTW, the code is completely rewritten now.

[ufna]

Pre-build version for UE 4.4.x is avaiblable now: https://.com///releases/tag/1.1-b13

Btw, it’s not necessary to update if you’re switched from 4.3 manually - plugin code is compatible with 4.4.

[sy49]

@EVRTOP;117958

你是中国人吧？能请教一下你是怎么打包出来的吗？为什么我打包出来的都提示缺少文件的错误？

你打包提示缺少什么文件，方便截图看一下吗? 但是现在我打包出来运行的时候有时候会有问题，但是又不是每次必出现的。

[EVRTOP]

@sy49;120382

你打包提示缺少什么文件，方便截图看一下吗? 但是现在我打包出来运行的时候有时候会有问题，但是又不是每次必出现的。

你好，你的qq是多少呀，我能加你好友吗？我qq：474897922

[EVRTOP]

@;119447

Pre-build version for UE 4.4.x is avaiblable now: https://.com///releases/tag/1.1-b13

Btw, it’s not necessary to update if you’re switched from 4.3 manually - plugin code is compatible with 4.4.

Hello, The version for UE 4.4.x is code-based only? Counld the Blueprint-based’s project be packaged?

[ufna]

@EVRTOP;121065

Hello, The version for UE 4.4.x is code-based only? Counld the Blueprint-based’s project be packaged?

Currently all runtime plugins are not supported to be packaged in content-only (blueprints only) projects by Engine.

[Ansoni]

Outputs weird Using Defult Example
Anyone know whats wrong?

[anonymous_user_dac15ad2]

Hello, thank you for writing amazing plugin.

I tried using it in a test project, but fail to get it to work.
Is there a full example or tutorial somewhere?

So far I figured out:

1. Add the Plugin to the project like on the wiki
2. Made a new level for the main menu
3. added a new gamemode blueprint for the level
4. added a new hud blueprint and set it as default in the gamemode
5. added the ui component inside the hud blueprint

Now is where it gets me, how do I continue?
The examples on the wiki show blueprint, but what are they connected to? Some lines cut off and which blueprint is that in?
Where do I set the variables for X and Y?
How do I call C++ methods with javascript?
How do I hide/show the UI ingame, as in not as main menu, but like a pause screen with options?

When I press Play with the current setup, it just crashes the editor.

Attached my HUD Blueprint.

Thanks.

[anonymous_user_dac15ad2]

Well I somehow managed to get something.
But all it does is flickering blue and green.
I’m using example.html, but no matter what file or website I open, it’s just flickering.

[anonymous_user_6334e343]

Hello am just wondering do work under 4.4?
And do you need to use Java Script to “interact” with game data?
Is Plugin a good solution for making in-game UIs like Inventory?

[Azarus]

Hey,
I had fps issues with plugin so i was thinking.
As i know the current method is copying the bytes two times from the vram -> ram and ram -> vram. (It is very inefficient way i think and thats why my fps goes around 10-20 if i have a full screen webpage opened.)
So i was thinking, is it possible to edit the plugin and share the texture pointer? So unreal engine can use the rendered texture directly without copying the bytes from the graphics card to the ram from QtWebKit.? I am asking it because i am new in Unreal Engine 4 also i have not that much experience with directx and Qt. But i know opengl.

And if its possible i might give it a try and implement it.

[Mikand79]

I looked at that too. Qt doesnt work natively on DirectX but it should be possible for the DX11 renderer with Angle, look at f.e. EGL_ANGLE_d3d_share_handle_client_buffer and EGL_ANGLE_surface_d3d_texture_2d_share_handle, needs a built of Qt with Angle for DirectX11. The native OpenGL backend might be even easier to bind to the UE4 OpenGL RHI, yet need another build of Qt. I didnt work on it yet, if you manage to get it done please PM me And as far as I know QtWebKit, well just the WebKit part, is LGPL even when you buy a commercial Qt version so platforms disallowing LGPL are out of reach.

[anonymous_user_99087647]

Complete NOOB , working exclusively in BPs.
I can’t figure out how to interact in-game with the Scene UI Component. The examples seem to be strictly designed for the HUD component.
I’d like to use a trigger box to initiate keyboard interaction. Can anyone help me with that?
I’m using the 4.3 version.

[Azarus]

Hm i guess then using Qt causes more trouble for me, i have a little experience with Cef. So i think i’ll try to reimplement it with Cef based on your plugin, if i get something done i will pm you. Thanks for the fast response!

RedParis:
You can enable the keyboard input with a blueprint. Callfunction->UI->VaQoileUI->(grab keyboard but i am not sure)
I think that’s how it works.

[KimoiEngineGuy]

Holy… Sh*t!!

OMG Love you so much to do plugins <3

Thank you I going to make something awesome with you plugin <3