Взаимодействие с GPIO, через веб страницу ​

Для того, чтобы взаимодействовать с GPIO-портами, нам необходимо модифицировать код серверной части.

Важно: Об установке библиотек для взаимодействия с GPIO подробнее рассказывается в главе 3.3.4.

Модифицированный код выглядит следующем образом:

import RPi.GPIO as GPIO
from flask import Flask, render_template, request
app = Flask(__name__)
GPIO.setmode(GPIO.BOARD)
#определить актуаторы GPIO
ledRed = 8
ledYlw = 10
ledGrn = 16
#Инициализировать переменные состояния GPIO
ledRedSts = 0
ledYlwSts = 0
ledGrnSts = 0
# Определить пины на выход
GPIO.setup(ledRed, GPIO.OUT)
GPIO.setup(ledYlw, GPIO.OUT)
GPIO.setup(ledGrn, GPIO.OUT)
# Выключить все пины
GPIO.output(ledRed, GPIO.LOW)
GPIO.output(ledYlw, GPIO.LOW)
GPIO.output(ledGrn, GPIO.LOW)

@app.route("/")
def index():
  # Read Sensors Status
  ledRedSts = GPIO.input(ledRed)
  ledYlwSts = GPIO.input(ledYlw)
  ledGrnSts = GPIO.input(ledGrn)
  templateData = {
             'title' : 'GPIO output Status!',
             'ledRed'  : ledRedSts,
             'ledYlw'  : ledYlwSts,
             'ledGrn'  : ledGrnSts,
       }    return render_template('index.html', **templateData)

@app.route("/<deviceName>/<action>")
def action(deviceName, action):
  if deviceName == 'ledRed':
    actuator = ledRed
  if deviceName == 'ledYlw':
    actuator = ledYlw
  if deviceName == 'ledGrn':
    actuator = ledGrn

  if action == "on":
    GPIO.output(actuator, GPIO.HIGH)
  if action == "off":
    GPIO.output(actuator, GPIO.LOW)

  ledRedSts = GPIO.input(ledRed)
  ledYlwSts = GPIO.input(ledYlw)
  ledGrnSts = GPIO.input(ledGrn)

  templateData = {
             'ledRed'  : ledRedSts,
             'ledYlw'  : ledYlwSts,
             'ledGrn'  : ledGrnSts,
  }
  return render_template('index.html', **templateData)
if __name__ == "__main__":
  app.run(host='0.0.0.0', port=80, debug=True)

Код веб-страницы будет выглядеть следующим образом:

<!DOCTYPE html>
  <head>
     <title>GPIO Control</title>
     <link rel="stylesheet" href='../static/style.css'/>
  </head>
  <body>
    <h1>Actuators</h1>
    <h2> Status </h2>
    <h3> RED LED ==>  {{ ledRed  }}</h3>
    <h3> YLW LED ==>  {{ ledYlw  }}</h3>
    <h3> GRN LED ==>  {{ ledGrn  }}</h3>
    <br>
    <h2> Commands </h2>
    <h3>
      RED LED Ctrl ==>
      <a href="/ledRed/on" class="button">TURN ON</a>
      <a href="/ledRed/off"class="button">TURN OFF</a>
    </h3>
    <h3>
      YLW LED Ctrl ==>
      <a href="/ledYlw/on" class="button">TURN ON</a>
      <a href="/ledYlw/off"class="button">TURN OFF</a>
    </h3>
    <h3>
      GRN LED Ctrl ==>
      <a href="/ledGrn/on" class="button">TURN ON</a>
      <a href="/ledGrn/off"class="button">TURN OFF</a>
    </h3>

  </body>
</html>

К веб-странице возможно подключить каскадные таблицы стилей (css), и в них настроить внешний вид каждого элемента страницы. Для этого требуется создать файл style.css в папке static и добавить в него следующий код:

.button {
  font: bold 15px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

Этот код изменяет внешний вид кнопок.