Hente data fra Home Assistant og publisere de i WordPress

Ved å bruke Javascript og PHP kan en hente data fra sensorer i Home Assistant og publisere de i “sanntid” i WordPress. For ofte oppdateringer vil muligens føre til overbelastning. Her må du teste deg frem. Jeg testet med 12 sensorer og oppdatering hvert 10 sekund, og det ser ut til å fungere.

Logo WordPress

1. Opprett en "Langvarig tilgangskode", Token, i Home Assistant.

Dette finner du ved å klikke på navnet ditt nederst i menyen, og skrolle deg til bunn. Denne MÅ du kopiere og lagre siden den blir usynelig etterpå. Vi skal bruke denne koden senere.

2. Opprett script-fil

Dette scriptet henter ut data fra Home Assistant basert på hvilke sensornavn du legger til.
Fra linje 3 er det bare å fylle på med sensorer.

I linje 13 skal du lime inn Token fra Home Assistant. Bare erstatt YOUR-HOMEASSISTANT-TOKEN. Ingen ” hverken før eller etter

Denne filen lagres i root, altså i samme mappe som bl.a. wp-config.php.
Filnavnet kan du velge selv

				
					<?php
$urls = [
'https://URL-TIL-HOMEASSISTANT/api/states/sensor.name1',
'https://URL-TIL-HOMEASSISTANT/api/states/sensor.name2',
];
$data = array();

foreach ($urls as $url) {
  $curl = curl_init($url);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

  // Set the appropriate headers and authentication if required
  $headers = [
    'Content-Type: application/json',
    'Authorization: Bearer Din-Token' // Replace with your access token
  ];
  curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);

  $response = curl_exec($curl);
  curl_close($curl);

  $data[] = json_decode($response);
}
echo json_encode($data);
?>
				
			

3. Script på siden som skal vise sensordata

På nettsiden som skal vise sensordataene, må du legge til scriptet under.
Dette legges til som f.eks HTML

I linje 3 skal du peke til scriptfilen i pt. 2. 

I linje 13 velger du hvor ofte dataene skal oppdateres (i millisekunder)

Fra linje 18 legger du til de sensorene som skal vises.
Ønsker du å vise 10 sensorer, blir det 910 linjer fra 0-9

				
					<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function getSensorData(sensorId) {
  $.ajax({
    url: 'Full-URL-Til-Scriptfil.php',
    success: function(response) {
      var sensorData = JSON.parse(response);
      var state = sensorData[sensorId].state;
      $('#sensor-data-' + sensorId).text(state);
    },
    complete: function() {
      setTimeout(function() {
        getSensorData(sensorId);
      }, 10000); // 10 seconds
    }
  });
}

$(document).ready(function() {
  getSensorData('0'); // Replace '0' with the index of the sensor you want to display
  getSensorData('1'); // Replace '1' with the index of the next sensor you want to display
  // Add more calls to getSensorData for each additional sensor
});
</script>
				
			

4. Presentere sensordata

Der du ønsker å presentere dataene, limes følgende kode inn (her må du muligens bytte fra visuell til tekst først)

Under vil da sensordata 2 sensorer vises

				
					<p>Sensor 1: <span id="sensor-data-0"></span> benevnelse</p>
<p>Sensoe 2: <span id="sensor-data-1"></span> benevnelse</p>
				
			

Legg igjen en kommentar