* * *

Author Topic: [SOLVED] Drawing circles vs TImage  (Read 727 times)

tudi_x

  • Sr. Member
  • ****
  • Posts: 282
[SOLVED] Drawing circles vs TImage
« on: September 08, 2017, 05:52:21 pm »
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)
« Last Edit: September 09, 2017, 05:20:42 pm by tudi_x »

Handoko

  • Hero Member
  • *****
  • Posts: 1514
  • My goal: build my own game engine using Lazarus
Re: Drawing circles vs TImage
« Reply #1 on: September 08, 2017, 06:28:46 pm »
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

  • Hero Member
  • *****
  • Posts: 4269
Re: Drawing circles vs TImage
« Reply #2 on: September 08, 2017, 06:37:54 pm »
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.
Good judgement is the result of experience … Experience is the result of bad judgement.

OS : Windows 7 64 bit
Laz: Lazarus 1.4.4 FPC 2.6.4 i386-win32-win32/win64

Almir.Bispo

  • New member
  • *
  • Posts: 45
  • CSV Comp DB is the Best NoSQL
    • CSV Comp DB (NoSQL)
Re: Drawing circles vs TImage
« Reply #3 on: September 08, 2017, 08:32:15 pm »
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.  
CSV Comp DB Developer {Pascal Lover}

howardpc

  • Hero Member
  • *****
  • Posts: 2308
Re: Drawing circles vs TImage
« Reply #4 on: September 09, 2017, 04:41:54 pm »
You may be interested in the attached project which implements a simple step-progress control, and a program to exercise it.

tudi_x

  • Sr. Member
  • ****
  • Posts: 282
Re: Drawing circles vs TImage
« Reply #5 on: September 09, 2017, 05:20:28 pm »
thank you very much guys !

Graeme

  • Hero Member
  • *****
  • Posts: 1394
    • Graeme on the web
Re: [SOLVED] Drawing circles vs TImage
« Reply #6 on: September 11, 2017, 11:26:10 am »
Wow, when will LCL ever switch to anti-aliased drawing enabled by default! Those 3 circles drawn with TShape is making my eyes bleed!!!    :o %)
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

taazz

  • Hero Member
  • *****
  • Posts: 4269
Re: [SOLVED] Drawing circles vs TImage
« Reply #7 on: September 11, 2017, 11:33:02 am »
Wow, when will LCL ever switch to anti-aliased drawing enabled by default! Those 3 circles drawn with TShape is making my eyes bleed!!!    :o %)
I'm guessing the moment it drops support for platforms before vista(or was it xp?).
Good judgement is the result of experience … Experience is the result of bad judgement.

OS : Windows 7 64 bit
Laz: Lazarus 1.4.4 FPC 2.6.4 i386-win32-win32/win64

RAW

  • Sr. Member
  • ****
  • Posts: 491
Re: [SOLVED] Drawing circles vs TImage
« Reply #8 on: September 11, 2017, 03:30:17 pm »
Quote
...(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!  :P
Windows 7 Pro (x64 Sp1) And Windows XP Pro (x86 Sp3) - LAZARUS 1.8.0RC4 FPC 3.0.4

taazz

  • Hero Member
  • *****
  • Posts: 4269
Re: [SOLVED] Drawing circles vs TImage
« Reply #9 on: September 11, 2017, 03:45:00 pm »
Quote
...(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!  :P
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.
Good judgement is the result of experience … Experience is the result of bad judgement.

OS : Windows 7 64 bit
Laz: Lazarus 1.4.4 FPC 2.6.4 i386-win32-win32/win64

Graeme

  • Hero Member
  • *****
  • Posts: 1394
    • Graeme on the web
Re: [SOLVED] Drawing circles vs TImage
« Reply #10 on: September 12, 2017, 02:42:22 pm »
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).

Quote
@Graeme: What do you think... how much days do you need?
It's already done - it's called fpGUI Toolkit.    8-)

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.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

Graeme

  • Hero Member
  • *****
  • Posts: 1394
    • Graeme on the web
Re: [SOLVED] Drawing circles vs TImage
« Reply #11 on: September 12, 2017, 02:52:31 pm »
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.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

RAW

  • Sr. Member
  • ****
  • Posts: 491
Re: [SOLVED] Drawing circles vs TImage
« Reply #12 on: September 12, 2017, 04:33:12 pm »
Quote
It's already done - it's called fpGUI Toolkit.    8-)
I knew he would say that...  :)
And yeah it's very nice that you did that...

Quote
... 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...
Windows 7 Pro (x64 Sp1) And Windows XP Pro (x86 Sp3) - LAZARUS 1.8.0RC4 FPC 3.0.4

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads Open Hub project report for Lazarus