[SOLVED] Drawing circles vs TImage

[tudi_x]

hi All,
for providing user feedback i need to move through three steps and provide visuals to the user as per the attached two steps.
what would be best to do: a. draw the circles or b. fill a TImage with three renders from a vector drawing software (i am not very good at this)
in case of drawing how would i place the digit in the circle center?
please advise what would you do.

thank you

(Lazarus 1.8RC4, Cross-platform)

[Handoko]

Because I am a graphics/web designer and a hobbyist programmer, both methods have equally same difficulty for me. If you're not good in using Gimp/Inkscape/Photoshop/CorelDraw then doing it programmatically will be easier for you.

If appearance of the program is important, I will consider to paint the circle myself. Not just simple circle with text but I will add some drop shadow and shiny glass effect. The result will look better than drawing it programmatically.

in case of drawing how would i place the digit in the circle center?

That actually is 2 objects. First you draw a circle, then write a text on the position of the circle's center.

[taazz]

add a tshape on your form set its shape property to stCircle the open the brush property and change the color to suit your needs some sort of gray I guess, open the pen property and set its style to psClear to instruct the control not to paint the outline of the circle or more accurately paint it transparent.
That takes care of the circle now to the text drop a label on top of the shape you have just created, the order of creation is important here, set its autosize property to false, make sure it has the same left, top, width and height values as the shape you created, change the label's property Alignment to taCenter, careful there are 2 similar named properties, change its property named Layout to tlCenter, open its font property and change the font's size and style to the appropriate amount to much your image and you are ready make sure you have enough space for all the numbers you might need ee 2, 3 or more digits depending the number of steps you have.

Unfortunately there is no control that draws a simple line you could emulate it using TShape with the shape property set to stRectangle and the height to 1 so it shows only the top line, set the brush.style to bsClear and the pen.color to what ever gray color you need.

[Almir.Bispo]

Look this what a did:

Code: Pascal  [Select][+][-]

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls,
9.   ExtCtrls;
10.  
11. type
12.  
13.   { TForm1 }
14.  
15.   TForm1 = class(TForm)
16.     Button1: TButton;
17.     Image1: TImage;
18.     Label1: TLabel;
19.     procedure Button1Click(Sender: TObject);
20.   private
21.     { private declarations }
22.   public
23.     { public declarations }
24.   end;
25.  
26. var
27.   Form1: TForm1;
28.  
29. implementation
30.  
31. {$R *.lfm}
32.  
33. { TForm1 }
34. {
35. show steps with tcanvas class (for Lazarus comunity)
36. date:08/09/2017
37. author:Almir Bispo
38. }
39. function steps(Whatstep,iWidth,iHeigth,buttonW:integer):tbitmap;
40. var i,barrw,textcenter,w,h:integer;
41.   image:Tbitmap;
42. begin
43. image:=Tbitmap.create;
44. image.Width:= iWidth;
45. image.Height:=iHeigth;
46. //background
47. image.canvas.Brush.Color:=clwhite;
48. image.canvas.rectangle(0,0,iWidth,iHeigth);
49. //barr
50. barrw:=20;
51. image.canvas.Pen.Color:=clgray;
52. image.canvas.Brush.Color:=clsilver;
53. image.canvas.Pen.Width:=2;
54. image.Canvas.rectangle(0,40,image.Width,40+(barrw));
55. //define text center
56. textcenter:=buttonW div 2;
57.  
58.  
59. for i:= 1 to 3 do
60. begin
61. image.canvas.Brush.Color:=clsilver;
62. if i=Whatstep then
63. begin
64.   image.canvas.Brush.Color:=clgray;
65. end;
66. image.canvas.Ellipse(10+(i*(buttonW)),10,(buttonW)+(i*(buttonW)),(buttonW));
67. image.canvas.Font.Color:=clblue;
68. image.Canvas.Font.Name:='courier';
69. image.canvas.font.Size:=15;
70. image.Canvas.TextOut((i*(buttonW))+textcenter,(buttonW div 2),inttostr(i) );
71. end;
72.   result:=image;
73.  
74. end;
75.  //how to use
76. procedure TForm1.Button1Click(Sender: TObject);
77. var stepnumber:integer;
78. begin
79. for stepnumber:=  1 to 3 do
80. begin
81. application.ProcessMessages;
82. image1.Canvas.Draw(0,0,steps(stepnumber,360,180,80));
83. label1.caption:='Running Process ' +inttostr(stepnumber);
84. sleep(1000);
85. end;
86.  
87. end;
88.  
89. end.
90.  
91.  

[howardpc]

You may be interested in the attached project which implements a simple step-progress control, and a program to exercise it.

[tudi_x]

thank you very much guys !

[Graeme]

Wow, when will LCL ever switch to anti-aliased drawing enabled by default! Those 3 circles drawn with TShape is making my eyes bleed!!!   

[taazz]

Wow, when will LCL ever switch to anti-aliased drawing enabled by default! Those 3 circles drawn with TShape is making my eyes bleed!!!   

I'm guessing the moment it drops support for platforms before vista(or was it xp?).

[RAW]

...(or was it xp?).

Yeah.. GDI+ was introduced in WINDOWS XP I think...

@Graeme: What do you think... how much days do you need? Thanks in advance! 

[taazz]

...(or was it xp?).

Yeah.. GDI+ was introduced in WINDOWS XP I think...

@Graeme: What do you think... how much days do you need? Thanks in advance! 

QT already supports antialising. I can build a GDI+ canvas in a week or so I have no idea what goes on with gtk and cocoa android etc. I would be interested to see an TControlCanvas implementation/child based on graeme's aggpas canvas though.

[Graeme]

Yeah.. GDI+ was introduced in WINDOWS XP I think...

Well, my apps can do high precision, sub-pixel anti-aliasing right now, on any platform - even down to Win95 (depending which FPC compiler you use).

@Graeme: What do you think... how much days do you need?

It's already done - it's called fpGUI Toolkit.   

Everything in the screenshot below is done via code or fpGUI widgets. Even the OSX style buttons - no png images used. Also, I can add SVG to the mix too, for low or high dpi desktops.

[Graeme]

QT already supports antialising. I can build a GDI+ canvas in a week or so I have no idea what goes on with gtk and cocoa android etc.

That's the problem I have with LCL. One LCL-widgetset (eg: LCL-QT) might support features other LCL-widgetsets don't. This is the case with every LCL backend. Also using LCL-QT on all platforms is not an option for most - it requires a massive amount of Qt DLL's to be shipped with your application.

This just causes too many inconsistencies and my LCL-based applications I wrote for clients. I end up having to implement ugly hacks to try and work around the LCL limitations, or have to change the UI design of the application completely. Somehow I hit these limitations very quickly (other developers seem luckier than I).

With fpGUI I implement a widget once, and it looks, works and behaves exactly the same, no matter which platform I target.

[RAW]

It's already done - it's called fpGUI Toolkit.   

I knew he would say that... 
And yeah it's very nice that you did that...

... even down to Win95 (depending which FPC compiler you use).

Really? That's interesting... even if most people probably don't want to use a WINDOWS version below W2000 nowadays. W2000 was the first version that was a little bit more stable, especially if someone needed to install/deinstall a lot... and of course the "new" API since then...