Bananapi + DHT11 + Google Charts

Ennek a kis projektnek az elkészítésébe azért kezdtem bele, mert lehet hogy ez csak engem zavar, viszont engem nagyon zavar az, hogy a különböző webes IOT platformok nem eléggé rugalmasan konfigurálhatóak. Illetve azok az adatok amiket mi mérünk, azok léteznek valahol, de az a valahol az valaki más szerverén van. Ki tudja miért, de személy szerint én kicsit kényes vagyok az ilyen jellegű adatokra. Persze azért csinálok majd egy olyan példát is, ahol a DHT11 adatait feltöltöm a thingspeak-re, de nekem a saját megoldások mindig szimpatikusabbak. Arról nem is beszélve, hogy a google charts egy elég sok diagramm típust tartalmazó szolgálatás, ami széles körben skálázhatóvá teszi a megjelenítést.

A modul bekötését és az alkalmazott library-t annak telepítését és beállítását megtaláljuk egy korábbi cikkben.   –Itt

Először ezt a konfigurációt végezzük el, majd a következő lépéseket alkalmazva telepítsük a LAMP-et.

sudo apt-get update
sudo apt-get install apache2
sudo apt-get install mysql-server php5-mysql
sudo apt-get install php5 libapache2-mod-php5 php5-mcrypt
sudo apt-get install php5-cli
sudo apt-get install libapache2-mod-python
sudo apt-get install python-mysqldb python-xml

Amint a telepítéssel végeztünkt indítsuk újra az apache-ot.

sudo /etc/init.d/apache2 restart

Nyissuk meg a böngészőnket és írjuk be a címsorba a következőt: localhost.

apache2-localhost
Ha ezt látjuk, akkor sikeres volt a telepítés.

Ezután ellenőrizzük le, a php beállításokat.

sudo nano /var/www/html/phpinf.php

Adjuk hozzá a követkető kódot a file-hoz.

<?php
phpinfo();
?>

Mentés után teszteljük le a következő url-el: “localhost/phpinf.php”

phpinfHa ezt látjuk, akkor ez is működik, és már csak a python config van hátra. A következő parancsok használatával engedélyezzük az apache-on az mpm fájlok futtatását és megnyitjuk az apache “site-enabled” konfigurációs fájlját.

sudo a2dismod mpm_event
sudo a2enmod mpm_prefork cgi
sudo nano /etc/apache2/sites-enabled/000-default.conf

Itt a következő módosításokat kell eszközölni.

 <Directory /var/www/html/cgi>
      Options +ExecCGI
  </Directory>
AddHandler cgi-script .py

Ezzel a módosítással engedélyezzük, hogy az apache a “html/cgi” könyvtárban python fájlokat futasson.  Ha mindezzel elkészültünk, akkor hozzuk létre a “cgi” könytárat és a “test.py” python fájlt a könyvtáron belül.

sudo mkdir /var/www/html/cgi
sudo nano /var/www/html/cgi/test.py

A következő kódot illesszük be:

#!/usr/bin/python
print "Content-type:text/html\r\n\r\n"
print '<html>'
print '<head>'
print '<title>Hello Word - First CGI Program</title>'
print '</head>'
print '<body>'
print '<h2>Hello Word! This is my first CGI program</h2>'
print '</body>'
print '</html>'

Mentsük el és lássuk a végeredményt a localgost/cgi/test.py url-en.

cgi_programÉs Voila. Működik ez is.

A konfigurálással most végeztünk, akkor jöhet a program, ami megjeleníti az adatokat. A leírás elején írtam, hogy egy előző példából állítsuk össze a kapcsolást és a DHT11 library-t rakjuk a helyére. Amennyiben ezzel kezdtük akkor nincs más dolgunk, csak hozzunk létre egy python fájlt a következő “dht11_csv.py” néven a library DHT11 mappájában.  Ebbe a fájlba másoljuk be a következő forrást:

import csv
import RPi.GPIO as GPIO
import dht11
import time
import datetime
import os

# initialize GPIO
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.cleanup()

# read data using pin 14
instance = dht11.DHT11(pin = 18)

header = 0
while True:  
 temp = []
 humi = []
 daytime = []
 count=0
 while (count < 5):
          result = instance.read()
      if result.is_valid():
                  temp.append (result.temperature)
                  humi.append (result.humidity)
                  daytime.append (datetime.datetime.now().strftime("%H:%M:%S"))
          print("Last valid input: " + datetime.datetime.now().strftime("%Y.%m.%d %H:%M:%S"))
          print("Temperature: %d C" % result.temperature)
          print("Humidity: %d %%" % result.humidity)
                  time.sleep(20)
                  count=count+1
          else: 
               print ("Nincs beolvasott ertek")
               time.sleep(1)

 
 with open('/var/www/html/dht11.csv', 'a') as csvfile:
      fieldnames = ['daytime','temperature','humidity']
      writer = csv.DictWriter(csvfile, fieldnames=fieldnames)
      if header==0:
       header=header+1
       writer.writeheader()
       i=0 
       while (i < 5):
           writer.writerow({'daytime':daytime[i],'temperature': temp[i],'humidity': humi[i]})
           i=i+1
      else:
       i=0 
       while (i < 5):
           writer.writerow({'daytime':daytime[i],'temperature': temp[i],'humidity': humi[i]})
           i=i+1

Mentsük el a fájlt és indítsuk el. A program a “var/www/html” mappában létrehoz egy “dht11.csv” fájlt és azt folyamatosan írja. Itt hívnám fel mindenkinek a figyelmét arra, hogy ez a program csak egy vázlat. Kiindulási alapnak jó, de nincs benne megoldva minden probléma. Ilyen például az, hogy nem bontja le napokra a logokat, tehát folyamatos logolásra nem alkalmas. Ez egy működő vázlat, és mindenki szabadon írhatja át olyanra amilyenre szeretné.

A próbához és a teszteléshez indítsuk el a python programot és ezután hozzunk létre egy “index.html”-t a következő kóddal:

* Ne felejtsük el a “var/www/html” mappa megfelelő jogosultságainak a kiosztását rekurzív módon.

sudo chown -R pi:pi /var/www/html
sudo chmod -R 755 /var/www/html

 

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() 
     {
        var query = new google.visualization.Query('dht11.csv',
          { csvColumns: ['string', 'number', 'number'], csvHasHeader: true });
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' +
                response.getDetailedMessage());
          return;
        }

        var data = response.getDataTable();
        var chart = new google.visualization.LineChart(document.getElementById('csv'));
        chart.draw(data, { legend: { position: 'none' } });
      }
    </script>
  </head>
  <body>
    <div id="csv" style="width: 1000px; height: 500px;"></div>
  </body>
</html>

Mentsük el és nyissuk meg a “localhostot”

logÚjfent Voila! Láss csodát működik.

A továbbfejlesztéssel kapcsolatban mindenkinek a lelkére bízom hogy milyen irányba fejleszti tovább, én személy szerint csak a szemléltetés miatt nyúltam ehhez a megoldáshoz. A példa amit ismertettem úgy gondolom, hogy erre kiválóan alkalmas. Remélem hasznos segítséget és útmutatás nyújtottam minden kedves hobbifejlesztő barátomnak, és blogolvasómnak.

 

(Statisztika: 7 megtekintés)

Vélemény, hozzászólás?

Az email címet nem tesszük közzé.