 |
13-09-2014, 10:56
|
 |
|
|
חבר מתאריך: 12.04.06
הודעות: 2,021
|
|
אני מקווה שהצלחתי על הניסיון הראשון ליצור לך קוד שעובד, זה קצת קשה "על עיוור".
שיניתי לך את הקוד לבקר, כך שבמקום פלט HTML הוא יפלוט פלט בפורמט JSON.
JSON זה פורמט שבאמצעותו אפשר להעביר נתונים (במקרה שלך, את הערכים מהבקר) בצורת מחרוזת (טקסט פשוט).
במקרה של הקוד שיצרתי אצלך, הוא ניראה בערך ככה:
עבור מצב אוטומטי: (oc = 0)
קוד:
{"workMode":"AUTOMATIC","direction":"Exit->Enter","status":2}
עבור מצב ידני: (oc = 1)
קוד:
{"workMode":"MANUAL","MLColor":"Red"}
כל זוג ערכים מופרד בפסיק, כשהחלק הראשון (לפני הנקודתיים) הוא שם הערך שבעזרתו אפשר לזהות את הנתון, והחלק השני (אחרי הנקודתיים) הוא הערך עצמו.
אז זה הקוד לבקר:
קוד:
void loop (){
// listen for incoming clients
EthernetClient client = server.available();
if(client){
boolean currentLineIsBlank = true;
while (client.connected()){
if (client.available()){
char c = client.read();
if (c == '\n' && currentLineIsBlank) { // see if HTTP request has ended with blank line
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
client.print("{"); // start JSON STRING
OC = Operation_cheak();
if (OC == 1){
Serial.println("oc=1 , manual");
client.print("\"workMode\":\"MANUAL\",");
ML=Manual_button();
if (ML==1){
client.print("\"MLColor\":\"Green\"");
BlinkLed();
}
else if (ML==2){
client.print("\"MLColor\":\"Red\"");
BlinkLed();
}
}
else if(OC == 0){
client.print("\"workMode\":\"AUTOMATIC\",");
d = pir_cheak();
if (PIRDirection==true){
client.print("\"direction\":\"Enter->Exit\"");
}
else if (PIRDirection==false){
client.print("\"direction\":\"Exit->Enter\"");
}
client.print(",");
if (d==0){
client.print("\"status\":0");
}
else if (d==1){
client.print("\"status\":1");
BlinkLed();
}
else if (d==2){
client.print("\"status\":2");
BlinkLed();
}
}
client.print("}"); // end JSON STRING
Serial.println ("END OF LOOP !!!");
break;
}
if (c == '\n'){ // you're starting a new line
currentLineIsBlank = true;
}
else if (c != '\r'){ // you've gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
}
}
בנוסף, תצטרך ליצור קובץ חדש (איפה שבא לך, במחשב שלך) ותקרא לו לדוגמא, mySensor.html .
(סיומת .html היא החשובה)
פתח את הקובץ לעריכה (באמצעות פנקס רשימות, כל תוכנות דומות לעריכת קוד) ותדביק את הקוד הבא:
קוד:
<!DOCTYPE html>
<html>
<head>
<title>My Sensor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
setInterval("readSensors()" , 1000);
});
function readSensors(){
$.getJSON("http://10.0.0.25" , function(data){
if(typeof(data.workMode) != "undefined"){
$("#workMode")
.html( data.workMode );
console.log(data.workMode.toLowerCase());
if(data.workMode.toLowerCase() == "automatic"){
$("#auto").show();
$("#manual").hide();
}
else {
$("#manual").show();
$("#auto").hide();
}
}
if(typeof(data.MLColor) != "undefined"){
$("#colorIndicator")
.css("color" , data.MLColor)
.html( data.MLColor + " ON" );
}
if(typeof(data.direction) != "undefined"){
$("#direction")
.html( data.direction );
}
if(typeof(data.status) != "undefined"){
var statusColor = "black";
var statusText = "";
switch(data.status){
case 1: {
statusColor = "green";
statusText = "Warning Entering The Secure Zone!";
break;
}
case 2: {
statusColor = "red";
statusText = "Warning Leaving The Secure Zone!";
break;
}
default: {
statusColor = "black";
statusText = "All Good - No Movement";
}
}
$("#status")
.css("color" , statusColor)
.html( statusText );
}
});
}
</script>
</head>
<body>
<div>
Work mode is- <span style="color: blue; font-weight: bold;" id="workMode">Manual / Automatic</span>
</div>
<!-- MANUAL -->
<div id="manual">
<div id="colorIndicator" style="color: black; font-weight: bold;">Green ON / Red ON</div>
</div>
<!-- AUTO -->
<div id="auto">
<div>The direction is - <span id="direction">Enter->Exit / Exit<-Enter</span></div>
<div id="status" style="color: black;">All Good - No Movement</div>
</div>
</body>
</html>
זהו.
אתה יכול לשמור את הקבצים,
תצרוב מחדש את הבקר ותריץ אותו.
אחרי שהבקר רץ, תיכנס לעמוד mySensor.html שיצרת, ובתקווה שהכל עובד כשורה והעמוד יצליח למצוא את המידע מהבקר שלך, אתה תראה את השינויים בזמן אמת (סטייה של שנייה אחת).
בתוך ה<body> של עמוד הHTML, תוכל לראות את הקוד/המבנה הפשוט של העמוד, בצורה דומה לפלט המקורי שהיה מהבקר שלך.
בתוך <script> תוכל לראות את קוד הJavascript ששולח בקשת getJSON לכתובת של הבקר שלך, ומעבד את המידע שמתקבל כדי לעדכן את האלמנטים המתאימים בעמוד.
כמה הערות חשובות, אם משום מה זה לא עובד:- לפני שאתה ניכנס ל mySensors.html אתה יכול לנסות לגשת לעמוד שיוצר הבקר כרגיל (כמו שהיית ניגש עד עכשיו) ולבדוק מה הפלט שמתקבל. במקרה של תקלה, תעתיק לכאן את הפלט כדי שאני אוכל לבדוק מה לא נכון. בכל מקרה, תוכל להשוות לדוגמאות JSON שהבאתי למעלה כדי לראות שלא מתקבל משהו שגוי.
- שים לב שבפלט של הJSON אסור שיהיה שום תו שהוא לא חלק מהJSON. (גם לא \n או \r וכדומה).
- תשים לב שהמבנה של הJSON שלם, שלא חסרים סוגריים (מסולסלים, לדוגמא), מרכאות עבור מחרוזות, פסיקים בין הערכים וכדומה.
- הקידוד שמוגדר לHTML הוא UTF-8, צריך לוודא שזה אכן הקידוד שיתקבל מהפלט של הבקר (אין לי אפשרות לבדוק את זה)
- כדי להקל על הבנת הקוד, השתמשתי בספרייה שניקראת jQuery. כדי שהיא תפעל, אתה צריך להיות מחובר לאינטרנט, כי השימוש בה נעשה דרך האינטרנט. אם במקרה אתה לא מחובר לאינטרנט במחשב שמקבל את המידע מהבקר, תגיד לי, ואני אסביר לך איך לסדר את זה.
* אני שיניתי קצת את הפלט של הבקר, והוא לא שולח כרגע version , date, logNumber, logTime וכדומה. עשיתי את הקוד הכי פשוט כדי לראות שזה עובד. את הערכים הנ"ל אפשר אח"כ להוסיף גם בJavascript, תלוי מה ואיך אתה רוצה שזה יעבוד.
מקווה שיעבוד טוב.
/סוף חפירה. 
_____________________________________
|
|
ראשי
צ'אט
מצב כלאיים
