web_ui 0.1.0

A simple Rust library for creating local web interfaces with real-time communication
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

# WebUI

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

A simple Rust library for creating local web interfaces with real-time communication.

## Features

- **Easy to use** - Simple API for creating web UIs for Rust applications
- **Real-time communication** - WebSocket support for instant updates
- **HTTP fallback** - REST API endpoint for broader compatibility
- **Static file serving** - Built-in server for HTML, CSS, and JavaScript files
- **Event-driven** - Register handlers for UI events with type safety
- **Async/await support** - Built on Tokio for high performance

## Quick Start

Add this to your `Cargo.toml`:

```toml
[dependencies]
web_ui = "0.1"
tokio = { version = "1.0", features = ["full"] }
```

Ensure that the [webui.js](https://raw.githubusercontent.com/williamwith4ms/web_ui/refs/heads/main/static/webui.js) file is included in your static files directory

### Basic Example

```rust
use web_ui::{WebUI, WebUIConfig};

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let config = WebUIConfig::default();
    let web_ui = WebUI::new(config);
    
    // Bind a simple click handler
    web_ui.bind_click("hello-btn", || {
        println!("Hello, World!");
    }).await;
    
    println!("Starting web UI on http://localhost:3030");
    web_ui.run().await
}
```

### HTML Setup

Create an `index.html` file in your static directory:

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Web UI</title>
    <script src="webui.js"></script>
</head>
<body>
    <button id="hello-btn">Click Me!</button>
</body>
</html>
```

## Configuration

```rust
let config = WebUIConfig::default()
    .with_port(8080)                           // Custom port
    .with_title("My App".to_string())          // Window title
    .with_static_dir("./assets".to_string());  // Static files directory
```

## Event Handling

### Simple Click Handler

```rust
web_ui.bind_click("button-id", || {
    println!("Button clicked!");
}).await;
```

### Event Handler with Response

```rust
web_ui.bind_event("input-btn", "click", |event| {
    println!("Event data: {:?}", event.data);
    
    Ok(UIResponse {
        success: true,
        message: Some("Operation completed".to_string()),
        data: Some(serde_json::json!({ "result": "success" })),
        request_id: event.request_id,
    })
}).await;
```

## Examples

This repository includes several examples:

- **`hello`** - Basic button click example
- **`event_binding`** - Event handling with state management
- **`welcome`** - Welcome page example
- **`template`** - Template for creating new projects

Run examples with:

```bash
cargo run --example hello
cargo run --example event_binding
...
```

## Project Structure

```
static/
├── index.html      # Your main HTML file
├── style.css       # Optional CSS styles
├── app.js          # Your custom JavaScript
└── webui.js        # WebUI client library (needed to bind events)
```