Added a few MDs, update README
This commit is contained in:
86
INTEGRATION.md
Normal file
86
INTEGRATION.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# 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)
|
||||
Reference in New Issue
Block a user