webui-dev / webui

Use any web browser or WebView as GUI, with your preferred language in the backend and modern web technologies in the frontend, all in a lightweight portable library.
https://webui.me
MIT License
2.91k stars 167 forks source link

Call C from JS error #149

Closed iiiypuk closed 1 year ago

iiiypuk commented 1 year ago

I get an error when I try to call C code from JS. Error in this code line webui_fn('MyID', text).then((response) => { console.log(response); });

Uncaught ReferenceError: webui_fn is not defined
    at abc (index.html:19:4)
    at HTMLButtonElement.onclick (index.html:10:35)

Bind by ID is working void fn_two();

All examples from the repository library that call the JS function webui_fn() do not work.

Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ololo</title>
    <script src="/webui.js"></script>
</head>
<body>
    <button onclick="abc('string');">ssf</button>
    <br>
    <button id="clck">Click</button>
    <script type="text/javascript">
        window.onload = function () {
            window.resizeTo(500, 500);
        }

        function abc(text) {
            webui_fn('MyID', text).then((response) => { console.log(response); });
        }
    </script>
</body>
</html>
#include <stdio.h>
#include "webui.h"

void fn_one(webui_event_t *e) {
  const char *str = webui_get_string(e);
  printf("Data from JavaScript: %s\n", str);

  webui_return_string(e, "Message from C");
}

void fn_two(webui_event_t *e) { puts("Click!"); }

int main() {
  size_t my_window = webui_new_window();

  webui_bind(my_window, "MyID", fn_one);
  webui_bind(my_window, "clck", fn_two);

  webui_show(my_window, "index.html");
  webui_run(my_window, "alert('Fast!');");
  webui_wait();

  return 0;
}

System

webui version: latest edf5eeae65fdf2568303cdb8198e35b5bd01a769 os: archlinux gcc version: 13.1.1

AlbertShown commented 1 year ago

I guess you are using local HTML files, So, you need to add <script src="/webui.js"></script>.

See this documentation for more details: https://webui.me/docs/#/c_api?id=examples

AlbertShown commented 1 year ago

Sorry, I just saw that you already added it... let me try it.

JOTSR commented 1 year ago

WebUI API are currently in deep changes. Since your using non tagged version the doc is not up to date. The current client side API is here.

WebUI client is acessible under webui global object. You can use complemention and doc using typescript with:

import type webui from "https://raw.githubusercontent.com/webui-dev/webui/main/src/client/webui.ts"

declare global {
    const webui: webui
}

Or by adding reference in a js file in your project tsconfig.

You can see live client status by using JSDoc viewer like doc.deno.land under "Methods" section.

AlbertShown commented 1 year ago

@iiiypuk I recommend using the stable version for now. The current commits are not fully functional.

iiiypuk commented 1 year ago

Fine. Thank you for the explanations.