Recent

Author Topic: Magnifier over TEdit  (Read 1839 times)

tudi_x

  • Hero Member
  • *****
  • Posts: 538
Magnifier over TEdit
« on: June 27, 2017, 06:22:35 pm »
hi All,
in Lazarus 1.6.4 i need to place a magnifier over a TEdit in order to indicate the search capabilities using the TEdit as per attached screen capture.
the magnifier should dissappear when the user would write in the TEdit (change event).

please advise if there is a way to place the magnifier over the TEdit (ex. in TImage) or the canvas should be drawn over the TEdit.

thank you
Lazarus 2.0.2 64b on Debian LXDE 10

Handoko

  • Hero Member
  • *****
  • Posts: 3630
  • My goal: build my own game engine using Lazarus
Re: Magnifier over TEdit
« Reply #1 on: June 27, 2017, 07:53:51 pm »
There are basically 2 ways to do it. The easy and the hard ways.

The hard way is the best. You write your own component, add all the features you want. Just that simple, but the code will be very complex if you never write a component.

I guess you choose the easy one.

You need a TPanel and a TImage. Why TPanel? Without TPanel, the image will hide behind the TEdit.

1. Put a TImage inside a TPanel.
2. Resize them properly.
3. The TPanel.Height should be at least 4 pixels smaller than TEdit.Height
4. Position the TPanel properly above the TEdit.
5. Set the TEdit's OnEnter and OnExit events to hide/show the TPanel.

You can download the test.zip.

Note:
I tested the code using Lazarus 1.6.4 Gtk2 on Ubuntu Mate 16.10. The appeareance may be different if you switch to other desktop themes. Also, on Windows, the results will be much different, because Windows default TEdit.Height is not the same as on Linux.

Code: Pascal  [Select][+][-]
  1. unit Unit1;
  2.  
  3. {$mode objfpc}{$H+}
  4.  
  5. interface
  6.  
  7. uses
  8.   Forms, Controls, StdCtrls, ExtCtrls;
  9.  
  10. type
  11.  
  12.   { TForm1 }
  13.  
  14.   TForm1 = class(TForm)
  15.     Edit1: TEdit;
  16.     Edit2: TEdit;
  17.     Image1: TImage;
  18.     Label1: TLabel;
  19.     Label2: TLabel;
  20.     Panel1: TPanel;
  21.     procedure Edit1Enter(Sender: TObject);
  22.     procedure Edit1Exit(Sender: TObject);
  23.   end;
  24.  
  25. var
  26.   Form1: TForm1;
  27.  
  28. implementation
  29.  
  30. {$R *.lfm}
  31.  
  32. { TForm1 }
  33.  
  34. procedure TForm1.Edit1Exit(Sender: TObject);
  35. begin
  36.   Panel1.Visible := True;
  37. end;
  38.  
  39. procedure TForm1.Edit1Enter(Sender: TObject);
  40. begin
  41.   Panel1.Visible := False;
  42. end;
  43.  
  44. end.

tudi_x

  • Hero Member
  • *****
  • Posts: 538
Re: Magnifier over TEdit
« Reply #2 on: June 28, 2017, 12:52:23 pm »
Thank you.
What I like about the easy way is that it works on Linux also.
I saw a lot of questions of this type but I did not find a component that supports the behavour out of the box.
Lazarus 2.0.2 64b on Debian LXDE 10

 

TinyPortal © 2005-2018