mirror of
https://github.com/webui-dev/webui
synced 2025-03-28 21:13:17 +00:00
Prettify
This commit is contained in:
Turiiya
parent
e74de08e75
commit
3e8f854a89
72
README.md
72
README.md
@ -32,9 +32,9 @@
|
||||
## Features
|
||||
|
||||
- Written in Pure C
|
||||
- Fully Independent (*No need for any third-party runtimes*)
|
||||
- Fully Independent (_No need for any third-party runtimes_)
|
||||
- Lightweight ~200 Kb & Small memory footprint
|
||||
- Fast binary communication protocol between WebUI and the browser (*Instead of JSON*)
|
||||
- Fast binary communication protocol between WebUI and the browser (_Instead of JSON_)
|
||||
- One header file
|
||||
- Multi-platform & Multi-Browser
|
||||
- Using private profile for safety
|
||||
@ -51,7 +51,7 @@ This [text editor](https://github.com/webui-dev/webui/tree/main/examples/C/text-
|
||||
|
||||
## UI & The Web Technologies
|
||||
|
||||
[Borislav Stanimirov](https://ibob.bg/) discusses using HTML5 in the web browser as GUI at the [C++ Conference 2019 (*YouTube*)](https://www.youtube.com/watch?v=bbbcZd4cuxg).
|
||||
[Borislav Stanimirov](https://ibob.bg/) discusses using HTML5 in the web browser as GUI at the [C++ Conference 2019 (_YouTube_)](https://www.youtube.com/watch?v=bbbcZd4cuxg).
|
||||
|
||||
<!-- <div align="center">
|
||||
<a href="https://www.youtube.com/watch?v=bbbcZd4cuxg"><img src="https://img.youtube.com/vi/bbbcZd4cuxg/0.jpg" alt="Embrace Modern Technology: Using HTML 5 for GUI in C++ - Borislav Stanimirov - CppCon 2019"></a>
|
||||
@ -81,38 +81,42 @@ Think of WebUI like a WebView controller, but instead of embedding the WebView c
|
||||
|
||||
### Runtime Dependencies Comparison
|
||||
|
||||
| | WebView | Qt | WebUI |
|
||||
| ------ | ------ | ------ | ------ |
|
||||
| Runtime Dependencies on Windows | *WebView2* | *QtCore, QtGui, QtWidgets* | ***A Web Browser*** |
|
||||
| Runtime Dependencies on Linux | *GTK3, WebKitGTK* | *QtCore, QtGui, QtWidgets* | ***A Web Browser*** |
|
||||
| Runtime Dependencies on macOS | *Cocoa, WebKit* | *QtCore, QtGui, QtWidgets* | ***A Web Browser*** |
|
||||
| | WebView | Qt | WebUI |
|
||||
| ------------------------------- | ----------------- | -------------------------- | ------------------- |
|
||||
| Runtime Dependencies on Windows | _WebView2_ | _QtCore, QtGui, QtWidgets_ | **_A Web Browser_** |
|
||||
| Runtime Dependencies on Linux | _GTK3, WebKitGTK_ | _QtCore, QtGui, QtWidgets_ | **_A Web Browser_** |
|
||||
| Runtime Dependencies on macOS | _Cocoa, WebKit_ | _QtCore, QtGui, QtWidgets_ | **_A Web Browser_** |
|
||||
|
||||
## Documentation
|
||||
|
||||
> **Note**
|
||||
> We are currently writing documentation.
|
||||
|
||||
- [Online Documentation - C](https://webui.me/docs/#/c_api)
|
||||
- [Online Documentation - C++](https://webui.me/docs/#/cpp_api)
|
||||
- [Online Documentation - C](https://webui.me/docs/#/c_api)
|
||||
- [Online Documentation - C++](https://webui.me/docs/#/cpp_api)
|
||||
|
||||
## Build
|
||||
|
||||
- **Windows**
|
||||
|
||||
```powershell
|
||||
# GCC
|
||||
mingw32-make
|
||||
|
||||
|
||||
# MSVC
|
||||
nmake -f Makefile.nmake
|
||||
```
|
||||
|
||||
- **Linux**
|
||||
|
||||
```sh
|
||||
# GCC
|
||||
make
|
||||
|
||||
|
||||
# Clang
|
||||
make CC=clang
|
||||
```
|
||||
|
||||
- **macOS**
|
||||
```sh
|
||||
make
|
||||
@ -125,31 +129,31 @@ Think of WebUI like a WebView controller, but instead of embedding the WebView c
|
||||
|
||||
## Wrappers
|
||||
|
||||
| Language | Status | Link |
|
||||
| ------ | ------ | ------ |
|
||||
| Go | ✔️ | [Go-WebUI](https://github.com/webui-dev/go-webui) |
|
||||
| Nim | ✔️ | [Nim-WebUI](https://github.com/webui-dev/nim-webui) |
|
||||
| Pascal | ✔️ | [Pascal-WebUI](https://github.com/webui-dev/pascal-webui) |
|
||||
| Python | ✔️ | [Python-WebUI](https://github.com/webui-dev/python-webui) |
|
||||
| Rust | *not complete* | [Rust-WebUI](https://github.com/webui-dev/rust-webui) |
|
||||
| TypeScript / JavaScript | ✔️ | [Deno-WebUI](https://github.com/webui-dev/deno-webui) |
|
||||
| V | ✔️ | [V-WebUI](https://github.com/webui-dev/v-webui) |
|
||||
| Zig | *not complete* | [Zig-WebUI](https://github.com/webui-dev/zig-webui) |
|
||||
| Language | Status | Link |
|
||||
| ----------------------- | -------------- | --------------------------------------------------------- |
|
||||
| Go | ✔️ | [Go-WebUI](https://github.com/webui-dev/go-webui) |
|
||||
| Nim | ✔️ | [Nim-WebUI](https://github.com/webui-dev/nim-webui) |
|
||||
| Pascal | ✔️ | [Pascal-WebUI](https://github.com/webui-dev/pascal-webui) |
|
||||
| Python | ✔️ | [Python-WebUI](https://github.com/webui-dev/python-webui) |
|
||||
| Rust | _not complete_ | [Rust-WebUI](https://github.com/webui-dev/rust-webui) |
|
||||
| TypeScript / JavaScript | ✔️ | [Deno-WebUI](https://github.com/webui-dev/deno-webui) |
|
||||
| V | ✔️ | [V-WebUI](https://github.com/webui-dev/v-webui) |
|
||||
| Zig | _not complete_ | [Zig-WebUI](https://github.com/webui-dev/zig-webui) |
|
||||
|
||||
## Supported Web Browsers
|
||||
|
||||
| Browser | Windows | macOS | Linux |
|
||||
| ------ | ------ | ------ | ------ |
|
||||
| Mozilla Firefox | ✔️ | ✔️ | ✔️ |
|
||||
| Google Chrome | ✔️ | ✔️ | ✔️ |
|
||||
| Microsoft Edge | ✔️ | ✔️ | ✔️ |
|
||||
| Chromium | ✔️ | ✔️ | ✔️ |
|
||||
| Yandex | ✔️ | ✔️ | ✔️ |
|
||||
| Brave | ✔️ | ✔️ | ✔️ |
|
||||
| Vivaldi | ✔️ | ✔️ | ✔️ |
|
||||
| Epic | ✔️ | ✔️ | *not available* |
|
||||
| Apple Safari | *not available* | *coming soon* | *not available* |
|
||||
| Opera | *coming soon* | *coming soon* | *coming soon* |
|
||||
| Browser | Windows | macOS | Linux |
|
||||
| --------------- | --------------- | ------------- | --------------- |
|
||||
| Mozilla Firefox | ✔️ | ✔️ | ✔️ |
|
||||
| Google Chrome | ✔️ | ✔️ | ✔️ |
|
||||
| Microsoft Edge | ✔️ | ✔️ | ✔️ |
|
||||
| Chromium | ✔️ | ✔️ | ✔️ |
|
||||
| Yandex | ✔️ | ✔️ | ✔️ |
|
||||
| Brave | ✔️ | ✔️ | ✔️ |
|
||||
| Vivaldi | ✔️ | ✔️ | ✔️ |
|
||||
| Epic | ✔️ | ✔️ | _not available_ |
|
||||
| Apple Safari | _not available_ | _coming soon_ | _not available_ |
|
||||
| Opera | _coming soon_ | _coming soon_ | _coming soon_ |
|
||||
|
||||
### License
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
# WebUI Bridge
|
||||
|
||||
The WebUI Bridge connects the UI (_Web Browser_) with the backend application through WebSocket. This bridge is written in TypeScript, and it needs to be transpiled to JavaScript using [ESBuild](https://esbuild.github.io/) to produce `webui_bridge.js`, then converted to C99 header using the Python script `js2c.py` to generate `webui_bridge.h`.
|
||||
@ -17,7 +16,7 @@ The WebUI Bridge connects the UI (_Web Browser_) with the backend application th
|
||||
- cd `webui\bridge`
|
||||
- `./build.ps1`
|
||||
- If you get _running scripts is disabled on this
|
||||
system_ error. Then run `Set-ExecutionPolicy RemoteSigned` to enable script execution. After done, you can roll back by running `Set-ExecutionPolicy Restricted`
|
||||
system_ error. Then run `Set-ExecutionPolicy RemoteSigned` to enable script execution. After done, you can roll back by running `Set-ExecutionPolicy Restricted`
|
||||
|
||||
### Linux
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ if (!$?) {
|
||||
if (!$?) {
|
||||
Write-Host "Error: Please install Python."
|
||||
Set-Location $current_location
|
||||
exit
|
||||
exit
|
||||
}
|
||||
else {
|
||||
$python_cmd = "python"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*
|
||||
WebUI Bridge Utils
|
||||
|
||||
|
||||
Copyright (c) 2023 Oculi Julien.
|
||||
Licensed under MIT License.
|
||||
All rights reserved.
|
||||
@ -18,37 +18,35 @@
|
||||
* @param {boolean | AddEventListenerOptions} [options] - Event listener options (same as for addEventListener).
|
||||
* @returns the used observer to allow disconnect.
|
||||
*/
|
||||
export function addRefreshableEventListener<
|
||||
K extends keyof HTMLElementEventMap
|
||||
>(
|
||||
export function addRefreshableEventListener<K extends keyof HTMLElementEventMap>(
|
||||
root: HTMLElement,
|
||||
targetSelector: string,
|
||||
type: K,
|
||||
listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown,
|
||||
options?: boolean | AddEventListenerOptions
|
||||
options?: boolean | AddEventListenerOptions,
|
||||
) {
|
||||
function rebindListener(mutations: MutationRecord[]) {
|
||||
for (const mutation of mutations) {
|
||||
for (const node of mutation.addedNodes) {
|
||||
if (!(node instanceof HTMLElement)) return // Target only html elements
|
||||
if (!(node instanceof HTMLElement)) return; // Target only html elements
|
||||
if (node.matches(targetSelector)) {
|
||||
// Bind event on added nodes
|
||||
node.addEventListener<K>(type, listener, options)
|
||||
node.addEventListener<K>(type, listener, options);
|
||||
}
|
||||
for (const child of node.querySelectorAll(targetSelector)) {
|
||||
if (!(child instanceof HTMLElement)) continue //Target only html elements
|
||||
child.addEventListener<K>(type, listener, options)
|
||||
if (!(child instanceof HTMLElement)) continue; //Target only html elements
|
||||
child.addEventListener<K>(type, listener, options);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(rebindListener) //Set mutation observer callback
|
||||
observer.observe(root, { subtree: true, childList: true }) // Observe root element and all his children
|
||||
return observer // Allow user to stop observer for performance issues
|
||||
const observer = new MutationObserver(rebindListener); //Set mutation observer callback
|
||||
observer.observe(root, { subtree: true, childList: true }); // Observe root element and all his children
|
||||
return observer; // Allow user to stop observer for performance issues
|
||||
}
|
||||
|
||||
/**
|
||||
* Async function constructor
|
||||
*/
|
||||
export const AsyncFunction = async function () {}.constructor
|
||||
export const AsyncFunction = async function () {}.constructor;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,8 @@
|
||||
'use-strict' // Force strict mode for transpiled
|
||||
'use-strict'; // Force strict mode for transpiled
|
||||
|
||||
/*
|
||||
WebUI Bridge
|
||||
|
||||
|
||||
http://webui.me
|
||||
https://github.com/webui-dev/webui
|
||||
Copyright (c) 2020-2023 Hassan Draga.
|
||||
@ -15,53 +15,49 @@
|
||||
*/
|
||||
|
||||
//@ts-ignore use *.ts import real extension
|
||||
import { AsyncFunction, addRefreshableEventListener } from './utils.ts'
|
||||
import { AsyncFunction, addRefreshableEventListener } from './utils.ts';
|
||||
|
||||
type DataTypes =
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| Uint8Array
|
||||
type DataTypes = string | number | boolean | Uint8Array;
|
||||
|
||||
class WebuiBridge {
|
||||
// WebUI settings
|
||||
#token: number
|
||||
#port: number
|
||||
#winNum: number
|
||||
#bindList: unknown[] = []
|
||||
#log: boolean
|
||||
#winX: number
|
||||
#winY: number
|
||||
#winW: number
|
||||
#winH: number
|
||||
#token: number;
|
||||
#port: number;
|
||||
#winNum: number;
|
||||
#bindList: unknown[] = [];
|
||||
#log: boolean;
|
||||
#winX: number;
|
||||
#winY: number;
|
||||
#winW: number;
|
||||
#winH: number;
|
||||
// Internals
|
||||
#ws: WebSocket
|
||||
#wsStatus = false
|
||||
#wsStatusOnce = false
|
||||
#closeReason = 0
|
||||
#closeValue: string
|
||||
#hasEvents = false
|
||||
#callPromiseID = new Uint16Array(1)
|
||||
#callPromiseResolve: (((data: string) => unknown) | undefined)[] = []
|
||||
#allowNavigation = false
|
||||
#ws: WebSocket;
|
||||
#wsStatus = false;
|
||||
#wsStatusOnce = false;
|
||||
#closeReason = 0;
|
||||
#closeValue: string;
|
||||
#hasEvents = false;
|
||||
#callPromiseID = new Uint16Array(1);
|
||||
#callPromiseResolve: (((data: string) => unknown) | undefined)[] = [];
|
||||
#allowNavigation = false;
|
||||
// WebUI const
|
||||
#WEBUI_SIGNATURE = 221
|
||||
#CMD_JS = 254
|
||||
#CMD_JS_QUICK = 253
|
||||
#CMD_CLICK = 252
|
||||
#CMD_NAVIGATION = 251
|
||||
#CMD_CLOSE = 250
|
||||
#CMD_CALL_FUNC = 249
|
||||
#CMD_SEND_RAW = 248
|
||||
#CMD_NEW_ID = 247
|
||||
#PROTOCOL_SIZE = 8 // Protocol header size in bytes
|
||||
#PROTOCOL_SIGN = 0 // Protocol byte position: Signature (1 Byte)
|
||||
#PROTOCOL_TOKEN = 1 // Protocol byte position: Token (4 Bytes)
|
||||
#PROTOCOL_ID = 5 // Protocol byte position: ID (2 Bytes)
|
||||
#PROTOCOL_CMD = 7 // Protocol byte position: Command (1 Byte)
|
||||
#PROTOCOL_DATA = 8 // Protocol byte position: Data (n Byte)
|
||||
#Token = new Uint32Array(1)
|
||||
#Ping: Boolean = true
|
||||
#WEBUI_SIGNATURE = 221;
|
||||
#CMD_JS = 254;
|
||||
#CMD_JS_QUICK = 253;
|
||||
#CMD_CLICK = 252;
|
||||
#CMD_NAVIGATION = 251;
|
||||
#CMD_CLOSE = 250;
|
||||
#CMD_CALL_FUNC = 249;
|
||||
#CMD_SEND_RAW = 248;
|
||||
#CMD_NEW_ID = 247;
|
||||
#PROTOCOL_SIZE = 8; // Protocol header size in bytes
|
||||
#PROTOCOL_SIGN = 0; // Protocol byte position: Signature (1 Byte)
|
||||
#PROTOCOL_TOKEN = 1; // Protocol byte position: Token (4 Bytes)
|
||||
#PROTOCOL_ID = 5; // Protocol byte position: ID (2 Bytes)
|
||||
#PROTOCOL_CMD = 7; // Protocol byte position: Command (1 Byte)
|
||||
#PROTOCOL_DATA = 8; // Protocol byte position: Data (n Byte)
|
||||
#Token = new Uint32Array(1);
|
||||
#Ping: Boolean = true;
|
||||
constructor({
|
||||
token,
|
||||
port,
|
||||
@ -73,223 +69,203 @@ class WebuiBridge {
|
||||
winW,
|
||||
winH,
|
||||
}: {
|
||||
token: number
|
||||
port: number
|
||||
winNum: number
|
||||
bindList: unknown[]
|
||||
log?: boolean
|
||||
winX: number
|
||||
winY: number
|
||||
winW: number
|
||||
winH: number
|
||||
token: number;
|
||||
port: number;
|
||||
winNum: number;
|
||||
bindList: unknown[];
|
||||
log?: boolean;
|
||||
winX: number;
|
||||
winY: number;
|
||||
winW: number;
|
||||
winH: number;
|
||||
}) {
|
||||
// Constructor arguments are injected by webui.c
|
||||
this.#token = token
|
||||
this.#port = port
|
||||
this.#winNum = winNum
|
||||
this.#bindList = bindList
|
||||
this.#log = log
|
||||
this.#winX = winX
|
||||
this.#winY = winY
|
||||
this.#winW = winW
|
||||
this.#winH = winH
|
||||
this.#token = token;
|
||||
this.#port = port;
|
||||
this.#winNum = winNum;
|
||||
this.#bindList = bindList;
|
||||
this.#log = log;
|
||||
this.#winX = winX;
|
||||
this.#winY = winY;
|
||||
this.#winW = winW;
|
||||
this.#winH = winH;
|
||||
// Token
|
||||
this.#Token[0] = this.#token
|
||||
this.#Token[0] = this.#token;
|
||||
// Instance
|
||||
if ('webui' in globalThis) {
|
||||
throw new Error(
|
||||
'Sorry. WebUI is already defined, only one instance is allowed.'
|
||||
)
|
||||
throw new Error('Sorry. WebUI is already defined, only one instance is allowed.');
|
||||
}
|
||||
// Positioning the current window
|
||||
if (this.#winX !== undefined && this.#winY !== undefined) {
|
||||
window.moveTo(this.#winX, this.#winY)
|
||||
window.moveTo(this.#winX, this.#winY);
|
||||
}
|
||||
// Resize the current window
|
||||
if (this.#winW !== undefined && this.#winH !== undefined) {
|
||||
window.resizeTo(this.#winW, this.#winH)
|
||||
window.resizeTo(this.#winW, this.#winH);
|
||||
}
|
||||
// WebSocket
|
||||
if (!('WebSocket' in window)) {
|
||||
alert('Sorry. WebSocket is not supported by your web browser.')
|
||||
if (!this.#log) globalThis.close()
|
||||
alert('Sorry. WebSocket is not supported by your web browser.');
|
||||
if (!this.#log) globalThis.close();
|
||||
}
|
||||
// Connect to the backend application
|
||||
this.#start()
|
||||
this.#start();
|
||||
// Handle navigation server side
|
||||
if ('navigation' in globalThis) {
|
||||
globalThis.navigation.addEventListener('navigate', (event) => {
|
||||
if(!this.#allowNavigation) {
|
||||
event.preventDefault()
|
||||
const url = new URL(event.destination.url)
|
||||
if (!this.#allowNavigation) {
|
||||
event.preventDefault();
|
||||
const url = new URL(event.destination.url);
|
||||
if (this.#hasEvents) {
|
||||
if (this.#log) console.log(`WebUI -> DOM -> Navigation Event [${url.href}]`)
|
||||
this.#sendEventNavigation(url.href)
|
||||
}
|
||||
else {
|
||||
this.#close(this.#CMD_NAVIGATION, url.href)
|
||||
if (this.#log) console.log(`WebUI -> DOM -> Navigation Event [${url.href}]`);
|
||||
this.#sendEventNavigation(url.href);
|
||||
} else {
|
||||
this.#close(this.#CMD_NAVIGATION, url.href);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
// Handle all link click to prevent natural navigation
|
||||
// Rebind listener if user inject new html
|
||||
addRefreshableEventListener(
|
||||
document.body,
|
||||
'a',
|
||||
'click',
|
||||
(event) => {
|
||||
if(!this.#allowNavigation) {
|
||||
event.preventDefault()
|
||||
const { href } = event.target as HTMLAnchorElement
|
||||
if (this.#hasEvents) {
|
||||
if (this.#log) console.log(`WebUI -> DOM -> Navigation Click Event [${href}]`)
|
||||
this.#sendEventNavigation(href)
|
||||
}
|
||||
else {
|
||||
this.#close(this.#CMD_NAVIGATION, href)
|
||||
}
|
||||
addRefreshableEventListener(document.body, 'a', 'click', (event) => {
|
||||
if (!this.#allowNavigation) {
|
||||
event.preventDefault();
|
||||
const { href } = event.target as HTMLAnchorElement;
|
||||
if (this.#hasEvents) {
|
||||
if (this.#log) console.log(`WebUI -> DOM -> Navigation Click Event [${href}]`);
|
||||
this.#sendEventNavigation(href);
|
||||
} else {
|
||||
this.#close(this.#CMD_NAVIGATION, href);
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
// Prevent F5 refresh
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (this.#log) return // Allowed in debug mode
|
||||
if (event.key === 'F5') event.preventDefault()
|
||||
})
|
||||
if (this.#log) return; // Allowed in debug mode
|
||||
if (event.key === 'F5') event.preventDefault();
|
||||
});
|
||||
onbeforeunload = () => {
|
||||
this.#close()
|
||||
}
|
||||
this.#close();
|
||||
};
|
||||
setTimeout(() => {
|
||||
if (!this.#wsStatusOnce) {
|
||||
this.#freezeUi()
|
||||
alert(
|
||||
'Sorry. WebUI failed to connect to the backend application. Please try again.'
|
||||
)
|
||||
if (!this.#log) globalThis.close()
|
||||
this.#freezeUi();
|
||||
alert('Sorry. WebUI failed to connect to the backend application. Please try again.');
|
||||
if (!this.#log) globalThis.close();
|
||||
}
|
||||
}, 1500)
|
||||
}, 1500);
|
||||
}
|
||||
#close(reason = 0, value = '') {
|
||||
this.#wsStatus = false
|
||||
this.#closeReason = reason
|
||||
this.#closeValue = value
|
||||
this.#ws.close()
|
||||
this.#wsStatus = false;
|
||||
this.#closeReason = reason;
|
||||
this.#closeValue = value;
|
||||
this.#ws.close();
|
||||
if (reason === this.#CMD_NAVIGATION) {
|
||||
if (this.#log) {
|
||||
console.log(
|
||||
`WebUI -> Close -> Navigation to [${value}]`
|
||||
)
|
||||
console.log(`WebUI -> Close -> Navigation to [${value}]`);
|
||||
}
|
||||
this.#allowNavigation = true
|
||||
globalThis.location.replace(this.#closeValue)
|
||||
}
|
||||
else {
|
||||
this.#allowNavigation = true;
|
||||
globalThis.location.replace(this.#closeValue);
|
||||
} else {
|
||||
if (this.#log) {
|
||||
console.log(
|
||||
`WebUI -> Close.`
|
||||
)
|
||||
console.log(`WebUI -> Close.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
#freezeUi() {
|
||||
document.body.style.filter = 'contrast(1%)'
|
||||
document.body.style.filter = 'contrast(1%)';
|
||||
}
|
||||
#isTextBasedCommand(cmd: number): Boolean {
|
||||
if(cmd !== this.#CMD_SEND_RAW)
|
||||
return true
|
||||
return false
|
||||
if (cmd !== this.#CMD_SEND_RAW) return true;
|
||||
return false;
|
||||
}
|
||||
#getDataStrFromPacket(buffer: Uint8Array, startIndex: number): string {
|
||||
let stringBytes: number[] = []
|
||||
let stringBytes: number[] = [];
|
||||
for (let i = startIndex; i < buffer.length; i++) {
|
||||
if (buffer[i] === 0) { // Check for null byte
|
||||
break
|
||||
if (buffer[i] === 0) {
|
||||
// Check for null byte
|
||||
break;
|
||||
}
|
||||
stringBytes.push(buffer[i])
|
||||
stringBytes.push(buffer[i]);
|
||||
}
|
||||
// Convert the array of bytes to a string
|
||||
const stringText = new TextDecoder().decode(new Uint8Array(stringBytes))
|
||||
return stringText
|
||||
const stringText = new TextDecoder().decode(new Uint8Array(stringBytes));
|
||||
return stringText;
|
||||
}
|
||||
#getID(buffer: Uint8Array, index: number): number {
|
||||
if (index < 0 || index >= buffer.length - 1) {
|
||||
throw new Error('Index out of bounds or insufficient data.')
|
||||
throw new Error('Index out of bounds or insufficient data.');
|
||||
}
|
||||
const firstByte = buffer[index]
|
||||
const secondByte = buffer[index + 1]
|
||||
const combined = (secondByte << 8) | firstByte // Works only for little-endian
|
||||
return combined
|
||||
const firstByte = buffer[index];
|
||||
const secondByte = buffer[index + 1];
|
||||
const combined = (secondByte << 8) | firstByte; // Works only for little-endian
|
||||
return combined;
|
||||
}
|
||||
#addToken(buffer: Uint8Array, value: number, index: number): void {
|
||||
if (value < 0 || value > 0xFFFFFFFF) {
|
||||
throw new Error('Number is out of the range for 4 bytes representation.')
|
||||
if (value < 0 || value > 0xffffffff) {
|
||||
throw new Error('Number is out of the range for 4 bytes representation.');
|
||||
}
|
||||
if (index < 0 || index > buffer.length - 4) {
|
||||
throw new Error('Index out of bounds or insufficient space in buffer.')
|
||||
throw new Error('Index out of bounds or insufficient space in buffer.');
|
||||
}
|
||||
// WebUI expect Little-endian (Work for Little/Big endian platforms)
|
||||
buffer[index] = value & 0xFF // Least significant byte
|
||||
buffer[index + 1] = (value >>> 8) & 0xFF
|
||||
buffer[index + 2] = (value >>> 16) & 0xFF
|
||||
buffer[index + 3] = (value >>> 24) & 0xFF // Most significant byte
|
||||
buffer[index] = value & 0xff; // Least significant byte
|
||||
buffer[index + 1] = (value >>> 8) & 0xff;
|
||||
buffer[index + 2] = (value >>> 16) & 0xff;
|
||||
buffer[index + 3] = (value >>> 24) & 0xff; // Most significant byte
|
||||
}
|
||||
#addID(buffer: Uint8Array, value: number, index: number): void {
|
||||
if (value < 0 || value > 0xFFFF) {
|
||||
throw new Error('Number is out of the range for 2 bytes representation.')
|
||||
if (value < 0 || value > 0xffff) {
|
||||
throw new Error('Number is out of the range for 2 bytes representation.');
|
||||
}
|
||||
if (index < 0 || index > buffer.length - 2) {
|
||||
throw new Error('Index out of bounds or insufficient space in buffer.')
|
||||
throw new Error('Index out of bounds or insufficient space in buffer.');
|
||||
}
|
||||
// WebUI expect Little-endian (Work for Little/Big endian platforms)
|
||||
buffer[index] = value & 0xFF // Least significant byte
|
||||
buffer[index + 1] = (value >>> 8) & 0xFF // Most significant byte
|
||||
buffer[index] = value & 0xff; // Least significant byte
|
||||
buffer[index + 1] = (value >>> 8) & 0xff; // Most significant byte
|
||||
}
|
||||
#start() {
|
||||
this.#keepAlive()
|
||||
this.#callPromiseID[0] = 0
|
||||
this.#keepAlive();
|
||||
this.#callPromiseID[0] = 0;
|
||||
if (this.#bindList.includes(this.#winNum + '/')) {
|
||||
this.#hasEvents = true
|
||||
this.#hasEvents = true;
|
||||
}
|
||||
this.#ws = new WebSocket(
|
||||
`ws://localhost:${this.#port}/_webui_ws_connect`
|
||||
)
|
||||
this.#ws.binaryType = 'arraybuffer'
|
||||
this.#ws = new WebSocket(`ws://localhost:${this.#port}/_webui_ws_connect`);
|
||||
this.#ws.binaryType = 'arraybuffer';
|
||||
this.#ws.onopen = () => {
|
||||
this.#wsStatus = true
|
||||
this.#wsStatusOnce = true
|
||||
if (this.#log) console.log('WebUI -> Connected')
|
||||
this.#clicksListener()
|
||||
}
|
||||
this.#wsStatus = true;
|
||||
this.#wsStatusOnce = true;
|
||||
if (this.#log) console.log('WebUI -> Connected');
|
||||
this.#clicksListener();
|
||||
};
|
||||
this.#ws.onerror = () => {
|
||||
if (this.#log) console.log('WebUI -> Connection Failed')
|
||||
this.#freezeUi()
|
||||
}
|
||||
if (this.#log) console.log('WebUI -> Connection Failed');
|
||||
this.#freezeUi();
|
||||
};
|
||||
this.#ws.onclose = (event) => {
|
||||
this.#wsStatus = false
|
||||
this.#wsStatus = false;
|
||||
if (this.#closeReason === this.#CMD_NAVIGATION) {
|
||||
if (this.#log) {
|
||||
console.log(
|
||||
`WebUI -> Connection closed du to Navigation to [${this.#closeValue}]`
|
||||
)
|
||||
console.log(`WebUI -> Connection closed du to Navigation to [${this.#closeValue}]`);
|
||||
}
|
||||
} else {
|
||||
if (this.#log) {
|
||||
console.log(`WebUI -> Connection lost (${event.code})`)
|
||||
this.#freezeUi()
|
||||
console.log(`WebUI -> Connection lost (${event.code})`);
|
||||
this.#freezeUi();
|
||||
} else {
|
||||
this.#closeWindowTimer()
|
||||
this.#closeWindowTimer();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.#ws.onmessage = async (event) => {
|
||||
const buffer8 = new Uint8Array(event.data)
|
||||
if (buffer8.length < this.#PROTOCOL_SIZE) return
|
||||
if (buffer8[this.#PROTOCOL_SIGN] !== this.#WEBUI_SIGNATURE) return
|
||||
if(this.#isTextBasedCommand(buffer8[this.#PROTOCOL_CMD])) {
|
||||
const buffer8 = new Uint8Array(event.data);
|
||||
if (buffer8.length < this.#PROTOCOL_SIZE) return;
|
||||
if (buffer8[this.#PROTOCOL_SIGN] !== this.#WEBUI_SIGNATURE) return;
|
||||
if (this.#isTextBasedCommand(buffer8[this.#PROTOCOL_CMD])) {
|
||||
// UTF8 Text based commands
|
||||
const callId = this.#getID(buffer8, this.#PROTOCOL_ID)
|
||||
const callId = this.#getID(buffer8, this.#PROTOCOL_ID);
|
||||
// Process Command
|
||||
switch (buffer8[this.#PROTOCOL_CMD]) {
|
||||
case this.#CMD_JS_QUICK:
|
||||
@ -301,33 +277,27 @@ class WebuiBridge {
|
||||
// 2: [ID]
|
||||
// 3: [CMD]
|
||||
// 4: [Script]
|
||||
const script = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA)
|
||||
const scriptSanitize = script.replace(
|
||||
/(?:\r\n|\r|\n)/g,
|
||||
'\n'
|
||||
)
|
||||
if (this.#log)
|
||||
console.log(`WebUI -> CMD -> JS [${scriptSanitize}]`)
|
||||
const script = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);
|
||||
const scriptSanitize = script.replace(/(?:\r\n|\r|\n)/g, '\n');
|
||||
if (this.#log) console.log(`WebUI -> CMD -> JS [${scriptSanitize}]`);
|
||||
// Get callback result
|
||||
let FunReturn = 'undefined'
|
||||
let FunError = false
|
||||
let FunReturn = 'undefined';
|
||||
let FunError = false;
|
||||
try {
|
||||
FunReturn = await AsyncFunction(scriptSanitize)()
|
||||
FunReturn = await AsyncFunction(scriptSanitize)();
|
||||
} catch (e) {
|
||||
FunError = true
|
||||
FunReturn = e.message
|
||||
FunError = true;
|
||||
FunReturn = e.message;
|
||||
}
|
||||
// Stop if this is a quick call
|
||||
if (buffer8[this.#PROTOCOL_CMD] === this.#CMD_JS_QUICK) return
|
||||
if (buffer8[this.#PROTOCOL_CMD] === this.#CMD_JS_QUICK) return;
|
||||
// Get the call return
|
||||
if (FunReturn === undefined) {
|
||||
FunReturn = 'undefined'
|
||||
FunReturn = 'undefined';
|
||||
}
|
||||
// Logging
|
||||
if (this.#log && !FunError)
|
||||
console.log(`WebUI -> CMD -> JS -> Return Success [${FunReturn}]`)
|
||||
if (this.#log && FunError)
|
||||
console.log(`WebUI -> CMD -> JS -> Return Error [${FunReturn}]`)
|
||||
if (this.#log && !FunError) console.log(`WebUI -> CMD -> JS -> Return Success [${FunReturn}]`);
|
||||
if (this.#log && FunError) console.log(`WebUI -> CMD -> JS -> Return Error [${FunReturn}]`);
|
||||
// Protocol
|
||||
// 0: [SIGNATURE]
|
||||
// 1: [TOKEN]
|
||||
@ -336,18 +306,22 @@ class WebuiBridge {
|
||||
// 4: [Error, Script Response]
|
||||
const Return8 = Uint8Array.of(
|
||||
this.#WEBUI_SIGNATURE,
|
||||
0, 0, 0, 0, // Token (4 Bytes)
|
||||
0, 0, // ID (2 Bytes)
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0, // Token (4 Bytes)
|
||||
0,
|
||||
0, // ID (2 Bytes)
|
||||
this.#CMD_JS,
|
||||
FunError ? 1 : 0,
|
||||
...new TextEncoder().encode(FunReturn)
|
||||
)
|
||||
this.#addToken(Return8, this.#token, this.#PROTOCOL_TOKEN)
|
||||
this.#addID(Return8, callId, this.#PROTOCOL_ID)
|
||||
this.#Ping = false
|
||||
if (this.#wsStatus) this.#ws.send(Return8.buffer)
|
||||
...new TextEncoder().encode(FunReturn),
|
||||
);
|
||||
this.#addToken(Return8, this.#token, this.#PROTOCOL_TOKEN);
|
||||
this.#addID(Return8, callId, this.#PROTOCOL_ID);
|
||||
this.#Ping = false;
|
||||
if (this.#wsStatus) this.#ws.send(Return8.buffer);
|
||||
}
|
||||
break
|
||||
break;
|
||||
case this.#CMD_CALL_FUNC:
|
||||
{
|
||||
// Protocol
|
||||
@ -356,21 +330,19 @@ class WebuiBridge {
|
||||
// 2: [ID]
|
||||
// 3: [CMD]
|
||||
// 4: [Call Response]
|
||||
const callResponse = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA)
|
||||
const callResponse = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);
|
||||
if (this.#log) {
|
||||
console.log(`WebUI -> CMD -> Call Response [${callResponse}]`)
|
||||
console.log(`WebUI -> CMD -> Call Response [${callResponse}]`);
|
||||
}
|
||||
if (this.#callPromiseResolve[callId]) {
|
||||
if (this.#log) {
|
||||
console.log(
|
||||
`WebUI -> CMD -> Resolving Response #${callId}...`
|
||||
)
|
||||
console.log(`WebUI -> CMD -> Resolving Response #${callId}...`);
|
||||
}
|
||||
this.#callPromiseResolve[callId]?.(callResponse)
|
||||
this.#callPromiseResolve[callId] = undefined
|
||||
this.#callPromiseResolve[callId]?.(callResponse);
|
||||
this.#callPromiseResolve[callId] = undefined;
|
||||
}
|
||||
}
|
||||
break
|
||||
break;
|
||||
|
||||
case this.#CMD_NAVIGATION:
|
||||
// Protocol
|
||||
@ -379,10 +351,10 @@ class WebuiBridge {
|
||||
// 2: [ID]
|
||||
// 3: [CMD]
|
||||
// 4: [URL]
|
||||
const url = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA)
|
||||
console.log(`WebUI -> CMD -> Navigation [${url}]`)
|
||||
this.#close(this.#CMD_NAVIGATION, url)
|
||||
break
|
||||
const url = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);
|
||||
console.log(`WebUI -> CMD -> Navigation [${url}]`);
|
||||
this.#close(this.#CMD_NAVIGATION, url);
|
||||
break;
|
||||
case this.#CMD_NEW_ID:
|
||||
// Protocol
|
||||
// 0: [SIGNATURE]
|
||||
@ -390,27 +362,24 @@ class WebuiBridge {
|
||||
// 2: [ID]
|
||||
// 3: [CMD]
|
||||
// 4: [New Element]
|
||||
const newElement = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA)
|
||||
console.log(`WebUI -> CMD -> New Bind ID [${newElement}]`)
|
||||
if(!this.#bindList.includes(newElement))
|
||||
this.#bindList.push(newElement)
|
||||
break
|
||||
const newElement = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);
|
||||
console.log(`WebUI -> CMD -> New Bind ID [${newElement}]`);
|
||||
if (!this.#bindList.includes(newElement)) this.#bindList.push(newElement);
|
||||
break;
|
||||
case this.#CMD_CLOSE:
|
||||
// Protocol
|
||||
// 0: [SIGNATURE]
|
||||
// 1: [TOKEN]
|
||||
// 2: [ID]
|
||||
// 3: [CMD]
|
||||
if (!this.#log)
|
||||
globalThis.close()
|
||||
if (!this.#log) globalThis.close();
|
||||
else {
|
||||
console.log(`WebUI -> CMD -> Close`)
|
||||
this.#ws.close()
|
||||
console.log(`WebUI -> CMD -> Close`);
|
||||
this.#ws.close();
|
||||
}
|
||||
break
|
||||
break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// Raw-binary based commands
|
||||
switch (buffer8[this.#PROTOCOL_CMD]) {
|
||||
case this.#CMD_SEND_RAW:
|
||||
@ -421,53 +390,46 @@ class WebuiBridge {
|
||||
// 3: [CMD]
|
||||
// 4: [Function,Null,Raw Data]
|
||||
// Get function name
|
||||
const functionName: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA)
|
||||
const functionName: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);
|
||||
// Get the raw data
|
||||
const rawDataIndex: number = 2 + functionName.length + 1
|
||||
const userRawData = buffer8.subarray(rawDataIndex)
|
||||
if (this.#log)
|
||||
console.log(`WebUI -> CMD -> Send Raw ${buffer8.length} bytes to [${functionName}()]`)
|
||||
const rawDataIndex: number = 2 + functionName.length + 1;
|
||||
const userRawData = buffer8.subarray(rawDataIndex);
|
||||
if (this.#log) console.log(`WebUI -> CMD -> Send Raw ${buffer8.length} bytes to [${functionName}()]`);
|
||||
// Call the user function, and pass the raw data
|
||||
if (typeof window[functionName] === 'function')
|
||||
window[functionName](userRawData)
|
||||
else
|
||||
await AsyncFunction(functionName + '(userRawData)')()
|
||||
break
|
||||
if (typeof window[functionName] === 'function') window[functionName](userRawData);
|
||||
else await AsyncFunction(functionName + '(userRawData)')();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
#keepAlive = async() => {
|
||||
#keepAlive = async () => {
|
||||
while (true) {
|
||||
if (this.#Ping) {
|
||||
// Some web browsers may close the connection
|
||||
// let's send a void message to keep WS open
|
||||
if(this.#wsStatus)
|
||||
this.#ws.send("ping")
|
||||
if (this.#wsStatus) this.#ws.send('ping');
|
||||
} else {
|
||||
// There is an active communication
|
||||
this.#Ping = true
|
||||
this.#Ping = true;
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, 20000))
|
||||
await new Promise((resolve) => setTimeout(resolve, 20000));
|
||||
}
|
||||
}
|
||||
};
|
||||
#clicksListener() {
|
||||
Object.keys(window).forEach((key) => {
|
||||
if (/^on(click)/.test(key)) {
|
||||
globalThis.addEventListener(key.slice(2), (event) => {
|
||||
if (!(event.target instanceof HTMLElement)) return
|
||||
if (!(event.target instanceof HTMLElement)) return;
|
||||
if (
|
||||
this.#hasEvents ||
|
||||
(event.target.id !== '' &&
|
||||
this.#bindList.includes(
|
||||
this.#winNum + '/' + event.target?.id
|
||||
))
|
||||
(event.target.id !== '' && this.#bindList.includes(this.#winNum + '/' + event.target?.id))
|
||||
) {
|
||||
this.#sendClick(event.target.id)
|
||||
this.#sendClick(event.target.id);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
#sendClick(elem: string) {
|
||||
if (this.#wsStatus) {
|
||||
@ -481,30 +443,38 @@ class WebuiBridge {
|
||||
elem !== ''
|
||||
? Uint8Array.of(
|
||||
this.#WEBUI_SIGNATURE,
|
||||
0, 0, 0, 0, // Token (4 Bytes)
|
||||
0, 0, // ID (2 Bytes)
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0, // Token (4 Bytes)
|
||||
0,
|
||||
0, // ID (2 Bytes)
|
||||
this.#CMD_CLICK,
|
||||
...new TextEncoder().encode(elem),
|
||||
0
|
||||
0,
|
||||
)
|
||||
: Uint8Array.of(
|
||||
this.#WEBUI_SIGNATURE,
|
||||
0, 0, 0, 0, // Token (4 Bytes)
|
||||
0, 0, // ID (2 Bytes)
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0, // Token (4 Bytes)
|
||||
0,
|
||||
0, // ID (2 Bytes)
|
||||
this.#CMD_CLICK,
|
||||
0
|
||||
)
|
||||
this.#addToken(packet, this.#token, this.#PROTOCOL_TOKEN)
|
||||
0,
|
||||
);
|
||||
this.#addToken(packet, this.#token, this.#PROTOCOL_TOKEN);
|
||||
// this.#addID(packet, 0, this.#PROTOCOL_ID)
|
||||
this.#Ping = false
|
||||
this.#ws.send(packet.buffer)
|
||||
if (this.#log) console.log(`WebUI -> Send Click [${elem}]`)
|
||||
this.#Ping = false;
|
||||
this.#ws.send(packet.buffer);
|
||||
if (this.#log) console.log(`WebUI -> Send Click [${elem}]`);
|
||||
}
|
||||
}
|
||||
#sendEventNavigation(url: string) {
|
||||
if(url !== '') {
|
||||
if(this.#hasEvents) {
|
||||
if (this.#log) console.log(`WebUI -> Send Navigation Event [${url}]`)
|
||||
if (url !== '') {
|
||||
if (this.#hasEvents) {
|
||||
if (this.#log) console.log(`WebUI -> Send Navigation Event [${url}]`);
|
||||
if (this.#wsStatus && this.#hasEvents) {
|
||||
const packet = Uint8Array.of(
|
||||
// Protocol
|
||||
@ -514,160 +484,159 @@ class WebuiBridge {
|
||||
// 3: [CMD]
|
||||
// 4: [URL]
|
||||
this.#WEBUI_SIGNATURE,
|
||||
0, 0, 0, 0, // Token (4 Bytes)
|
||||
0, 0, // ID (2 Bytes)
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0, // Token (4 Bytes)
|
||||
0,
|
||||
0, // ID (2 Bytes)
|
||||
this.#CMD_NAVIGATION,
|
||||
...new TextEncoder().encode(url)
|
||||
)
|
||||
this.#addToken(packet, this.#token, this.#PROTOCOL_TOKEN)
|
||||
...new TextEncoder().encode(url),
|
||||
);
|
||||
this.#addToken(packet, this.#token, this.#PROTOCOL_TOKEN);
|
||||
// this.#addID(packet, 0, this.#PROTOCOL_ID)
|
||||
this.#Ping = false
|
||||
this.#ws.send(packet.buffer)
|
||||
this.#Ping = false;
|
||||
this.#ws.send(packet.buffer);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.#log) console.log(`WebUI -> Navigation To [${url}]`)
|
||||
this.#allowNavigation = true
|
||||
globalThis.location.replace(url)
|
||||
} else {
|
||||
if (this.#log) console.log(`WebUI -> Navigation To [${url}]`);
|
||||
this.#allowNavigation = true;
|
||||
globalThis.location.replace(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
#closeWindowTimer() {
|
||||
setTimeout(function () {
|
||||
globalThis.close()
|
||||
}, 1000)
|
||||
globalThis.close();
|
||||
}, 1000);
|
||||
}
|
||||
#toUint16(value: number): number {
|
||||
return value & 0xFFFF
|
||||
return value & 0xffff;
|
||||
}
|
||||
#callPromise(fn: string, ...args: DataTypes[]) {
|
||||
--this.#callPromiseID[0]
|
||||
const callId = this.#toUint16(this.#callPromiseID[0])
|
||||
--this.#callPromiseID[0];
|
||||
const callId = this.#toUint16(this.#callPromiseID[0]);
|
||||
// Combine lengths
|
||||
let argsLengths = args.map(arg => {
|
||||
let argsLengths = args
|
||||
.map((arg) => {
|
||||
if (typeof arg === 'object') {
|
||||
// Uint8Array
|
||||
return arg.length;
|
||||
} else {
|
||||
// string, number, boolean
|
||||
return new TextEncoder().encode(arg.toString()).length;
|
||||
}
|
||||
})
|
||||
.join(';');
|
||||
// Combine values
|
||||
let argsValues: Uint8Array = new Uint8Array();
|
||||
for (const arg of args) {
|
||||
let buffer: Uint8Array;
|
||||
if (typeof arg === 'object') {
|
||||
// Uint8Array
|
||||
return arg.length
|
||||
buffer = arg; // Uint8Array
|
||||
} else {
|
||||
// string, number, boolean
|
||||
return new TextEncoder().encode(arg.toString()).length
|
||||
buffer = new TextEncoder().encode(arg.toString());
|
||||
}
|
||||
}).join(';')
|
||||
// Combine values
|
||||
let argsValues: Uint8Array = new Uint8Array()
|
||||
for (const arg of args) {
|
||||
let buffer: Uint8Array
|
||||
if (typeof arg === 'object') {
|
||||
buffer = arg // Uint8Array
|
||||
} else {
|
||||
// string, number, boolean
|
||||
buffer = new TextEncoder().encode(arg.toString())
|
||||
}
|
||||
const temp = new Uint8Array(argsValues.length + buffer.length + 1)
|
||||
temp.set(argsValues, 0)
|
||||
temp.set(buffer, argsValues.length)
|
||||
temp[argsValues.length + buffer.length] = 0x00
|
||||
argsValues = temp
|
||||
const temp = new Uint8Array(argsValues.length + buffer.length + 1);
|
||||
temp.set(argsValues, 0);
|
||||
temp.set(buffer, argsValues.length);
|
||||
temp[argsValues.length + buffer.length] = 0x00;
|
||||
argsValues = temp;
|
||||
}
|
||||
// Protocol
|
||||
// 0: [SIGNATURE]
|
||||
// 1: [TOKEN]
|
||||
// 2: [ID]
|
||||
// 3: [CMD]
|
||||
// 4: [Fn, Null, {Len;Len;...}, Null, {Data,Null,Data,Null...}]
|
||||
// 4: [Fn, Null, {Len;Len;...}, Null, {Data,Null,Data,Null...}]
|
||||
const packet = Uint8Array.of(
|
||||
this.#WEBUI_SIGNATURE,
|
||||
0, 0, 0, 0, // Token (4 Bytes)
|
||||
0, 0, // ID (2 Bytes)
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0, // Token (4 Bytes)
|
||||
0,
|
||||
0, // ID (2 Bytes)
|
||||
this.#CMD_CALL_FUNC,
|
||||
...new TextEncoder().encode(fn),
|
||||
0,
|
||||
...new TextEncoder().encode(argsLengths),
|
||||
0,
|
||||
...argsValues
|
||||
)
|
||||
this.#addToken(packet, this.#token, this.#PROTOCOL_TOKEN)
|
||||
this.#addID(packet, callId, this.#PROTOCOL_ID)
|
||||
...argsValues,
|
||||
);
|
||||
this.#addToken(packet, this.#token, this.#PROTOCOL_TOKEN);
|
||||
this.#addID(packet, callId, this.#PROTOCOL_ID);
|
||||
return new Promise((resolve) => {
|
||||
this.#callPromiseResolve[callId] = resolve
|
||||
this.#Ping = false
|
||||
this.#ws.send(packet.buffer)
|
||||
})
|
||||
this.#callPromiseResolve[callId] = resolve;
|
||||
this.#Ping = false;
|
||||
this.#ws.send(packet.buffer);
|
||||
});
|
||||
}
|
||||
// -- APIs --------------------------
|
||||
/**
|
||||
* Call a backend function
|
||||
*
|
||||
* @param fn - binding name
|
||||
* @param data - data to be send to the backend function
|
||||
* @return - Response of the backend callback string
|
||||
* @example - const res = await webui.call("myID", 123, true, "Hi", new Uint8Array([0x42, 0x43, 0x44]))
|
||||
*/
|
||||
* Call a backend function
|
||||
*
|
||||
* @param fn - binding name
|
||||
* @param data - data to be send to the backend function
|
||||
* @return - Response of the backend callback string
|
||||
* @example - const res = await webui.call("myID", 123, true, "Hi", new Uint8Array([0x42, 0x43, 0x44]))
|
||||
*/
|
||||
async call(fn: string, ...args: DataTypes[]): Promise<DataTypes> {
|
||||
if (!fn) return Promise.reject(new SyntaxError('No binding name is provided'));
|
||||
|
||||
if (!fn)
|
||||
return Promise.reject(new SyntaxError('No binding name is provided'))
|
||||
|
||||
if (!this.#wsStatus)
|
||||
return Promise.reject(new Error('WebSocket is not connected'))
|
||||
if (!this.#wsStatus) return Promise.reject(new Error('WebSocket is not connected'));
|
||||
|
||||
// Check binding list
|
||||
if (!this.#hasEvents && !this.#bindList.includes(`${this.#winNum}/${fn}`))
|
||||
return Promise.reject(new ReferenceError(`No binding was found for "${fn}"`))
|
||||
return Promise.reject(new ReferenceError(`No binding was found for "${fn}"`));
|
||||
|
||||
// Call backend and wait for response
|
||||
if (this.#log) console.log(`WebUI -> Calling [${fn}(...)]`)
|
||||
const response = (await this.#callPromise(fn, ...args)) as string
|
||||
if (this.#log) console.log(`WebUI -> Calling [${fn}(...)]`);
|
||||
const response = (await this.#callPromise(fn, ...args)) as string;
|
||||
|
||||
// WebUI lib accept `DataTypes` but return only string
|
||||
if (typeof response !== 'string') return ""
|
||||
if (typeof response !== 'string') return '';
|
||||
|
||||
return response
|
||||
return response;
|
||||
}
|
||||
/**
|
||||
* Active or deactivate webui debug logging
|
||||
*
|
||||
*
|
||||
* @param status - log status to set
|
||||
*/
|
||||
setLogging(status: boolean) {
|
||||
if (status) {
|
||||
console.log('WebUI -> Log Enabled.')
|
||||
this.#log = true
|
||||
console.log('WebUI -> Log Enabled.');
|
||||
this.#log = true;
|
||||
} else {
|
||||
console.log('WebUI -> Log Disabled.')
|
||||
this.#log = false
|
||||
console.log('WebUI -> Log Disabled.');
|
||||
this.#log = false;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Encode text into base64 string
|
||||
*
|
||||
*
|
||||
* @param data - text string
|
||||
*/
|
||||
encode(data: string): string {
|
||||
return btoa(data)
|
||||
return btoa(data);
|
||||
}
|
||||
/**
|
||||
* Decode base64 string into text
|
||||
*
|
||||
*
|
||||
* @param data - base64 string
|
||||
*/
|
||||
decode(data: string): string {
|
||||
return atob(data)
|
||||
return atob(data);
|
||||
}
|
||||
}
|
||||
// Export
|
||||
type webui = WebuiBridge
|
||||
export default webui
|
||||
export type { WebuiBridge }
|
||||
type webui = WebuiBridge;
|
||||
export default webui;
|
||||
export type { WebuiBridge };
|
||||
// Wait for the html to be parsed
|
||||
addEventListener('load', () => {
|
||||
document.body.addEventListener('contextmenu', (event) =>
|
||||
event.preventDefault()
|
||||
)
|
||||
addRefreshableEventListener(
|
||||
document.body,
|
||||
'input',
|
||||
'contextmenu',
|
||||
(event) => event.stopPropagation()
|
||||
)
|
||||
})
|
||||
document.body.addEventListener('contextmenu', (event) => event.preventDefault());
|
||||
addRefreshableEventListener(document.body, 'input', 'contextmenu', (event) => event.stopPropagation());
|
||||
});
|
||||
|
||||
@ -1,40 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>WebUI - Serve a Folder Example (C++)</title>
|
||||
<style>
|
||||
body {
|
||||
color: white;
|
||||
background: #0F2027;
|
||||
background: -webkit-linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
background: linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 id="title">Serve a Folder Example (C++)</h3>
|
||||
<br>
|
||||
<p id="description">
|
||||
You can edit this HTML file as you need.<br>
|
||||
Also, you can config WebUI to use Deno or Nodejs runtime for your JS/TS files.<br>
|
||||
<br>
|
||||
Please click on the link to switch to the second page<br>
|
||||
Or click on the button to switch to the second page programmatically.
|
||||
</p>
|
||||
<br>
|
||||
<h4><a href="second.html">Second Page As A Simple Link</a></h4>
|
||||
<br>
|
||||
<button id="SwitchToSecondPage">Switch to The Second Page Programmatically</button>
|
||||
<br>
|
||||
<br>
|
||||
<button id="OpenNewWindow">Open The Second Window</button>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>WebUI - Serve a Folder Example (C++)</title>
|
||||
<style>
|
||||
body {
|
||||
color: white;
|
||||
background: #0f2027;
|
||||
background: -webkit-linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
background: linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 id="title">Serve a Folder Example (C++)</h3>
|
||||
<br />
|
||||
<p id="description">
|
||||
You can edit this HTML file as you need.<br />
|
||||
Also, you can config WebUI to use Deno or Nodejs runtime for your JS/TS files.<br />
|
||||
<br />
|
||||
Please click on the link to switch to the second page<br />
|
||||
Or click on the button to switch to the second page programmatically.
|
||||
</p>
|
||||
<br />
|
||||
<h4><a href="second.html">Second Page As A Simple Link</a></h4>
|
||||
<br />
|
||||
<button id="SwitchToSecondPage">Switch to The Second Page Programmatically</button>
|
||||
<br />
|
||||
<br />
|
||||
<button id="OpenNewWindow">Open The Second Window</button>
|
||||
</body>
|
||||
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
</html>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>WebUI - Second Page (C++)</title>
|
||||
<style>
|
||||
body {
|
||||
color: white;
|
||||
background: #0F2027;
|
||||
background: -webkit-linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
background: linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 id="title">This is the second page !</h3>
|
||||
<br>
|
||||
<button id="Exit">Call Exit()</button>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>WebUI - Second Page (C++)</title>
|
||||
<style>
|
||||
body {
|
||||
color: white;
|
||||
background: #0f2027;
|
||||
background: -webkit-linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
background: linear-gradient(to right, #43264c, #762f59, #501349);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 id="title">This is the second page !</h3>
|
||||
<br />
|
||||
<button id="Exit">Call Exit()</button>
|
||||
</body>
|
||||
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
</html>
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
// This file gets called like follow:
|
||||
// `Index.html` ->
|
||||
// `Index.html` ->
|
||||
// `http://localhost:xxx/deno_test.ts?foo=123&bar=456` ->
|
||||
// `deno run --allow-all --unstable "deno_test.ts" "foo=123&bar=456"`
|
||||
|
||||
// Import parse()
|
||||
import {parse} from "https://deno.land/std/flags/mod.ts";
|
||||
import { parse } from 'https://deno.land/std/flags/mod.ts';
|
||||
|
||||
// Get Query (HTTP GET)
|
||||
const args = parse(Deno.args);
|
||||
const query = args._[0] as string;
|
||||
|
||||
// Variables
|
||||
let foo:string = '';
|
||||
let bar:string = '';
|
||||
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
|
||||
if (key == 'foo') foo = value; // 123
|
||||
else if (key == 'bar') bar = value; // 456
|
||||
}
|
||||
|
||||
console.error("foo + bar = " + (parseInt(foo) + parseInt(bar))); // 579
|
||||
console.error('foo + bar = ' + (parseInt(foo) + parseInt(bar))); // 579
|
||||
|
||||
@ -1,89 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>WebUI - Serve a Folder Example (C99)</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">Serve a Folder Example (C99)</h3>
|
||||
<br>
|
||||
<p id="description">
|
||||
You can edit this HTML file as you need.<br>
|
||||
Also, you can config WebUI to use Deno or Nodejs runtime for your JS/TS files.<br>
|
||||
<br>
|
||||
Please click on the link to switch to the second page<br>
|
||||
Or click on the button to switch to the second page programmatically.
|
||||
</p>
|
||||
<br>
|
||||
Click on [deno_test.ts] to interpret the TypeScript file (If deno is installed)
|
||||
<br>
|
||||
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>
|
||||
<br>
|
||||
<h4><a href="second.html">Second Page As A Simple Link (Local file)</a></h4>
|
||||
<br>
|
||||
<button id="SwitchToSecondPage">Switch to The Second Page Programmatically (Local file)</button>
|
||||
<br>
|
||||
<br>
|
||||
<button id="OpenNewWindow">Open The Second Window (Local file)</button>
|
||||
<br>
|
||||
<h4><a href="test.txt">Static file example (Embedded)</a></h4>
|
||||
<h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
|
||||
<p>
|
||||
Unicode Test:<br><br>
|
||||
مرحبًا<br> <!-- Arabic -->
|
||||
你好<br> <!-- Chinese -->
|
||||
こんにちは <!-- Japanese -->
|
||||
</p>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>WebUI - Serve a Folder Example (C99)</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;
|
||||
}
|
||||
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
a:link {
|
||||
color: #fd5723;
|
||||
}
|
||||
a:active {
|
||||
color: #fd5723;
|
||||
}
|
||||
a:visited {
|
||||
color: #fd5723;
|
||||
}
|
||||
a:hover {
|
||||
color: #f0bcac;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 id="title">Serve a Folder Example (C99)</h3>
|
||||
<br />
|
||||
<p id="description">
|
||||
You can edit this HTML file as you need.<br />
|
||||
Also, you can config WebUI to use Deno or Nodejs runtime for your JS/TS files.<br />
|
||||
<br />
|
||||
Please click on the link to switch to the second page<br />
|
||||
Or click on the button to switch to the second page programmatically.
|
||||
</p>
|
||||
<br />
|
||||
Click on [deno_test.ts] to interpret the TypeScript file (If deno is installed)
|
||||
<br />
|
||||
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>
|
||||
<br />
|
||||
<h4><a href="second.html">Second Page As A Simple Link (Local file)</a></h4>
|
||||
<br />
|
||||
<button id="SwitchToSecondPage">Switch to The Second Page Programmatically (Local file)</button>
|
||||
<br />
|
||||
<br />
|
||||
<button id="OpenNewWindow">Open The Second Window (Local file)</button>
|
||||
<br />
|
||||
<h4><a href="test.txt">Static file example (Embedded)</a></h4>
|
||||
<h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
|
||||
<p>
|
||||
Unicode Test:<br /><br />
|
||||
مرحبًا<br />
|
||||
<!-- Arabic -->
|
||||
你好<br />
|
||||
<!-- Chinese -->
|
||||
こんにちは
|
||||
<!-- Japanese -->
|
||||
</p>
|
||||
</body>
|
||||
|
||||
<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 parsed
|
||||
// of course Deno should be installed.
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
|
||||
// Simple HTTP Request
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.open("GET", "deno_test.ts?foo=60&bar=40", false);
|
||||
xmlHttp.send(null);
|
||||
alert(xmlHttp.responseText);
|
||||
}
|
||||
</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 parsed
|
||||
// of course Deno should be installed.
|
||||
|
||||
// Simple HTTP Request
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.open('GET', 'deno_test.ts?foo=60&bar=40', false);
|
||||
xmlHttp.send(null);
|
||||
alert(xmlHttp.responseText);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,40 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>WebUI - Second Page (C99)</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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 id="title">This is the second page !</h3>
|
||||
<br>
|
||||
<button id="Exit">Call Exit()</button>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>WebUI - Second Page (C99)</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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 id="title">This is the second page !</h3>
|
||||
<br />
|
||||
<button id="Exit">Call Exit()</button>
|
||||
</body>
|
||||
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
<!-- Connect this window to the background app -->
|
||||
<script src="webui.js"></script>
|
||||
</html>
|
||||
|
||||
@ -1,103 +1,113 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-attachment : fixed;
|
||||
color: #ddecf9;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
color: #ddecf9;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-image: linear-gradient(to right, #4ed2e7 0%, #db57eb 50%, #f98818 100%);
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-image: linear-gradient(to right, #4ed2e7 0%, #db57eb 50%, #f98818 100%);
|
||||
}
|
||||
|
||||
header {
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
|
||||
nav {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.2) 25%,
|
||||
rgba(255, 255, 255, 0.2) 75%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
box-shadow:
|
||||
0 0 25px rgba(0, 0, 0, 0.1),
|
||||
inset 0 0 1px rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav button {
|
||||
background: none;
|
||||
border: none;
|
||||
text-shadow: 1px 1px 2px #000000;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 18px;
|
||||
color: #ddecf9;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
padding: 18px;
|
||||
background: none;
|
||||
border: none;
|
||||
text-shadow: 1px 1px 2px #000000;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 18px;
|
||||
color: #ddecf9;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
nav button:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 0, 0, 0.1),
|
||||
inset 0 0 1px rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
nav #save-btn:disabled {
|
||||
pointer-events: none;
|
||||
color: #7ca0df;
|
||||
pointer-events: none;
|
||||
color: #7ca0df;
|
||||
}
|
||||
|
||||
nav button i {
|
||||
/* Click through the icon in the button */
|
||||
pointer-events: none;
|
||||
/* Click through the icon in the button */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
|
||||
.main {
|
||||
padding: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* About */
|
||||
|
||||
.about-box {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
|
||||
}
|
||||
|
||||
.about-box-content {
|
||||
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 30%;
|
||||
border-radius: 5px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 30%;
|
||||
border-radius: 5px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.about-box-content h1 {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-box-content a {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 16px;
|
||||
text-shadow: 1px 1px 2px #000000;
|
||||
height: 100%;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 16px;
|
||||
text-shadow: 1px 1px 2px #000000;
|
||||
}
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="/webui.js"></script>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="/webui.js"></script>
|
||||
|
||||
<link rel="icon" type="image/png" href="img/icon.png" />
|
||||
<title>Text Editor in C using WebUI</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/lucario.css" />
|
||||
<link rel="stylesheet" href="css/codemirror.min.css" />
|
||||
<link rel="stylesheet" href="css/all.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar"></div>
|
||||
<nav>
|
||||
<button id="open-btn" title="Open file" type="button"><i class="fas fa-folder-open"></i></button>
|
||||
<button id="save-btn" title="Save file" type="button" disabled><i class="fa fa-floppy-disk"></i></button>
|
||||
<button id="__close-btn" title="Close file" type="button"><i class="fas fa-circle-xmark"></i></button>
|
||||
<button id="about-btn" title="About Info" type="button"><i class="fas fa-question-circle"></i></button>
|
||||
</nav>
|
||||
<div class="main" id="main">
|
||||
<textarea id="editor"></textarea>
|
||||
</div>
|
||||
<div id="about-box" class="about-box">
|
||||
<div class="about-box-content">
|
||||
<h1>WebUI Text Editor</h1>
|
||||
v1.1
|
||||
<p>Example of a text editor software in C using WebUI library.</p>
|
||||
<p><a href="https://webui.me" target="_blank">webui.me</a> | (C)2023 Hassan Draga</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/codemirror.min.js"></script>
|
||||
<script src="js/xml.min.js"></script>
|
||||
<script src="js/css.min.js"></script>
|
||||
<script src="js/javascript.min.js"></script>
|
||||
<script src="js/clike.min.js"></script>
|
||||
<script src="js/python.min.js"></script>
|
||||
<script src="js/ui.js"></script>
|
||||
</body>
|
||||
<link rel="icon" type="image/png" href="img/icon.png" />
|
||||
<title>Text Editor in C using WebUI</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/lucario.css" />
|
||||
<link rel="stylesheet" href="css/codemirror.min.css" />
|
||||
<link rel="stylesheet" href="css/all.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar"></div>
|
||||
<nav>
|
||||
<button id="open-btn" title="Open file" type="button"><i class="fas fa-folder-open"></i></button>
|
||||
<button id="save-btn" title="Save file" type="button" disabled><i class="fa fa-floppy-disk"></i></button>
|
||||
<button id="__close-btn" title="Close file" type="button"><i class="fas fa-circle-xmark"></i></button>
|
||||
<button id="about-btn" title="About Info" type="button"><i class="fas fa-question-circle"></i></button>
|
||||
</nav>
|
||||
<div class="main" id="main">
|
||||
<textarea id="editor"></textarea>
|
||||
</div>
|
||||
<div id="about-box" class="about-box">
|
||||
<div class="about-box-content">
|
||||
<h1>WebUI Text Editor</h1>
|
||||
v1.1
|
||||
<p>Example of a text editor software in C using WebUI library.</p>
|
||||
<p><a href="https://webui.me" target="_blank">webui.me</a> | (C)2023 Hassan Draga</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/codemirror.min.js"></script>
|
||||
<script src="js/xml.min.js"></script>
|
||||
<script src="js/css.min.js"></script>
|
||||
<script src="js/javascript.min.js"></script>
|
||||
<script src="js/clike.min.js"></script>
|
||||
<script src="js/python.min.js"></script>
|
||||
<script src="js/ui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,102 +10,99 @@ let fileHandle;
|
||||
let currentFile = { name: '', ext: '' };
|
||||
|
||||
// Setup Editor
|
||||
const codeMirrorInstance = CodeMirror.fromTextArea(
|
||||
document.getElementById('editor'),
|
||||
{
|
||||
mode: 'text/x-csrc',
|
||||
lineNumbers: true,
|
||||
tabSize: 4,
|
||||
indentUnit: 2,
|
||||
lineWrapping: true,
|
||||
theme: 'lucario',
|
||||
},
|
||||
);
|
||||
const codeMirrorInstance = CodeMirror.fromTextArea(document.getElementById('editor'), {
|
||||
mode: 'text/x-csrc',
|
||||
lineNumbers: true,
|
||||
tabSize: 4,
|
||||
indentUnit: 2,
|
||||
lineWrapping: true,
|
||||
theme: 'lucario',
|
||||
});
|
||||
|
||||
function setLanguage(extension) {
|
||||
let mode = '';
|
||||
switch (extension) {
|
||||
case 'js':
|
||||
mode = 'text/javascript';
|
||||
break;
|
||||
case 'c':
|
||||
case 'cpp':
|
||||
case 'h':
|
||||
mode = 'text/x-csrc';
|
||||
break;
|
||||
case 'py':
|
||||
mode = 'text/x-python';
|
||||
break;
|
||||
case 'html':
|
||||
mode = 'text/html';
|
||||
break;
|
||||
default:
|
||||
mode = 'text/x-csrc';
|
||||
}
|
||||
codeMirrorInstance.setOption('mode', mode);
|
||||
let mode = '';
|
||||
switch (extension) {
|
||||
case 'js':
|
||||
mode = 'text/javascript';
|
||||
break;
|
||||
case 'c':
|
||||
case 'cpp':
|
||||
case 'h':
|
||||
mode = 'text/x-csrc';
|
||||
break;
|
||||
case 'py':
|
||||
mode = 'text/x-python';
|
||||
break;
|
||||
case 'html':
|
||||
mode = 'text/html';
|
||||
break;
|
||||
default:
|
||||
mode = 'text/x-csrc';
|
||||
}
|
||||
codeMirrorInstance.setOption('mode', mode);
|
||||
}
|
||||
|
||||
function setFile(file) {
|
||||
currentFile.name = file.name;
|
||||
currentFile.ext = file.name.split('.').pop();
|
||||
// Set file title and language in editor
|
||||
document.title = file.name;
|
||||
setLanguage(currentFile.ext);
|
||||
currentFile.name = file.name;
|
||||
currentFile.ext = file.name.split('.').pop();
|
||||
// Set file title and language in editor
|
||||
document.title = file.name;
|
||||
setLanguage(currentFile.ext);
|
||||
}
|
||||
|
||||
function readFile(file) {
|
||||
const reader = new FileReader();
|
||||
// Add text to the editor
|
||||
reader.onload = (e) => codeMirrorInstance.setValue(e.target.result);
|
||||
reader.readAsText(file);
|
||||
const reader = new FileReader();
|
||||
// Add text to the editor
|
||||
reader.onload = (e) => codeMirrorInstance.setValue(e.target.result);
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
async function openFile() {
|
||||
if (supportsFilePicker) {
|
||||
[fileHandle] = await showOpenFilePicker({ multiple: false });
|
||||
fileData = await fileHandle.getFile();
|
||||
readFile(fileData);
|
||||
setFile(fileData);
|
||||
} else {
|
||||
let input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.onchange = (e) => {
|
||||
readFile(e.target.files[0]);
|
||||
setFile(e.target.files[0]);
|
||||
};
|
||||
input.click();
|
||||
input.remove();
|
||||
}
|
||||
if (supportsFilePicker) {
|
||||
[fileHandle] = await showOpenFilePicker({ multiple: false });
|
||||
fileData = await fileHandle.getFile();
|
||||
readFile(fileData);
|
||||
setFile(fileData);
|
||||
} else {
|
||||
let input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.onchange = (e) => {
|
||||
readFile(e.target.files[0]);
|
||||
setFile(e.target.files[0]);
|
||||
};
|
||||
input.click();
|
||||
input.remove();
|
||||
}
|
||||
}
|
||||
|
||||
async function saveFile() {
|
||||
const content = codeMirrorInstance.getValue();
|
||||
if (supportsFilePicker) {
|
||||
if (fileHandle) {
|
||||
// Create a FileSystemWritableFileStream to write to
|
||||
const writableStream = await fileHandle.createWritable();
|
||||
await writableStream.write(content);
|
||||
// Write to disk
|
||||
await writableStream.close();
|
||||
} else {
|
||||
fileHandle = await showSaveFilePicker();
|
||||
saveFile();
|
||||
setFile(await fileHandle.getFile());
|
||||
}
|
||||
} else {
|
||||
// Download the file if using filePicker with a fileHandle for saving
|
||||
// is not supported by the browser. E.g., in Firefox.
|
||||
const blobData = new Blob([content], { type: 'text/${currentFile.ext}' });
|
||||
const urlToBlob = window.URL.createObjectURL(blobData);
|
||||
const a = document.createElement('a');
|
||||
a.style.setProperty('display', 'none');
|
||||
a.href = urlToBlob;
|
||||
a.download = document.title;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(urlToBlob);
|
||||
a.remove();
|
||||
}
|
||||
saveBtn.disabled = true;
|
||||
const content = codeMirrorInstance.getValue();
|
||||
if (supportsFilePicker) {
|
||||
if (fileHandle) {
|
||||
// Create a FileSystemWritableFileStream to write to
|
||||
const writableStream = await fileHandle.createWritable();
|
||||
await writableStream.write(content);
|
||||
// Write to disk
|
||||
await writableStream.close();
|
||||
} else {
|
||||
fileHandle = await showSaveFilePicker();
|
||||
saveFile();
|
||||
setFile(await fileHandle.getFile());
|
||||
}
|
||||
} else {
|
||||
// Download the file if using filePicker with a fileHandle for saving
|
||||
// is not supported by the browser. E.g., in Firefox.
|
||||
const blobData = new Blob([content], { type: 'text/${currentFile.ext}' });
|
||||
const urlToBlob = window.URL.createObjectURL(blobData);
|
||||
const a = document.createElement('a');
|
||||
a.style.setProperty('display', 'none');
|
||||
a.href = urlToBlob;
|
||||
a.download = document.title;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(urlToBlob);
|
||||
a.remove();
|
||||
}
|
||||
saveBtn.disabled = true;
|
||||
}
|
||||
|
||||
// Navigation Events
|
||||
@ -114,15 +111,14 @@ document.getElementById('open-btn').onclick = openFile;
|
||||
// save
|
||||
saveBtn.onclick = saveFile;
|
||||
// about
|
||||
document.getElementById('about-btn').onclick = () =>
|
||||
(aboutBox.style.display = 'block'); // show
|
||||
document.getElementById('about-btn').onclick = () => (aboutBox.style.display = 'block'); // show
|
||||
aboutBox.onclick = () => (aboutBox.style.display = 'none'); // hide
|
||||
|
||||
// Editor Events
|
||||
// enable save on change
|
||||
codeMirrorInstance.on('change', () => {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.disabled = false;
|
||||
});
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
codeMirrorInstance.setSize('100%', '99%');
|
||||
codeMirrorInstance.setSize('100%', '99%');
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user