native.newWebView() Lua => TS TS => Lua

Solar2D Corona APIs
#1

native.newWebView()
How Lua and TS communicate with each other.
Thank you.

#2

Currently, there is no interface in Solar2D for Lua to communicate with JavaScript within a WebView. Solar2D lacks interfaces like the following: @StarCrunch @vlads

local webview = require("webview")

-- Create a new WebView
local myWebView = webview.new(display.contentCenterX, display.contentCenterY, 320, 480)

-- Register a Lua function to be called from JavaScript
myWebView:registerCallback("getDeviceInfo", function()
    return {
        platform = system.getInfo("platform"),
        version = system.getInfo("architectureInfo"),
        language = system.getPreference("locale", "language"),
        deviceModel = system.getInfo("model")
    }
end)

-- Listen for events from JavaScript
myWebView:on("buttonClicked", function(data)
    print("Button clicked in WebView: " .. data.buttonId)
    -- Respond to the WebView
    myWebView:send("buttonResponse", {message = "Received click for button " .. data.buttonId})
end)

-- Inject custom JavaScript into the WebView
myWebView:injectJS[[
    // Implementation of NativeBridge (as provided in the previous response)
    // ...

    // Add a function to update the device info display
    function updateDeviceInfo() {
        NativeBridge.callNative("getDeviceInfo").then(info => {
            document.getElementById("deviceInfo").innerHTML = 
                `Platform: ${info.platform}<br>
                 Version: ${info.version}<br>
                 Language: ${info.language}<br>
                 Model: ${info.deviceModel}`;
        });
    }

    // Add event listeners when the page loads
    window.addEventListener('load', function() {
        updateDeviceInfo();

        document.getElementById("updateButton").addEventListener('click', function() {
            updateDeviceInfo();
            NativeBridge.sendToLua("buttonClicked", {buttonId: "update"});
        });

        document.getElementById("greetButton").addEventListener('click', function() {
            NativeBridge.sendToLua("buttonClicked", {buttonId: "greet"});
        });

        NativeBridge.on("buttonResponse", function(data) {
            document.getElementById("response").textContent = data.message;
        });
    });
]]

-- Load a local HTML file
myWebView:request("index.html", system.ResourceDirectory)

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>WebView Example</title>
   <style>
       body { font-family: Arial, sans-serif; padding: 20px; }
       button { margin: 10px 0; }
   </style>
</head>
<body>
   <h1>WebView Communication Example</h1>
   <div id="deviceInfo"></div>
   <button id="updateButton">Update Device Info</button>
   <button id="greetButton">Send Greeting</button>
   <p id="response"></p>
</body>
</html>
#3

Good!
Your expertise is outstanding!

Excuse me
Is there a way to execute JavaScript commands in the console (F12 Console) in WebView?
And get the printed content returned. Is there any way to send and monitor this part?

Thank you!

#4

@laboladoapp I don’t know Solar’s web stuff (platform or webview) very well, apart from skimming the Windows bits once or twice. Maybe something could be adapted from the webview project, which mentions “It supports two-way JavaScript bindings (to call JavaScript from C/C++ and to call C/C++ from JavaScript).” and is MIT-licensed. (Project’s code is basically all in this header, although I don’t know where the relevant parts are.)

@purpleMoon On the off chance you don’t actually need DOM stuff and just wanted to, say, call JavaScript / TypeScript libraries, I do have some WIP stuff along those lines, although non-web WASM support was my real goal. Probably too kludge-y to be generally useful right now, however.

#5

Thank you for the information and technology provided. I will study it carefully and develop the desired features.

Thanks, everyone!