Recent

Author Topic: Creating component from scratch  (Read 13323 times)

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #30 on: May 22, 2021, 05:21:44 pm »
Have you noticed your mistake?

You are not inside the Paint procedure.

ممتاز ،كلامكـ صحيح ،فلقد جرّبت ذلكـ بعد تنبيهكـ ولكنّني أحدثتُ تطويراً بسيطاً بعمل خاصّية تُدعى text ليُشبه الـ control الـ components القياسيّة في طريقة عملها وإليكـ ما قد أحدثتُه:

google translate:

"Excellent, your words are right, I tried that after alerting you "your alerting", but I made a simple development by creating a feature called text to resemble the standard control components in how they work. Here's what I have created:"

Code: Pascal  [Select][+][-]
  1. type
  2.  
  3.    { TSimpleControl }
  4.  
  5.   TSimpleControl = class(TGraphicControl)
  6.   private
  7.     label_text:string;
  8.  
  9.   public
  10.     property text:string read label_text write label_text;
  11.  
  12.     constructor Create(TheOwner: TComponent); override;
  13.     procedure Paint; override;
  14.  
  15.   end;
  16.  
  17.  

Code: Pascal  [Select][+][-]
  1. procedure TSimpleControl.Paint;
  2. var
  3.   R: TRect;
  4.   rnd_color: array [1..4] of tcolor;
  5. begin
  6.  
  7.   rnd_color[1]:=clyellow;
  8.   rnd_color[2]:=clblue;
  9.   rnd_color[3]:=clred;
  10.   rnd_color[4]:=clgreen;
  11.  
  12.   R := Rect(0,0,Width,Height);
  13.   with Canvas do
  14.   begin
  15.  
  16.     Brush.Color := rnd_color[random(3+1)+1];
  17.     Brush.Style:=bsSolid;
  18.     FillRect(R); //<--- this line does the work based on the color and style used above
  19.  
  20.     TextOut(10,10,self.text);
  21.   end;
  22.  
  23. end;
  24.  
  25.  


Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2.  
  3.  
  4. begin
  5.  
  6.  
  7.     test:=TSimpleControl.Create(panel1); //<--- "self" is the form itself,  will be the "owner" of the  component. It will free the component when the form is closed.
  8.  
  9.  
  10.     test.Parent:=self; //<--- where this component sits. Again, on the form. A panel could be used.
  11.  
  12.     test.text:='Test';
  13. end;
  14.  
  15.  
La chose par la chose est rappelé.

engkin

  • Hero Member
  • *****
  • Posts: 3112
Re: Creating component from scratch
« Reply #31 on: May 22, 2021, 05:52:24 pm »
Excellent!!  :)

Can you center the text?

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #32 on: May 22, 2021, 05:59:33 pm »
Excellent!!  :)

Can you center the text?

لا ،فأنا لم أستوعب بعد كيف تعمل إحداثيّات الـ control.

google translate:

"No, I do not yet understand how the control coordinates work."
La chose par la chose est rappelé.

engkin

  • Hero Member
  • *****
  • Posts: 3112
Re: Creating component from scratch
« Reply #33 on: May 22, 2021, 06:58:13 pm »
As you saw with TextOut, it starts from top left corner of the SimpleControl, that's (0,0). The bottom right corner is at (Width-1,Height-1). It does not matter where the control is, on the form or the panel.

Centering text or giving it left or right alignment is a basic skill you need to get accustomed with. It helps with icons and images, so it is not limited to text.

The Canvas has other methods to give you the width or height of the text. It also has one method to give you both "extensions". Search the documentation and see if you can find what you need.

Meanwhile, assume you have the width of the text, let's call it textWidth, at what X position you need pass to TextOut to get the text centered horizontally?

This is a step before writing the code. You need to find the answer to this question,  only then writing the code would be possible.

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #34 on: May 22, 2021, 07:25:10 pm »
الوثائق التي عثرتُ عليها هي https://wiki.freepascal.org/TCanvas ولكنّني لا أظنّها مُجدية فيما نُريد ،لكن بالمعلومات التي وفّرتها لي عن العرض والإرتفاع بطرح واحد صحيح من كلٍ منهما يُمكنني حساب وسط الحرفي string الذي نودّ طباعته شريطة أنْ أعرف عرض اللبنة الواحدة بالـ pixels ولكن لن يكون هذا هو الحل الذكي لهذه المسألة فهناكـ حلول نموذجيّة لتحديد مُحاذاة النّص داخل الـ control.

google translate:

"The documents that I found are https://wiki.freepascal.org/TCanvas but I don't think they are useful in what we want, but with the information you provided me about width and height by subtracting one correct "integer" from each of them, I can calculate the middle of the literal string that is We would like to print it provided "by a condition if" that I know the width of a single block "character" in pixels, but this will not be the smart "intelligent" solution to this issue, as there are typical solutions for determining the alignment of text within the control."
La chose par la chose est rappelé.

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #35 on: May 22, 2021, 07:42:14 pm »
بالمُناسبة ،لقد قُمتُ بعمل بعض التعديلات إن كانت تروقكـ.

google translate:

"By the way, I have made some adjustments to "if" your liking"liked 'em"."

Code: Pascal  [Select][+][-]
  1. TSimpleControl = class(TGraphicControl)
  2.   private
  3.     label_text:string;
  4.     label_left,
  5.       label_top:integer;
  6.     label_color:tcolor;
  7.  
  8.   public
  9.     property text:string read label_text write label_text;
  10.     property left:integer read label_left write label_left;
  11.     property top:integer read label_top write label_top;
  12.     property fill_color:tcolor read label_color write label_color;
  13.  
  14.     constructor Create(TheOwner: TComponent); override;
  15.     procedure Paint; override;
  16.  
  17.   end;
  18.  
  19.  

Code: Pascal  [Select][+][-]
  1. procedure TSimpleControl.Paint;
  2. var
  3.   R: TRect;
  4.  
  5. begin
  6.  
  7.  
  8.  
  9.   R := Rect(self.left,self.top,Width,Height);
  10.  
  11.   with Canvas do
  12.   begin
  13.  
  14.     Brush.Color := fill_color;
  15.     Brush.Style:=bsSolid;
  16.     FillRect(R); //<--- this line does the work based on the color and style used above
  17.  
  18.     TextOut(10,10,self.text);
  19.   end;
  20.  
  21. end;                  
  22.  

Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2.  
  3. var
  4.  
  5.   rnd_color: array [1..4] of tcolor;
  6.  
  7. begin
  8.  
  9.   rnd_color[1]:=clyellow;
  10.   rnd_color[2]:=clblue;
  11.   rnd_color[3]:=clred;
  12.   rnd_color[4]:=clgreen;
  13.  
  14.     test:=TSimpleControl.Create(panel1); //<--- "self" is the form itself,  will be the "owner" of the  component. It will free the component when the form is closed.
  15.  
  16.  
  17.     test.Parent:=self; //<--- where this component sits. Again, on the form. A panel could be used.
  18.  
  19.     test.left:=0;
  20.     test.top:=0;
  21.     test.fill_color:=rnd_color[random(3+1)+1];
  22.     test.text:='Test';
  23. end;
  24.  
  25.  
La chose par la chose est rappelé.

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #36 on: May 22, 2021, 07:47:42 pm »
لقد قُمتُ بعمل تعديل آخر على الزّر switch لنحصل على نفس تأثير الألوان وهو التغيّر العشوائي كلّما انتقل الـ control بين الـ panel والـ form.

google translate:

"I made another modification to the switch button to get the same color effect, which is the random change as the control switches between the panel and the form."

Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button2Click(Sender: TObject);
  2.  
  3. var
  4.  
  5.   rnd_color: array [1..4] of tcolor;
  6.  
  7. begin
  8.  
  9.   rnd_color[1]:=clyellow;
  10.   rnd_color[2]:=clblue;
  11.   rnd_color[3]:=clred;
  12.   rnd_color[4]:=clgreen;
  13.  
  14.   test.fill_color:=rnd_color[random(3+1)+1];
  15.  
  16.     if test.Parent=self then
  17.     test.Parent:=panel1
  18.     else
  19.       test.Parent:=self;
  20.  
  21. end;
  22.  
  23.  
La chose par la chose est rappelé.

engkin

  • Hero Member
  • *****
  • Posts: 3112
Re: Creating component from scratch
« Reply #37 on: May 22, 2021, 08:24:01 pm »
Very good. You already see the need of adding properties for common things like the text or color. This is very logical. It makes it possible to say:
Code: Pascal  [Select][+][-]
  1. . simpleC1.Text:='Address.';

We need to think about the style of writing the code, specifically the blocks and their indentation. For instance if I were to fill the color array like:
Code: Pascal  [Select][+][-]
  1.   rnd_color[1]:=clyellow;
  2.     rnd_color[2]:=clblue;
  3.       rnd_color[3]:=clred;
  4.          rnd_color[4]:=clgreen;

The compiler will not complain, it is perfectly legal code. The same for:
Code: Pascal  [Select][+][-]
  1.       rnd_color[1]:=clyellow;
  2.    rnd_color[2]:=clblue;
  3.             rnd_color[3]:=clred;
  4.   rnd_color[4]:=clgreen;

But both formats do not help me see the code probably. I need to see them at the same indentation level as you wrote them in your code.

The problem is obvious in the if then else statement:
Code: Pascal  [Select][+][-]
  1.   rnd_color[3]:=clred;
  2.   rnd_color[4]:=clgreen;
  3.  
  4.   test.fill_color:=rnd_color[random(3+1)+1];
  5.  
  6.     if test.Parent=self then
  7.     test.Parent:=panel1
  8.     else
  9.       test.Parent:=self;

It's easier for me to see it when it is indented like:
Code: Pascal  [Select][+][-]
  1.   rnd_color[3]:=clred;
  2.   rnd_color[4]:=clgreen;
  3.  
  4.   test.fill_color:=rnd_color[random(3+1)+1];
  5.  
  6.   if test.Parent=self then
  7.     test.Parent:=panel1
  8.   else
  9.     test.Parent:=self;
« Last Edit: May 22, 2021, 08:36:00 pm by engkin »

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #38 on: May 22, 2021, 08:51:32 pm »
Very good. You already see the need of adding properties for common things like the text or color. This is very logical. It makes it possible to say:
Code: Pascal  [Select][+][-]
  1. . simpleC1.Text:='Address.';

We need to think about the style of writing the code, specifically the blocks and their indentation. For instance if I were to fill the color array like:
Code: Pascal  [Select][+][-]
  1.   rnd_color[1]:=clyellow;
  2.     rnd_color[2]:=clblue;
  3.       rnd_color[3]:=clred;
  4.          rnd_color[4]:=clgreen;

The compiler will not complain, it is perfectly legal code. The same for:
Code: Pascal  [Select][+][-]
  1.       rnd_color[1]:=clyellow;
  2.    rnd_color[2]:=clblue;
  3.             rnd_color[3]:=clred;
  4.   rnd_color[4]:=clgreen;

But both formats do not help me see the code probably. I need to see them at the same indentation level as you wrote them in your code.

The problem is obvious in the if then else statement:
Code: Pascal  [Select][+][-]
  1.   rnd_color[3]:=clred;
  2.   rnd_color[4]:=clgreen;
  3.  
  4.   test.fill_color:=rnd_color[random(3+1)+1];
  5.  
  6.     if test.Parent=self then
  7.     test.Parent:=panel1
  8.     else
  9.       test.Parent:=self;

It's easier for me to see it when it is indented like:
Code: Pascal  [Select][+][-]
  1.   rnd_color[3]:=clred;
  2.   rnd_color[4]:=clgreen;
  3.  
  4.   test.fill_color:=rnd_color[random(3+1)+1];
  5.  
  6.   if test.Parent=self then
  7.     test.Parent:=panel1
  8.   else
  9.     test.Parent:=self;

نعم! مُشكلة التنسيق والكتابة ،لو كانت الإنجليزيّة مثل العربيّة لبذلتُ جُهداً أكبر في تعلّمها ولكن طريقة التفكير مُختلفة وللأسف مَضطر أن أستعمل العربيّة وأنْ أحصّل ما أستطيعه بها ،حتّى في البرمجة تهتمون في أمريكا بالتنسيق في الكود :D.

لم تُجب بعد عن كيفيّة مُحاذاة النّص في وسط الـ control.

google translate:

"Yeah! The problem of coordination "formation" and writing, if English were like Arabic, I would have made a greater effort in learning it, but the way of thinking is different and unfortunately I have to use Arabic and get what I can with it, even in programming you are interested in America by coordinating "formation" in the code  :D.

You have not yet answered how to align text in the middle "center" of the control."
La chose par la chose est rappelé.

engkin

  • Hero Member
  • *****
  • Posts: 3112
Re: Creating component from scratch
« Reply #39 on: May 22, 2021, 09:40:50 pm »
It has nothing to do with America. It is all about programming.  :D
 
Quote
You have not yet answered how to align text in the middle "center" of the control.

I thought the question was yours to answer. Ok here is a way to do it:
Code: Pascal  [Select][+][-]
  1.     txt:='Test';
  2.     txtWidth:=Canvas.TextWidth(txt);
  3.     Canvas.TextOut(((Self.Width-txtWidth) div 2),0,txt);

Here is a better way using TextRect instead of TextOut:
Code: Pascal  [Select][+][-]
  1. var
  2. ...
  3.   txtStyle: TTextStyle;
  4. ...
  5.    
  6.   txtStyle := Default(TTextStyle);
  7.   txtStyle.Alignment:=taCenter;
  8.   txtStyle.Layout:=tlCenter;
  9.  
  10.   Canvas.TextRect(R,0,0,txt,txtStyle);
« Last Edit: May 22, 2021, 09:55:28 pm by engkin »

engkin

  • Hero Member
  • *****
  • Posts: 3112
Re: Creating component from scratch
« Reply #40 on: May 22, 2021, 10:04:09 pm »
As for the documentation. TCanvas is part of LCL:
https://lazarus-ccr.sourceforge.io/docs/lcl/

1-Find what LCL stands for.
2-How did I know that TCanvas is part of LCL?
3-Find TCanvas in the LCL documentation.

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #41 on: May 22, 2021, 10:24:41 pm »
It has nothing to do with America. It is all about programming.  :D

الأمر أكبر من البرمجة في إختلاف الثقافات ،هو صراع من يستطيع أن يفرض منطقه على الآخر ،صدقني فمعاييري لا تُخطئ.

سأدرس الأكواد وأردّ عليكـ غداً لنأخذ إستراحةً الآن.

google translate:

"The matter is greater than programming in different cultures, it is the struggle of those who can impose their logic on the other. Trust me, my standards "measurements" are not wrong.

I'll study the codes and get back to you tomorrow let's take a break now."
La chose par la chose est rappelé.

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #42 on: May 22, 2021, 10:31:45 pm »
As for the documentation. TCanvas is part of LCL:
https://lazarus-ccr.sourceforge.io/docs/lcl/

1-Find what LCL stands for.
2-How did I know that TCanvas is part of LCL?
3-Find TCanvas in the LCL documentation.

يُمكنكـ أن تُخبرني بطريقة البحث عن المصدر بغير هذه الطريقة ،أنت لا تُعلّم طفل في مدرسة فلا تتسبب في إهانة غيركـ في عمليّة البحث عن معلومة.

google translate:

"You can tell me how to search for the source without this method, you do not teach a child in school, so do not insult others in the process of searching for information."
La chose par la chose est rappelé.

engkin

  • Hero Member
  • *****
  • Posts: 3112
Re: Creating component from scratch
« Reply #43 on: May 22, 2021, 11:03:32 pm »
Your age is irrelevant. I was going to ask you these same questions if were 15 or 50 years old. I was waiting for a suitable point to mention the RTL, FCL, and LCL. Where to find their documentation and how to know which of them is your target.

I could have given you the fish, but I want you to fish for yourself.

Please explain what is my questions gave you the impression that am treating you like a child in a school?

pascal111

  • Sr. Member
  • ****
  • Posts: 423
  • Un trabajo en equipo para programas serias.
Re: Creating component from scratch
« Reply #44 on: May 22, 2021, 11:22:12 pm »
Please explain what is my questions gave you the impression that am treating you like a child in a school?

حسناً! يبدو أنّ إساءة فهم قد حصلت ،سأوضّح بعضاً من الأمر لكن الموضوع مُعقّد جدّاً وخارج نطاق البرمجة.

لقد ذكرتُ قبلاً إختلاف الثقافات ،وأنا أصلاً أعود في أحد أصولي إلى السعوديّة ،وطبيعة سكّان هذه البلاد تختلف عن طبيعة النّاس في أمريكا ،حسناً! بعض الأمريكيين يُشبهوننا ،فنحنُ لا نعتمد فقط على العقل في معرفة ما هو صحيح وما هو خاطئ ،ولكن لدينا غرائز بسبب أصل الحياة البريّة التي كان يعيش فيها أجدادنا ،فلا يكفي أن يبدو الكلام الذي أمامنا منطقيّاً من ناحية الشكل فقد يكون باطنيّاً كلاماً غير صحيح أو به خطأ ونحنُ نُدركـ ذلكـ بغرائزنا والعقل عندنا نفسه يستخدم الغرائز في تفكيره ،نحنُ نعرف الـ normality ولكن ليس كلّ شيء كان شكله normal فهو صحيح ،فمن الإهانة مثلاً أن تجعل أحدهم يبحث ولا يصل إلى نتيجة.

إذا جعلت أحدهم يبحث دون أن يصل إلى نتيجة فلقد حططت من قدره.




google translate:

"Okay! It seems that a misunderstanding has occurred, I will explain some of the matter, but the topic is very complex and outside the scope of programming.

I mentioned before the difference of cultures, and I originally belonged to Saudi Arabia in one of my origins, and the nature of the inhabitants of these countries differs from the nature of people in America, well! Some Americans are like us. We do not only rely on reason "mind" to know what is right and what is wrong, but we have instincts because of the origin of the wild life in which our ancestors lived, so it is not enough that the words before us seem logical in terms of form, it may be mystical, incorrect words or It is wrong and we realize that with our instincts and the mind itself uses instincts in its thinking, we know normality, but not everything was normal, it is correct, so it is an insult, for example, to make someone search and not reach a conclusion.

If you let someone search without reaching a conclusion, you have undermined their destiny"level"."
La chose par la chose est rappelé.

 

TinyPortal © 2005-2018