مشروع انشاء ساعة ذات عقارب بالجافا

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف abunwaaf في الجمعة أبريل 11, 2014 7:51 pm

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته 
تحية طيبة للاخوان والاعظاء في منتدى مصر التقني
في موضوع سابق طرحة الاخ والاستاذ احمد عن انشاء ساعة رقمية وكان الموضوع مشوق فاحببت ان اضيف القليل لهذا المنتدى المميز
موضوعنا اليوم انشاء الله هو مشروع انشاء ساعة ذات عقارب عن طريق الجافا

سوف يكون المشروع عن طريق الاكواد البرمجية فقط بدون استخدام الواجهات الرسومية 
واذا صعب الشرح او التطبيق على احد ويريد شرح لانشاء المشروع بالواجهه الرسومية فليس لدي مانع فقط اخبروني وسوف اطرح موضوع لنفس المشروع ولاكن عن طريق الواجهه الرسومية

نبدا أولا بجلب المكتبات الازمة لمشروعنا :
الرمز:
import java.awt.*;
import java.awt.geom.*;
import java.awt.event.*;
import java.util.Calendar;
import javax.swing.*;

ومن ثم ننشئ الكلاس الرئيسي والذي سيكون بداخلة الشفرة لواجهة التطبيق ويتم توريثة من الفورم (JApplet) 
الرمز:
public class Clock2D extends JApplet {
  
  
  
  public void init() {
    
  }
}

لم اضع الشفرة بعد في الكلاس السابق حتى يتسنى فهم الموضوع وسنعود للكلاس الرئيسي في اخر الموضوع لنضع الشفرة الخاصة بالواجهه

سوف ننشئ هنا كلاس اخر خارج الكلاس الخاص بالفورم ويتم توريثة من (JPanel) ويحقق الواجهه (ActionListener)
سيكون بالشكل التالي :
الرمز:
class ClockPanel extends JPanel implements ActionListener{

}

بداخل الكلاس سنقوم بتعريف دورانات الساعة والدقائق والثواني عن طرق (AffineTransform)
الرمز:
AffineTransform rotH = new AffineTransform();
AffineTransform rotM = new AffineTransform();
AffineTransform rotS = new AffineTransform();

بعد ذلك سنقوم بانشاء الدالة او الميثود البانية (الكنستراكتر) للكلاس
الرمز:
public ClockPanel() {
    setPreferredSize(new Dimension(640, 480));
    setBackground(Color.white);
    Timer timer = new Timer(500, this);
    timer.start();
  }

بداخل الدالة البانية حددنا حجم البانل ولون البانل
ومن ثم قمنا بانشاء غرض التايمر (Timer) حيث أن الدالة أو الميثود البانية (ClockPanel) تستخدم كمراقب للحدث ويهيئ الغرض (Timer) بفترة قدرها 500 ميلي ثانية
وسنستخدم الصف (Calendar) للحصول على توقيت النظام الحالي وتهيئة الدورانات الثلاثة بالزوايا المناسبة

بعد انشاء الدالة السابقة سوف نقوم برسم وجه الساعة والعقارب الثلاثة
سنقوم بانشاء طريقة (paintComponent) او كما يحلو لك الاسم 
الرمز:
public void paintComponent(Graphics g) {
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D)g;
    g2.translate(320,240);
    // clock face
    Paint paint = new GradientPaint(-50,-50,Color.white,450,450,Color.gray);
    g2.setPaint(paint);
    g2.fillOval(-190, -190, 380, 380);
    g2.setColor(Color.gray);
    g2.drawString("Clock", -20, 80);
    Stroke stroke = new BasicStroke(3);
    g2.setStroke(stroke);
    g2.drawOval(-190, -190, 380, 380);
    for (int i = 0; i < 12; i++) {
      g2.rotate(2*Math.PI/12);
      g2.fill3DRect(-3, -180, 6, 30, true);
    }
    // clock hands
    Shape hour = new Line2D.Double(0, 0, 0, -80);
    hour = rotH.createTransformedShape(hour);
    Shape minute = new Line2D.Double(0, 0, 0, -120);
    minute = rotM.createTransformedShape(minute);
    Shape second = new Line2D.Double(0, 0, 0, -120);
    second = rotS.createTransformedShape(second);
    g2.setColor(Color.black);
    g2.setStroke(new BasicStroke(5, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
    g2.draw(hour);
    g2.draw(minute);
    g2.setStroke(new BasicStroke(2));
    g2.draw(second);
  }

لاحظ اننا اضفنا بارمتر للطريقة ويمثل الجرافيك (Graphics) 
سنبدا خطوة خطوة لشرح الكود السابق
الرمز:
Graphics2D g2 = (Graphics2D)g;
g2.translate(320,240);
هنا قمنا بتعريف متغير (g2) يستخدم الكائن (Graphics2D) واضفنا الية translate لتحديد موضع الدائرة الخاصة بوجه الساعة داخل البانل

الرمز:
Paint paint = new GradientPaint(-50,-50,Color.white,450,450,Color.gray);
g2.setPaint(paint);
قمنا هنا بتعريف متغير من نوع (Paint) والخاص بالرسم على البانل لكي نرسم لون تدرجي داخل الساعة ولك حرية اختيار الون المناسب وحجم التدرج

الرمز:
g2.fillOval(-190, -190, 380, 380);
    g2.setColor(Color.gray);
    g2.drawString("Clock", -20, 80);
    Stroke stroke = new BasicStroke(3);
    g2.setStroke(stroke);
    g2.drawOval(-190, -190, 380, 380);
في الاكواد اعلاه يتم التحكم في حجم الساعة وحجم الخط المرسوم على حواف الساعة كذلك يمكنك اضافة نص بداخل الساعة والتحكم بموضع النص سواءً في الاعلى او الاسفل

الرمز:
for (int i = 0; i < 12; i++) {
      g2.rotate(2*Math.PI/12);
      g2.fill3DRect(-3, -180, 6, 30, true);
هنا انشأنا حلقة (for) لرسم الخطوط الممثلة في الارقام وتوزيعها داخل الدائرة بشكل منتظم عن طريق المعادلة الحسابية (rotate) 
حيث قمنا بضرب 2 في (Math.PI) قسمة 12 وبذلك سيتم تقسيم الدائرة الى قسمين بخط مائل وهمي وتوزيع الرقم 12 على القسمين وبالتالي سيصبح 6 مقابل 6 
لو غيرنا الرقم 2 الى 1 سيكون القسم واحد فقط وستجد 12 جميعها في جهه واحدة والمقابل فارغ

الرمز:
Shape hour = new Line2D.Double(0, 0, 0, -80);
    hour = rotH.createTransformedShape(hour);
    Shape minute = new Line2D.Double(0, 0, 0, -120);
    minute = rotM.createTransformedShape(minute);
    Shape second = new Line2D.Double(0, 0, 0, -120);
    second = rotS.createTransformedShape(second);
    g2.setColor(Color.black);
    g2.setStroke(new BasicStroke(5, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
    g2.draw(hour);
    g2.draw(minute);
    g2.setStroke(new BasicStroke(2));
    g2.draw(second);
هنا يتم رسم العقارب الثلاثة للساعة حيث يمكنك التحكم في طول وحجم العقارب والمعروف ان عقارب الدقائق والثواني يكون طولها متشابه واطول من عقرب الساعة

الان سنقوم بانشاء الحدث (actionPerformed)
الرمز:
public void actionPerformed(ActionEvent e) {
    int hour = Calendar.getInstance().get(Calendar.HOUR);
    int min = Calendar.getInstance().get(Calendar.MINUTE);
    int sec = Calendar.getInstance().get(Calendar.SECOND);
    rotH.setToRotation(Math.PI * (hour+min/60.0)/6.0);
    rotM.setToRotation(Math.PI * min /30.0);
    rotS.setToRotation(Math.PI * sec /30.0);
    repaint();
  }
بداخل الحدث قمنا بانشاء متغيرات من نوع (Integer) اعداد صحيحة تمثل الساعات والدقائق والثواني واستخدمنا لكل واحد الصف (Calendar) للحصول على توقيت النظام الحالي
ويتم تهيئة الدورانات الثلاثة وبعد ذلك يتم استدعاء الطريقة (repaint) لتحديث الإظهار

الان سنعود للكلاس الرئيسي في اول الموضوع لنضيف اليه الشفرة الخاصة بالفورم وسيكون بالشكل التالي :
الرمز:
public class Clock2D extends JApplet {
  public static void main(String s[]) {
    JFrame frame = new JFrame();
    frame.setTitle("Clock");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    JApplet applet = new Clock2D();
    applet.init();
    frame.getContentPane().add(applet);
    frame.pack();
    frame.setVisible(true);
  }
  
  public void init() {
    JPanel panel = new ClockPanel();
    getContentPane().add(panel);
  }
}


وهنا الكود كاملاً
الرمز:
import java.awt.*;
import java.awt.geom.*;
import java.awt.event.*;
import java.util.Calendar;
import javax.swing.*;

public class Clock2D extends JApplet {
  public static void main(String s[]) {
    JFrame frame = new JFrame();
    frame.setTitle("Clock");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    JApplet applet = new Clock2D();
    applet.init();
    frame.getContentPane().add(applet);
    frame.pack();
    frame.setVisible(true);
  }
  
  public void init() {
    JPanel panel = new ClockPanel();
    getContentPane().add(panel);
  }
}

class ClockPanel extends JPanel implements ActionListener{
  AffineTransform rotH = new AffineTransform();
  AffineTransform rotM = new AffineTransform();
  AffineTransform rotS = new AffineTransform();
  
  public ClockPanel() {
    setPreferredSize(new Dimension(640, 480));
    setBackground(Color.white);
    Timer timer = new Timer(500, this);
    timer.start();
  }
  
  public void paintComponent(Graphics g) {
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D)g;
    g2.translate(320,240);
    // clock face
    Paint paint = new GradientPaint(-50,-50,Color.white,450,450,Color.GREEN);
    g2.setPaint(paint);
    g2.fillOval(-190, -190, 380, 380);
    g2.setColor(Color.gray);
    g2.drawString("Clock", -20, 80);
    Stroke stroke = new BasicStroke(3);
    g2.setStroke(stroke);
    g2.drawOval(-190, -190, 380, 380);
    for (int i = 0; i < 12; i++) {
      g2.rotate(2*Math.PI/12);
      g2.fill3DRect(-3, -180, 6, 30, true);
    }
    // clock hands
    Shape hour = new Line2D.Double(0, 0, 0, -80);
    hour = rotH.createTransformedShape(hour);
    Shape minute = new Line2D.Double(0, 0, 0, -120);
    minute = rotM.createTransformedShape(minute);
    Shape second = new Line2D.Double(0, 0, 0, -120);
    second = rotS.createTransformedShape(second);
    g2.setColor(Color.black);
    g2.setStroke(new BasicStroke(5, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
    g2.draw(hour);
    g2.draw(minute);
    g2.setStroke(new BasicStroke(2));
    g2.draw(second);
  }
  
  public void actionPerformed(ActionEvent e) {
    int hour = Calendar.getInstance().get(Calendar.HOUR);
    int min = Calendar.getInstance().get(Calendar.MINUTE);
    int sec = Calendar.getInstance().get(Calendar.SECOND);
    rotH.setToRotation(Math.PI * (hour+min/60.0)/6.0);
    rotM.setToRotation(Math.PI * min /30.0);
    rotS.setToRotation(Math.PI * sec /30.0);
    repaint();
  }
}


انا على يقين بان هناك من هو افضل مني مستوى في لغة الجافا في منتداكم الراقي فلو وجدتم اي ملاحظة في الشرح ارجو تنبيهي وتنبيه الاعظاء


في الختام اتمنى ان يكون الموضوع مفيد وارجو ان يكون الشرح واضح فان احسنت فمن الله وان اخطأت فمني والشيطان 

كما اتمنى ان ينال الموضوع استحسانكم واعجابكم

abunwaaf
..
..

تاريخ التسجيل : 01/01/2014
المساهمات : 15
النقاط : 25
التقيم : 2
الدولة : السعودية
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف Solutions1 في الجمعة أبريل 11, 2014 8:22 pm

ما شاء الله عليك ....جارى التجربة

Solutions1
..
..

تاريخ التسجيل : 31/08/2013
المساهمات : 22
النقاط : 30
التقيم : 0
الدولة : السعودية
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف أحمد مناع في السبت أبريل 12, 2014 8:22 am

انا على يقين بان هناك من هو افضل مني مستوى في لغة الجافا في منتداكم الراقي فلو وجدتم اي ملاحظة في الشرح ارجو تنبيهي وتنبيه الاعظاء

والله يا اخى الكريم لسنا افضل منك ولا شىء كل ما هنالك اننا لدينا مواضيع كثيرة فقط بالمنتدى لذلك ربما تعتقد هذا الاعتقاد الخاطىء عنا

و اشكرك على مجهودك و شرحك الاكثر من رائع ....جزاكم الله خيرا

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
سبحان الله وبحمدة .....سبحان الله العظيم

إن فقدت مكان بذورك التي بذرتها يوما ما سيخبرك المطر أين زرعتها ..لذا إبذر الخير فوق أي أرض وتحت أي سماء ومع أي أحد.. فأنت لا تعلم أين تجده ومتى تجده؟! إزرع جميلا ولو في غير موضعه .... فلا يضيع جميلا أينما زرعا .. فما أجمل العطاء... فقد تجد جزاءه في الدنيا أو يكون لك ذخرا في الآخرة

أحمد مناع
.
.

تاريخ التسجيل : 15/02/2011
المساهمات : 810
النقاط : 1479
التقيم : 69
الدولة : مصر
الجنس : ذكر

http://egy-tech.forumegypt.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف مدونة وليدوف التطويرية في السبت أبريل 12, 2014 3:53 pm

الكود لا يعمل .....ليس به دالة رئيسية

مدونة وليدوف التطويرية
...
...

تاريخ التسجيل : 22/11/2011
المساهمات : 32
النقاط : 47
التقيم : 3
الدولة : مصر
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف abunwaaf في السبت أبريل 12, 2014 4:37 pm

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


اذا احتجت شرح اكثر اعلمني برسائل الخطأ لديك 


واشكر لك مرورك

abunwaaf
..
..

تاريخ التسجيل : 01/01/2014
المساهمات : 15
النقاط : 25
التقيم : 2
الدولة : السعودية
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف abunwaaf في السبت أبريل 12, 2014 5:10 pm

ساوضح الطريقة اكثر 
قم بانشاء مشروع جديد مع التأكد من ازالة علامة الصح من مربع الكلاس Main


ثم قم بانشاء كلاس جديد وقم بتسميته Clock2D 


بعد ذلك امسح الكود بداخل الكلاس الذي انشاته ثم قم بنسخ الكود كاملا في اخر الموضوع ولصقة بداخل الكلاس
قم بتجربة المشروع وسيعمل معك باذن الله

صورة من المشروع

abunwaaf
..
..

تاريخ التسجيل : 01/01/2014
المساهمات : 15
النقاط : 25
التقيم : 2
الدولة : السعودية
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف Solutions1 في السبت أبريل 12, 2014 9:04 pm


Solutions1
..
..

تاريخ التسجيل : 31/08/2013
المساهمات : 22
النقاط : 30
التقيم : 0
الدولة : السعودية
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: مشروع انشاء ساعة ذات عقارب بالجافا

مُساهمة من طرف مدونة وليدوف التطويرية في الأحد أبريل 13, 2014 6:42 am

اشكرك على التوضيح اخى ..

مدونة وليدوف التطويرية
...
...

تاريخ التسجيل : 22/11/2011
المساهمات : 32
النقاط : 47
التقيم : 3
الدولة : مصر
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى