### Call Deno Script with Parameters (JavaScript) Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html This JavaScript function demonstrates how to make an HTTP request to execute a Deno script with query parameters. Ensure Deno is installed and configured as the default runtime in the backend. It sends a GET request and displays the response. ```javascript function call_deno_file() { // Note: // You need to set Deno as default runtime in the backend // Simple HTTP Request var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET', 'deno_test.ts?foo=123&bar=456', false); xmlHttp.send(null); alert(xmlHttp.responseText); } ``` -------------------------------- ### Call Node.js Script with Parameters (JavaScript) Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html This JavaScript function illustrates how to invoke a Node.js script with query parameters using a simple HTTP GET request. The Node.js runtime must be installed and configured as the default in the backend. The script's output is presented in an alert box. ```javascript function call_nodejs_file() { // Note: // You need to set Nodejs as default runtime in the backend // Simple HTTP Request var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET', 'node_test.js?foo=123&bar=456', false); xmlHttp.send(null); alert(xmlHttp.responseText); } ``` -------------------------------- ### Call Bun Script with Parameters (JavaScript) Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html This JavaScript function shows how to call a Bun script with query parameters via an HTTP request. It requires Bun to be installed and set as the default backend runtime. The response from the script is displayed in an alert. ```javascript function call_bun_file() { // Note: // You need to set Bun as default runtime in the backend // Simple HTTP Request var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET', 'bun_test.ts?foo=123&bar=456', false); xmlHttp.send(null); alert(xmlHttp.responseText); } ``` -------------------------------- ### Serve Folder Example (C++) Source: https://github.com/webui-dev/webui/blob/main/examples/C++/serve_a_folder/index.html This C++ code snippet configures WebUI to serve files from a specific folder. It demonstrates basic HTML serving and mentions the capability to use Deno or Node.js for executing JavaScript/TypeScript files within the WebUI environment. No specific dependencies beyond a standard C++ compiler and the WebUI library are implied. ```c++ #include int main() { webui_init(); webui_show("index.html"); webui_run(); webui_free(); return 0; } ``` -------------------------------- ### Serve Folder with Multiple Files using WebUI C++ Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md Example demonstrating how to use WebUI in C++ to serve a folder containing multiple files. This is useful for web applications that need to load assets like HTML, CSS, and JavaScript from the local filesystem. ```c++ /* This is a placeholder for the actual C++ code of the serve_a_folder example. The actual code would involve using WebUI's file serving capabilities. */ #include int main() { webui_init(); // Serve files from a specific folder (e.g., "./public") // Assuming './public' contains index.html, styles.css, etc. webui_serve_folder("public"); webui_show("index.html"); // Show the main HTML file from the served folder webui_wait(); webui_exit(); return 0; } ``` -------------------------------- ### Build WebUI C++ Examples Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md Build instructions for WebUI C++ examples on Windows, Linux, and macOS. Supports G++, MSVC, and Clang compilers. ```shell # Windows # G++ mingw32-make # MSVC nmake ``` ```shell # Linux # G++ make # Clang make CXX=clang ``` ```shell # macOS make ``` -------------------------------- ### WebUI JavaScript API Example Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html This JavaScript code demonstrates how to use the WebUI API to interact with the backend. It includes setting event callbacks for connection status and calling backend functions using different methods (global, property, and webui.call). It requires the 'webui.js' file to be included. ```javascript /* document.addEventListener('DOMContentLoaded', function() { // DOM is loaded. Check if `webui` object is available if (typeof webui !== 'undefined') { // Set events callback webui.setEventCallback((e) => { if (e == webui.event.CONNECTED) { // Connection to the backend is established console.log('Connected.'); webuiTest(); } else if (e == webui.event.DISCONNECTED) { // Connection to the backend is lost console.log('Disconnected.'); } }); } else { // The virtual file `webui.js` is not included alert('Please add webui.js to your HTML.'); } }); function webuiTest() { // Call a backend function if (webui.isConnected()) { // When you bind a func in the backend // webui will create the `func` object // in three places: // // Global : func(...) // Property : webui.func(...) // Method : webui.call('func', ...) // // [!] Note: Objects creation fails when // a similar object already exist. const foo = 'Hello'; const bar = 123456; // Calling as global object myBackendFunction(foo, bar).then((response) => { // Do something with `response` }); // Calling as property of `webui.` object webui.myBackendFunction(foo, bar).then((response) => { // Do something with `response` }); // Calling using the method `webui.call()` webui.call('myBackendFunction', foo, bar).then((response) => { // Do something with `response` }); // Using await // const response = await myBackendFunction(foo, bar); // const response = await webui.myBackendFunction(foo, bar); // const response = await webui.call('myBackendFunction', foo, bar); } } */ ``` -------------------------------- ### Minimal WebUI C++ Application Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md Example of creating a minimal WebUI application using C++. This serves as a basic starting point for WebUI development. ```c++ /* This is a placeholder for the actual C++ code of the minimal example. The actual code would involve including WebUI headers and setting up a basic window. */ #include int main() { webui_init(); webui_show("Hello, WebUI!"); webui_wait(); webui_exit(); return 0; } ``` -------------------------------- ### Example Project Builds (CMake) Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt Conditionally builds example projects (minimal, call_js_from_cpp, call_js_from_c) if WEBUI_BUILD_EXAMPLES is enabled. It links the WebUI library to these examples and sets Windows-specific subsystem flags for MSVC builds. ```cmake #////////////////////////// # Build examples #////////////////////////// if (WEBUI_BUILD_EXAMPLES) message(STATUS "WebUI Source directory is " ${CMAKE_CURRENT_SOURCE_DIR}) message(STATUS "WebUI Build directory is " ${CMAKE_BINARY_DIR}) include_directories(${CMAKE_CURRENT_SOURCE_DIR}/include) add_executable(minimal ${CMAKE_CURRENT_SOURCE_DIR}/examples/C++/minimal/main.cpp) add_executable(call_js_from_cpp ${CMAKE_CURRENT_SOURCE_DIR}/examples/C++/call_js_from_cpp/main.cpp) add_executable(call_js_from_c ${CMAKE_CURRENT_SOURCE_DIR}/examples/C/call_js_from_c/main.c) target_link_libraries(minimal webui) target_link_libraries(call_js_from_cpp webui) target_link_libraries(call_js_from_c webui) if (MSVC) set_target_properties(minimal PROPERTIES LINK_FLAGS "/SubSystem:\"Windows\"" VS_DPI_AWARE "ON") set_target_properties(call_js_from_cpp PROPERTIES LINK_FLAGS "/SubSystem:\"Windows\"" VS_DPI_AWARE "ON") set_target_properties(call_js_from_c PROPERTIES LINK_FLAGS "/SubSystem:\"Windows\"" VS_DPI_AWARE "ON") endif() if (MSVC) set_property(DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} PROPERTY VS_STARTUP_PROJECT call_js_from_cpp) endif() endif() ``` -------------------------------- ### Installation Rules (CMake) Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt Defines installation rules for the WebUI library. It installs header files to 'include' and the library itself to 'lib' (for archives, libraries, and runtimes). It also installs a CMake configuration file for easier integration into other projects. ```cmake # Install headers install(FILES include/webui.h include/webui.hpp DESTINATION include) # Install targets install(TARGETS webui EXPORT webui ARCHIVE DESTINATION lib LIBRARY DESTINATION lib RUNTIME DESTINATION bin) install(EXPORT webui FILE webui-config.cmake NAMESPACE webui:: DESTINATION share/webui ) ``` -------------------------------- ### Project Setup and Standards (CMake) Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt Initializes the CMake project, sets the project name, version, and description. It also defines the C and C++ standards to be used (C99 and C++17 respectively). ```cmake cmake_minimum_required(VERSION 3.18) # Project name project(WebUILibrary VERSION 2.5.0 DESCRIPTION "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." HOMEPAGE_URL "https://webui.me/") # Set C & C++ standard set(CMAKE_CXX_STANDARD 17) set(CMAKE_CXX_STANDARD_REQUIRED ON) set(CMAKE_C_STANDARD 99) set(CMAKE_C_STANDARD_REQUIRED ON) ``` -------------------------------- ### Build WebUI Library on Linux with SSL/TLS (GCC/Clang) Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to build the WebUI library on Linux with SSL/TLS support using GCC and Clang. Requires the `libssl-dev` package to be installed. This command enables TLS support during the build process. ```shell sudo apt update sudo apt install libssl-dev # GCC make WEBUI_USE_TLS=1 # Clang make WEBUI_USE_TLS=1 CC=clang ``` -------------------------------- ### Call C++ from JavaScript in WebUI Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md Example demonstrating how to call C++ functions from JavaScript within a WebUI application. This allows for bridging native code execution with web interface interactions. ```c++ /* This is a placeholder for the actual C++ code of the call_c_from_js example. The actual code would involve defining C++ functions and binding them to be callable from JavaScript. */ #include #include // Example C++ function to be called from JavaScript void greet(const char* name) { std::cout << "Hello, " << name << " from C++!\n"; } int main() { webui_init(); // Bind the C++ function to a JavaScript function name webui_bind("greet_from_js", greet); webui_show(""); webui_wait(); webui_exit(); return 0; } ``` -------------------------------- ### Call JavaScript from C++ in WebUI Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md Example showcasing how to invoke JavaScript functions from C++ code within a WebUI application. This enables control over the web interface's behavior from the native side. ```c++ /* This is a placeholder for the actual C++ code of the call_js_from_c example. The actual code would involve executing JavaScript code or calling JavaScript functions from C++. */ #include int main() { webui_init(); webui_show(""); // Call a JavaScript function from C++ webui_run_script("showMessage('Hello from C++!')"); webui_wait(); webui_exit(); return 0; } ``` -------------------------------- ### Build WebUI Library on macOS with SSL/TLS Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to build the WebUI library on macOS with SSL/TLS support. Requires OpenSSL to be installed via Homebrew. This command enables TLS support during the build process. ```shell brew install openssl make WEBUI_USE_TLS=1 ``` -------------------------------- ### Execute JavaScript from C and Get Response (C) Source: https://context7.com/webui-dev/webui/llms.txt This snippet shows how to execute JavaScript code from a C application using the `webui_script` function. It demonstrates retrieving the return value of a JavaScript function, handling potential errors or window closures, and then executing another JavaScript function without waiting for a response using `webui_run`. Dependencies include the `webui.h` header and standard C libraries. ```c #include "webui.h" #include #include void my_function_count(webui_event_t* e) { char response[64]; // Execute JavaScript and get return value if (!webui_script(e->window, "return GetCount();", 0, response, 64)) { if (!webui_is_shown(e->window)) printf("Window closed.\n"); else printf("JavaScript Error: %s\n", response); return; } // Process the response int count = atoi(response); count++; // Execute JavaScript without waiting for response (fire and forget) char js[64]; sprintf(js, "SetCount(%d);", count); webui_run(e->window, js); } int main() { const char* html = "\n" "\n" " \n" " \n" "

0

\n" " \n" " \n" " \n" ""; size_t window = webui_new_window(); webui_bind(window, "my_function_count", my_function_count); webui_show(window, html); webui_wait(); webui_clean(); return 0; } ``` -------------------------------- ### WebUI Virtual File System C++ Example Source: https://github.com/webui-dev/webui/blob/main/examples/C++/virtual_file_system/ui/index.html This C++ code demonstrates the integration of the WebUI virtual file system. The file itself is embedded directly into the C++ application, allowing it to be served as part of the application's assets. No external dependencies are required for this core functionality. ```cpp // This file is embedded in this C++ application. ``` -------------------------------- ### Value Manipulation API Source: https://github.com/webui-dev/webui/wiki/Home APIs for getting and setting values within the WebUI interface. ```APIDOC ## Value Manipulation API ### Description Functions to interact with values in the WebUI, allowing retrieval and modification. ### Methods #### `get_value(key)` Retrieves the value associated with a given key. - **Parameters:** - `key` (string) - The key of the value to retrieve. - **Returns:** (string) - The value associated with the key. - **Usage:** `std::string foo = my_window.get_value("bar");` #### `set_value(key, value)` Sets or updates the value associated with a given key. - **Parameters:** - `key` (string) - The key of the value to set. - `value` (string) - The new value to associate with the key. - **Returns:** (string) - The previous value associated with the key. - **Usage:** `std::string foo = my_window.set_value("bar", "new value");` ``` -------------------------------- ### Get Value from WebUI Source: https://github.com/webui-dev/webui/wiki/Home Illustrates how to retrieve a value associated with a specific key using the WebUI library. This function is useful for fetching data from the web interface into the application. It takes a key as input and returns the corresponding string value. ```c++ std::string foo = my_window.get_value("bar"); ``` -------------------------------- ### Configure Window Properties with WebUI (C) Source: https://context7.com/webui-dev/webui/llms.txt This C code snippet demonstrates how to configure various properties of a WebUI window, such as size, position, and display mode. It also shows how to specify which browser to use and how to close the window programmatically. Dependencies include the 'webui.h' header file. ```c #include "webui.h" int main() { size_t window = webui_new_window(); // Set window size webui_set_size(window, 800, 600); // Set minimum window size webui_set_minimum_size(window, 400, 300); // Set window position webui_set_position(window, 100, 100); // Center window on screen webui_set_center(window); // Set window to kiosk mode (fullscreen) webui_set_kiosk(window, true); // Hide window initially webui_set_hide(window, true); // Show window with specific browser webui_show_browser(window, "index.html", Chrome); // Options: Chrome, Firefox, Edge, Safari, Chromium, Opera, Brave, Vivaldi, Epic, Yandex, Webview // Or show as WebView (native window) webui_show_wv(window, "index.html"); // Set WebView-specific options webui_set_frameless(window, true); // Frameless window webui_set_transparent(window, true); // Transparent background webui_set_resizable(window, true); // Allow window resizing // Configure browser profile and proxy webui_set_profile(window, "MyProfile", "/path/to/profile"); webui_set_proxy(window, "http://127.0.0.1:8888"); // Set custom browser parameters webui_set_custom_parameters(window, "--disable-gpu"); // Navigate to different URL after window is open webui_navigate(window, "http://example.com"); // Close window programmatically webui_close(window); // Get window information const char* url = webui_get_url(window); size_t port = webui_get_port(window); size_t parent_pid = webui_get_parent_process_id(window); size_t child_pid = webui_get_child_process_id(window); webui_wait(); webui_clean(); return 0; } ``` -------------------------------- ### Build WebUI Application on Windows with SSL/TLS (GCC/MSVC) Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to build a WebUI application on Windows with SSL/TLS support, using GCC and MSVC. Options include static or dynamic linking. Replace placeholders with actual paths to your WebUI include and library directories. ```shell # GCC Static gcc -Os -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lws2_32 -Wall -luser32 -static -lole32 -lstdc++ -luuid -o my_application.exe ``` ```shell # GCC Dynamic gcc -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" "webui-2-secure.dll" -lws2_32 -Wall -luser32 -lole32 -lstdc++ -luuid -o my_application.exe ``` ```shell # MSVC Static cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2-secure-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe ``` ```shell # MSVC Dynamic cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2-secure.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe ``` -------------------------------- ### Configure WebUI Global Settings and Multi-Client Mode (C) Source: https://context7.com/webui-dev/webui/llms.txt This C code snippet demonstrates how to configure global settings for WebUI, such as disabling blocking events, enabling folder monitoring, and activating multi-client mode. It also shows how to set up custom logging and SSL/TLS certificates. Dependencies include the 'webui.h' header. ```c #include "webui.h" int main() { // Configure global behavior (call before webui_show) webui_set_config(show_wait_connection, false); // Don't wait for connection webui_set_config(ui_event_blocking, false); // Non-blocking events webui_set_config(folder_monitor, true); // Auto-reload on file changes webui_set_config(multi_client, true); // Allow multiple clients webui_set_config(use_cookies, true); // Enable auth cookies // Set timeout for window connection webui_set_timeout(30); // 30 seconds // Set custom logger void my_logger(size_t level, const char* log, void* user_data) { printf("[%zu] %s\n", level, log); } webui_set_logger(my_logger, NULL); // SSL/TLS configuration (requires webui-2-secure library) const char* cert_pem = "-----BEGIN CERTIFICATE-----\n..."; const char* key_pem = "-----BEGIN PRIVATE KEY-----\n..."; webui_set_tls_certificate(cert_pem, key_pem); size_t window = webui_new_window(); // Enable public network access webui_set_public(window, true); // Set custom port if (!webui_set_port(window, 8080)) { printf("Port 8080 is not available.\n"); size_t free_port = webui_get_free_port(); webui_set_port(window, free_port); } // Start server without showing window const char* url = webui_start_server(window, "/path/to/root"); printf("Server started at: %s\n", url); // Check if window is shown if (webui_is_shown(window)) { printf("Window is open.\n"); } // Set JavaScript/TypeScript runtime webui_set_runtime(window, Deno); // Options: None, Deno, NodeJS, Bun // Per-window event blocking webui_set_event_blocking(window, true); webui_wait(); // Cleanup and profile management webui_delete_profile(window); // Delete window profile webui_delete_all_profiles(); // Delete all profiles webui_clean(); // Free all memory return 0; } ``` -------------------------------- ### Minimal WebUI Application in C Source: https://github.com/webui-dev/webui/blob/main/README.md A basic C program demonstrating how to create a new WebUI window, display HTML content, and wait for user interaction. It includes the necessary WebUI header and functions. ```c #include "webui.h" int main() { size_t my_window = webui_new_window(); webui_show(my_window, " Hello World ! "); webui_wait(); return 0; } ``` -------------------------------- ### Show Window in WebUI Source: https://github.com/webui-dev/webui/wiki/Home Demonstrates how to display a new window using the WebUI library. It shows the default behavior and how to specify different browsers like Firefox, Chrome, and Edge. No external dependencies are required beyond the WebUI library itself. ```c++ my_window.show(); // Default my_window.show(webui::browser::firefox)); // Firefox my_window.show(webui::browser::chrome)); // Chrome my_window.show(webui::browser::edge)); // Edge ``` -------------------------------- ### Build WebUI Application on Windows (GCC/MSVC) Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to build a WebUI application on Windows using GCC and MSVC, with options for static or dynamic linking. Ensure the `_PATH_TO_WEBUI_INCLUDE_` and `_PATH_TO_WEBUI_LIB_` placeholders are replaced with actual paths. ```shell # GCC Static gcc -Os -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lws2_32 -Wall -luser32 -static -lole32 -lstdc++ -luuid -o my_application.exe ``` ```shell # GCC Dynamic gcc -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" "webui-2.dll" -lws2_32 -Wall -luser32 -lole32 -o -lstdc++ -luuid my_application.exe ``` ```shell # MSVC Static cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe ``` ```shell # MSVC Dynamic cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe ``` -------------------------------- ### WebUI Window Creation and Display Source: https://context7.com/webui-dev/webui/llms.txt Demonstrates how to create a new WebUI window and display HTML content, either embedded, from a local file, or a URL. ```APIDOC ## webui_new_window and webui_show API ### Description Creates a new window and displays HTML content. The content can be provided as an HTML string, a local file path, or a URL. ### Method `webui_new_window()` returns a `size_t` representing the window ID. `webui_show(window_id, content)` displays the content in the specified window. ### Endpoint N/A (This is a C library API, not a REST endpoint) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```c #include "webui.h" int main() { // Create a new window size_t my_window = webui_new_window(); // Show window with embedded HTML webui_show(my_window, " Hello World ! "); // Or show window with a local HTML file // webui_show(my_window, "index.html"); // Or show window with a URL // webui_show(my_window, "http://example.com"); // Wait until all windows are closed webui_wait(); return 0; } ``` ### Response #### Success Response `webui_wait()` blocks until all created windows are closed. #### Response Example (N/A - This is a blocking call, not a request/response) ``` -------------------------------- ### Build WebUI Library on Windows with SSL/TLS (GCC/MSVC) Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to build the WebUI library on Windows with SSL/TLS support using GCC (MinGW) and MSVC. Requires OpenSSL pre-compiled binaries or a similar TLS library. Ensure correct paths for include and library directories. ```shell # GCC mingw32-make WEBUI_USE_TLS=1 WEBUI_TLS_INCLUDE="C:\curl-xxx-xxx-mingw\curl-xxx-xxx-mingw\include" WEBUI_TLS_LIB="C:\curl-xxx-xxx-mingw\curl-xxx-xxx-mingw\lib" ``` ```shell # MSVC nmake WEBUI_USE_TLS=1 WEBUI_TLS_INCLUDE="C:\Program Files\OpenSSL-xxx\include" WEBUI_TLS_LIB="C:\Program Files\OpenSSL-xxx\lib" ``` -------------------------------- ### Serve Files and Custom Handlers (C) Source: https://context7.com/webui-dev/webui/llms.txt This C code demonstrates how to serve static files and custom dynamic content using `webui_set_file_handler`. The `my_files_handler` function is called for each file request. It can return embedded content for specific filenames or dynamically generate content. If it returns NULL, WebUI attempts to serve files from the specified `root_folder`. Memory allocated with `webui_malloc` is automatically freed by WebUI. ```c #include "webui.h" #include \n#include const void* my_files_handler(const char* filename, int* length) { printf("Requested file: %s\n", filename); // Serve static embedded content if (!strcmp(filename, "/test.txt")) { return "HTTP/1.1 200 OK\r\n" "Content-Type: text/html\r\n" "Content-Length: 99\r\n\r\n" "" " Static embedded file content." " " ""; } // Serve dynamic content if (!strcmp(filename, "/dynamic.html")) { char* body = webui_malloc(1024); char* response = webui_malloc(1024); static int count = 0; sprintf(body, "" " Dynamic content. Count: %d [Refresh]" " " "", ++count); int body_size = strlen(body); sprintf(response, "HTTP/1.1 200 OK\r\n" "Content-Type: text/html\r\n" "Content-Length: %d\r\n\r\n" "%s", body_size, body); webui_free(body); *length = strlen(response); // WebUI automatically frees memory allocated with webui_malloc return response; } // Return NULL to let WebUI serve files from the local filesystem return NULL; } int main() { size_t window = webui_new_window(); // Set custom file handler webui_set_file_handler(window, my_files_handler); // Set root folder for serving local files webui_set_root_folder(window, "/path/to/web/files"); // Show window serving index.html from root folder webui_show(window, "index.html"); webui_wait(); webui_clean(); return 0; } ``` -------------------------------- ### Handle Events and Binary Data with WebUI (C) Source: https://context7.com/webui-dev/webui/llms.txt This C code snippet illustrates how to handle various events (connection, navigation, mouse clicks) and transfer raw binary data between C and JavaScript using the WebUI library. It defines event handlers and demonstrates sending/receiving byte arrays. Dependencies include 'webui.h' and 'stdio.h'. ```c #include "webui.h" #include void events(webui_event_t* e) { if (e->event_type == WEBUI_EVENT_CONNECTED) { printf("Client connected. Client ID: %zu\n", e->client_id); } else if (e->event_type == WEBUI_EVENT_DISCONNECTED) { printf("Client disconnected.\n"); } else if (e->event_type == WEBUI_EVENT_MOUSE_CLICK) { printf("Mouse click event.\n"); } else if (e->event_type == WEBUI_EVENT_NAVIGATION) { const char* url = webui_get_string(e); printf("Navigation to: %s\n", url); webui_navigate(e->window, url); } } void handle_binary_data(webui_event_t* e) { // Receive raw binary data from JavaScript const unsigned char* data = (const unsigned char*)webui_get_string(e); size_t data_size = webui_get_size(e); printf("Received %zu bytes: ", data_size); for (size_t i = 0; i < data_size && i < 10; i++) { printf("0x%02x ", data[i]); } printf("\n"); // Send raw binary data to JavaScript unsigned char response[] = {0xDE, 0xAD, 0xBE, 0xEF}; webui_send_raw(e->window, "handleBinaryResponse", response, sizeof(response)); } int main() { const char* html = "" "" " " " " " " " " " " ""; size_t window = webui_new_window(); // Bind empty string to capture all events webui_bind(window, "", events); webui_bind(window, "handle_binary_data", handle_binary_data); webui_show(window, html); webui_wait(); webui_clean(); return 0; } ``` -------------------------------- ### Minimal WebUI Application in C++ Source: https://github.com/webui-dev/webui/blob/main/README.md A minimal C++ application that initializes a WebUI window, displays simple HTML content, and enters a wait state. It uses the C++ header and object-oriented approach for window management. ```cpp #include "webui.hpp" #include int main() { webui::window my_window; my_window.show(" C++ Hello World ! "); webui::wait(); return 0; } ``` -------------------------------- ### Compile WebUI Application on Linux with GCC Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to compile a C application using the WebUI library on Linux with GCC. Supports both static and dynamic linking, with an option for SSL/TLS support. Ensure include and library paths are correctly set. ```bash gcc -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lpthread -lm -ldl -o my_application ``` ```bash gcc my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2 -lpthread -lm -ldl -o my_application ``` ```bash gcc -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lpthread -lm -ldl -o my_application ``` ```bash gcc my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure -lpthread -lm -ldl -o my_application ``` -------------------------------- ### Compile WebUI Application on Linux with Clang Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to compile a C application using the WebUI library on Linux with Clang. Supports both static and dynamic linking, with an option for SSL/TLS support. Ensure include and library paths are correctly set. ```bash clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lpthread -lm -ldl -o my_application ``` ```bash clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2 -lpthread -lm -ldl -o my_application ``` ```bash clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lpthread -lm -ldl -o my_application ``` ```bash clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure -lpthread -lm -ldl -o my_application ``` -------------------------------- ### JavaScript Interaction with WebUI Backend Source: https://github.com/webui-dev/webui/blob/main/examples/C++/virtual_file_system/ui/index.html This JavaScript code snippet shows how to interact with the WebUI backend. It sets up an event listener for connection events and demonstrates calling backend functions using different methods: as a global object, as a webui property, and using the webui.call() method. It requires the webui.js file to be included in the HTML. ```javascript document.addEventListener('DOMContentLoaded', function() { // DOM is loaded. Check if `webui` object is available if (typeof webui !== 'undefined') { // Set events callback webui.setEventCallback((e) => { if (e == webui.event.CONNECTED) { // Connection to the backend is established console.log('Connected.'); webuiTest(); } else if (e == webui.event.DISCONNECTED) { // Connection to the backend is lost console.log('Disconnected.'); } }); } else { // The virtual file `webui.js` is not included alert('Please add webui.js to your HTML.'); } }); function webuiTest() { // Call a backend function if (webui.isConnected()) { // When you bind a func in the backend // webui will create the `func` object // in three places: // // Global : func(...) // Property : webui.func(...) // Method : webui.call('func', ...) // // [!] Note: Objects creation fails when // a similar object already exist. const foo = 'Hello'; const bar = 123456; // Calling as global object myBackendFunction(foo, bar).then((response) => { // Do something with `response` }); // Calling as property of `webui.` object webui.myBackendFunction(foo, bar).then((response) => { // Do something with `response` }); // Calling using the method `webui.call()` webui.call('myBackendFunction', foo, bar).then((response) => { // Do something with `response` }); // Using await // const response = await myBackendFunction(foo, bar); // const response = await webui.myBackendFunction(foo, bar); // const response = await webui.call('myBackendFunction', foo, bar); } } ``` -------------------------------- ### JavaScript: WebUI Event Callback and Backend Function Calls Source: https://github.com/webui-dev/webui/blob/main/examples/C/virtual_file_system/ui/index.html This JavaScript code demonstrates how to set up an event callback for WebUI connection events (CONNECTED, DISCONNECTED) and how to call backend functions. It shows three ways to invoke a backend function: as a global object, as a property of the `webui` object, and using the `webui.call()` method. Ensure `webui.js` is included in your HTML. ```javascript document.addEventListener('DOMContentLoaded', function() { // DOM is loaded. Check if `webui` object is available if (typeof webui !== 'undefined') { // Set events callback webui.setEventCallback((e) => { if (e == webui.event.CONNECTED) { // Connection to the backend is established console.log('Connected.'); webuiTest(); } else if (e == webui.event.DISCONNECTED) { // Connection to the backend is lost console.log('Disconnected.'); } }); } else { // The virtual file `webui.js` is not included alert('Please add webui.js to your HTML.'); } }); function webuiTest() { // Call a backend function if (webui.isConnected()) { // When you bind a func in the backend // webui will create the `func` object // in three places: // // Global : func(...) // Property : webui.func(...) // Method : webui.call('func', ...) // // [!] Note: Objects creation fails when // a similar object already exist. const foo = 'Hello'; const bar = 123456; // Calling as global object myBackendFunction(foo, bar).then((response) => { // Do something with `response` }); // Calling as property of `webui.` object webui.myBackendFunction(foo, bar).then((response) => { // Do something with `response` }); // Calling using the method `webui.call()` webui.call('myBackendFunction', foo, bar).then((response) => { // Do something with `response` }); // Using await // const response = await myBackendFunction(foo, bar); // const response = await webui.myBackendFunction(foo, bar); // const response = await webui.call('myBackendFunction', foo, bar); } } ``` -------------------------------- ### Compile WebUI Application on macOS with Clang Source: https://github.com/webui-dev/webui/blob/main/README.md Commands to compile a C application using the WebUI library on macOS with Clang. Supports both static and dynamic linking, with an option for SSL/TLS support. Requires linking against Cocoa and WebKit frameworks. ```bash clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lpthread -lm -framework Cocoa -framework WebKit -o my_application ``` ```bash clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2 -lpthread -lm -framework Cocoa -framework WebKit -o my_application ``` ```bash clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lpthread -lm -framework Cocoa -framework WebKit -o my_application ``` ```bash clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure -lpthread -lm -framework Cocoa -framework WebKit -o my_application ``` -------------------------------- ### Library Definition and Source Files (CMake) Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt Defines the WebUI library target, lists its source files, and sets up include directories and compile definitions. It conditionally adds source files for Windows (win32_wv2.cpp) and macOS (wkwebview.m). ```cmake # Source files (already filled) set(SOURCE_FILES src/civetweb/civetweb.c src/webui.c ) if (WIN32) list(APPEND SOURCE_FILES src/webview/win32_wv2.cpp) endif() if (APPLE) # enable macos webview enable_language(OBJC) set(CMAKE_OBJC_STANDARD 11) list(APPEND SOURCE_FILES src/webview/wkwebview.m) endif() # Library targets add_library(webui ${SOURCE_FILES}) target_include_directories(webui PUBLIC $ $) target_compile_definitions(webui PUBLIC NO_CACHING NO_CGI USE_WEBSOCKET "$<\$:WEBUI_LOG>" "$<\$>:NDEBUG>") ``` -------------------------------- ### Set Value in WebUI Source: https://github.com/webui-dev/webui/wiki/Home Explains how to set a value for a given key within the WebUI interface. This allows the application to send data to the web browser. The function takes a key and a new value as string inputs. ```c++ std::string foo = my_window.set_value("bar", "new value"); ``` -------------------------------- ### WebUI Styling for Virtual File System Source: https://github.com/webui-dev/webui/blob/main/examples/C/virtual_file_system/ui/sub/index.html This CSS code defines the visual presentation for the WebUI Virtual File System. It styles the body's background, font, and text alignment, as well as buttons and input fields for improved user interaction. It also includes styles for links. ```css body { font-family: 'Arial', sans-serif; color: white; background: linear-gradient(to right, #507d91, #1c596f, #022737); text-align: center; font-size: 18px; } button, input { padding: 10px; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); transition: 0.2s; } button { background: #3498db; color: #fff; cursor: pointer; font-size: 16px; } h1 { text-shadow: -7px 10px 7px rgb(67 57 57 / 76%); } button:hover { background: #c9913d; } input:focus { outline: none; border-color: #3498db; } a:link { color: #fd5723; } a:active { color: #fd5723; } a:visited { color: #fd5723; } a:hover { color: #f0bcac; } ``` -------------------------------- ### Configure Civetweb Library Build with CMake Source: https://github.com/webui-dev/webui/blob/main/src/civetweb/CMakeLists.txt This snippet configures the build for the Civetweb project using CMake. It specifies the minimum CMake version, project name, source files, and defines a library target. It also sets public include directories and links the Threads library, with conditional linking for WinSock on Windows. ```cmake cmake_minimum_required(VERSION 3.10) project(civetweb) # Source files set(SOURCE_FILES civetweb.c civetweb.h handle_form.inl match.inl md5.inl response.inl sha1.inl sort.inl ) # The C API library add_library(civetweb ${SOURCE_FILES}) # Include directories target_include_directories(civetweb PUBLIC ${CMAKE_CURRENT_SOURCE_DIR}) # Link libraries find_package(Threads REQUIRED) target_link_libraries(civetweb Threads::Threads) # If on Windows, link with WinSock if(WIN32) target_link_libraries(civetweb ws2_32) endif() ```