728x90
아두이노 코드
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266HTTPClient.h>
#include "DHT.h"
#define PIN_DHT D3
DHT DHTsensor(PIN_DHT, DHT11);
/*
#ifndef STASSID // ifndef와 endif는 중복이 되지 않게 방지 (여기선 wifi아디,비번이라 그런 거 같음)
#define STASSID "" //와이파이 검색했을때 뜨는 이름
#define STAPSK "" //패스워드
#endif
*/
const char* ssid = "";
const char* password = "";
const char* host = "";
// byte mac[6];
int t = 0;
void setup() {
DHTsensor.begin();
delay(1000);
Serial.begin(115200);
Serial.println();
Serial.print("connecting to ");
Serial.println(ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
Serial.print("connecting to ");
Serial.println(host);
}
void loop() {
WiFiClient client;
HTTPClient http;
String getData, Link, humi, temp;
humi = String(DHTsensor.readHumidity());
temp = String(DHTsensor.readTemperature());
getData = "?temp=" + String(temp) + "&humi=" + String(humi);
Link = "" + getData;
client.print(String("GET ") + Link + " HTTP/1.1\r\n" + "\r\n" + "Connection: close\r\n\r\n");
Serial.println(getData);
int httpCode = http.GET(); //Send the request
String payload = http.getString();
/* if(millis()- t >5000){
int httpCode = http.GET();
String payload = http.getString();
t = millis();
} */
http.end();
delay(100);
}
php - DB값 삽입
<?php
$conn = mysqli_connect("", "", "", "");
$timestamp = date('Y-m-d H:i:s', time());
$query = "insert into temp(temp,humi,timestamp) values(".$_GET['temp'].",".$_GET['humi'].",'".$timestamp."');";
$result = mysqli_query($conn, $query);
?>
php - view
<center>
<?php
header('Content-Type: text/html; charset=UTF-8');
$conn = mysqli_connect("", "", "", "");
$query = "select * from temp order by timestamp desc limit 20";
$result = mysqli_query($conn, $query);
$count = mysqli_num_rows($result);
echo "<table border=1 width=500>";
echo "<tr><td colspan=4>입력된 데이터의 갯수는 " . $count . "개 입니다!</td></tr>";
echo "<tr><th>번호</th><th>온도('C)</th><th>습도(%)</th><th>업로드시간</th></tr>";
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td>".$row['id']."</td><td>".$row['temp']."</td><td>".$row['humi']."</td><td>".$row['timestamp']."</td></tr>";
}
echo "</table>";
include '1graph.php';
?>
</center>
php - view를 google api 활용하여 차트로 나타내기
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<?php
// 에러가 발생하면 내용 표시
error_reporting(E_ALL);
ini_set('display_errors', '1');
$conn = mysqli_connect("", "", "", "");
if (!$conn) {
die("Database Connect Error: " . mysqli_connect_error());
}
//echo "Database Connected.<br><br>";
$sql = "SELECT * FROM temp limit 20";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$data_array[] = $row;
}
$chart = json_encode($data_array);
} else {
echo "No Data";
}
//echo $chart;
mysqli_close($conn);
//일단 여기까지 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ>>
?>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chart_array = <?php echo $chart; ?>;
//console.log(JSON.stringify(chart_array))
var header = ['timestamp', 'temp', 'humi'];
var row = "";
var rows = new Array();
jQuery.each(chart_array, function(index, item) {
row = [
item.timestamp,
Number(item.temp),
Number(item.humi)
];
rows.push(row);
});
var jsonData = [header].concat(rows);
var data = new google.visualization.arrayToDataTable(jsonData);
var options = {
title: 'Temp & Humi',
hAxis: {
title: 'Time'
},
series: {
0: { targetAxisIndex: 0 },
1: { targetAxisIndex: 1 }
},
vAxes: {
0: {
title: '',
viewWindow: { min: -30, max: 50 }
},
1: {
title: '',
viewWindow: { min: -30, max: 100 }
}
}
//,
//curveType: 'function',
//legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px"></div>
</body>
</html>
728x90