Iurea Bogdan IulianCosmin-Constantin Matei
Published

Get Humidity/Temperature from Web

LAN Bottle server that handles HTTP requests using Raspberry Pi 4, Adafruit DHT11 and a RGB LED.

IntermediateProtip69
Get Humidity/Temperature from Web

Things used in this project

Hardware components

RGB LED
×1
Through Hole Resistor, 150 ohm
Through Hole Resistor, 150 ohm
×3
Resistor 5k ohm
×1
DHT11 Temperature & Humidity Sensor (4 pins)
×1
Raspberry Pi 4
×1

Story

Read more

Schematics

BreadBoard_SchematicImage

Contains all the required instructions to set up the modules connections

Code

server.py

Python
In order to run the server file you need to install:
-Python3
-Bottle: Python Web Framework
-Adafruit DHT11 Python Library
-Rpi.GPIO Python Library(if not already installed)
from bottle import route, run, template, request
import RPi.GPIO as GPIO
import Adafruit_DHT


#setarea modului de citire a pinilor
GPIO.setmode(GPIO.BCM)


#setare pin senzor umiditate/temperatura
type = Adafruit_DHT.DHT11
dht11 = 25
GPIO.setup(dht11, GPIO.IN)

#setare pini leduri
GPIO.setup(14, GPIO.OUT)
GPIO.setup(15, GPIO.OUT)
GPIO.setup(18, GPIO.OUT)


#stabilirea rutelor
@route('/')
def index():
    setLedsOnLow()
    GPIO.output(14,GPIO.HIGH)
    return template('index.html')

@route('/umiditate')
def umiditate():
    setLedsOnLow()
    GPIO.output(18,GPIO.HIGH)
    umiditate,temperatura= Adafruit_DHT.read(type, dht11)
    return {'umiditate':umiditate}

@route('/temperatura')
def temperatura():
    setLedsOnLow()
    GPIO.output(15,GPIO.HIGH)
    umidiate,temperatura = Adafruit_DHT.read(type, dht11)
    return {'temperatura':temperatura}

@route('/stop')
def stop():
    setLedsOnLow()
    GPIO.output(14,GPIO.HIGH)
    return {'stop':'Nimic de afisat...'}

def setLedsOnLow():
    GPIO.output(14,GPIO.LOW)
    GPIO.output(15,GPIO.LOW)
    GPIO.output(18,GPIO.LOW)
#start server
run(host = '0.0.0.0', port = '6789')
#la stop server, stinge leduri si curata pini
setLedsOnLow()
GPIO.cleanup()

index.html

HTML
Simple HTML file that uses Bootstrap(web desing) + jQuery(user action handling).
Has to be placed in same directory where server.py is located.
After running the server, acces http://localhost:6789/ and you will get the view of this file with full functionality if raspberry pi external modules are set corectly.
<html>
 
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<title>
    Sisteme cu microprocesoare
</title>
 
<body class="bg-dark">
    <div class="container">
        <div style="margin-top: 200px;">
            <div class="container-fluid mt-1 text-center">
                <div class="btn-group">
                    <button class="mr-1 btn btn-outline-success rounded-pill" onclick="masoaraTemperatura()"> Măsoară
                        temperatura</button>
                    <button class="mr-1 btn btn-outline-danger rounded-pill" onclick="stop()"> Stop</button>
                    <button class="mr-1 btn btn-outline-primary rounded-pill" onclick="masoaraUmiditatea()"> Măsoară
                        umiditatea</button>
                </div>
            </div>
            <div class="row" style="margin-top:10px;">
                <div class="col-4">
                </div>
                <div class="col-4 text-center border border-dark rounded-pill bg-danger" id="LED">
                    <h1 class="display-4 text-dark">L.E.D.</h1>
                </div>
                <div class="col-4">
                </div>
            </div>
            <div class="container text-center">
                <h1 class="display-4 text-secondary" id="afisaj">Nimic de afișat...</h1>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
    </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
    var interval;
    function masoaraTemperatura() {
        clearInterval(interval);
        interval = setInterval(preiaTemperatura, 1000);
    }
    function masoaraUmiditatea() {
        clearInterval(interval);
        interval = setInterval(preiaUmiditatea, 1000);
    }
    function stop() {
        $.getJSON('/stop', function (e) {
            clearInterval(interval);
            $('#afisaj').removeClass('text-secondary');
            $('#afisaj').removeClass('text-primary');
            $('#afisaj').removeClass('text-success');
            $('#afisaj').addClass('text-secondary');
            $('#afisaj').html(e.stop);
            $('#LED').removeClass("bg-success");
            $('#LED').removeClass("bg-primary");
            $('#LED').removeClass("bg-danger");
            $('#LED').addClass("bg-danger");
        });
    }
    function preiaTemperatura() {
        $.getJSON('/temperatura', function (e) {
            if(e.temperatura!=null){
                $('#afisaj').removeClass('text-secondary');
                $('#afisaj').removeClass('text-primary');
                $('#afisaj').removeClass('text-success');
                $('#afisaj').addClass('text-success');
                $('#afisaj').html("Temperatura: "+e.temperatura+"°C");
                $('#LED').removeClass("bg-success");
                $('#LED').removeClass("bg-primary");
                $('#LED').removeClass("bg-danger");
                $('#LED').addClass("bg-success");
            }
        });
    }
    function preiaUmiditatea() {
        $.getJSON('/umiditate', function (e) {
            if(e.umiditate!=null){
                $('#afisaj').removeClass('text-secondary');
                $('#afisaj').removeClass('text-primary');
                $('#afisaj').removeClass('text-success');
                $('#afisaj').addClass('text-primary');
                $('#afisaj').html("Umiditatea din aer: "+e.umiditate+"RH");
                $('#LED').removeClass("bg-success");
                $('#LED').removeClass("bg-primary");
                $('#LED').removeClass("bg-danger");
                $('#LED').addClass("bg-primary");
            }
        });
    }
</script>
 
</html>

Credits

Iurea Bogdan Iulian

Iurea Bogdan Iulian

1 project • 1 follower
Cosmin-Constantin Matei

Cosmin-Constantin Matei

1 project • 1 follower

Comments