![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/03\/featured-image.jpg?resize=701%2C394&quality=100&strip=all&ssl=1\")
<\/p>\nIn this project you\u2019ll create a standalone web server with a Raspberry Pi\u00a0that can toggle two LEDs. You can\u00a0replace those LEDs with any output (like a relay or a transistor).<\/p>\n
In order to create the web server you will be using a Python microframework called Flask.<\/p>\n
<\/p>\n
Here\u2019s the hardware that you need to complete\u00a0this project:<\/p>\n
![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/03\/RPi3.jpg?resize=299%2C254&quality=100&strip=all&ssl=1\")
<\/p>\n
You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p> Before you continue reading this project, please\u00a0make sure you have Raspbian Operating System installed in your Raspberry Pi.<\/p>\n You can read my Getting Started with the Raspberry Pi Guide<\/a><\/strong>\u00a0to install Raspbian and complete the basic setup.<\/p>\n We’re going to use a Python microframework called Flask<\/a> to turn the Raspberry Pi into web server.<\/p>\n To\u00a0install Flask, you’ll need to have pip installed. Run the following commands to update your Pi and install pip:<\/p>\n Then, you use pip to install Flask and its dependencies:<\/p>\n The schematics for this project are fairly straightforward.\u00a0Simply connect two LEDs to pins GPIO 23 and GPIO 24, as the figure below illustrates.<\/p>\n This is the core script of our application. It sets up the web server and actually interacts with the Raspberry Pi GPIOs.<\/p>\n To keep everything organized, start by creating a new folder:<\/p>\n Create a new file called app.py<\/em>.<\/p>\n Copy and paste\u00a0the following script to your Raspberry Pi (this code is based on Matt Richardson great example<\/a>). View raw code<\/a><\/p><\/p>\n Keeping HTML tags separated from your\u00a0Python script is how you\u00a0keep your project organized.<\/p>\n![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\nBasic Raspberry Pi Setup<\/h2>\n
Installing Flask<\/h2>\n
pi@raspberrypi ~ $ sudo apt-get update\r\npi@raspberrypi ~ $ sudo apt-get upgrade\r\npi@raspberrypi ~ $ sudo apt-get install python-pip python-flask<\/pre>\n
pi@raspberrypi ~ $ sudo pip install flask<\/code><\/pre>\nSchematics<\/h2>\n
![\"RPi](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/03\/RPi-Web-Server-outputs_bb.jpg?resize=572%2C624&quality=100&strip=all&ssl=1\")
<\/p>\nCreating the Python\u00a0Script<\/h2>\n
pi@raspberrypi ~ $ mkdir web-server\r\npi@raspberrypi ~ $ cd web-server\r\npi@raspberrypi:~\/web-server $\r\n<\/code><\/pre>\npi@raspberrypi:~\/web-server $ nano app.py<\/code><\/pre>\n
\n'''\n\nAdapted excerpt from Getting Started with Raspberry Pi by Matt Richardson\n\nModified by Rui Santos\nComplete project details: http:\/\/randomnerdtutorials.com\n\n'''\n\nimport RPi.GPIO as GPIO\nfrom flask import Flask, render_template, request\napp = Flask(__name__)\n\nGPIO.setmode(GPIO.BCM)\n\n# Create a dictionary called pins to store the pin number, name, and pin state:\npins = {\n 23 : {'name' : 'GPIO 23', 'state' : GPIO.LOW},\n 24 : {'name' : 'GPIO 24', 'state' : GPIO.LOW}\n }\n\n# Set each pin as an output and make it low:\nfor pin in pins:\n GPIO.setup(pin, GPIO.OUT)\n GPIO.output(pin, GPIO.LOW)\n\n@app.route("\/")\ndef main():\n # For each pin, read the pin state and store it in the pins dictionary:\n for pin in pins:\n pins[pin]['state'] = GPIO.input(pin)\n # Put the pin dictionary into the template data dictionary:\n templateData = {\n 'pins' : pins\n }\n # Pass the template data into the template main.html and return it to the user\n return render_template('main.html', **templateData)\n\n# The function below is executed when someone requests a URL with the pin number and action in it:\n@app.route("\/<changePin>\/<action>")\ndef action(changePin, action):\n # Convert the pin from the URL into an integer:\n changePin = int(changePin)\n # Get the device name for the pin being changed:\n deviceName = pins[changePin]['name']\n # If the action part of the URL is "on," execute the code indented below:\n if action == "on":\n # Set the pin high:\n GPIO.output(changePin, GPIO.HIGH)\n # Save the status message to be passed into the template:\n message = "Turned " + deviceName + " on."\n if action == "off":\n GPIO.output(changePin, GPIO.LOW)\n message = "Turned " + deviceName + " off."\n\n # For each pin, read the pin state and store it in the pins dictionary:\n for pin in pins:\n pins[pin]['state'] = GPIO.input(pin)\n\n # Along with the pin dictionary, put the message into the template data dictionary:\n templateData = {\n 'pins' : pins\n }\n\n return render_template('main.html', **templateData)\n\nif __name__ == "__main__":\n app.run(host='0.0.0.0', port=80, debug=True)\n<\/code><\/pre>\n\tCreating the HTML File<\/h2>\n
![\"python](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/03\/python-launch-web-server.png?resize=668%2C281&quality=100&strip=all&ssl=1\")
<\/p>\n![\"rpi](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/03\/rpi-web-server-browser.png?resize=384%2C397&quality=100&strip=all&ssl=1\")
<\/p>\n