IoT Sistemi Tasarımı 4- Web Arayüzü Oluşturma

IoT Sistemi Tasarımı 4- Web Arayüzü Oluşturma

Mobil Programlama   Agu 30, 2023  Okuma listesine ekle

MCU'dan gelen veriler veritabanına kayıt edildikten sonra, bu verilerin istemcilere gönderilebilmesi için bir php dosya gerekir. Bu dosyanın adı, fetch_data.php'dir. Bu dosya, JSON formatında data seti üretir. Bu data seti bir dizi tipinde değişkendir. "temp" ve "humd" olmak üzere iki adet değerler dizisi barındırır.

Mysql Tablophp dosyaları, javascript dosyası

Iot.milivolt.com.tr sunucusundan JSON formatında veri dizisini çekerek index.html dosyasında grafiksel hale getiriyoruz. app.js adlı javascript programı, sunucunun geri planında fetch_data.php dosyası yardımıyla veritabından sıcaklık ve nem bilgilerini çekerek index.html dosyasında grafik çizer. 

fetch_data.php dosyası içeriği aşağıda:

<?php
$servername = "localhost";
$username = "username";
$password = "123456789";
$dbname = "databasename";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Veritabanına bağlanırken hata oluştu: " . $conn->connect_error);
}

$sql = "SELECT * FROM dht ORDER BY id DESC LIMIT 5";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = array(
            "deg1" => (int)$row["temp"],
            "deg2" => (int)$row["humd"]
        );
    }
}

echo json_encode($data);

$conn->close();
?>

app.js dosyası içeriği aşağıda:

// Veriyi almak için AJAX kullanarak PHP dosyasına istek yapar
function fetchData() {
  $.ajax({
    url: "fetch_data.php",  // Veriyi çekecek PHP dosyanızın adını buraya yazın
    method: "GET",
    dataType: "json",
    success: function(data) {
      updateCharts(data);
    },
    error: function(error) {
      console.log("Veri çekilirken hata oluştu:", error);
    }
  });
}

// Canvasları güncellemek için Chart.js kullanır
function updateCharts(data) {
  const labels = data.map(entry => entry.timestamp);
  const deg1Values = data.map(entry => entry.deg1);
  const deg2Values = data.map(entry => entry.deg2);

  const deg1Chart = new Chart(document.getElementById("deg1Chart").getContext("2d"), {
    type: "line",
    data: {
      labels: labels,
      datasets: [{
        label: "Deg1 Değerleri",
        data: deg1Values,
        borderColor: "blue",
        fill: false
      }]
    }
  });

  const deg2Chart = new Chart(document.getElementById("deg2Chart").getContext("2d"), {
    type: "line",
    data: {
      labels: labels,
      datasets: [{
        label: "Deg2 Değerleri",
        data: deg2Values,
        borderColor: "green",
        fill: false
      }]
    }
  });
}

// Belirli aralıklarla veriyi günceller
setInterval(fetchData, 3000);  // 3 saniyede bir veri çeker

 

 

index.html dosyası içeriği aşağıda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>IoT Data from ard-uno-wifi esp 12f</title>
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6">
        <h2>Temperature Graph</h2>
        <canvas id="deg1Chart"></canvas>
      </div>
      <div class="col-md-6">
        <h2>Humidty Graph</h2>
        <canvas id="deg2Chart"></canvas>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="app.js"></script>
</body>
</html>

Etiketler