PYTHON AND FLASK @ 史坦利Stanley程式Maker的部落格

參考資料:http://dreamingecho.es/blog/internet-of-things-with-python-and-flask
Tutorials For IoT-Makers

(1) USING TEMPLATES AND STYLING THINGS

We store all the HTML templates in a special directory called templates, and
all our public content (like stylesheets, javascripts, images...) in a special directory called static

To do some quick styling, I'm going to use Bootstrap with the Jumbotron Narrow example HTML,
so we only have to download the files and put it into our static folder.

Once we got all the Bootstrap files on the static folder, we're going to integrate it with the application.
Firstly, let's open the main.py file and change our index method with this lines:

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

we have replaced the return "Hello World!" thing for return render_template('index.html' )

index.html file

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">

  <title>Flask Internet of Things App</title>

  <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">

  <link href="{{ url_for('static', filename='css/jumbotron-narrow.css') }}" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

  <div class="container">

    <!-- A bunch of magic HTML code :) -->

  </div>
  <!-- /container -->
</body>

</html>

we're going to create a very simple class in the root of our application called raspi.py. With the help of the RPi.GPIO library, we're going to code some very simple methods to be able to read the sensor value and modify the state of the LED. The content of the class will looks like this:

import RPi.GPIO as GPIO

SENSOR_PIN  = 22
LED_PIN     = 23

class Raspi(object):

    def __init__(self):
      GPIO.setmode(GPIO.BCM)
      GPIO.setup(SENSOR_PIN, GPIO.IN)
      GPIO.setup(LED_PIN, GPIO.OUT)

    def read_sensor(self):
      return GPIO.input(SENSOR_PIN)

    def change_led(self, value):
      GPIO.output(LED_PIN, value)

Ok, with this done, let's modify our main.py file to use this new class and be able to interact with the GPIOvia web. At the end we'll have something like this:

import raspi
from flask import *

app = Flask(__name__)
raspi = raspi.Raspi()

# Index route
@app.route("/")
def index():
  # Read the value of the sensor
  value = raspi.read_sensor()
  # Render the index.html template passing the value of the sensor
  return render_template('index.html', sensor_value=value)

# About route
@app.route("/about")
def about():
  # Render the about.html template
  return render_template('about.html')

# Change LED value POST request.
@app.route("/change_led_status/<int:status>", methods=['POST'])
def change_led_status(status):
  # Check the value of the parameter
  if status == 0:
    raspi.change_led(False)
  elif status == 1:
    raspi.change_led(True)
  else:
    return ('Error', 500)
  return ('', 200)

# Starts the app listening to port 5000 with debug mode
if __name__ == "__main__":
  app.run(host="0.0.0.0", debug=True)

To send the value of this parameter we're gonna use some jQuery to do some POST requests to the route depending of the button we click. Something like this:

$(document).ready(function() {
  $('#set_on').click(function() {
    $.post('/change_led_status/1');
  });
  $('#set_off').click(function() {
    $.post('/change_led_status/0');
  });
});