Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- iot_django_aproximacio_un_dashboard_sobre_raspberry_pi [2023/06/24 15:37]
jordi_gual_purti
+++ iot_django_aproximacio_un_dashboard_sobre_raspberry_pi [2023/06/25 06:36] (actual)
jordi_gual_purti
@@ Línia 97: / Línia 97: @@
         return self.sensor.location_desc + " - " + valor + "ºC - " + self.timestamp.strftime("%Y/%m/%d %H:%M:%S")
 </code>
+<WRAP info>
+Cal dir que l'aplicació que presentem no facilita cap mecanisme per a la creació de nous objectes de tipus ''TemperatureSensor''. És per això que hem activat la possibilitat de gestionar-los a través de l'admin panel i hem inserit un parell de sensors d'exemple que els trobareu a la base de dades SQLite que s'adjunta en el repositori GitHub. També s'ha activtat l'edició d'objectes ''TemperatureSample'' per poder fer proves de funcionament en cas que no disposem de la possibilitat de muntar físicament un sensor de la forma que s'explica a l'apartat de captura de dades.
+</WRAP>
+==== Instal·lació de la biblioteca FusionCharts =====
+Abans de continuar veient com implementar la resta de components, cal dur a terme la instal·lació de la llibreria [[https://www.fusioncharts.com/|FusionCharts]] que ens permetrà la generació de gràfiques. Una explicació molt detallada sobre com fer això es pot trobar a:
+[[https://www.fusioncharts.com/dev/getting-started/django/your-first-chart-using-django/|Getting started using django]]
+El nivell de detall d'aquest tutorial és tan elevat que haurem de prescindir d'alguns passos que ja hem fet com, per exemple, la creació del projecte Django i de l'aplicació web.
+==== Creació del dashboard senzill ====
+L'objectiu principal del projecte és crear un dashboard senzill, que estarà format per tres components (per qüestions de temps, no s'ha dedicat cap esforç a "fer-ho bonic" i tampoc s'ha aprofundit en el control d'errors que seria força millorable). Aquests tres components són:
+  - **Pàgina principal**: la pàgina principal de l'aplicació que ens mostrarà la llista de sensors disponibles. Cada sensor serà un link que ens portarà al formulari de selecció de la data.
+  - **Formulari selecció de data**: on escollirem la data sobre la qual volem generar la gràfica de les mesures registrades, del sensor que havíem seleccionat inicialment.
+  - **Visualització de la gràfica**: pàgina que visualitzarà les mesures que tenim registrades del sensor escollit i de la data indicada en forma de gràfica temporal. Disposa d'un botó per tornar a la pàgina principal.
+<WRAP info>
+En aquesta documentació, prescindim d'entrar en detalls com la configuració de rutes en els arxius d'urls, la configuració d'un admin panel bàsic per poder comprovar el correcte funcionament de la captura de dades, etc. Tot això, no obstant, es pot observar en els arxius corresponents que podeu trobar en el repositori GitHub del projecte: [[https://github.com/jgualp/sensors.git|jgualp/sensors]].
+</WRAP>
+Aquests tres components són vistes de Django que estan implementades com es pot veure en el codi font que teniu a continuació:
+<code python>
+from django.shortcuts import render, get_object_or_404
+from django.http import HttpResponse, HttpResponseRedirect
+from django import forms
+from .models import TemperatureSample, TemperatureSensor
+from .fusioncharts import FusionCharts, FusionTable, TimeSeries
+from django.template import loader
+from django.urls import reverse
+# Vista inicial (root).
+def index(request):
+    latest_sensor_list = TemperatureSensor.objects.order_by("location_desc")
+    template = loader.get_template("temperature/index.html")
+    context = {
+        "latest_sensor_list": latest_sensor_list,
+    }
+    return HttpResponse(template.render(context, request))
+# Vista formulari per configurar la gràfica que volem visualitzar (escollir data).
+class GraphForm(forms.Form):
+    data = forms.DateField(label="Data")
+def graph_form(request, sensor_id):
+    gf = GraphForm()
+    return render(request, "temperature/graph_form.html", {"form": gf, "id":sensor_id})
+# Vista de la gràfica que recull la data del formulari i genera la gràfica d'aquell dia.
+def graph_view(request, sensor_id):
+    if request.method=="POST":
+        form = GraphForm(request.POST)
+        if form.is_valid():
+            # Preparem les dades i configuracions generals de la gràfica.
+            sensor = get_object_or_404(TemperatureSensor, pk=sensor_id)
+            data = form.cleaned_data["data"]
+            start = str(data) + ' 00:00:00.000000'
+            end = str(data) + ' 23:59:59.999999'
+            # Preparem l'schema i les dades per a una gràfica de tipus "timeseries": és
+            # una gràfica de línia, amb proporcionalitat temporal.
+            schema = [{
+                "name": "Hora",
+                "type": "date",
+                "format": "%d-%m-%Y %H:%M:%S"
+            }, {
+                "name": "Temperatura (ºC)",
+                "type": "number"
+            }]
+            dades_temp = []
+            # Les dades, les afegim consultant-les de la BD.
+            for key in TemperatureSample.objects.filter(timestamp__range=(start, end)).filter(sensor__id=sensor_id):
+                mostra = []
+                mostra.append(key.timestamp.strftime('%d-%m-%Y %H:%M:%S'))
+                mostra.append(float(key.value))
+                dades_temp.append(mostra)
+            # Creem els objectes que necessita el constructor de la gràfica.
+            fusionTable = FusionTable(schema, dades_temp)
+            timeSeries = TimeSeries(fusionTable)
+            # Creem un objecte per a la gràfica utilitzant el constructor de FusionCharts: "line"
+            # El cinquè paràmetre, ha de coincidir amb el nom del <div> de la template HTML on
+            # volem que es visualitzi la gràfica.
+            grafica = FusionCharts("timeseries", "ex1" , "1200", "600", "viewtemp", "json", timeSeries)
+            # "outuput" és el nom de la variable de substitució que tenim a la template HTML.
+            return render(request, 'temperature/graph_view.html', {'output': grafica.render()})
+    return HttpResponseRedirect(reverse("temperature:graph_form"))
+</code>
+Les templates HTML que s'utilitzen de suport per aquestes tres vistes són les que teniu reproduïdes a continuació:
+''index.html''
+<code html>
+<h1>Monitor de temperatura</h1>
+    {% if latest_sensor_list %}
+        <ul>
+        {% for s in latest_sensor_list %}
+            <li><a href="{% url 'temperature:graph_form' s.id %}">{{s}}</a></li>
+        {% endfor %}
+        </ul>
+    {% else %}
+        <p>No hi ha sensors disponibles</p>
+    {% endif %}
+</code>
+''graph_form.html''
+<code html>
+<h1>Data de visualització de la gràfica</h1>
+<form action="/temperature/{{id}}/graph_view/" method="post">
+    {% csrf_token %}
+    {{form.as_p}}
+    <input type="submit" value="Visualitzar">
+</form>
+</code>
+''graph_view.html''
+<code html>
+<!DOCTYPE html>
+<html>
+    <head>
+    <title>Evolució de temperatura</title>
+        {% load static %}
+        <script type="text/javascript" src="{% static "temperature/fusioncharts.js" %}"></script>
+        <script type="text/javascript" src="{% static "temperature/fusioncharts.charts.js" %}"></script>
+        <script type="text/javascript" src="{% static "temperature/themes/fusioncharts.theme.fusion.js" %}"></script>
+    </head>
+    <body>
+        <div id="viewtemp">{{ output|safe }}</div>
+        <div id="tornar">
+            <a href="/temperature">
+                <button>Tornar a l'inici</button>
+            </a>
+        </div>
+    </body>
+</html>
+</code>
+==== Automatització de la captura de dades ====
+La captura de dades s'ha de fer partint de la base que disposem d'un sensor. El muntatge que hem fet per a la implementació d'aquest projecte és el que es pot veure en l'esquema següent (el LED, no es fa servir):
+{{ :03.fritzing.png?600 |}}
+Tenint això, cal preparar un petit programa **python** que s'executi de forma independent de l'aplicació web i que es pugui invocar des del servei **cron** del sistema. Aquest programa, per poder accedir a les dades del model de l'aplicació, utilitza la passarel·la WSGI. L'hem anomenat ''main.py'' i l'hem ubicat al directori arrel del projecte:
+<code python>
+#!/usr/bin/env python
+from django.core.wsgi import get_wsgi_application
+import os
+# Establim l'arxiu settings.py que utilitzarem (el que està dins de sensors/).
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "sensors.settings")
+# Instanciem un web service WSGI per tenir-lo com a passarel·la per al nostre django.
+application = get_wsgi_application()
+from temperature.models import TemperatureSensor, TemperatureSample
+import glob
+from datetime import datetime, timedelta
+import time
+# Carreguem els drivers del sensor de temperatura.
+os.system('modprobe w1-gpio')
+os.system('modprobe w1-therm')
+# Configurem l'accés a les lectures del sensor. Això té a veure amb
+# el funcionament del sensor Dallas DS18B20.
+base_dir = '/sys/bus/w1/devices/'
+device_folder = glob.glob(base_dir + '28*')[0]
+device_file = device_folder + '/w1_slave'
+# Aquestes dues funcions implementen la lectura de mostres de temperatura
+# del sensor que tenim connectat al RPI.
+def read_temp_raw():
+    f = open(device_file, 'r')
+    lines = f.readlines()
+    f.close()
+    return lines
+def read_temp():
+    lines = read_temp_raw()
+    while lines[0].strip()[-3:] != 'YES':
+        time.sleep(0.2)
+        lines = read_temp_raw()
+    equals_pos = lines[1].find('t=')
+    if equals_pos != -1:
+        temp_string = lines[1][equals_pos+2:]
+        temp_c = float(temp_string) / 1000.0
+        return temp_c
+# Cada cop que executem aquest programa, agafem una mostra de la temperatura del
+# sensor i la guardem a la BD a través del model de dades de l'aplicació.
+ts = datetime.now() + timedelta(hours=2)
+mostra = TemperatureSample(sensor_id=1, value=read_temp(), timestamp=ts)
+mostra.save()
+</code>
+Per automatitzar la presa de mesures de temperatura només falta configurar el servei **cron** a través d'un arxiu **crontab**. Per programar una lectura de la temperatura cada 2 minuts tindríem el seguent arxiu ''crontab.cfg'':
+<code>
+*/2 *   *   *   *   /home/pi/dev/env/bin/python /home/pi/dev/sensors/main.py
+</code>
+Per introduir aquesta configuració a la planificació de tasques del servei **cron** del sistema haurem d'executar la comanda següent:
+<code>
+$ crontab crontab.cfg
+</code>
+==== Algunes imatges ====
+Per tenir una idea més detallada dels resultats obtinguts es faciliten algunes imatges del muntatge del hardware i de la visualització de la gràfica com a mostra del que hem d'acabar tenint un cop implementat tot el que s'ha explicat:
+''Vista global del muntatge hardware''
+{{ :06.hardware.png?600 |}}
+''Vista de detall de la connexió del sensor''
+{{ :04.hardware.png?600 |}}
+''Visualització de la gràfica''
+{{ :02.grafica.png?600 |}}
+===== Consideracions finals =====
+Per acabar, es fan constar algunes consideracions importants que cal tenir presents sobre aquest material, tenint en compte la seva naturalesa didàctica:
+  * Es tracta, com hem dit, d'un material que té un objectiu didàctic. Per tant, no contempla molts dels aspectes que caldria tenir presents si es tractés d'un projecte orientat a la posada en producció real.
+  * No s'ha dedicat cap esforç a fer-lo bonic aplicant, per exemple, estils CSS.
+  * Els mecanismes de control d'errors són molt millorables (caldria afegir bastant codi en aquest sentit).
+  * No es toca la qüestió de la posada en producció del sistema.
+Aquest projecte s'ha implementat, tot ell, sobre un SBC Raspberry Pi amb l'objectiu de posar un exemple d'implantació de Django en un entorn poc habitual. La lògica del sentit comú, però, ens diria que per a un cas real en el que es volgués gestionar un conjunt més o menys gran de sensors, l'arquitectura més adequada seria:
+  * Tenir els sensors associats a un hardware més senzill i barat (Arduino, ESP32, etc.), amb capacitat de connexió a xarxa.
+  * Tenir la base de dades en un sistema més potent que SQLite: MySQL, PostgresQL, Oracle, etc.
+  * Tenir el servidor Django en un hardware més potent que no pas un Raspberry Pi.
+  * Establir les passarel·les adients d'intercanvi de dades entre els diferents components del sistema (sensors, servidor de BD i servidor Django) amb els mecanismes de seguretat adients.
+{{tag> #FpInfor #DamMp09 #DawMp07 django iot raspberry fusioncharts }}

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina