Web UI

diaľkový prístup ku inteligentným vecičkám pomocou webového rozhrania

About

Dnes sa pokúsime vytvoriť jednoduché webové rozhranie pre naše inteligentné vecičky vo webovom mikrorámci Flask. Získame tak možnosť vzdialeného prístupu pre ovládanie alebo kontrolu aktuálneho stavu vecí.

Goals

  • Naučenie sa základov práce s mikro webovým rámcom Flask

Content

Step 1: Prepare Your Environment

Ešte pred samotnou prácou skontroluj, či máš prichystané a pripravené všetko potrebné.

Úloha 1.1

Overte, či máte pre potreby cvičenia pripravené všetky potrebné komponenty.

Na toto cvičenie budete potrebovať: * Raspberry Pi * kontaktné pole * prepojovacie vodiče * LED diódu, 22 ohmový rezistor, senzor teploty a vlhkosti DHT11 alebo DHT22 * editor Mu alebo Thonny

Step 2: The Thing

V tomto kroku vytvoríme vec, ktorá bude merať teplotu a ovládať pripojené svetlo (LED diódu).

Úloha 2.1

Pripojte k Raspberry Pi LED diódu, ktorú budete vedieť ovládať pomocou protokolu MQTT.

Pre ovládanie zariadenia použite tému v tvare:

iotlab/[meno]/led/[on|off]

Pre riešenie použite riešenie z minulého cvičenia, ktoré môže vyzerať napríklad takto:

import paho.mqtt.client as mqtt
from time import sleep
from gpiozero import LED

led = LED(4)

def on_message(client, userdata, message):
    text = str(message.payload.decode("utf-8"))
    if text == 'on':
        led.on()
    elif text == 'off':
        led.off()
        

if __name__ == '__main__':
    client = mqtt.Client()
    client.connect('localhost', port=1883)
    client.subscribe('iotlab/jano/led')
    client.on_message = on_message

    client.loop_forever()

Úloha 2.2

Otestujte vytvorené riešenie.

Pokiaľ ste postupovali správne, LED dióda sa rozsvieti a zhasne na základe toho, akú správu pošlete do príslušnej témy.

Úloha 2.3

Nainštalujte balík Adafruit-DHT pre prácu so senzormi DHT 11 a DHT 22.

Inštaláciu vykonáte príkazom

pip3 install adafruit-dht

Úloha 2.4

K minipočítaču Raspberry Pi pripojte senzor DHT11/22.

Upozornenie: Pri zapájaní nezabudnite medzi piny 1 a 2 senzora zapojiť rezistor o veľkosti 10k.

Úloha 2.5

Pomocou senzora DHT 11/22 v minútových intervaloch odčítajte hodnotu teploty a vlhkosti a zapíšte ju do príslušnej témy pomoocu protokolu MQTT.

Pre zápis teploty použite tému iotlab/[meno]/temperature a pre zápis vlhkosti použite tému iotlab/[meno]/humidity.

Ukážkový fragment kódu na prečítanie údajov zo senzora môže vyzerať napríklad takto:

import Adafruit_DHT

sensor = Adafruit_DHT.DHT22
pin = 4

humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)

Úloha 2.6

Overte správnosť vašej implementácie.

Ak ste postupovali správne, v minútových intervaloch viete odčítať hodnotu teploty a vlhkosti v miestnosti.

Step 3: The Simple Web UI

Aktuálne vieme vytvorenú vec ovládať a čítať jej informácie pomocou protokolu MQTT. V tomto kroku rozšírime možnosti ovládania a monitorovania stavu pomocou webového rozhrania.

Úloha 3.1

Do svojho systému si nainštalujte balík flask_mqtt.

Inštaláciu vykonáte príkazom

pip3 install flask_mqtt

Úloha 3.2

V priečinku vášho projektu vytvorte priečinok templates/, v ktorom sa budú nachádzať šablóny vašej stránky.

Úloha 3.3

V pričinku templates/ vytvorte súbor index.html, ktorý bude reprezentovať šablónu stránky pre vytvorené zariadenie.

S podobou tohto súboru môžete experimentovať. Pre testovacie účely môže vyzerať aj takto:

<h1>The Thing Monitor</h1>

<ul>
    <li>temperature: <b></b></li>
    <li>humidity: <b></b></li>
    <li>light: <b></b></li>
</ul>

<a href="/toggle">toggle</a>

Úloha 3.4

V hlavnom priečinku aplikácie vytvorte súbor thing.py, ktorý bude slúžiť ako hlavná aplikácia.

Štruktúra priečinkov projektu bude teda nasledovná:

.
├── thing.py
└── templates/
    └── index.html

Úloha 3.5

Vytvorte kostru webovej aplikácie, ktorá vyrenderuje šablónu stránky.

Jednoduchá podoba aplikácie môže vyzerať nasledovne. Nezabudnite uviesť správnu adresu MQTT servera:

from flask import Flask, render_template
from flask_mqtt import Mqtt

app = Flask(__name__)
app.config['MQTT_BROKER_URL'] = 'localhost'
app.config['MQTT_BROKER_PORT'] = 1883
# app.config['MQTT_USERNAME'] = 'user'
# app.config['MQTT_PASSWORD'] = 'secret'
app.config['MQTT_REFRESH_TIME'] = 5.0  # refresh time in seconds
mqtt = Mqtt(app)

@app.route('/')
def index():
    return render_template('index.html')

Úloha 3.6

Spustite a otestujte vašu webovú aplikáciu.

Pred spustením webového servera najprv exportujete dve premenné prostredia:

  • FLASK_ENV - Aktuálne prostredie. S hodnotou development Flask automaticky obnoví stránku pri akejkoľvek zmene obsahu súboru projektu.
  • FLASK_APP - Názov súboru, ktorý reprezentuje hlavnú aplikáciu.

V príkazovom riadku najprv spustite:

export FLASK_ENV=development FLASK_APP=thing.py

Následne už len spustíte webový server:

flask run

Spustenie má niekoľko voliteľných parametrov. Môžete použiť:

  • -p - na nastavenie čísla portu, alebo
  • --host=0.0.0.0 - na sprístupnenie vašej webovej aplikácii všetkým zariadeniam v sieti.

Upozornenie: Predvolene obsahuje Raspbian predinštalovanú verziu Flask-u 0.12.1. To overíte spustením príkazu flask --version. Ak je toto aj váš prípad, aktualizujte nainštalovaný balíček flask pomocou príkazu:

sudo pip3 install flask --upgrade

Po aktualizácii však treba reštartnúť terminál.

Úloha 3.7

Overte svoju implementáciu.

Po spustení webového servera vám sa na obrazovku vypíše aj port, na ktorom webový server počúva. Po otvorení tejto adresy vo vašom prehliadači sa zobrazí jednoduchá webová aplikácia.

Upozornenie: Ak miesto webovej stránky vidíte správu ConnectionRefusedError: [Errno 111] Connection refused, s veľkou pravdepodobnosťou ste zadali nesprávnu adresu pre MQTT server (alebo je server vypnuťý).

Úloha 3.8

Aktualizujte aplikáciu tak, aby ste zobrazili aktuálny stav senzora DHT11/22 a LED diódy.

Poznámka: Pri renderovaní šablóny môžete ako ďalšie parametre použiť práve parametre šablóny nasledovne:

render_template('index.html',
            humidity='80',
            temperature='25.5',
            light=1
            )

Úloha 3.9

Overte svoju implementáciu.

Po spustení aplikácie by ste mali vidieť webovú stránku s aktuálnymi hodnotami vašej veci.

Úloha 3.10

Pridajte nový smer (z angl. route) s názvom toggle, ktorý zabezpečí prepnutie LED diódy.

Poznámka: Nezabudnite na aktualizovanie teploty a vlhkosti!

Úloha 3.11

Overte správnosť svojej implementácie.

Po spustení budete môcť kliknutím na linku toggle zmeniť stav LED diódy.

Step 4: Controlling the App with MQTT

Pomocou rozšírenia flask_mqtt je možné do Flak aplikácie integrovať aj podporu MQTT protokolu:

  • prihlásiť sa do kanálu môžete: mqtt.subscribe('home/mytopic')

  • poslať správu do kanálu môžete: mqtt.publish('home/mytopic', 'this is my message')

  • ošetriť prijatie správy môžete pomocou dekorátora @mqtt.on_message():

    @mqtt.on_message()
def handle_mqtt_message(client, userdata, message):
    data = dict(
        topic=message.topic,
        payload=message.payload.decode()
    )

Step 5: Clean Your Environment

Po skončení uveďte svoje pracovisko do pôvodného stavu.

Úloha 5.1

Zmažte z disku svoje riešenie vytvorené v editore.

Úloha 5.2

Rozpojte zapojenie a uložte jeho súčasti na pôvodné miesto.

Additional Tasks

Additional Sources