search

0x61726b / cef3d

HTML renderer for (mainly) games and standalone applications, CEF3 wrapper, completely free Awesomium alternative
52 stars 12 forks source link

New functions? #3

Open zbozo opened 6 years ago

zbozo commented 6 years ago

Hello, i noticed that your branch develop has some functions but I did not see any use of them, could you tell me what it does?

Cef3DBrowser::CreateJsObject

thank you

0x61726b commented 6 years ago

Hi, this project is pretty much dead. I've added C++ -> javascript integration to use in another project and that was pretty much it. It sets a javascript object from C++ side so you can access the variables in javascript.

zbozo commented 6 years ago

is a great project, awesomium has been unavailable for a long time, I ended up finding your project, apparently it is very light because it is an old version of cef, it is good for games I'm going to use it, how should I call the variables in js for

Cef3DJsValue test("test", "my string"); this->CreateJsObject(test);

0x61726b commented 6 years ago

That would be window.test in javascript. Here is a sample project where i did use those stuff.

https://github.com/arkenthera/cef3d/tree/develop/Demos/MMD_Nowplaying

zbozo commented 6 years ago

It's what I tested, it's giving undefined, I thought it would be another way :(

0x61726b commented 6 years ago

When are you calling CreateJsObject ? Can you post your full code?

zbozo commented 6 years ago

Cef3DRenderer::OnProcessMessageReceived http://prntscr.com/ko9ysr (i received all msgbox)

SampleBrowser::OnAfterCreated http://prntscr.com/koa1j0 (i received the messagebox)

My html code:

<!DOCTYPE html>
<html>
<head>
    <script>
        window.addEventListener('load', function() {
            var myelement = document.getElementById("xx");
            myelement.innerHTML = window.test;
        })
    </script>
</head>
<div id="xx">???</div>
</body>
</html>

Is there any way to send javascript values to the client like in awesomium? http://prntscr.com/koa7va

The only way I found it was using V8::Execute in the subprocess, however, it does not have access to client variables to return the requested values in javascript It would also be a more dynamic form because whenever requested will take the current value of the variable instead of the fixed value

0x61726b commented 6 years ago

Yes, though that is a little more complicated. In the video below i was using a color picker from html side to send color values to c++. I will do a write-up when i have time(sometime today) about how you can do that.

https://youtu.be/CvzLLPfRe34

zbozo commented 6 years ago

oh ok, thank you very much :P

0x61726b commented 6 years ago

So, here I will try to explain but bear with me since its been few years since I last worked on this.

To be able to call C++ code from Javascript, first you need an "extension".

The extension is a javascript code which will be uploaded by renderer process. Internally, when this javascript code is called on the client, it will call V8Handler::Execute, we will catch this and create an IPC message to let the Browser process know that an event has occured. In the Browser process, we catch this IPC message with the data and forward it to the listeners and do whatever you want with it.

Note that all javascript stuff happens in Renderer process so you need to do IPC messaging to communicate with it. Below I will list sample code step by step so you can inspect it and implement yourself.

Here is a sample extension code. Attention to the native keyword, as it is required by extensions. This code will be loaded in renderer process which then you will call CefRegisterExtension when Webkit is initialized.

When, for example, native function SendDomEvent is called on Javascript side, it will invoke V8Handler::Execute here and we will create an IPC to let the browser know.

Then in browser process, we catch this IPC and after that its up to you to whatever you want with it.

Here is an example of turning a check box on and off, and letting the C++ side know about it.

Cef3D.SendDomEvent(this.onSendDomEvent,$(element.target).attr("id"),"InputChecked","" + $(element.target).is(':checked') + "");

This will then be catched here.

I hope this helps!

zbozo commented 6 years ago

I am very grateful for the explanation and the codes shown -- removed oh, sorry, I got it fixed, I was running the wrong javascript, after hours I realized 👍

I finally managed to make interaction

0x61726b commented 6 years ago

I am not really sure what's happening there. Maybe check if Cef3DRendererApp::OnContextReleased is called or not to understand maybe something is causing that context to be invalid, thus crashing on Enter() ?

0x61726b commented 6 years ago

Just saw your edit, nice!