webui-dev · AlbertShown · Jan 13, 2025 · Dec 22, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/examples/call_js.odin b/examples/call_js.odin
@@ -5,67 +5,111 @@ import "base:runtime"
 import "core:fmt"
 import "core:strconv"
 import "core:strings"
+import "core:c"
+import "core:c/libc"
+import "core:os"
+import "core:sys/posix"
 
-DOC :: `<!DOCTYPE html>
+
+MY_HTML :: `<!DOCTYPE html>
 <html>
-	<head>
-		<title>Call JavaScript from Odin Example</title>
-		<script src="webui.js"></script>
-		<style>
-			body {
-				background: linear-gradient(to left, #36265a, #654da9);
-				color: AliceBlue;
-				font: 16px sans-serif;
-				text-align: center;
-				margin-top: 30px;
-			}
-			button {
-				margin: 5px 0 10px;
-			}
-		</style>
-	</head>
-	<body>
-		<h1>WebUI - Call JavaScript from Odin</h1>
-		<br>
-		<button id="increment-js">Count <span id="count">0</span></button>
-		<br>
-		<button id="exit">Exit</button>
-		<script>
-			let count = document.getElementById("count").innerHTML;
-			function setCount(number) {
-				document.getElementById("count").innerHTML = number;
-				count = number;
-			}
-		</script>
-	</body>
+  <head>
+    <meta charset="UTF-8">
+    <script src="webui.js"></script>
+    <title>Call JavaScript from C Example</title>
+    <style>
+       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;
+            margin: 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; }
+    </style>
+  </head>
+  <body>
+    <h1>WebUI - Call JavaScript from C</h1>
+    <br>
+    <h1 id="count">0</h1>
+    <br>
+    <button OnClick="my_function_count();">Manual Count</button>
+    <br>
+   <button id="MyTest" OnClick="AutoTest();">Auto Count (Every 10ms)</button>
+    <br>
+    <button OnClick="my_function_exit();">Exit</button>
+    <script>
+      let count = 0;
+      function GetCount() {
+        return count;
+      }
+      function SetCount(number) {
+        document.getElementById('count').innerHTML = number;
+        count = number;
+      }
+     function AutoTest(number) {
+       setInterval(function(){ my_function_count(); }, 10);
+      }
+    </script>
+  </body>
 </html>`
 
 
-increment_js :: proc "c" (e: ^ui.Event) {
+my_function_exit :: proc "c" (e: ^ui.Event) {
+	context = runtime.default_context()
+	ui.exit()
+}
+
+
+my_function_count :: proc "c" (e: ^ui.Event) {
 	context = runtime.default_context()
-	count, err := ui.script(e.window, "return count;")
+
+	count, err := ui.script(e.window, "return GetCount();")
 	if err != nil {
-		return
+		if !ui.is_shown(e.window) {
+			fmt.printf("Window closed.\n")
+		} else {
+			fmt.printf("javascript error %s\n", err)
+		}
+		return;
 	}
+
+	// Increment
 	new_count := strconv.atoi(count) + 1
-	ui.run(e.window, fmt.tprintf("setCount(%d);", new_count))
+
+	// Run JavaScript (Quick Way)
+	ui.run(e.window, fmt.aprintf("SetCount(%d);", new_count))
 }
 
 main :: proc() {
 	// Create a new window.
 	w := ui.new_window()
 
 	// Bind Odin functions.
-	ui.bind(w, "increment-js", increment_js)
-	ui.bind(w, "exit", proc "c" (_: ^ui.Event) {
-		context = runtime.default_context()
-		fmt.println("Bye!")
-		ui.exit()
-	})
+	ui.bind(w, cast(cstring)"my_function_count", my_function_count)
+	ui.bind(w, cast(cstring)"my_function_exit", my_function_exit)
+
 
 	// Show the HTML UI.
-	ui.show(w, DOC)
+	ui.show_browser(w, MY_HTML, .AnyBrowser)
 
 	// Wait until all windows get closed.
 	ui.wait()
+	ui.clean()
 }
diff --git a/examples/customer_web_server/index.html b/examples/customer_web_server/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>WebUI - Custom Web-Server Example (Odin)</title>
+  <!-- Connect this window to the back-end app -->
+  <script src="http://localhost:8081/webui.js"></script>
+</head>
+<body>
+<h3>Custom Web-Server Example (Odin)</h3>
+<p>
+  This HTML page is handled by a custom Web-Server other than WebUI.<br />
+  This window is connected to the back-end because we used: <pre>http://localhost:8081/webui.js</pre>
+</p>
+<h4><a href="second.html">Simple link example (Local file)</a></h4>
+<button onclick="my_backend_func(123, 456, 789);">Call my_backend_func()</button>
+</body>
+</html>
diff --git a/examples/customer_web_server/main.odin b/examples/customer_web_server/main.odin
@@ -0,0 +1,79 @@
+package customer_web_server
+
+// Serve a Folder Example
+
+import "core:fmt"
+import ui "../../"
+import "base:runtime"
+import "core:c"
+
+
+events :: proc "c" (e: ^ui.Event) {
+    context = runtime.default_context()
+
+    switch e.event_type {
+    case .Connected:
+        fmt.printfln("\nConnected. \n")
+    case .Disconnected:
+        fmt.printfln("\nDisconnected. \n")
+    case .MouseClick:
+        fmt.printfln("\nClick. \n")
+    case .Navigation:
+        url: cstring = ui.get_string(e)
+        fmt.printfln("\nStarting navigation to: %s \n", string(url))
+
+        // Because we used `bind(MyWindow, "", events)`
+        // WebUI will block all `href` link clicks and send here instead.
+        // We can then control the behaviour of links as needed.
+        ui.webui_navigate(e.window, url)
+    case .Callback:
+        fmt.println("Callback")
+    }
+}
+
+
+my_backend_func :: proc "c" (e: ^ui.Event) {
+    context = runtime.default_context()
+
+    // JavaScript
+    // my_backend_func(123, 456, 789);
+    // or webui.my_backend_func(...);
+
+    number_1: i64 = ui.get_int_at(e, 0)
+    number_2: i64 = ui.get_int_at(e, 1)
+    number_3: i64 = ui.get_int_at(e, 2)
+
+    fmt.printfln("my_backend_func 1: %d\n", number_1) // 123
+    fmt.printfln("my_backend_func 2: %d\n", number_2) // 456
+    fmt.printfln("my_backend_func 3: %d\n", number_3) // 789
+}
+
+
+main :: proc() {
+    // Create new windows
+    window: c.size_t = ui.new_window()
+
+    // Bind all events
+    ui.bind(window, "", events)
+
+    // Bind HTML elements with Odin functions
+    ui.bind(window, "my_backend_func", my_backend_func)
+
+    // Set the web-server/WebSocket port that WebUI should
+    // use. This means `webui.js` will be available at:
+    // http://localhost:MY_PORT_NUMBER/webui.js
+    ui.set_port(window, 8081)
+
+    // Show a new window and show our custom web server
+    // Assuming the custom web server is running on port
+    // 8080...
+    ui.show(window, "http://localhost:8080/")
+
+    // Wait until all windows get closed
+    ui.wait()
+
+    // Free all memory resources (Optional)
+    ui.clean()
+}
+
+
diff --git a/examples/customer_web_server/second.html b/examples/customer_web_server/second.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>WebUI - Custom Web-Server second page (Odin)</title>
+  <!-- Connect this window to the back-end app -->
+  <script src="http://localhost:8081/webui.js"></script>
+</head>
+<body>
+<h3>This is the second page !</h3>
+<h4><a href="index.html">Back</a></h4>
+</body>
+</html>
diff --git a/examples/customer_web_server/simple_web_server.py b/examples/customer_web_server/simple_web_server.py
@@ -0,0 +1,10 @@
+import http.server
+import socketserver
+
+PORT = 8080
+
+Handler = http.server.SimpleHTTPRequestHandler
+
+with socketserver.TCPServer(("", PORT), Handler) as httpd:
+    print(f"Server started at http://localhost:{PORT}")
+    httpd.serve_forever()