برمجة الواجهة الرسومية

 الحاسوب بعد ارسال قيم الزاوية و المسافة من الاردوينو الى (processing IDE) ، يتم استقبالها بإستخدام دالة ()SerialEvent  .
تقوم ()SerialEvent بقراءة البيانات من المنفذ التسلسلي (serial port) ثم نقوم بوضع قيم الزاوية و المسافة في متغيرات (degree, value). هذة المتغيرات سيتم استخدامها لرسم الرادار، و الخطوط، و الكشف عن الأجسام ، وتغير النصوص .

لعرض البيانات على الشاشة يتم انشاء Arrays  لتخزين القيم الحديثة على newValue Array و عمل تحديث للقيم القديمة على oldValue Array . لأن الموقع اتباعا لحركة  محرك السيرفو يتغير بإستمرار ، فسنفقد البيانات القديمة التي سيتم عرضها على الشاشة.

int[] newValue = new int[181];
int[] oldValue = new int[181];

لرسم الرادار سيتم كتابة الداله ()drawRadar التي تتكون من دوال ()arc و ()line.

void drawRadar() {

 for (int i = 0; i <=6; i++){
  noFill();
  strokeWeight(1);
  stroke(0, 255-(30*i), 0);
  arc(radius, radius, (100*i), (100*i),PI,TWO_PI); 
  fill(250, 103, 0);
  noStroke();
  text(Integer.toString(radarDist+50), 380, (305-radarDist), 50, 50);
  radarDist+=50;
 }

 radarDist = 0; 
 for (int i = 0; i <= 6; i++) {
   strokeWeight(1);
   stroke(0, 55, 0);
   line(radius, radius, radius + cos(radians(180+(30*i)))*w, radius + sin(radians(180+(30*i)))*w);
   fill(153, 153, 153);
   noStroke();
   if (180+(30*i) >= 300) {
    text(Integer.toString(180+(30*i)), (radius+10) + cos(radians(180+(30*i)))*(w+10), (radius+10) + sin(radians(180+(30*i)))*(w+10), 25,50);
   } 
  else {
   text(Integer.toString(180+(30*i)), radius + cos(radians(180+(30*i)))*w, radius + sin(radians(180+(30*i)))*w, 60,40);
  }
 }
}

ليتم عمل مسح للرادار يتم رسم الخط الذي يتحرك جنب إلى جنب اتباعا لحركة محرك السيرفو بإستخدام الدالة  ()setupSweep  .

تستخدم الدالة  ()setupSweep الدالة ()line التي تستخدم المتغير degree لإعادة رسم الخط لكل درجة.

void setupSweep(){
 strokeWeight(7); 
 if (motion == 0) { 
 for (int i = 0; i <= 20; i++) { 
 stroke(0, (10*i), 0); 
 line(radius, radius, radius + cos(radians(degree+(180+i)))*w, radius + sin(radians(degree+(180+i)))*w); 
 }
 } else { // if going right to left
 for (int i = 20; i >= 0; i--) { 
 stroke(0,200-(10*i), 0);
 line(radius, radius, radius + cos(radians(degree+(180+i)))*w, radius + sin(radians(degree+(180+i)))*w);
 }
 } 
}

لإعداد تحديث الأشكال يتم عمل الدالة ()SetupShapes . سنقوم بإستخدام الدالة  For loop للتحرك بين القيم التي تم تخزينها بالـ (Arrays  (newValue, oldValue

void SetupShapes(){
  noStroke();                           
  
  fill(0,50,0);                         
  beginShape();                         
  for (int i = 0; i < 180; i++) {     
  x = radius + cos(radians((180+i)))*((oldValue[i])); 
  y = radius + sin(radians((180+i)))*((oldValue[i])); 
  vertex(x, y);                     
  }
  endShape();                           
  
  fill(0,110,0);
  beginShape();
  for (int i = 0; i < 180; i++) {
  x = radius + cos(radians((180+i)))*(newValue[i]);
  y = radius + sin(radians((180+i)))*(newValue[i]);
  vertex(x, y);
  }
  endShape();
  
  fill(0,170,0);
  beginShape();
  for (int i = 0; i < 180; i++) {
  x = radius + cos(radians((180+i)))*((newValue[i]+oldValue[i])/2); 
  y = radius + sin(radians((180+i)))*((newValue[i]+oldValue[i])/2);
  vertex(x, y);
  }
  endShape();
}

لرسم موقع الاجسام التي تم رصدها  ، نقوم بعمل الدالة ()drawObject .التي تستخدم المسافة الملتقطة من مستشعر الموجات فوق الصوتية و بالاشتراك مع الزاوية لرسم الجسم على الرادار.

void drawObject() {
  if (firstRun >= 360) {
  stroke(250,103,0);
  strokeWeight(1);
  noFill();
  for (int i = 0; i < 180; i++) { if (oldValue[i] - newValue[i] > 35 || newValue[i] - oldValue[i] > 35) {
  x = radius + cos(radians((180+i)))*(newValue[i]);
  y = radius + sin(radians((180+i)))*(newValue[i]);
  ellipse(x, y, 10, 10); 
  }
  }
  } 
}

وللإطلاع على القيم التي تم استقبالها و النصوص تم إنشاء الدالة ()drawText  .

يمكنك تنزيل كود  الـ (Processing) المتعلق بالواجهة الرسومية للرادار من هنـا.