Update to WebUI 2.5.0-beta.2

salvadordf · Jul 15, 2024 · 885840a · 885840a
1 parent 68698a8
commit 885840a
Show file tree

Hide file tree

Showing 133 changed files with 14,625 additions and 346 deletions.
diff --git a/assets/serve_a_folder/bun_test.ts b/assets/serve_a_folder/bun_test.ts
@@ -0,0 +1,26 @@
+// This file gets called like follow:
+//
+// 1. UI `Index.html` request:
+//    `http://localhost:xxx/bun_test.ts?foo=123&bar=456`
+//
+// 2. WebUI runs command:
+//    `bun run "bun_test.ts" "foo=123&bar=456"`
+//
+// 3. Bun parses args and prints the response
+
+// Get Query (HTTP GET)
+const args = process.argv.slice(2);
+const query = args[0];
+
+// Variables
+let foo: string = '';
+let bar: string = '';
+
+// Read Query
+const params = new URLSearchParams(query);
+for (const [key, value] of params.entries()) {
+	if (key === 'foo') foo = value; // 123
+	else if (key === 'bar') bar = value; // 456
+}
+
+console.log('Response from Bun: ' + (parseInt(foo) + parseInt(bar))); // 579
diff --git a/assets/serve_a_folder/deno_test.ts b/assets/serve_a_folder/deno_test.ts
@@ -1,7 +1,12 @@
 // This file gets called like follow:
-// `Index.html` ->
-//  `http://localhost:xxx/deno_test.ts?foo=123&bar=456` ->
-//   `deno run --allow-all --unstable "deno_test.ts" "foo=123&bar=456"`
+// 
+// 1. UI `Index.html` request:
+//    `http://localhost:xxx/deno_test.ts?foo=123&bar=456`
+//
+// 2. WebUI runs command:
+//    `deno run --allow-all --unstable "deno_test.ts" "foo=123&bar=456"`
+//
+// 3. Deno parse args and print the response
 
 // Import parse()
 import { parse } from 'https://deno.land/std/flags/mod.ts';
@@ -21,4 +26,4 @@ for (const [key, value] of params.entries()) {
 	else if (key == 'bar') bar = value; // 456
 }
 
-console.error('foo + bar = ' + (parseInt(foo) + parseInt(bar))); // 579
+console.log('Response from Deno: ' + (parseInt(foo) + parseInt(bar))); // 579
diff --git a/assets/serve_a_folder/index.html b/assets/serve_a_folder/index.html
@@ -66,7 +66,13 @@ <h3 id="title">Serve a Folder Example (C)</h3>
 		By a simple HTTP request "deno_test.ts?foo=60&bar=40"
 		<br />
 		<br />
-		<button OnClick="call_deno_file();">deno_test.ts (Local file)</button>
+		<button OnClick="call_deno_file();">Deno_test.ts (Local file)</button>
+		<br />
+		<br />
+		<button OnClick="call_bun_file();">Bun_test.ts (Local file)</button>
+		<br />
+		<br />
+		<button OnClick="call_nodejs_file();">Nodejs_test.ts (Local file)</button>
 		<br />
 		<h4><a href="second.html">Second Page As A Simple Link (Local file)</a></h4>
 		<br />
@@ -86,17 +92,36 @@ <h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
 	</body>
 
 	<!-- Connect this window to the background app -->
-	<script src="webui.js"></script>
+	<script src="/webui.js"></script>
 
 	<script>
+
 		function call_deno_file() {
-			// Because `main.c` set Deno as the `.ts` and `.js` interpreter
-			// then a simple HTTP request to `/deno_test.ts` will be bassed
-			// to Deno.
+			// 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);
+		}
+
+		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);
+		}
 
+		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', 'deno_test.ts?foo=60&bar=40', false);
+			xmlHttp.open('GET', 'node_test.js?foo=123&bar=456', false);
 			xmlHttp.send(null);
 			alert(xmlHttp.responseText);
 		}

diff --git a/assets/serve_a_folder/second.html b/assets/serve_a_folder/second.html
@@ -44,5 +44,5 @@ <h3 id="title">This is the second page !</h3>
 	</body>
 
 	<!-- Connect this window to the background app -->
-	<script src="webui.js"></script>
+	<script src="/webui.js"></script>
 </html>
diff --git a/assets/virtual_file_system/favicon.ico b/assets/virtual_file_system/favicon.ico
diff --git a/assets/virtual_file_system/favicon.svg b/assets/virtual_file_system/favicon.svg
diff --git a/assets/virtual_file_system/index.html b/assets/virtual_file_system/index.html
@@ -0,0 +1,135 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>WebUI - Virtual File System</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;
+				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;
+			}
+		</style>
+	</head>
+	<body>
+		<h3 id="title">Virtual File System Example</h3>
+		<br />
+		<img src="svg/webui.svg">
+		<br />
+		<p>
+			This file is embedded in this application.<br />
+		</p>
+		<h4><a href="sub">/sub</a></h4>
+		<br />
+		<button id="Exit">Exit</button>
+	</body>
+
+	<!-- Connect this window to the background app -->
+	<script src="/webui.js"></script>
+
+	<script>
+
+		// JavaScript Example
+		/*
+		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);
+			}
+		}
+		*/
+
+	</script>
+</html>
diff --git a/assets/virtual_file_system/sub/index.html b/assets/virtual_file_system/sub/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>WebUI - Virtual File System</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;
+				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;
+			}
+		</style>
+	</head>
+	<body>
+		<p>
+			This is another file embedded in this application.<br />
+		</p>
+		<br />
+		<button id="Exit">Exit</button>
+	</body>
+
+	<!-- Connect this window to the background app -->
+	<script src="/webui.js"></script>
+
+</html>
diff --git a/assets/virtual_file_system/svg/webui.svg b/assets/virtual_file_system/svg/webui.svg