iPhone Daten

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>iPhone → MQTT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  https://unpkg.com/paho-mqtt/mqttws31.min.js

  <style>
    body {
      background: #111;
      color: #0f0;
      font-family: monospace;
      text-align: center;
      padding: 20px;
    }
    button {
      font-size: 22px;
      padding: 15px 25px;
      margin-top: 30px;
    }
  </style>
</head>
<body>

<h1>📱 iPhone Sensor Sender</h1>

<p id="status">MQTT: verbinde…</p>

<button id="startBtn">▶ Sensor starten</button>

<script>
let client;
let mqttReady = false;

const statusEl = document.getElementById("status");
const startBtn = document.getElementById("startBtn");

// 🔧 MQTT CONFIG
const MQTT_HOST = "hmb5-tgm.cloud.arge3d.at";
const MQTT_PORT = 443;
const MQTT_TOPIC = "edu/iot2021/zec";
const MQTT_USER = "Administrator";
const MQTT_PASS = "zRrJHQhW15v44h";
const CLIENT_ID = "iphone_" + Math.random().toString(16).substr(2, 8);

// ✅ MQTT AUTOSTART
window.addEventListener("load", () => {
  client = new Paho.MQTT.Client(MQTT_HOST, MQTT_PORT, CLIENT_ID);

  client.onConnectionLost = () => {
    statusEl.textContent = "MQTT: getrennt";
    mqttReady = false;
  };

  client.connect({
    userName: MQTT_USER,
    password: MQTT_PASS,
    useSSL: true,
    onSuccess: () => {
      mqttReady = true;
      statusEl.textContent = "MQTT: verbunden ✅";
    },
    onFailure: err => {
      statusEl.textContent = "MQTT Fehler ❌";
      console.error(err);
    }
  });
});

// 📱 SENSOR START (Button)
startBtn.onclick = async () => {

  if (!mqttReady) {
    alert("MQTT noch nicht verbunden");
    return;
  }

  if (typeof DeviceMotionEvent.requestPermission === "function") {
    const permission = await DeviceMotionEvent.requestPermission();
    if (permission !== "granted") {
      alert("Sensor-Zugriff verweigert");
      return;
    }
  }

  window.addEventListener("devicemotion", (event) => {
    if (!client || !client.isConnected()) return;

    const acc = event.accelerationIncludingGravity;

    const payload = {
      x: Number(acc.x?.toFixed(3)),
      y: Number(acc.y?.toFixed(3)),
      z: Number(acc.z?.toFixed(3)),
      ts: Date.now()
    };

    const msg = new Paho.MQTT.Message(JSON.stringify(payload));
    msg.destinationName = MQTT_TOPIC;
    client.send(msg);
  });

  startBtn.disabled = true;
  startBtn.textContent = "Sensor läuft ✔";
};
</script>

</body>
</html>