Maak mijn eigen grafieken voor mijn IOT-gegevens op een Raspberry PI - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18

Lees verder als u uw eigen IOT-grafieken wilt kunnen maken met 7 regels code.

Ik wilde grafieken maken om gegevens in een grafisch formaat van mijn IOT-sensoren op een webpagina weer te geven. Voorheen had ik hiervoor diensten van derden (sommige betaald) en grafische functies van derden gebruikt voor mijn databasesysteem - Mysql, met behulp van een programmeertaal die bekend staat als Php. Ik vond deze services van derden te moeilijk of te duur om te implementeren. Daarom heb ik mijn eigen eenvoudige Php-functie geschreven die gegevens als arrays uit een tekstbestand of databasetabel (misschien van Mysql) neemt en ze als een lijngrafiek op een webpagina weergeeft. Ik heb alle php-code beschikbaar gemaakt op github - https://github.com/scanos/php-simple-chart. Ik heb hier ook een deel van de code opgenomen - het eerste php-bestand - PhpSimpleChart2.php - bevat het lijngrafiekfunctiebestand, het andere, PhpSimpleChart_ex1.php, is een voorbeeldbestand dat laat zien hoe het te gebruiken. Ik stel voor dat je ook de github-pagina bezoekt om code-updates te krijgen.

Ik implementeer dit op mijn Raspberry Pi. Dit is wat je nodig hebt:

1) Enige kennis over het inzetten van een webserver zoals Apache, een database zoals Mysql en PHP. Samen staan deze bekend als LAMP - Linux, Apache, Mysql en PHP. en er is een enorme hoeveelheid informatie op het web met betrekking tot het inzetten hiervan op een Raspberry Pi. Daarom zal ik dit hier niet behandelen.

2) Een LAMP linux-omgeving - nogmaals, zoals Raspberry Pi.

3) Een middel om bestanden te uploaden en te maken naar uw webomgeving, d.w.z. de mappen op uw Raspberry Pi waar u uw programma-php-bestanden implementeert.

Vervolgens zal ik je laten zien hoe je je eigen php-bestanden kunt maken met behulp van de twee php-bestanden waarop ik eerder heb gezinspeeld.

Stap 1: De PHP-functiecode - PhpSimpleChart2.php

Dit bestand heet PhpSimpleChart2.php - je moet het downloaden van de git-repository door op de download / kloonknop te klikken - zie de afbeelding hierboven. Zodra je dat hebt gedaan, breng je de twee php-bestanden over naar je webserver met behulp van je standaard FTP-client of misschien heb je een samba-share op je Raspberry Pi ingesteld waardoor je Pi-mappen eruitzien als Windows-mappen.

U hoeft de code in dit hoofd-php-bestand niet echt te wijzigen - PhpSimpleChart2.php. Dit is een eenvoudige functie voor het maken van lijndiagrammen voor Php. Kortom, er worden 2 arrays aan de functie doorgegeven, evenals andere argumenten, zoals de diagramdimensies. De 1e array bevat de eerste onbewerkte waarden zoals temperatuur etc. De tweede array bevat de bijbehorende datumwaarden. Het programma probeert de grafiek automatisch te vergroten, afhankelijk van de range, min, max en array-elementen. De resulterende grafiek kan worden geknipt en geplakt in MS Office-documenten als een gif,-p.webp

Nadat u PhpSimpleChart2.php naar uw webserver heeft geüpload, kunt u uw eigen script schrijven om dit te gebruiken. Dit wordt weergegeven op de volgende pagina.

Stap 2: Uw eigen programma schrijven op basis van het voorbeeldprogramma

Ik heb een voorbeeldprogramma laten zien, PhpSimpleChart_ex1.php dat zich weer in de git-repository bevindt. De eerste regel van de code is om het php-script aan te roepen dat de grafiekfunctie bevat -

vereisen("PhpSimpleChart2.php");

In dit geval wordt het bestand PhpSimpleChart2.php in dezelfde map geplaatst als het script dat u schrijft om het aan te roepen. Hopelijk weet je dat de php-bestanden de juiste lees-/schrijfeigenschappen 755 moeten hebben.

Vervolgens moet u uw gegevensbronnen maken en de array vullen. Dit zijn de voorbeeldarrays, één voor gegevens en één voor bijbehorende datums en tijden. Het is duidelijk dat er in beide arrays hetzelfde aantal waarden moet zijn.

$data_array = array ("12", "15", "18", "12", "11", "23", "11", "24", "15", "18", "12", " 11", "23", "11", "24");

$date_array = array("12th 14h", "12th 15h", "12th 16h", "12th 17h", "12th 18h", "12th 19h", "12th 20h", "12th 21h", "12th 15h", "12th 16h", "12th 17h", "12th 18h", "12th 19h", "12th 20h", "12th 21h");

Normaal gesproken leest u deze waarden uit een databasequery of laadt u ze uit een tekstbestand.

Vervolgens moet u de parameters voor uw grafiek instellen. Het is vrij rechttoe rechtaan. U stelt eerst de titels in en bepaalt vervolgens de hoogte en breedte van de grafiek.

$chart_text="Mijn testkaart juli 2018";

$y_title="Temp Deg C";

$x_scale=1000;

$y_scale=400;

Een functieaanroep doe je dan als volgt.

draw_line_chart($data_array, $date_array, $chart_text, $x_scale, $y_scale, $y_title);

Ik heb de uitvoer van dit voorbeeldprogramma getoond in de bijgevoegde afbeelding. De diagramfunctie probeert automatisch te schalen en rommel van y-as en diagramdescriptorpunten te voorkomen. Hopelijk werkt het voor jou. Dat is alles wat je nodig hebt.

Stap 3: Conclusie

Ik hoop dat je dit nuttig vond. Je gebruikt misschien een andere methode die voor jou werkt, maar hier zijn in ieder geval een paar gedachten;

1) De meeste IOT-grafische services van derden werken als een online service die meestal toegankelijk is als een API.

2) IOT-gebruikers hebben een breed scala aan competenties met betrekking tot het inzetten van grafische functionaliteit.

PROS van mijn oplossing

a) Kan offline werken

b) Geen kosten.

c) Kleine voetafdruk

CONS

a) Niet getest met dezelfde nauwkeurigheid als grote softwarehuizen.

b) Beperkt in functionaliteit, d.w.z. geen staafdiagrammen etc.

Stof tot nadenken!