منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب
[مقال] فورم تسجيل دخول يتفاعل مع المستخدم - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغة الفيجوال بيسك VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=182)
+--- قسم : قسم امثلة ومشاريع VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=188)
+--- الموضوع : [مقال] فورم تسجيل دخول يتفاعل مع المستخدم (/showthread.php?tid=25328)

الصفحات: 1 2


فورم تسجيل دخول يتفاعل مع المستخدم - mohamed haroon - 10-06-18

السلام عليكم و رحمة الله و بركاته
المقدمة
في البداية حتي تعرف المقصود بأن الفورم يتفاعل مع المستخدم سأضع لك فيديو يوضح عمل الفورم و يمكنك الوصول اليه من هنا https://youtu.be/WcRtuB85zmg
الفكرة مستوحاه من فيديو شاهدته علي الفيس بوك و المثال كان مطبق علي صفحات الويب فأعجبتني و قمت بتحويلها لمثال لبرامج ال desktop و يمكنك الوصول الي الفيديو علي الفيس بوك من الرابط التالي https://www.facebook.com/Dz.Developpeurs/videos/418703978571226/
الشرح
لابد في البداية من معرفه عدة معلومات تخص الفيديوهات و هي ان الفيديو مكون من عدة اطارات و كل اطار عبارة عن صورة و يتم عرض هذة الصور بسرعة وبمعدل 24 اطار في الثانية لتكون الحركة بسرعة طبيعية و هكذا يكون شكل الاطارات
[attachment=18479]

الفكرة الاساسية هي عرض الاطارات في picture box بصورة متلاحقة عند تفاعل المستخدم مع الفورم
1-انتاج الاطارات
في الخطوة الاولي من الشرح سأعرض عليكم كيفية عمل اطارات الفيدو ولاكن لن اتطرق الي ذلك بالتفصيل فقد استخدمت برنامج moho12 الخاص بعمل الرسوم المتحركة لرسم الشخصية الكارتونية وتحريكها بالشكل المطلوب ثم قمت بإخراج المشروع علي هيئة صور png فقام بإخراج كل اطار في صورة كما بالشكل التالي
[attachment=18480]

2-البرمجة
الخطوة التانية هي البرمجة و لعرض الاطارات في ال picture box بسرعة استخدمت اداه ال timer و هي اداه تتعامل مع الوقت بالمللي ثانية و الثانية عبارة عن 1000 مللي ثانية و لعرض 24 صورة في الثانية قمت بقسمة 24/1000 فكان الناتج تقريبا 41 ويعني هذا انني سأقوم بتنفيذ كود عرض الصورة كل 41 مللي ثانية
(داله get_num)
و لضبط تتابع الاطارات قمت بتسمية الاطارات بأرقام متتابعة و قمت بكتابة داله get_num لمعرفة الاطار المعروض في الpicture box ثم عرض الاطار الذي يتبعة
[attachment=18481]

(التفاعل مع الuser name textbox)
[attachment=18482]
عند الضغط علي الuser name textbox يتم وضع الاطار الاول الخاص بالحركة في الpicture box ثم يتم تشغيل الtimer الخاص بهذة الحركة وهذا الtimer قيمه الinterval له 41 كما ذكرنا سابقا لعرض 24 اطار في الثانية
[attachment=18483]
هذا هو الكود الخاص بالتايمر وينفذ التايمر الاكواد بشرط ان يكون الuser name textbox فارغ فيقوم بوضع الاطار الذي يليه في الpicture box و هذا بمعرفة رقم الصورة في الpicture box ويزيد واحد عليها و يتأكد ان كانت موجودة في المجلد الخاص بالاطارات يضعها في الpicture box و اذا لم تكن موجودة يعني هذا ان ال picture box يحتوي عي اخر اطار في مجلد الاطارات الخاصة بالحركة و يتوقف عمل التايمر

(داله percentage)
و هي داله تساعد في تحريك الشخصية عند الكتابة داخل user name textbox حيث استخدمت بها ال graphics لمعرفة عرض الكتابة المكتوبة في ال user name textbox و قسمتة علي عرض الuser name textbox ثم ضربة ب 100 لمعرفة النسبة المئوية لامتلاء الuser name textbox ثم حذف الكسور من النسبة
[attachment=18484]

(التفاعل مع الكتابة داخل user name textbox)
[attachment=18485]
القسم الاول من الكود و هو يخص التحريك عند الكتابة داخل الuser name textbox و لتسهيل عملية التحريك و كتابة الاكواد قمت بعمل 100 اطار يخص هذة الحركة و الكود يتم تنفيذة عندما يكون الuser name textbox غير فارغ وذلك بحساب النسبة المئوية للكتابة داخل الuser name textbox و اذا كانت النسبة المئوية اكبر من رقم الاطار المعروض في ال  picture box يتم عرض الصور اللاحقة حتي يتم عرض الصورة المساوية للنسبة المئوية و تتوقف الحركة
و القسم الثاني من الكود هو التحريك عند حذف النصوص من الuser name textbox و هو كما في القسم الاول من الكود تحسب النسبة المئوية لامتلاء الuser name textbox و يتم مقارنتها برقم الصورة المعروضة فإذا كانت النسبة المئوية اكبر يقوم بعرض الصور السابقة حتي يتساوي رقم الصورة مع النسبة المئوية و تتوقف الحركة

وفي النهاية يمكنكم تحميل المشروع من الرابط التاليhttps://drive.google.com/file/d/12E7cvCi5tqiCXOm-x9s_omBYg_RM86cV/view?usp=sharing
الان وصلنا الي النهاية و اتمني ان اكون قد افدتكم وانا جاهز للرد علي اي استفسار  Smile


RE: فورم تسجيل دخول يتفاعل مع المستخدم - elgokr - 10-06-18

مجهود رائع وفكرة رائعة

تم +1

تحياتى لك
وتمنياتى لك التوفيق



RE: فورم تسجيل دخول يتفاعل مع المستخدم - mohamed haroon - 10-06-18

(10-06-18, 05:56 PM)elgokr كتب :
مجهود رائع وفكرة رائعة

تم +1

تحياتى لك
وتمنياتى لك التوفيق

شكراً جزيلاً لتشجيعك Heart


RE: فورم تسجيل دخول يتفاعل مع المستخدم - elgokr - 10-06-18

(10-06-18, 06:02 PM)mohamed haroon كتب :
(10-06-18, 05:56 PM)elgokr كتب : مجهود رائع وفكرة رائعة

تم +1

تحياتى لك
وتمنياتى لك التوفيق

شكراً جزيلاً لتشجيعك  Heart

الشكر لله
واصل عملك 
وتمنياتى لك كل التوفيق



RE: فورم تسجيل دخول يتفاعل مع المستخدم - Ali-Othmane - 11-06-18

روعة أخي العزيز و الله مشروع ممتاز ...شكرا على الإفادة..وفقك الله ..


RE: فورم تسجيل دخول يتفاعل مع المستخدم - mohamed haroon - 14-06-18

(11-06-18, 05:59 PM)Ali-Othmane كتب : روعة أخي العزيز و الله مشروع ممتاز ...شكرا على الإفادة..وفقك الله ..

عفوا
يسرني انه قد اعجبك Smile


RE: فورم تسجيل دخول يتفاعل مع المستخدم - mrnooo2000 - 19-06-18

ما شاء الله فكرة رائعة جدا 

لكن لماذا تايمر منفصل لكل حدث

عموما بعد اذنك قمت بالتعديل على الكود 
حيث تم الغاء كل التايمرز و الاكتفاء بواحد فقط و حذف الموديول 
و اعادة ترقيم الصور فى المجلد ( show password ) لتبدأ الارقام من 25 الى 30 بدلا من 1 الى 6

و هذا هو كود النموذج بعد التعديل

كود :
Public Class Form1
   Private WithEvents TT As New Timer
   Private CurrentBox As Integer = 0        '1 user select      2 user typing     3 password hidden      4 password shown   5 password leave

   Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
       Chk_showpass.Checked = False
       TxtPass.PasswordChar = "*"
   End Sub
   Private Sub Form1_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.DoubleClick
       Application.Exit()
   End Sub
   Public Shared Function get_num(ByVal path As String) As Integer
       Dim num As Integer
       num = Val(IO.Path.GetFileNameWithoutExtension(path))
       Return num
   End Function
   Public Function TextPercent(ByVal Box As TextBox) As Integer 'داله لحساب النسبة المئوية لامتلاء textbox1
       Dim g As Graphics = Me.CreateGraphics
       Dim s As SizeF = g.MeasureString(Box.Text.ToString, New Font("Times New Roman", 16, FontStyle.Bold And FontStyle.Italic))
       Dim result As Integer = Math.Round((s.Width / Box.Width) * 100)
       Return result
   End Function

   Private Sub TxtUser_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtUser.Click
       CurrentBox = 1
       PictureBox1.ImageLocation = Application.StartupPath & "\images\email select\1.png"
       TT.Enabled = True
   End Sub
   Private Sub TxtUser_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TxtUser.TextChanged
       If TxtUser.Text = "" Then PictureBox1.ImageLocation = Application.StartupPath & "\images\email typing\1.png"
       CurrentBox = 2
       TT.Enabled = True
   End Sub
   Private Sub TxtPass_Enter(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtPass.Enter
       If CurrentBox < 3 Then
           PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
           CurrentBox = 3
           If Chk_showpass.Checked Then CurrentBox = 4
       End If
       TT.Enabled = True
   End Sub
   Private Sub TxtPass_Leave(sender As Object, e As EventArgs) Handles TxtPass.Leave
       CurrentBox = 5
       PictureBox1.ImageLocation = Application.StartupPath & "\images\password deselect\1.png"
       TT.Enabled = True
   End Sub
   Private Sub Chk_showpass_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Chk_showpass.CheckedChanged
       If CurrentBox < 3 Then
           PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
       ElseIf CurrentBox = 5 Then
           PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\21.png"
           If Chk_showpass.Checked = False Then PictureBox1.ImageLocation = Application.StartupPath & "\images\show password\25.png"
       End If

       If Chk_showpass.Checked = False Then
           CurrentBox = 3
           TxtPass.PasswordChar = "*"
       Else
           CurrentBox = 4
           TxtPass.PasswordChar = ""
       End If
       TxtPass.Focus()
   End Sub

   Private Sub TT_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TT.Tick
       Select Case CurrentBox
           Case 1
               Dim file As String = Application.StartupPath & "\images\email select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case 2
               If TxtUser.Text <> "" Then
                   If TextPercent(TxtUser) > get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
                       If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
                           Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
                           PictureBox1.ImageLocation = file
                       End If
                   ElseIf TextPercent(TxtUser) < get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
                       If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
                           Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) - 1 & ".png"
                           PictureBox1.ImageLocation = file
                       End If
                   End If
               End If

           Case 3
               Dim file As String = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case 4
               Dim file As String = ""
               If get_num(PictureBox1.ImageLocation) < 24 Then
                   file = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               Else
                   file = Application.StartupPath & "\images\show password\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               End If
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case 5
               Dim file As String = Application.StartupPath & "\images\password deselect\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case Else
               Dim file As String = Application.StartupPath & "\images\email select\1.png"
               If IO.File.Exists(file) = True Then PictureBox1.ImageLocation = file
               TT.Stop()
       End Select

   End Sub

End Class



RE: فورم تسجيل دخول يتفاعل مع المستخدم - mohamed haroon - 20-06-18

(19-06-18, 04:50 PM)mrnooo2000 كتب : ما شاء الله فكرة رائعة جدا 

لكن لماذا تايمر منفصل لكل حدث

عموما بعد اذنك قمت بالتعديل على الكود 
حيث تم الغاء كل التايمرز و الاكتفاء بواحد فقط و حذف الموديول 
و اعادة ترقيم الصور فى المجلد ( show password ) لتبدأ الارقام من 25 الى 30 بدلا من 1 الى 6

و هذا هو كود النموذج بعد التعديل

كود :
Public Class Form1
   Private WithEvents TT As New Timer
   Private CurrentBox As Integer = 0        '1 user select      2 user typing     3 password hidden      4 password shown   5 password leave

   Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
       Chk_showpass.Checked = False
       TxtPass.PasswordChar = "*"
   End Sub
   Private Sub Form1_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.DoubleClick
       Application.Exit()
   End Sub
   Public Shared Function get_num(ByVal path As String) As Integer
       Dim num As Integer
       num = Val(IO.Path.GetFileNameWithoutExtension(path))
       Return num
   End Function
   Public Function TextPercent(ByVal Box As TextBox) As Integer 'داله لحساب النسبة المئوية لامتلاء textbox1
       Dim g As Graphics = Me.CreateGraphics
       Dim s As SizeF = g.MeasureString(Box.Text.ToString, New Font("Times New Roman", 16, FontStyle.Bold And FontStyle.Italic))
       Dim result As Integer = Math.Round((s.Width / Box.Width) * 100)
       Return result
   End Function

   Private Sub TxtUser_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtUser.Click
       CurrentBox = 1
       PictureBox1.ImageLocation = Application.StartupPath & "\images\email select\1.png"
       TT.Enabled = True
   End Sub
   Private Sub TxtUser_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TxtUser.TextChanged
       If TxtUser.Text = "" Then PictureBox1.ImageLocation = Application.StartupPath & "\images\email typing\1.png"
       CurrentBox = 2
       TT.Enabled = True
   End Sub
   Private Sub TxtPass_Enter(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtPass.Enter
       If CurrentBox < 3 Then
           PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
           CurrentBox = 3
           If Chk_showpass.Checked Then CurrentBox = 4
       End If
       TT.Enabled = True
   End Sub
   Private Sub TxtPass_Leave(sender As Object, e As EventArgs) Handles TxtPass.Leave
       CurrentBox = 5
       PictureBox1.ImageLocation = Application.StartupPath & "\images\password deselect\1.png"
       TT.Enabled = True
   End Sub
   Private Sub Chk_showpass_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Chk_showpass.CheckedChanged
       If CurrentBox < 3 Then
           PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
       ElseIf CurrentBox = 5 Then
           PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\21.png"
           If Chk_showpass.Checked = False Then PictureBox1.ImageLocation = Application.StartupPath & "\images\show password\25.png"
       End If

       If Chk_showpass.Checked = False Then
           CurrentBox = 3
           TxtPass.PasswordChar = "*"
       Else
           CurrentBox = 4
           TxtPass.PasswordChar = ""
       End If
       TxtPass.Focus()
   End Sub

   Private Sub TT_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TT.Tick
       Select Case CurrentBox
           Case 1
               Dim file As String = Application.StartupPath & "\images\email select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case 2
               If TxtUser.Text <> "" Then
                   If TextPercent(TxtUser) > get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
                       If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
                           Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
                           PictureBox1.ImageLocation = file
                       End If
                   ElseIf TextPercent(TxtUser) < get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
                       If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
                           Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) - 1 & ".png"
                           PictureBox1.ImageLocation = file
                       End If
                   End If
               End If

           Case 3
               Dim file As String = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case 4
               Dim file As String = ""
               If get_num(PictureBox1.ImageLocation) < 24 Then
                   file = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               Else
                   file = Application.StartupPath & "\images\show password\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               End If
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case 5
               Dim file As String = Application.StartupPath & "\images\password deselect\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
               If IO.File.Exists(file) = True Then
                   PictureBox1.ImageLocation = file
               Else
                   TT.Enabled = False
               End If

           Case Else
               Dim file As String = Application.StartupPath & "\images\email select\1.png"
               If IO.File.Exists(file) = True Then PictureBox1.ImageLocation = file
               TT.Stop()
       End Select

   End Sub

End Class

شكرا لاضافتك Heart


RE: فورم تسجيل دخول يتفاعل مع المستخدم - yasseralsousi - 14-10-18

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


RE: فورم تسجيل دخول يتفاعل مع المستخدم - عبدالله الدوسري - 15-10-18

فكرة جميلة , وشرح أجمل , موضوع متكامل , تستحق أكثر من +1  Heart