Skip to content

Commit

Permalink
Merge pull request #7 from SageCreations/update_readme
Browse files Browse the repository at this point in the history 
Update readme
  • Loading branch information
@SageCreations
SageCreations authored Jan 14, 2025
2 parents 46b93c1 + 094cb6a commit 1b6c656
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 107 deletions.
182 changes: 77 additions & 105 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,139 +21,98 @@

</div>

## Usage
## Contents

> **Note**
> Odin-WebUI is under development and is currently only tested on macOS and Linux.
- [Features](#features)
- [Installation](#installation)
- [Examples](#minimal-example)
- [Debugging](#debugging)
- [Documentation](#documentation)
- [UI & The Web Technologies](#ui--the-web-technologies)
- [Wrappers](#wrappers)
- [Supported Web Browsers](#supported-web-browsers)
- [License](#license)

### Setup as a submodule in your Odin project
## Features

Add odin-webui as a submodule in your Odin git project:
- Portable (*Needs only a web browser at runtime*)
- Lightweight (*Few Kb library*) & Small memory footprint
- Fast binary communication protocol
- Multi-platform & Multi-Browser
- Using private profile for safety
- Original library is written in Pure C

## Installation

```sh
# Add odin-webui as a submodule to your project
git submodule add https://github.com/webui-dev/odin-webui.git webui
webui/setup.sh
```

Import the package using the relative path
# Linux/MacOS
webui/setup.sh

```odin
import ui "webui"
# Windows
webui/setup.ps1
```

<details>
<summary><kbd>toggle</kbd> <b>Full example creating a project and adding odin-webui as a submodule.</b></summary>

```sh
mkdir my_proj && cd my_proj
git init
git submodule add https://github.com/webui-dev/odin-webui.git webui
# Setup the WebUI C library.
weubi/setup.sh
# Create a the main file for the project. And use it in the next step.
touch main.odin
```

```odin
// main.odin
package main
import ui "webui"
main :: proc() {
w := ui.new_window()
ui.show(w, "<html>Thanks for using WebUI!</html>")
ui.wait()
}
```

</details>
# Create your project directory
mkdir my_proj

### Setup as regular git clone
# Change Directory into the project Directory
cd my_proj

_This approach can be useful for quick testing and for development and contribution purposes._

1. Clone the repository

```sh
git clone https://github.com/webui-dev/odin-webui.git
```
# Initialize the directory to be a git repository
git init

2. Setup the WebUI C library
# Add odin-webui as a submodule to your project
git submodule add https://github.com/webui-dev/odin-webui.git webui

```sh
cd odin-webui
# Build the linkers used for the binding from the C library.
# Linux/MacOS
webui/setup.sh
# Windows
webui/setup.ps1

# Setup the WebUI C library.
./setup.sh
# Create a file called 'main.odin' in your project directory.
# Copy the minimal example code in the next step and paste into 'main.odin'.
# Run the example with the command: 'odin run main.odin -file'.
```
</details>

## Example - Call Odin from JavaScript
## Minimal Example

```odin
// main.odin
package main
import "base:runtime"
import ui "webui"
import "core:fmt"
UI :: `<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background: linear-gradient(to left, #36265a, #654da9);
color: AliceBlue;
font: 16px sans-serif;
text-align: center;
}
</style>
<script src="webui.js"></script>
</head>
<body>
<h1>Thanks for using WebUI!</h1>
<button onclick="webui.my_odin_func('myJSArg')">Call Odin!</button>
<button id="exit">Exit</button>
</body>
</html>`
// Odin function used as bind callback.
my_odin_func :: proc "c" (e: ^ui.Event) {
context := runtime.default_context()
str_arg := ui.get_arg(string, e)
fmt.printf("JS argument: %s\n", str_arg)
}
main :: proc() {
w := ui.new_window()
ui.bind(w, "my_odin_func", my_odin_func)
// Bind to an ID with a click event.
ui.bind(w, "exit", proc "c" (_: ^ui.Event) {
context := runtime.default_context()
fmt.println("Bye!")
ui.exit()
})
ui.show(w, UI)
ui.wait()
my_window: uint = ui.new_window()
ui.show(my_window, "<html> Thanks for using WebUI! </html>")
ui.wait()
}
```
[More examples](https://github.com/webui-dev/odin-webui/tree/main/examples)

Running exmples from the [`examples`](https://github.com/webui-dev/odin-webui/tree/main/examples) directory:

```
odin run examples/call_odin.odin -file
```

### Debugging
## Debugging

To use WebUI's debug build in your Odin-WebUI application, add the `-debug` switch. E.g.:

```sh
odin run examples/minimal.odin -file -debug
```

## About WebUI
## Documentation
- [Online Documentation](https://webui.me/docs/2.5/#/)

## 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).

Expand Down Expand Up @@ -193,16 +152,27 @@ 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 | v2.4.0 API | v2.5.0 API | Link |
| --------------- | --- | -------------- | --------------------------------------------------------- |
| Python | ✔️ | _not complete_ | [Python-WebUI](https://github.com/webui-dev/python-webui) |
| Go | ✔️ | _not complete_ | [Go-WebUI](https://github.com/webui-dev/go-webui) |
| Zig | ✔️ | _not complete_ | [Zig-WebUI](https://github.com/webui-dev/zig-webui) |
| Nim | ✔️ | _not complete_ | [Nim-WebUI](https://github.com/webui-dev/nim-webui) |
| V | ✔️ | _not complete_ | [V-WebUI](https://github.com/webui-dev/v-webui) |
| Rust | _not complete_ | _not complete_ | [Rust-WebUI](https://github.com/webui-dev/rust-webui) |
| TS / JS (Deno) | ✔️ | _not complete_ | [Deno-WebUI](https://github.com/webui-dev/deno-webui) |
| TS / JS (Bun) | _not complete_ | _not complete_ | [Bun-WebUI](https://github.com/webui-dev/bun-webui) |
| Swift | _not complete_ | _not complete_ | [Swift-WebUI](https://github.com/webui-dev/swift-webui) |
| Odin | _not complete_ | _not complete_ | [Odin-WebUI](https://github.com/webui-dev/odin-webui) |
| Pascal | _not complete_ | _not complete_ | [Pascal-WebUI](https://github.com/webui-dev/pascal-webui) |
| Purebasic | _not complete_ | _not complete_ | [Purebasic-WebUI](https://github.com/webui-dev/purebasic-webui)|
| - | | |
| Common Lisp | _not complete_ | _not complete_ | [cl-webui](https://github.com/garlic0x1/cl-webui) |
| Delphi | _not complete_ | _not complete_ | [WebUI4Delphi](https://github.com/salvadordf/WebUI4Delphi) |
| C# | _not complete_ | _not complete_ | [WebUI4CSharp](https://github.com/salvadordf/WebUI4CSharp) |
| WebUI.NET | _not complete_ | _not complete_ | [WebUI.NET](https://github.com/Juff-Ma/WebUI.NET) |
| QuickJS | _not complete_ | _not complete_ | [QuickUI](https://github.com/xland/QuickUI) |
| PHP | _not complete_ | _not complete_ | [PHPWebUiComposer](https://github.com/KingBes/php-webui-composer) |

## Supported Web Browsers

Expand All @@ -219,10 +189,12 @@ Think of WebUI like a WebView controller, but instead of embedding the WebView c
| Apple Safari | _not available_ | _coming soon_ | _not available_ |
| Opera | _coming soon_ | _coming soon_ | _coming soon_ |

### License

> Licensed under the MIT License.
### Stargazers

[![stargazers](https://reporoster.com/stars/webui-dev/odin-webui)](https://github.com/webui-dev/odin-webui/stargazers)

### License

> Licensed under the MIT License.
0 examples/call_js.odin → examples/call_js_from_odin.odin
View file
File renamed without changes.
0 examples/call_odin.odin → examples/call_odin_from_js.odin
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions examples/minimal.odin
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ package main
import ui "../"

main :: proc() {
w := ui.new_window()
ui.show(w, "<html>Hellope</html>")
my_window: uint = ui.new_window()
ui.show(my_window, "<html><script src=\"webui.js\"></script> Hellope! </html>")
ui.wait()
}

0 comments on commit 1b6c656

Please sign in to comment.