myfreakyproject/index.html at main · niewiii/myfreakyproject · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <title>Panel ESP32</title>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
</head>
<body style="text-align:center; font-family: Arial;">
    <h1>Sterowanie ESP32</h1>
    <input type="text" id="devID" placeholder="Wpisz ID urządzenia">
    <button onclick="połącz()">Połącz</button>
    <div id="control" style="display:none;">
        <p>Bateria: <span id="batVal">--</span> V</p>
        <button onclick="zmienStan(1)" style="background:green; color:white;">ON</button>
        <button onclick="zmienStan(0)" style="background:red; color:white;">OFF</button>
    </div>

    <script>
        // TUTAJ WKLEJ KONFIGURACJĘ Z FIREBASE (Project Settings -> Your Apps -> Web App)
        const firebaseConfig = { apiKey: "...", databaseURL: "..." };
        firebase.initializeApp(firebaseConfig);
        const db = firebase.database();

        function połącz() {
            const id = document.getElementById('devID').value;
            document.getElementById('control').style.display = 'block';
            db.ref('urzadzenia/' + id + '/bateria').on('value', (s) => {
                document.getElementById('batVal').innerText = s.val();
            });
        }

        function zmienStan(s) {
            const id = document.getElementById('devID').value;
            db.ref('urzadzenia/' + id + '/led').set(s);
        }
    </script>
</body>
</html>