|
 |
| |
รวบกวนครับต้องแก้ยังไงทำแล้วไม่แสดงในJustGage ครับโดยดึงข้อมูลจากฐานข้อมูลแบบreal timeครับ |
| |
 |
|
|
 |
 |
|
ผมทำแล้วมันไม่แสดงในgaugesครับ ผมจะทำให้แสดงค่าแบบreal time ครับ
อยากให้แสดงแบบนี้ครับตามลิ้งนี้เลยครับhttp://www.jqueryscript.net/demo/Javascript-Animated-Gauges-Plugin-JustGage/
รูปภาพนี้ที่ทำมันขึ้นแบบนี้ครับโดยดึงจากฐานข้อมูล
โค้ดดึงข้อมูลจากฐานข้อมูล
setest.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php
include("../connentdb.php");
$strSQL = "SELECT * FROM farm ";
$objQuery = mysqli_query($objConnect,$strSQL);
while($objResult = mysqli_fetch_array($objQuery)){
if($_GET['rev']==1){
echo $objResult["ldr"];
exit;
}
if($_GET['rev']==2){
echo $objResult["sensor"];
exit;
}
if($_GET['rev']==3){
echo $objResult["Humidity"];
exit;
}
if($_GET['rev']==4){
echo $objResult["TemperatureC"];
exit;
}
if($_GET['rev']==5){
echo $objResult["TemperatureF"];
exit;
}
}
mysqli_close($objConnect);
?>
</body>
</html>
โค้ดส่วนแสดง
414.php
<!doctype html>
<html>
<head>
<title>Auto-adjust</title>
<meta http-equiv="refresh" content="50"/>
<style>
body {
text-align: center;
}
#g1,#g2, #g3, #g4 {
width:200px; height:160px;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="../js/raphael-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
<script src="../js/justgage.js"></script>
<script>
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: 0,
min: 0,
max: 10,
title: "LIGHT LEVEL",
label: "LUX"
});
setInterval(function(){ // เขียนฟังก์ชัน javascript ให้ทำงานทุก ๆ 30 วินาที
// 1 วินาที่ เท่า 1000
// คำสั่งที่ต้องการให้ทำงาน ทุก ๆ 3 วินาที
g1=$.ajax({ // ใช้ ajax ด้วย jQuery ดึงข้อมูลจากฐานข้อมูล
url:"setest.php",
data:"rev=1",
async:false,
success:function(g1){
$("#g1").html(g1); // ส่วนที่ 3 นำข้อมูลมาแสดง
//g1.refresh(g1);
}
}).responseText;
},3000);
};
</script>
</head>
<body>
<div id="g1"></div>
</body>
</html>
Code (SQL)
CREATE TABLE `farm` (
`id_farm` int(2) NOT NULL,
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`ldr` int(5) NOT NULL,
`sensor` int(5) NOT NULL,
`Humidity` varchar(50) COLLATE utf8_estonian_ci NOT NULL,
`TemperatureC` varchar(50) COLLATE utf8_estonian_ci NOT NULL,
`TemperatureF` varchar(50) COLLATE utf8_estonian_ci NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_estonian_ci;
--
-- Dumping data for table `farm`
--
INSERT INTO `farm` (`id_farm`, `time`, `ldr`, `sensor`, `Humidity`, `TemperatureC`, `TemperatureF`) VALUES
(1, '2016-04-09 07:28:24', 10, 10, '40', '40', '40'),
(2, '2016-04-09 07:28:53', 5, 10, '100', '40', '40'),
(3, '2016-04-09 07:32:50', 2, 10, '50', '100', '100');
Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery
|
ประวัติการแก้ไข
2016-04-11 12:53:39
2016-04-11 12:55:29
2016-04-11 12:59:16
2016-04-11 13:01:06
2016-04-11 13:04:49
2016-04-11 13:06:25
2016-04-11 13:10:44
2016-04-11 13:13:17
2016-04-11 13:14:39
|
 |
 |
 |
 |
| Date :
2016-04-11 12:52:25 |
By :
pop41554 |
View :
1580 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ลองสลับตำแหน่งของ <script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script> เอาไว้ก่อน สคริปท์ทั้ง ดูก่อนครับ
|
| |
|
|
| |
| Date :
2016-04-12 14:15:43 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ค่ามันมาครับแต่ไม่แสดงเป็นgaugesครับ
|
| |
|
|
| |
| Date :
2016-04-21 21:53:07 |
By :
pop41554 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองเขียนโปรแกรม สมมติข้อมูลขึ้นมาก่อน ว่าเกจ ทำงานไหม
ศึกษาตัวอย่างของเขา เอาตัวอย่างเขามาลองรันดูก่อน
ถ้าทำงาน ค่อยเปลี่ยนโปรแกรมไปดึงข้อมูลมาจาก database
|
| |
|
|
| |
| Date :
2016-04-22 07:57:00 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้วครับ ผมผิดตรงsetInterval
Code (SQL)
<?php
include("../connentdb.php");
$strSQL = "SELECT * FROM farm ORDER BY id_farm DESC Limit 0,1";
$objQuery = mysqli_query($objConnect,$strSQL);
?>
<!doctype html>
<html>
<head>
<title>Auto-adjust</title>
<meta http-equiv="refresh">
<style>
body {
text-align: center;
}
#g1,#g2, #g3, #g4 {
width:200px; height:160px;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="../js/raphael-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
<script src="../js/justgage.js"></script>
<script>
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: 0,
min: 0,
max: 10,
title: "LIGHT LEVEL",
label: "LUX"
});
var g2 = new JustGage({
id: "g2",
value: 0,
min: 0,
max: 10,
title: "SOIL MOISTURE",
label: "%",
levelColors: ["#FF0000","#FFFF33","#00FF33"]
});
function getDataFromDb()
{
$.ajax({
url: "db.php" ,
type: "POST",
data: ''
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if(obj != '')
{
//$("#myTable tbody tr:not(:first-child)").remove();
$("#myBody").empty();
$.each(obj, function(key, val) {
var tr = "<tr>";
tr = g1.refresh(val["ldr"]);
tr = g2.refresh (val["sensor"]);
});
}
});
}
setInterval(getDataFromDb, 10000); // 1000 = 1 second
};
</script>
</head>
<body>
<div id="g1"></div>
<div id="g2"></div>
<div id="g3"></div>
<div id="g4"></div>
</body>
</html>
|
| |
|
|
| |
| Date :
2016-04-22 23:00:23 |
By :
pop41554 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
