30.Aug.2023
After the data from the MCU is recorded in the database, a php file is required to send this data to clients. The name of this file is fetch_data.php. This file generates data set in JSON format. This data set is an array type variable. It contains two sets of values: "temp" and "humd".
We pull the data array in JSON format from the iot.milivolt.com.tr server and graphically transform it in the index.html file. The javascript program called app.js draws the temperature and humidity information from the database with the help of the fetch_data.php file in the background of the server and draws the graph in the index.html file.
Below is the content of the fetch_data.php file:
<?php
$servername="localhost";
$username="username";
$password="123456789";
$dbname="databasename";
$conn=new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Error connecting to database: " . $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();
?>
The app.js file content is below:
// Makes a request to the PHP file using AJAX to retrieve the data
function fetchData() {
$.ajax({
url: "fetch_data.php", // Write the name of your PHP file that will fetch the data here
method: "GET",
dataType: "json",
success: function(data) {
updateCharts(data);
},
error: function(error) {
console.log("An error occurred while retrieving data:", error);
}
});
}
// Uses Chart.js to update canvases
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 Values",
data: deg1Values,
borderColor: "blue",
fill: false
}]
}
});
const deg2Chart=new Chart(document.getElementById("deg2Chart").getContext("2d"), {
type: "line",
data: {
labels: labels,
datasets: [{
label: "Deg2 Values",
data: deg2Values,
borderColor: "green",
fill: false
}]
}
});
}
//Updates data at regular intervals
setInterval(fetchData, 3000); // pulls data every 3 seconds
Below is the content of the index.html file:
<!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>
Mobile programming Fundamentals for Control Applications
Fundamentals of mobile application development for control of electronic systems
05.04.2023
With the Flutter-Dart language, can we write an artificial intelligence program that takes a picture and lists the objects in it?
Flutter-Dart language, artificial intelligence program
06.04.2023
Writing Applications that control Electronic Devices with Flutter-Dart Programming Language
Controlling Electronic Devices remotely
06.04.2023
Controlling Wifi Devices with Flutter-Dart
Control of remote devices with Android apps, Wifi-based control applications
07.04.2023
Developing an Application to Send Data to a Bluetooth-enabled Thermal Printer with Flutter
Mobile app developed with Flutter explains the step-by-step process of sending text to a Bluetooth-enabled thermal printer. Contains information about printer commands and Bluetooth communications
11.01.2024
Application Development Example with Flutter and Arduino
Learn to connect mobile devices with embedded systems! In this article, learn step by step how to develop an app using Flutter and Arduino
01.03.2024
Bluetooth Speaker Project with Flutter - Audio data transfer
In this project we will try to understand how the Bluetooth speaker system is designed and how to develop it. We will examine the basics of Android programming, MCU programming-embedded system design.
24.07.2023
Extracting Data from Database and Creating Graphs with Flutter and PHP
Learn how to pull data from a database and create a line chart using Flutter and PHP
27.08.2023
IoT System Design 1 – Temperature and Humidity Monitoring System
IoT system design with ESP 12f. Monitoring of temperature, humidity in web & mobile. Arduino, DHT11 sensor.
30.08.2023
IoT System Design 2- Sending Temperature and Humidity Data to Web Server with Arduino
Learn the steps to send temperature and humidity data from DHT11 sensor with Arduino to web server via ESP 12f
30.08.2023
IoT System Design 3- Data Processing on the Web Server Side
Learn to transmit data from DHT11 sensor with Arduino to web server via ESP8266 and save it to database with PHP.
30.08.2023
IoT System Design 5- Mobile Application Visualizing IoT Data with Flutter
Code descriptions of an application that pulls, graphs, and lists IoT data with Flutter.
30.08.2023
Mobile Application Development for Smart Homes
In this article, you can find the steps and examples of mobile application development using WiFi communication
01.09.2023
Developing Mobile Applications with Artificial Intelligence – Voltmeter Interface Application
The mobile application developed with artificial intelligence visualizes the microcontroller volt measurement with numerical data.
12.09.2023
Mobile Application Interface Development Study for Smart Homes
Ways to develop mobile applications with Flutter for smart home and workplace systems
16.09.2023
Designing an Air Quality Measurement System 1 – Basic definitions of Air Quality
Air Quality Measurement System design and air quality parameters. PM2.5, CO, NO2, O3, SO2 measurement
02.10.2023
Designing an Air Quality Measurement System 2- MQ-135 Gas Sensor Review
MQ-135 Gas Sensor: A powerful sensor used to monitor air quality and detect gases. Offers precise measurement
02.10.2023
Designing an Air Quality Measurement System 3 - Measurement with MQ-135 and DHT-11
Designing an Air Quality Measurement System - Measurement with MQ-135 and DHT-11.
10.10.2023
Designing an Air Quality Measurement System 4 – Air Quality Monitoring Mobile Application
Air Quality Monitoring Mobile Application. Receive air quality data via Bluetooth, parse it in JSON format
10.10.2023