فورم تسجيل دخول يتفاعل مع المستخدم - mohamed haroon - 10-06-18
السلام عليكم و رحمة الله و بركاته
المقدمة
في البداية حتي تعرف المقصود بأن الفورم يتفاعل مع المستخدم سأضع لك فيديو يوضح عمل الفورم و يمكنك الوصول اليه من هنا https://youtu.be/WcRtuB85zmg
الشرح
لابد في البداية من معرفه عدة معلومات تخص الفيديوهات و هي ان الفيديو مكون من عدة اطارات و كل اطار عبارة عن صورة و يتم عرض هذة الصور بسرعة وبمعدل 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
الان وصلنا الي النهاية و اتمني ان اكون قد افدتكم وانا جاهز للرد علي اي استفسار
RE: فورم تسجيل دخول يتفاعل مع المستخدم - elgokr - 10-06-18
مجهود رائع وفكرة رائعة
تم +1
تحياتى لك
وتمنياتى لك التوفيق
RE: فورم تسجيل دخول يتفاعل مع المستخدم - mohamed haroon - 10-06-18
(10-06-18, 05:56 PM)elgokr كتب : مجهود رائع وفكرة رائعة
تم +1
تحياتى لك
وتمنياتى لك التوفيق
شكراً جزيلاً لتشجيعك
RE: فورم تسجيل دخول يتفاعل مع المستخدم - elgokr - 10-06-18
(10-06-18, 06:02 PM)mohamed haroon كتب : (10-06-18, 05:56 PM)elgokr كتب : مجهود رائع وفكرة رائعة
تم +1
تحياتى لك
وتمنياتى لك التوفيق
شكراً جزيلاً لتشجيعك 
الشكر لله
واصل عملك
وتمنياتى لك كل التوفيق
RE: فورم تسجيل دخول يتفاعل مع المستخدم - Ali-Othmane - 11-06-18
روعة أخي العزيز و الله مشروع ممتاز ...شكرا على الإفادة..وفقك الله ..
RE: فورم تسجيل دخول يتفاعل مع المستخدم - mohamed haroon - 14-06-18
(11-06-18, 05:59 PM)Ali-Othmane كتب : روعة أخي العزيز و الله مشروع ممتاز ...شكرا على الإفادة..وفقك الله ..
عفوا
يسرني انه قد اعجبك
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
شكرا لاضافتك
RE: فورم تسجيل دخول يتفاعل مع المستخدم - yasseralsousi - 14-10-18
شكراا لخى العزيز مجهود رائع
RE: فورم تسجيل دخول يتفاعل مع المستخدم - عبدالله الدوسري - 15-10-18
فكرة جميلة , وشرح أجمل , موضوع متكامل , تستحق أكثر من +1
|