Team LaSqurell: Iurea Bogdan Iulian, Cosmin-Constantin Matei

Published May 27, 2020

Get Humidity/Temperature from Web

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

IntermediateProtip1,112

Things used in this project

Hardware components

RGB LED

Through Hole Resistor, 150 ohm

Resistor 5k ohm

DHT11 Temperature & Humidity Sensor (4 pins)

Raspberry Pi 4

Story

About

The idea of the project is very simple. After accessing the web page, you can see in real time what temperature and humidity is in the area of the DHT11 sensor used by the Raspberry Pi.

Sending a request to the server will light up the LED in a certain color depending on the route of the request. Then the client will get a response with the requested value and he will also be able to see the color of the diode in the HTML L.E.D. element.

View of circuit implementation

Circuit implementation

Accesing the web page

Sending a GET request with '/' to the server will automatically light up the R LED attached to the board.

This is what happens on the board after the request.

BoardView - GET '\' request

After getting the response from the server, you will be able to check the temperature and humidity around the board using the blue(humidity) or green(temperature) buttons. Pressing one of the buttons will result in sending requests to the server once every second continuously until the stop button is pressed or until the page is closed/reloaded.

Main view of the page

Pressing the blue button

Will change text and L.E.D. colors to blue and display the humidity around the sensor.

1 / 2 • Page View after blue button is pressed

Pressing the green button

Will change text and L.E.D. colors to green and display the temperature around the sensor.

1 / 2 • Page view after green button is pressed

Pressing the red-stop button

Will change L.E.D. color to red, set the text value to default and will stop receiving updates about temperature/humidity.

1 / 2 • Page view after red-stop button is pressed

Stop the server using Ctrl+C

After the server stops, the LED is turned off and the GPIO pins are cleaned.

Board view after server is stopped

Code

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()

<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

1 project • 1 follower

Cosmin-Constantin Matei

1 project • 1 follower

Get Humidity/Temperature from Web

Things used in this project

Hardware components

Story

Schematics

BreadBoard_SchematicImage

Code

server.py

index.html

Credits

Iurea Bogdan Iulian

Cosmin-Constantin Matei

Comments

Embed the widget on your own site

Get Humidity/Temperature from Web

Get Humidity/Temperature from Web

Things used in this project

Hardware components

Story

Schematics

BreadBoard_SchematicImage

Code

server.py

index.html

Credits

Iurea Bogdan Iulian

Cosmin-Constantin Matei

Comments

Related channels and tags