Live sensordata van Home Assistant op je website

Home Assistant

Ik heb een script moeten maken voor Home Assistant welke de waarden uit de verschillende sensoren in een .json bestand zet.
Dit script wordt vanuit een automation iedere minuut uitgevoerd.
Het script maakt gebruik van een "Long-lived access token".

Long-lived access token

- Start Home Assistant op en zorg dat je bent aangemeld.
- Onderaan de menubalk zie je jou naam staan en als je daar op klikt, dan krijg je de verschillende instellingen.
- Klik in het menu aan de bovenkant op "Security" en scroll naar beneden naar "Long-lived access tokens"
- Maak een token. LET OP, het token krijg je maar eenmalig te zien. Dit token heb je nodig voor het "write_sensor_json.py" script.

"write_sensor_json.py" script

    
        import json
        import requests
        from datetime import datetime

        hass_url = "http://homeassistant.local:8123"
        token = "JE_LONG_LIVED_ACCESS_TOKEN"
        headers = {
            "Authorization": f"Bearer {token}",
            "Content-Type": "application/json"
        }

        sensors = {
            "tvoc": "sensor.office_airquality_voc",
            "eco2": "sensor.office_airquality_co2",
            "aqi": "sensor.office_airquality_status",
            "temp": "sensor.office_temperaturec",
            "hum": "sensor.office_humidity"
        }

        data = {
            "timestamp": datetime.now().isoformat(),
            "ens160": {},
            "woonkamer": {}
        }

        for key, entity in sensors.items():
            r = requests.get(f"{hass_url}/api/states/{entity}", headers=headers)
            if r.status_code == 200:
                value = r.json().get("state")
                if key in ["tvoc", "eco2", "aqi"]:
                    data["ens160"][key] = value
                else:
                    data["woonkamer"][key] = value

        with open("/config/www/sensor_data.json", "w") as f:
            json.dump(data, f)

    

    
        shell_command:
          write_sensor_data: >
            python3 /config/scripts/write_sensor_json.py
    

<   code class="language-yaml">
        alias: Schrijf sensordata naar JSON
        trigger:
          - platform: time_pattern
            minutes: "/1"
        action:
          - service: shell_command.write_sensor_data
        mode: single

    

Overzetten gegevens naar de webserver.

We hebben nu een bestand "sensor_data.json" wat iedere minuut aangemaakt wordt binnen Home Assistant en de gegevens van verschillende sensoren bevat. Dit bestand moet vanuit de Home Assistant server gekopieerd worden naar de webserver.
De webserver die ik gebruik is een Windows machine met daarop IIS. Dit betekend dat het onderstaande stukje specifiek voor Windows is.

    
        Read-Host "Geef wachtwoord" -AsSecureString | ConvertFrom-SecureString | Set-Content "C:\Scripts\ha_pass.txt"
    

    
        # Configuratie
        $server   = [IP of naam van de Home Assistant server]
        $share    = "config"
        $remote   = "\\$server\$share\www\sensor_data.json"
        $local    = "C:\WebsiteData\Matteman.nl\SensorData\sensor_data.json"
        $username = "[UserName]"
        $passFile = "C:\Scripts\ha_pass.txt"

        # Haal wachtwoord op uit bestand
        $password = Get-Content $passFile | ConvertTo-SecureString
        $cred = New-Object System.Management.Automation.PSCredential ($username, $password)

        # Koppel netwerkschijf
        $drive = "Z:"
        Try {
            New-PSDrive -Name "Z" -PSProvider FileSystem -Root "\\$server\$share" -Credential $cred -ErrorAction Stop

            # Kopieer bestand
            Copy-Item -Path "Z:\www\sensor_data.json" -Destination $local -Force
            Write-Host "✅ Bestand gekopieerd naar $local"
        }
        Catch {
            Write-Error "❌ Fout: $_"
        }
        Finally {
            Remove-PSDrive -Name "Z" -Force -ErrorAction SilentlyContinue
        }
    

Weergave als webpagina.

Het json bestand staat op de webserver en hoeft alleen nog maar ingelezen te worden door de webpagina. Ik heb mijn gehele site gemaakt met Visual Studio en maak gebruik van Razor webpagina's.
Ik schrijf mijn site dus in HTML code en maak geen gebruik van een CMS systeem zoals bijvoorbeeld WordPress. Ik kan je dus ook alleen maar laten zien hoe ik de gegevens vanuit het json bestand in mijn Razor pagina kan inlezen.

    
    <script>
        async function fetchData() {
            try {
            const response = await fetch('/SensorData/sensor_data.json');
                if (!response.ok) throw new Error('Bestand niet gevonden');
                const data = await response.json();

                document.getElementById("timestamp").innerText = data.timestamp ?? "-";
                document.getElementById("tvoc").innerText = data.tvoc ?? "-";
                document.getElementById("eco2").innerText = data.eco2 ?? "-";
                document.getElementById("aqi").innerText = data.aqi ?? "-";
                document.getElementById("temp").innerText = data.temp ?? "-";
                document.getElementById("hum").innerText = data.hum ?? "-";
            } catch (error) {
                console.error("❌ Fout bij ophalen van sensor data:", error);
            }
        }
        fetchData();
        setInterval(fetchData, 10000);
        /<script>
    

    
        document.getElementById("timestamp").innerText = data.timestamp ?? "-";
    

        const dt = new Date(data.timestamp);
        const formattedTime = dt.toLocaleString("nl-NL", {
            day: "2-digit",
            month: "long",
            year: "numeric",
            hour: "2-digit",
            minute: "2-digit"
        });
        document.getElementById("timestamp").innerText = formattedTime;
    

Het eindresultaat: