الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تصميم صفحة ويب للتحكم فى انسان الى من خلال امره بالتحرك فى الاتجاهات

بدأه eramax في 6 يوليو 2007 · 11 رد · 3,018 مشاهدة · في Microsoft Visual C#.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

besmmp0.gif

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

ففى هذه المشاركة ان شاء الله سيتتعرفون عن طرق جديدة وجميلة فى ادارة الموقع وامتيازات فريدة تقدمها لغة ASP.NET وايضا لغة البرمجة الشهيرة القوية C#

الموضوع كان بالضبط

>>>>تصميم صفحة ويب للتحكم فى انسان الى من خلال امره بالتحرك فى الاتجاهات<<<<

فكرة المشروع

::تصميم صفحة ويب تاخذ اوامر من المستخدم واضافة ويب سيرفس لهذا الموقع ياخذ الاوامر وايضا تصميم برنامج لتلقى الاوامر من صفحة الويب سيرفس ثم ارسالها الى ريبوت(انسان ألى)

فبهذه الطريقة نتمكن من التحكم فى الانسان الالى عبر الانترنت .

الان نبدأ معنا لنعيش مع لغات البرمجة ونحاول ان نضع التصميم معا

على فكرة لن اضع ملف ال"Source Code " الا بعد انتهاء الدروس حتى تعتمدون على انفسكم فى التنفيذ

اولا تصميم صفحة الويب

الهدف من هذه الصفحة هى ان تاخذ الاوامر من المستخدم وترسلها الى الويب سيرفس

1- نقوم بفتح برنامج الفيجول استديو 2005 كما بالصورة ثم نختار انشاء website جديد

a0.JPG

2- ثم نختار النوع كما بالصورة التالية

a1.JPG

3--بعد انشاء المشروع الجديد تظهر لك الصفحة التالية ادخل الى ال Design حتى نصمم شكل الصفحة كما بالصورة

a2.JPG

4-تظهر لك الصفحة التالية وهى التى تضيف فيها الاشكال والازرار

a3.JPG

5-اضغط على Toolsbox الموجود على اليسار كما بالصورة واختار الجدول واسحبه الى داخل الصفحة

a4.JPG

6-اجعل الجدول كما بالشكل التالى حتى يساعدنا التصميم

7-اعمل دمج للثلاث لخلايا الصف الاول كما بالشكل

a6.JPG

8-اعمل دمج لخلايا الصف الثانى والثالث بتحديد الخلايا كما بالشكل

a7.JPG

9-ادخل الى الSoultion Explorer التى فى اقصى اليمين واضغط باليمين على اسم المشروع واختار Newfolder حتى نضع فيه الصور وسميه مثلا img

a8.JPG

10-اضغط على المجلد الذى تم انشائه باليمين واختار كما بالصورة

a9.JPG

11-اختار الصور التى تريد اضافتها الى المجلد

a10.JPG

12-اضغط خارج الجدول اى على الصفحة ثم اختار properties ثم كما بالصورة

a11.JPG

13-اختار Background حتى تغير الخلفية

a12.JPG

14-اضغط كما بالصورة لاختيار الصورة

a13.JPG

15-اختار المجلد (img ) ثم اختار الصورة التى تود جعلها خلفية

a14.JPG

لاحظ الخلفية الان

16-اكتب داخل الصف الاول كما بالشكل (optional)

a15.JPG

a16.JPG

17-صمم هذا التصميم باضافة الازرار والlabels (مش عارف اسمها بالعربى)

حاول ان يكون تصميمك مثل ذلك

a17.JPG

اخوكم احمد عصام

يتبع

========================

amdvsintel22.jpg

--i use AMD--

لا اله الا الله محمد رسول الله

أستعن بالله و لا تعجز

تابعنى على تويتر

***

#2

18-اضف الى صفحة صفحة ويب سيرفس كما بالشكل التالى

وظيفتها هى تعمل ك interface (اداة اتصال بين ال web application و pc appliaction)

a34.JPG

19-لاحظ الان عندما تفتح الصفحة التى اضفتها (الويب سيرفس )

a35.JPG

20-قم باضافة الاكواد التالية الى صفحتك كما بالشكل التالى

اولا نحن عرفنا اربع متغيرات من نوع static من نوع int وفائدتهم هى حمل القيم من الصفحة الاساسية ال Default واعطائها الى ال pc application كما سنرى

ثم فى ال function الاساسية للويب سيرفس جعلناها تاخذ اربع قيم من ال pc application وهذه المتغيرات من نوع int وهى ref اى يمكن للويب سيرفس التعديل

فيها وارجاع القيم الجديدة الى ال pc application وهذه احدى طرق الخدع التى تمكنا من

ارجاع اكثر من قيمة من خلال function واحدة لانه كما تعلمون ان ال function

لا تقبل الا جملة return واحد وهذا لن يساعدنا فى مشروعنا

a36.JPG

21-نذهب الان الصفحة الاساسية ال default من خلال الضغط اعلى فى الشريط على كلمة defaul.aspx

a20.JPG

22-نضغط مرتين متتاليتين على الزر forward على فكرة الزر سيظهر مكتوب عليه كلمة button لديكم لا تقلقوا سنعدل هذه الكلمة بعد قليل

ستظهر لنا الصفحة التالية

a18.JPG

23-ستظهر لنا صفحة الكود نذهب الى اعلاها ونعرف المتغيرات كما بالصورة نجعلهم طبعا static ومن نوع int

a19.JPG

24-نذهب مرة اخرى الى الصفحة الرثيسية ال default كما بالصورة

a20.JPG

25-نضغط ايضا مرة اخرى على زر forward كما بالصورة ضغطتين

a21.JPG

26-نكتب الكود التالى كما بالصورة التالية

اولا قمنا بجعل قيم كل المتغيرات التى لدينا بصفر حتى تمسح الى قيم كانت داخل اى متغير

ثانيا اعطينا المتغير التابع لزر forward وهو up قيمة واحد

وفى هذه الحالة سيتحرك الانسان الالى فى اتجاه forward اى الى الامام

ثالثا قمنا بارسال كل القيم التى لدينا الى الويب سيرفس التى تستقبلهما على متغيراتها كما شاهدنا

من خلال الاكواد التى فى الصورة

رابعا قمنا بتحويل قيم المتغيرات التى لدينا من int الى string حتى يتثنى لنا عرضها داخل

ال labels التى اضفناها الى صفحتنا (على فكرة لابد تسمسة الlabels كما سميتها انا فى الامثلة وسيتم ذلك قبل نهاية الدرس )

خامسا قمنا بتصفير قيمة المتغيرup الذى اعطيناه القيمة وهذا لتاكيد ثبات البرنامج وحفظا من الخطأ وهى (optional )

a22.JPG

27-كذلك بالنسبة لباقى الازرار (لا تنسى ان ترجع للصفحة الرئيسية وتضغط على الزر وتكتب الكود التابع له )

a24.JPG

a25.JPG

a26.JPG

a27.JPG

a28.JPG

a29.JPG

28-اما زر reset فوظيفته تصفير كل المتغيرات وهذا يعمل على ايقاف تحرك الانسان الالى

a30.JPG

اخوكم احمد عصام

===========

يتبع

amdvsintel22.jpg

--i use AMD--

لا اله الا الله محمد رسول الله

أستعن بالله و لا تعجز

تابعنى على تويتر

***

#3

29-الكتابة على ال labels كما قلت لك ينصح بعملها قبل كتابة الاكواد

انا اخذت لك مثال على الlabel الاول وسميتة درجة اعلى وانت اكمل الباقى

a31.JPG

30-ايضا الكتابة على الازرار وهذا مثال على زر forward وانت تكمل الباقى

a32.JPG

31-ملحوظة انا اسف نسيتها وهى اجعل ال ID الخاصة بكل Label من اللى كتبنا عليهم كما بالتالى

1.. ال label اللى مكتوب عليه "درجة اعلى " اجعل له "ID" == "labelup"

2.. ال label اللى مكتوب عليه "درجة اسفل " اجعل له "ID" == "labeldown"

3.. ال label اللى مكتوب عليه "درجة يمين " اجعل له "ID" == "labelright"

4.. ال label اللى مكتوب عليه "درجة يسار " اجعل له "ID" == "labelleft"

32-اخيرا قم بعمل debuge للمشروع بالضغط على زر" F6"

33-قم بتشغيل العمل كما بالصورة التالية

a37.JPG

34-لاحظ ما مكتوب فى الاسفل دليل على نجاح مشروعك وخلوه من الاخطاء

a38.JPG

35-شاهد الان مشروعك وهو شغال فى المتصفح

a39.JPG

36-جرب الضغط على اى زر ومثال اضغط على زر forward ولاحظ قيمة ال labelup فى الاسفل

a40.JPG

وبهذا اكون قد انتهيت من تصميم ال Web Application

اى استفسار او مشكلة الرجاء اضافتها الى المشروع او مراسلتى من خلال الموقع

سيتم باذن الله تكملة المشروع ووضع فكرة وطريقة تصميم ال Pc -Application حتى نتمكن من الحصول على القيم التى تعطيها لنا الويب سيرفس

وان شاء الله يسعنا الوقت ونضيف فكرة تصميم ال Embedded system الخاصة الريبوت(الانسان الالى )

ارجو منكم الدعاء لى بظهر الغيب تقبل الله منا ومنكم صالح الاعمال

اخوكم فى الله // احمد عصام

amdvsintel22.jpg

--i use AMD--

لا اله الا الله محمد رسول الله

أستعن بالله و لا تعجز

تابعنى على تويتر

***

#4

ما شاء الله

جهد تشكر عليه

#5

والله مشكور يا ابو طلال على مرورك على الموضوع

ولو تفتكر هذا المشروع اللى انت ساعدتنى بخبرتك فيه

بارك الله فيك والله من قلبى وربنا يبارك لنا فيك

اخوك فى الله احمد عصام

amdvsintel22.jpg

--i use AMD--

لا اله الا الله محمد رسول الله

أستعن بالله و لا تعجز

تابعنى على تويتر

***

#6

ألف شكر

#7

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

#8

ان شاء الله قريبا جدا وممكن خلال الاسبوع ده احضر لكم درس ال PC- Application

الذى يستقبل القيم ويرسلها الى الريبوت

وبارك الله فيكم وشكرا على ردودكم

اخوكم احمد عصام

amdvsintel22.jpg

--i use AMD--

لا اله الا الله محمد رسول الله

أستعن بالله و لا تعجز

تابعنى على تويتر

***

#9

UP

....

amdvsintel22.jpg

--i use AMD--

لا اله الا الله محمد رسول الله

أستعن بالله و لا تعجز

تابعنى على تويتر

***

#10
eramax كتب:
ان شاء الله قريبا جدا وممكن خلال الاسبوع ده احضر لكم درس ال PC- Application

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

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

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

بمعنى هل سيتم برمجة Embedded .NET Web Server قادر على ترجمة #C وكيفية ذلك؟

هل سيتم استخدام Server عادى يستقبل الاوامر ويرسلها لل Robot ؟

هل سيتم ارسال الاوامر ببروتوكول جديد سيتم تصميمه ام استخدام احد البروتوكولات المعروفه؟ وما هو المستخدم؟

التقنية المستخدمه للارسال للروبوت هل سلكى؟ ... لا سلكى؟ معروفه مثل Ethernet ... WiFi .... BT... ام جديده؟

ال Feedback من الروبوت كيف سيتم ؟ والشخص الذى اصدر الامر من صفحة الويب كيف سيعرف اذا نجح الروبوت فى تنفيذ الامر ام لا؟

دقة تنفيذ الامر ... بمعنى احياناً يكون ال feedback ليس true or false فعند اصدار امر بالتحرك للامام 1 متر، وبعد 60 سم استضم بحائط ولم يستطع التحرك، فهنا لا نستطيع القول انه تم التنفيذ او لم يتم، ولكن ال feedback سيكون نجح فى التحرك مسافة 60 سم فقط

موضوع شيق وارجوا الاستمرار

#11
اقتباس
ولكن ما شدنى الى الموضوع اسمه، وكنت اتوقع عند دخولى ان اجد محتوى غير ذلك، فالمحتوى الحالى يشرح تصميم صفحة ويب (دون الاهتمام بوظيفة هذه الصفحة)، بالطبع مجهود مشكور

وظيفة الصفحة واضحة وهى اعطاء اوامر لل robot للتحرك

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

كما جاء فى اسالتك فلقد استخدمنا بورده حديثة يكون مدمج بها ويب سيرفر يمكن ان يتعامل مع ال tcp/ip protocol يمكن ان تجعل ال embedded system يتعامل مع الانترنت من خلال ال ip الذى ياخذه

بعض انواع البوردات الحديثة http://www.mikroe.com/en/tools/

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

فمثلا الرقم واحد يجعله يتحرك الى اتجاه معين والرقم اثنين يجعله يتحرك الى اتجاه اخر

لقد كان هناك بين صفحة الويب وبين الريبوت برنامج وسيط يوضع على جهاز كمبيوتر متصل بالانترنت هذا البرنامج وظيفته هى ان يقوم بعمل check على الويب سيرفيس ب timer ثم يتاكد بان هناك زر قد تم الضغط عليه ثم يقوم بارسال رقم لل robot هذا الرقم يجعله يتحرك فى اتجاه ما

كان ال robot متصل بالانترنت لاسلكيا عن طريق ال wifi

بالنسبة لل feedback فاننا لم نقم بتصميمه داخل المشروع

اطيب المنى :blink:

1
amdvsintel22.jpg

--i use AMD--

لا اله الا الله محمد رسول الله

أستعن بالله و لا تعجز

تابعنى على تويتر

***

#12

موضوع رائع واتمنى ان يكتمل الشرح

مواضيع مشابهة