HTML CSS Frontend Flask Python BackEnd connect to Alexa/HomeAutomation IoT¶

lets us start by what we are trying to make we are trying to make a front end in HTML and CSS and for Backend we use python Flask intergrate with HomeAutomation alexa

Step 1 : Front End Code HTML and CSS create Button¶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    .button {
        text-align:center;
            }

    .l_lamp {
        color:black;
        font-size: x-large;
        padding: 15px 32px;
        text-align:center;

            }

    .title {
        color:red;
        text-align:center;
    }

    .mybutton {
          background-color: black;
          border: 1px ;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          border-radius: 12px;
          border: 2px solid ##555555;
            }

      .mybutton:hover
      {
           background-color: green;
           color: white;
      }
      .mybutton{width :30%}

    </style>
</head>

<body>
    <div class="title" id="1">
        <h1 class="title">Home Automation System
            <hr />
            <br />
    </div>

    <div class="button" id="2">
        <form action="/home" method="post">

        <label class="l_lamp">
            <b>Lamp</b>
        </label>

        <input type="submit" name="btn_on" value="On" class="mybutton">
        <input type="submit" name="btn_on" value="Off" class="mybutton">

        </form>
    </div>
</body>
</html>

Step 2: BackEnd¶

from flask import Flask, render_template, request, url_for, redirect
import os

app = Flask(__name__)


@app.route("/home", methods=["GET", "POST"])
def home():
    if request.method == "POST":
        print("Button was pressed ")

        if request.form['btn_on'] == "On":
            print("Pressed On")
            return render_template("onoff.html")

        if request.form['btn_on'] == "Off":
            print("Pressed On")
            return render_template("onoff.html")


    return render_template("onoff.html")


if __name__ == '__main__':
    app.run(debug=True)

Step 3: Make your Ip Address public suing Ngrok¶

make sure to foreward your request to port 5000 and with the Url you get from ngrok make sure to add .home and the webpage should open on your phone

Step 4 : Connect Alexa¶

Use IFTTT go to alexa in IF part and for This part make sure to webhook make sure to select method as post and add your public url obtained from Ngrok and make sure to add /5000. once you are done with that add body parameter as on and it works like charm.

Pythonist

Sunday, April 14, 2019