Arduino Proje #1
Projedeki amacimiz Arduino ve DHT11 sensörü yardimi ile hava sicakligini ölcüp, kullanici icin web’de güzel bir diyagram cizmek. Projeyi github’da paylastim, isteyenler kaynak kodlarina oradan göz atabilir.
https://github.com/InversionTyt/ArduinoChart
Proje gereksinimleri:
- Arduino IDE
- Visual Studio Code
- Node.js
- Arduino Uno
- DHT 11 Sensor
- Breadboard SYB130 + Baglanti kablolari ve Direnc
Proje iki katmandan olusuyor. Ilk katman ‘server’ tarafi olsun. Bu katmanda sensör bilgilerini arduino ile okuyarak, ikinci katmana yani ‘client’ tarafina tasimamiz lazim.
- Client katmani: Server’dan gelen sensör bilgilerini isleyip diyagrami cizmek
1. Katman (Server)
Arduino ve Sensörü resimdeki gibi baglayiniz:
DHT 11 sensörünün 4 adet pini bulunmaktadir. Bunlardan sadece 3 tanesini kullanacagiz.
Birinci Pin: 5 Volt
Ikinci Pin: Veri okuma pini, kendimiz belirliyebilirz. Ben 4 kullandim.
Ücüncü Pin: Bos
Dördüncü Pin: GND
Ardindan Arduino IDE’yi acip biraz C++ kodlayalim.
Öncelikle gerekli kütüphaneleri ve sensörümüzü tanimliyoruz:
C++:
// Include the libraries:
#include <Adafruit_Sensor.h>
#include <DHT.h>
#define DHTPIN 4 // DHT pin
#define DHTTYPE DHT11 // DHT 11, DHT Sensor Type
DHT dht = DHT(DHTPIN, DHTTYPE); // Initialize DHT sensorArdindan serial baglanti ve sensörü baslatiyoruz:
C++:
void setup()
{
Serial.begin(9600); // Begin serial communication at baud rate 9600
dht.begin(); // Setup sensor
}Loop icinde her 4000ms (4 saniye) de bir sicaklik ve nem verilerini sensörden okuyoruz ve serial sekilde yazdiriyoruz:
C++:
void loop()
{
delay(4000); // Wait between measurements
float temperature = dht.readTemperature(); // Read the temperature
float humidity = dht.readHumidity(); // Read the humidity
// Check if any reads failed
if (isnan(humidity) || isnan(temperature))
{
Serial.println("Failed to read from DHT sensor!");
return;
}
Serial.print("Temperature: ");
Serial.println(temperature);
Serial.print("Humidity: ");
Serial.println(humidity);
}Arduino ile isimiz bitmistir. IDE üzerinden kodu Arduino Uno'ya yükleyip, IDE yi kapatabiliriz.
Simdi JavaScript kullanarak kücük bir webservice yazacagiz sonrasinda Arduino’nun Serial Port üzerinden gönderdigi sensör verilerini socket.io kütüphanesini kullanarak client tarafina gönderecegiz. Webservice localhost:3000 portunda calisiyor olacak.
SerialPort kütüphanesini kullanarak bilgisayarimizin Serial Portunu dinliyoruz yani Arduino'nun gönderdigi verileri okuyacagiz. Yeni veri geldiginde parser.on('data') fonksiyonu calisacaktir ve io.emit()diyerek verimizi client tarafina gönderiyoruz.
JavaScript:
const express = require('express');
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const moment = require('moment')
const SerialPort = require('serialport');
app.use(express.static('client'));
const port = new SerialPort('COM3'); // Port your Arduino is connected to
const parser = new SerialPort.parsers.Readline();
port.pipe(parser);
port.on("open", function () {
console.log('Port opened');
parser.on('data', function (data) {
const sensorData = {
temperature: data,
timestamp: moment().unix() // Unix timestamp
}
if (sensorData.temperature.includes("Temperature")) {
sensorData.temperature = sensorData.temperature.replace("Temperature: ", "");
io.emit('temperature-data', sensorData)
}
});
});
http.listen(3000, () => {
console.log('listening on localhost:3000');
});2. Katman (Client)
Basta’da belirtdigim gibi client tarafindaki amacimiz server’dan gelen verileri isleyip, diyagrami cizmek. Diyagrami cizmek icin acik kaynakli diyagram kütüphanesi apexcharts’i kullanacagiz.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TYT - Arduino Temperature Chart</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>TYT - Arduino Temperature Chart</h2>
<div id="temperatureChart"></div>
</div>
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="module" src="chartManager.js"></script>
</html>
JavaScript:
import { temperatureSettings } from './settings/temperature.js';
var socket = io();
var sensorData = [];
var chartData = [];
socket.on('temperature-data', (content) => {
sensorData.push(content);
temperatureChart.updateSeries([{
data: getNewSeries(getLastDate(), getLastTemperature())
}])
})
function getLastTemperature() {
return sensorData.slice(-1)[0].temperature;
}
function getLastDate() {
return sensorData.slice(-1)[0].timestamp;
}
function getNewSeries(date, yAxis) {
var newSerie = [date, yAxis]
chartData.push(newSerie);
return chartData;
}
