Веб-сервер на Raspberry Pi с использованием Flask для управления GPIO

В этом проекте вы создадите автономный веб-сервер на Raspberry Pi, который может переключать два светодиода. Вы можете заменить эти светодиоды любой нагрузкой (например, реле или транзистором).

Для создания веб-сервера вы будете использовать Python-микрофреймворк под названием Flask.

Веб-сервер на Raspberry Pi с использованием Flask для управления GPIO

Необходимые компоненты 

Вот оборудование, которое вам понадобится для выполнения этого проекта:

Raspberry Pi (подойдет любая модель Pi, рекомендуется использовать Raspberry Pi 3) – читайте Лучшие стартовые наборы Raspberry Pi
SD-карта (минимальный объем 8 ГБ, класс 10)
Блок питания Micro USB
Ethernet-кабель или WiFi-донгл
Макетная плата
2 светодиода
2 резистора 470 Ом
Соединительные провода

Вы можете воспользоваться ссылками выше или перейти непосредственно на MakerAdvisor.com/tools, чтобы найти все компоненты для ваших проектов по лучшей цене!

Базовая настройка Raspberry Pi 

Прежде чем продолжить чтение этого проекта, убедитесь, что на вашем Raspberry Pi установлена операционная система Raspbian.

Вы можете прочитать руководство :doc:`Начало работы с Raspberry Pi </raspberry/rnt/getting-started-with-raspberry-pi/index>`, чтобы установить Raspbian и выполнить базовую настройку.

Установка Flask 

Мы будем использовать Python-микрофреймворк Flask для превращения Raspberry Pi в веб-сервер.

Чтобы установить Flask, вам нужно установить pip. Выполните следующие команды для обновления вашего Pi и установки pip:

pi@raspberrypi ~ $ sudo apt-get update
pi@raspberrypi ~ $ sudo apt-get upgrade
pi@raspberrypi ~ $ sudo apt-get install python-pip python-flask

Затем используйте pip для установки Flask и его зависимостей:

pi@raspberrypi ~ $ sudo pip install flask

Схема подключения 

Схема подключения для этого проекта довольно простая. Просто подключите два светодиода к контактам GPIO 23 и GPIO 24, как показано на рисунке ниже.

Создание Python-скрипта 

Это основной скрипт нашего приложения. Он настраивает веб-сервер и фактически взаимодействует с GPIO Raspberry Pi.

Чтобы все было организовано, начните с создания новой папки:

pi@raspberrypi ~ $ mkdir web-server
pi@raspberrypi ~ $ cd web-server
pi@raspberrypi:~/web-server $

Создайте новый файл с именем app.py.

pi@raspberrypi:~/web-server $ nano app.py

Скопируйте и вставьте следующий скрипт на ваш Raspberry Pi (этот код основан на отличном примере Мэтта Ричардсона).

'''

Adapted excerpt from Getting Started with Raspberry Pi by Matt Richardson

Modified by Rui Santos
Complete project details: https://randomnerdtutorials.com

'''

import RPi.GPIO as GPIO
from flask import Flask, render_template, request
app = Flask(__name__)

GPIO.setmode(GPIO.BCM)

# Create a dictionary called pins to store the pin number, name, and pin state:
pins = {
   23 : {'name' : 'GPIO 23', 'state' : GPIO.LOW},
   24 : {'name' : 'GPIO 24', 'state' : GPIO.LOW}
   }

# Set each pin as an output and make it low:
for pin in pins:
   GPIO.setup(pin, GPIO.OUT)
   GPIO.output(pin, GPIO.LOW)

@app.route("/")
def main():
   # For each pin, read the pin state and store it in the pins dictionary:
   for pin in pins:
      pins[pin]['state'] = GPIO.input(pin)
   # Put the pin dictionary into the template data dictionary:
   templateData = {
      'pins' : pins
      }
   # Pass the template data into the template main.html and return it to the user
   return render_template('main.html', **templateData)

# The function below is executed when someone requests a URL with the pin number and action in it:
@app.route("/<changePin>/<action>")
def action(changePin, action):
   # Convert the pin from the URL into an integer:
   changePin = int(changePin)
   # Get the device name for the pin being changed:
   deviceName = pins[changePin]['name']
   # If the action part of the URL is "on," execute the code indented below:
   if action == "on":
      # Set the pin high:
      GPIO.output(changePin, GPIO.HIGH)
      # Save the status message to be passed into the template:
      message = "Turned " + deviceName + " on."
   if action == "off":
      GPIO.output(changePin, GPIO.LOW)
      message = "Turned " + deviceName + " off."

   # For each pin, read the pin state and store it in the pins dictionary:
   for pin in pins:
      pins[pin]['state'] = GPIO.input(pin)

   # Along with the pin dictionary, put the message into the template data dictionary:
   templateData = {
      'pins' : pins
   }

   return render_template('main.html', **templateData)

if __name__ == "__main__":
   app.run(host='0.0.0.0', port=80, debug=True)

Просмотреть исходный код

Создание HTML-файла 

Хранение HTML-тегов отдельно от вашего Python-скрипта – это способ поддерживать организованность вашего проекта.

Flask использует шаблонизатор Jinja2, который вы можете использовать для отправки динамических данных из вашего Python-скрипта в HTML-файл.

Создайте новую папку с именем templates:

pi@raspberrypi:~/web-server $ mkdir templates
pi@raspberrypi:~/web-server $ cd templates
pi@raspberrypi:~/web-server/templates $

Создайте новый файл с именем main.html.

pi@raspberrypi:~/web-server/templates $ nano main.html

Скопируйте и вставьте следующий шаблон на ваш Pi:

<!DOCTYPE html>
<head>
   <title>RPi Web Server</title>
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
   <!-- Optional theme -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>

<body>
   <h1>RPi Web Server</h1>
   {% for pin in pins %}
   <h2>{{ pins[pin].name }}
   {% if pins[pin].state == true %}
      is currently <strong>on</strong></h2><div class="row"><div class="col-md-2">
      <a href="/{{pin}}/off" class="btn btn-block btn-lg btn-default" role="button">Turn off</a></div></div>
   {% else %}
      is currently <strong>off</strong></h2><div class="row"><div class="col-md-2">
      <a href="/{{pin}}/on" class="btn btn-block btn-lg btn-primary" role="button">Turn on</a></div></div>
   {% endif %}
   {% endfor %}
</body>
</html>

Просмотреть исходный код

Запуск веб-сервера 

Чтобы запустить ваш веб-сервер на Raspberry Pi, перейдите в папку, содержащую файл app.py:

pi@raspberrypi:~/web-server/templates $ cd ..

Затем выполните следующую команду:

pi@raspberrypi:~/web-server $ sudo python app.py

Ваш веб-сервер должен запуститься немедленно!

Запуск веб-сервера Python Flask на Raspberry Pi

Демонстрация 

Откройте адрес вашего Raspberry Pi в браузере, введя его IP-адрес, в моем случае: http://192.168.1.98/.

Вот видео-демонстрация работы веб-сервера.

Надеемся, что это руководство оказалось для вас полезным.