87 lines
2.6 KiB
Markdown
87 lines
2.6 KiB
Markdown
# 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)
|