# HTML FRONTEND + C++ HOOKS

You can definitely run your HTML dashboard in **Chromium kiosk mode** and still have it talk to your existing **C++/Qt backend**. The trick is to bridge the browser UI with your native code. Here are the main approaches:

[Example Code](EXAMPLE_CODE.md)

***

### 🔗 Integration Options

#### 1. **Local WebSocket / TCP server**

* Run a lightweight server inside your C++ app (e.g. using `QtWebSockets` or `QTcpServer`).
* Your HTML buttons call JavaScript functions that send JSON messages over WebSocket.
* Example: 
  ```javascript
  function sendCommand(cmd, payload={}) {
    socket.send(JSON.stringify({command: cmd, data: payload}));
  }

  ```
  ```cpp
  // Qt side
  connect(webSocketServer, &QWebSocketServer::newConnection, this, [=](){
      auto client = webSocketServer->nextPendingConnection();
      connect(client, &QWebSocket::textMessageReceived, this, [=](const QString &msg){
          QJsonDocument doc = QJsonDocument::fromJson(msg.toUtf8());
          QString cmd = doc["command"].toString();
          // handle command
      });
  });

  ```

#### 2. **REST API (HTTP server)**

* Expose endpoints in your C++ app (`/setRainfall`, `/getStatus`, etc.).
* HTML buttons use `fetch()` to call these endpoints.
* Example: 
  ```javascript
  fetch("http://localhost:8080/setRainfall", {
    method: "POST",
    body: JSON.stringify({value: 12.4}),
    headers: {"Content-Type":"application/json"}
  });

  ```

#### 3. **Native Messaging (Chromium extension)**

* If you need tighter integration, you can build a Chromium extension that talks to your C++ app via **Native Messaging**.
* More complex, but allows secure communication without opening a server port.

***

### 🖥️ Kiosk Mode Setup

* Launch Chromium with flags: 
  ```shellscript
  chromium --kiosk --app=file:///home/user/dashboard.html

  ```
* This runs fullscreen, hides controls, and loads your HTML UI.

***

### ⚙️ Recommended Path

For your case (Qt backend + kiosk UI), the **WebSocket approach** is usually the cleanest:

* Qt has built-in WebSocket support.
* Easy to send structured JSON messages both ways.
* Works offline, no need for external servers.

***

### 🚀 Next Step

Would you like me to sketch out a **minimal working example** where:

* A button in the HTML dashboard sends a command (`"toggleSiren"`)
* Your Qt app receives it and prints/logs the action?

That way you’ll see the full round-trip between Chromium kiosk and your C++ backend.

[Example Code/Flow/Design](https://notes.tck.com.my/workspace/06083e3a-3e03-4e37-8857-6bd2c292ef33/U2XWNlmCHW-UKuJpwMkwK)