Aller au contenu

Photo

nwncx webkit


  • Veuillez vous connecter pour répondre
40 réponses à ce sujet

#1
_Cyan_

_Cyan_
  • Members
  • 17 messages

Hi, recently i started to work on a plugin to inject webkit into nwn.The idea is to have a custom html based gui system.I also embededd asp.net web api 2 into nwserver to share informations with gui in a Restful manner.

I attached 2 examples with google frontpage and vault home.

test.png


test.png


  • virusman, thirdmouse, leo_x et 3 autres aiment ceci

#2
leo_x

leo_x
  • Members
  • 223 messages

OMG.  Many have dreamed of this and if anyone hasn't they should!  Kudos to you.  Please, please, whatever the outcome share the source code.



#3
virusman

virusman
  • Members
  • 282 messages
Looks very interesting! It's something I also wanted to do for a very long time, so I'd be glad to collaborate on it. Can you upload the source code?
  • thirdmouse et OldTimeRadio aiment ceci

#4
_Cyan_

_Cyan_
  • Members
  • 17 messages

Hi,  i have learned a lot by your code Virusman, thank you very much for all your efforts.

Atm i am working on it to setup a proper protocol to handle GUI events, i injected asp.net web api 2 to have a restful service, it works but requires framework.net (nadi think most of servers run on linux).

I also injected jersey on the linux version, but i don't like that approach.What i am doing now is custom masking udp packets to bind widgets logic with a js wrapper and kinda jsonp to render the info sent by the server on the webpage.

I'll setup github branch in about 2 weeks (i am too busy now), and of course for me would be a honor to work with you.

Another screen of a wanted poster with custom gui.

test.jpg


  • virusman, thirdmouse, henesua et 1 autre aiment ceci

#5
thirdmouse

thirdmouse
  • Members
  • 143 messages

I have dreamed SO LONG of doing this. Please pay no attention to the wall of lurkers staring intently, unblinkingly at you.


  • 3RavensMore aime ceci

#6
virusman

virusman
  • Members
  • 282 messages

Hi,  i have learned a lot by your code Virusman, thank you very much for all your efforts.

Atm i am working on it to setup a proper protocol to handle GUI events, i injected asp.net web api 2 to have a restful service, it works but requires framework.net (nadi think most of servers run on linux).

I also injected jersey on the linux version, but i don't like that approach.What i am doing now is custom masking udp packets to bind widgets logic with a js wrapper and kinda jsonp to render the info sent by the server on the webpage.

I'll setup github branch in about 2 weeks (i am too busy now), and of course for me would be a honor to work with you.

Another screen of a wanted poster with custom gui.

test.jpg

Can you just pass the input events as native browser events that can be handled with JS?

Is it an actual browser window (Awesomium/CEF) or something else?

Do you inject OpenGL calls or draw a window on top of nwmain?



#7
_Cyan_

_Cyan_
  • Members
  • 17 messages

Can you just pass the input events as native browser events that can be handled with JS?

Is it an actual browser window (Awesomium/CEF) or something else?

Do you inject OpenGL calls or draw a window on top of nwmain?

It's a bitmap surface applied as a texture on a gl quad, hooked wglSwapLayerBuffers to render the quad every frame.On surface (when the dirty flag is true) i swap the dirty area with glSubTexImage.

The overlay covers the renderer's window entirely (in order to use percentge, em with css), it handles mouse clicks and notify them to the offscreen webview if the alpha channel is != 0.

I made a global javascript listener with some custom methods to wrap gui logic, for example you call by js : 

<button id="test" onlick="WebUI.SendData(jsonobject)">

The listener intercepts those event and send them to nwserver by its own udp socket.

Server side i made a packet filter (like connect plugin) to fire scripts associated with the calling gui context.The gui widgets are mapped server side by unique ids.

NB: I used berkelium, gecko and awesomium (this is the best one even if it doesn't handle html by string and need to be loaded passing a file path).

I am looking for a way to send gui resource over udp and make it load by a buffer instead of files.

JS run like a native browser and it's fully compatible with html 5 and css3, btw to call underlying gui system with nwserver i export only pre-defined methods.

Windowed mode doesn't work.


  • virusman aime ceci

#8
T0r0

T0r0
  • Members
  • 301 messages

This is awesome !! So many possibilities..



#9
Baaleos

Baaleos
  • Members
  • 1 315 messages

It does look sexy



#10
Zeke

Zeke
  • Members
  • 46 messages

:o  :o .......



#11
virusman

virusman
  • Members
  • 282 messages
Awesome!
Maintaining an HTTP server inside nwmain can be avoided altogether by using nwnx_redis with its pubsub capabilities: that way you can set up a separate HTTP backend with a framework you like and communicate with nwserver via redis. A bit more complicated to set up, but much more flexible.
  • thirdmouse, OldTimeRadio, henesua et 1 autre aiment ceci

#12
niv

niv
  • Members
  • 33 messages

Count me in too. :)


  • thirdmouse, henesua et _Cyan_ aiment ceci

#13
_Cyan_

_Cyan_
  • Members
  • 17 messages

@virusman

do you have address for mouse hook lbuttondown? I tried to search around the addresses you hook on mouse and keyboards input on your gui code but with no luck.

I ended to hook directinput device. 

Ok done myself, i hooked on this address (0042AD70 ) Terra suggested in an old post on nwnx.org to hook on mouse click, i had some issues with naked declaration so i ended with a __thiscall pointer and __fastcall detoured function to hook that and preserve registers.

However ScreenToClient and GetMousePos get strange values, so i ended up hooking mousemove and storing mouse coords globally.

Probably with the commit on github you'll find a better way, but hey, works pretty fine.



#14
_Cyan_

_Cyan_
  • Members
  • 17 messages

Update : Sword coast map on custom gui (i added close button in the old nwn style).

With area chords is possible to make unexplored regions darkest or highlightsthe fast travel spots.

By clicking on a region the character will be teleported like a fast travel, i also tried to reproduce youtbe videos and it works (even if for ram is a pain due to flash player).

test.jpg


  • Michael DarkAngel et thirdmouse aiment ceci

#15
meaglyn

meaglyn
  • Members
  • 802 messages

That is cool! If only there was nwncx for Linux...



#16
_Cyan_

_Cyan_
  • Members
  • 17 messages

That is cool! If only there was nwncx for Linux...

Port could be done as it doesn't rely too much on nwn symbols, most are opengl and netlayer could be done hooking directly on socket.



#17
_Cyan_

_Cyan_
  • Members
  • 17 messages

I am not dead, i am going to fork nwncx on git as fast as i can.

I have some issue with CNWMessage on server side on windows (it works but nwserver crashes when all players log out).


  • thirdmouse et henesua aiment ceci

#18
_Cyan_

_Cyan_
  • Members
  • 17 messages

Here you go, this is the client plugin, in the next days ill'post my test plugin to handle gui messages on nwnx (some issues to be fixed first).

The plugin is not stable and the code need to be optimized and find better ways to do something.

https://github.com/S...c/plugins/webui


  • thirdmouse et OldTimeRadio aiment ceci

#19
_Cyan_

_Cyan_
  • Members
  • 17 messages

https://github.com/S...gins/webui/Demo

UPDATE :

I added a zip containing precompiled binaries and a demo module plus awesomium binaries (for convenience) and a basic htmlui using jquery (also included in the archive).

The plugins on the archive are :

- nwncx_webui (the client plugin for nwncx)
- nwnx_webui (a demo plugin i made to make the gui share data between client and nwserver).

The server plugin is unstable and is just a demo, it may cause nwserver to crash.

 SETUP :

Extract all the files into nwn installation folder, create a subdir called webui (also into nwn installation dir) and put  hud.html and jquery-xxxxx.js in there.

Launch webui_demo.mod with nwnx2 and startt nwn to play with nwncx.

Weh in game type /hud on chat and a player sheet overlay should appear on the left upper corner.

The nwscript is self explanatory and feel freeto try to make more sophisticated interfaces to fityour needs.

HOW IT WORKS :

I hooked wglSwapLayerBuffers to render the offscreen webview surface to a gl quad.The overlay quad occupies the entire viewport (so if you play at 1024x768 the overlay covers the entire screen so 1024 width and 768 height).

As webview get upated or some pixel change it's state the quad is re-rendered.Transparency (alpha channel setted to 0.0) let mouse click to pass through unhooked.

The only input event hooked is mouse left button click and dbl click (i am figuring a way to handle all mouse events).

When you exit nwn to main screen the gui is still there (i am working on this studying the code of nwshader, btw is a lot of code and the wrapper covers almost every Open gl state and it needs a lot of time).

As it's now i make a new glcontext and draw the gui there, btw when you change area the gui disappears to reappear when the next area is loaded.

The html is self explanatory, i make a global js object called WebUI with some methods to share things with nwserver.

When the packet reachs the server a local string var is setted on the calling character to check which widget posted the message.

The script to handle the protocol is webui (which fires everytime we make a request by the gui).

Response format should be json, I haven't included a json parser but nivmade a good one for nwscript, try to use it or just make the string yourself.


  • Fester Pot, thirdmouse et henesua aiment ceci

#20
niv

niv
  • Members
  • 33 messages

Hey there,

 

had a good look and it looks pretty awesome (get it?). I'd want you to know that I've decided to run with the basic idea your code, but there are a few of things that need tweaking.

 

Specifically, I've long been sitting on some patches that allow nwnx_connect to speak to it's client part nwncx_connect bidirectionally through custom netlayer messages. This is exposed through pluginlink on both ends, so any plugin on the server can send messages to any plugin on the client and vice versa with no hook hackery required. This will replace all the netlayer code you've pulled in with two simple HookEvent() calls. I will be cleaning that up and PR it upstream Any Day Now™ and then let you know here.

 

I'm also poking at completing the missing features, like keyboard input, form focus, right-click, and so on. For this, there might be some core patches to NWNCX necessary (a lot of plugin depend on these, I would think), so exposing them as PL events makes a lot of sense.

 

Thirdly, adding a cache dir for awesomium to store it's session data will do a world of good and allow getting rid of the layouts scheme, and instead let servers just tell the client to load a specific URL/execute raw JS, making it much more flexible for new PWs to implement.

 

All this will be a fair few days because I'm rather occupied otherwise real-life-wise. If you want to chat though, go on and grab me on IRC!

 

Cheers, niv

 


  • thirdmouse, OldTimeRadio, henesua et 1 autre aiment ceci

#21
_Cyan_

_Cyan_
  • Members
  • 17 messages

Hey there,

 

had a good look and it looks pretty awesome (get it?). I'd want you to know that I've decided to run with the basic idea your code, but there are a few of things that need tweaking.

 

Specifically, I've long been sitting on some patches that allow nwnx_connect to speak to it's client part nwncx_connect bidirectionally through custom netlayer messages. This is exposed through pluginlink on both ends, so any plugin on the server can send messages to any plugin on the client and vice versa with no hook hackery required. This will replace all the netlayer code you've pulled in with two simple HookEvent() calls. I will be cleaning that up and PR it upstream Any Day Now™ and then let you know here.

 

I'm also poking at completing the missing features, like keyboard input, form focus, right-click, and so on. For this, there might be some core patches to NWNCX necessary (a lot of plugin depend on these, I would think), so exposing them as PL events makes a lot of sense.

 

Thirdly, adding a cache dir for awesomium to store it's session data will do a world of good and allow getting rid of the layouts scheme, and instead let servers just tell the client to load a specific URL/execute raw JS, making it much more flexible for new PWs to implement.

 

All this will be a fair few days because I'm rather occupied otherwise real-life-wise. If you want to chat though, go on and grab me on IRC!

 

Cheers, niv

I'm glad you are interested in this, i have very short time to develop on nwn and i really wanted to make a custom gui system so i took every helpful snippets and put the puzzle pieces together.

Probably you'll do a good job as you already know nwn internals (for me, open the debugger and debug/hook from the ground is pretty expensive in terms of time and don't want to reinvent the wheel).

Btw I'd like to be an active part  on its grow-flow.

:)



#22
niv

niv
  • Members
  • 33 messages

I'm glad you are interested in this, i have very short time to develop on nwn and i really wanted to make a custom gui system so i took every helpful snippets and put the puzzle pieces together.

Probably you'll do a good job as you already know nwn internals (for me, open the debugger and debug/hook from the ground is pretty expensive in terms of time and don't want to reinvent the wheel).

Btw I'd like to be an active part  on its grow-flow.

:)

 

Absolutely. I'll have to spend a few days working on it on and off (due to mentioned other commitments), but I will definitely keep you posted once I have things sorted. Nothing to worry. :)


  • henesua et _Cyan_ aiment ceci

#23
Valgav

Valgav
  • Members
  • 64 messages

First of all: great project!

 

Which files in demo are server side and which are client side? I'm curious because I'm using different installations for server and client and want to install that correct.

 

Also is there any chance to force to occupy only part of screen? For most cases I think that something round 600x600 is enough.

 

My first idea for that overlay is custom spellbook. We have nwnx funcs to set spells we can use databases to store known spells and now we can have gui overlay to manage remembered spells. It's huge!

 

Also we can have custom gui for crafting, trading even implement custom card game like pazaak from kotor or gwent from witcher.

 

I think that making this project stable is what could make nwn finally immortal and most simple game for builders.



#24
_Cyan_

_Cyan_
  • Members
  • 17 messages

First of all: great project!

 

Which files in demo are server side and which are client side? I'm curious because I'm using different installations for server and client and want to install that correct.

 

Also is there any chance to force to occupy only part of screen? For most cases I think that something round 600x600 is enough.

 

My first idea for that overlay is custom spellbook. We have nwnx funcs to set spells we can use databases to store known spells and now we can have gui overlay to manage remembered spells. It's huge!

 

Also we can have custom gui for crafting, trading even implement custom card game like pazaak from kotor or gwent from witcher.

 

I think that making this project stable is what could make nwn finally immortal and most simple game for builders.

Hi, the demo binaries I uploaded are just a taste of what can be done with the plugin.I am not developing any further on the server plugin because niv is writing a new interface between nwncx and nwnx on version 2.8.

I doubt will be a full stable windows version of nwnx plugin (server side).

To run with the binaries i released just download the .zip and extract nwnx_webui.dll and nwncx_webui.dll (plus all the deps of awesomium) in the installation folder, make a webui dir in the same folder and put the .html, .js files there.

Run the demo mod with nwnx2 and launch the clint with nwncx, then type /hud in chat and the ui will show.

For the resolution :

If you know a bit of html, if we have a surface of 1024x768 and we render in a smaller viewport we loss the ratio so is a bit tricky to place elements or resizing them using percentage.

The viewport will cover all the render surface, then you simply set a transparent background on your page and draw just the elements you need where you need using percentage, pixels or whater you want.


  • henesua aime ceci

#25
Valgav

Valgav
  • Members
  • 64 messages

Damn I would really die for windows version of that plugin. There's no chance at all? :(

 

Also in html 5 you don't really have to use em or rem to scale. You could use vw and vh to determine sizes depending on viewport size without even using javascript.