TechnikWeber
Posts: 1
Joined: Thu Jul 18, 2019 2:45 pm

Tutorial | Flask gpio control + mjpg-streamer

Thu Jul 18, 2019 2:54 pm

Hello,

i just want to share how i did a camerastream + gpio control via HTML site...
(it works with a wide range of cameras!)

MOST of this is not written by me, its copy paste from the internet.

_______________________________________________________________________________________________

Code: Select all

START: 
Install mjpg-streamer

# Update & Install Tools
sudo apt-get update
sudo apt-get upgrade -y
sudo apt-get install build-essential libjpeg8-dev imagemagick libv4l-dev cmake -y

# Clone Repo in /tmp
cd /tmp
git clone https://github.com/jacksonliam/mjpg-streamer.git
cd mjpg-streamer/mjpg-streamer-experimental

# Make
make
sudo make install

# Run
/usr/local/bin/mjpg_streamer -i "input_uvc.so -r 640x480 -d /dev/video0 -f 30 -q 80" -o "output_http.so -p 8080 -w /usr/local/share/mjpg-streamer/www"

_______________________________________________________________________________________________

// Autostart

sudo nano /etc/init.d/mjpg_streamer

INHALT:

#!/bin/sh
# /etc/init.d/mjpg_streamer
### BEGIN INIT INFO
# Provides:          mjpg_streamer
# Required-Start:    $all
# Required-Stop:     $all
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: MJPG_Streamer_autostart
### END INIT INFO
start()
{
 modprobe bcm2835-v4l2
 sleep:2
 echo "Starting mjpg-streamer..."
 /usr/local/bin/mjpg_streamer -i "input_uvc.so -r 640x480 -d /dev/video0 -f 30 -q 80" -o "output_http.so -p 8080 -w /usr/local/share/mjpg-streamer/www" >/dev/null 2>&1 &
}
stop()
{
 echo "Stopping mjpg-streamer..."
 kill -9 $(pidof mjpg_streamer) >/dev/null 2>&1
}
case "$1" in
 start)
   start
   ;;
 stop)
   stop
   ;;
 restart)
   stop
   start
   ;;
 *)
   echo "Usage: $0 {start|stop|restart}"
   ;;
esac
exit 0

// ENDE

sudo chmod +x /etc/init.d/mjpg_streamer

sudo update-rc.d mjpg_streamer defaults

sudo service mjpg_streamer start

sudo service mjpg_streamer stop

_______________________________________________________________________________________________

Check ip of pi in browser... Port 8080 e.g: 192.168.0.1:8080
_______________________________________________________________________________________________

Now install Flask and python:

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

pi@raspberrypi ~ $ sudo pip install flask

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

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

_______________________________________________________________________________________________

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
   }


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

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

_______________________________________________________________________________________________


<!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+a5WDVnPi2lkF$   <!-- Optional theme -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9E$   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1$</head>

<body>
   <h1>Rapsi RC-Car Control</h1>
   <br></br>
   <iframe src="http://192.168.1.171:8080/stream_simple.html" width="640" height="480" frameborder="0" scrolling="no" align="left" id="ImgStream"></i$   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   <br></br>
   {% 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>

_______________________________________________________________________________________________

Launch

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

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

Check if running?
ps -ef | grep python
____________________________________________________________________

Check ip of pi in browser... Port 80

sudo nano /lib/systemd/system/dummy.service

_______________________________________________________________________________________________

[Unit]
Description=Dummy Service
After=multi-user.target
Conflicts=getty@tty1.service

[Service]
Type=simple
ExecStart=/usr/bin/python3 /home/pi/web-server/app.py
StandardInput=tty-force

[Install]
WantedBy=multi-user.target

_______________________________________________________________________________________________

sudo systemctl daemon-reload

sudo systemctl enable dummy.service

sudo systemctl start dummy.service

sudo systemctl status dummy.service

_______________________________________________________________________________________________

sudo systemctl stop dummy.service #To stop running service
sudo systemctl start dummy.service #To start running service
sudo systemctl restart dummy.service #To restart running service

_______________________________________________________________________________________________

Have fun!

Return to “Automation, sensing and robotics”