Recent

Author Topic: Panel + Image Issue  (Read 19725 times)

DmedZ

  • New Member
  • *
  • Posts: 41
Panel + Image Issue
« on: November 17, 2015, 02:31:54 pm »
Hi guys ran into a lil problem the other day.
I have a panel that moves up and down and on it an background image and when the panel moves I want the image to stay in the same place for sort of a parallex effect.
Anyone know how I can accomplish this?

DmedZ

  • New Member
  • *
  • Posts: 41
Re: Panel + Image Issue
« Reply #1 on: November 17, 2015, 04:25:41 pm »
Anyone?

rvk

  • Hero Member
  • *****
  • Posts: 7045
Re: Panel + Image Issue
« Reply #2 on: November 17, 2015, 04:30:09 pm »
And how did you add the background image to the panel?
Why don't you make the panel transparent and put the image on the parent of the panel?

taazz

  • Hero Member
  • *****
  • Posts: 5368
Re: Panel + Image Issue
« Reply #3 on: November 17, 2015, 04:43:20 pm »
And how did you add the background image to the panel?
Why don't you make the panel transparent and put the image on the parent of the panel?
what? does lcl support transparent controls? since when?
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

rvk

  • Hero Member
  • *****
  • Posts: 7045
Re: Panel + Image Issue
« Reply #4 on: November 17, 2015, 04:47:52 pm »
And how did you add the background image to the panel?
Why don't you make the panel transparent and put the image on the parent of the panel?
what? does lcl support transparent controls? since when?
Can't you make a panel transparent?
Something like this: http://stackoverflow.com/a/19601605/1037511

Of course there are no ready to use transparent controls but you can create or simulate them.

taazz

  • Hero Member
  • *****
  • Posts: 5368
Re: Panel + Image Issue
« Reply #5 on: November 17, 2015, 05:15:27 pm »
And how did you add the background image to the panel?
Why don't you make the panel transparent and put the image on the parent of the panel?
what? does lcl support transparent controls? since when?
Can't you make a panel transparent?
Something like this: http://stackoverflow.com/a/19601605/1037511

Of course there are no ready to use transparent controls but you can create or simulate them.
No, wmerasebackground is prepossessed for you and painted black before you get any chance of handling it. You might be able to do something similar if you replace the default lcl windows handler with your own but that will make it a windows only control, in which case you loose any incentive of using lcl and you are far better using delphi.
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

christian1987

  • New Member
  • *
  • Posts: 30
Re: Panel + Image Issue
« Reply #6 on: November 17, 2015, 05:52:05 pm »
Don't worry about transparency.

What you need:
DoubleBuffered:=true;
Now:
A TImage inside the TPanel, and a TImage on the form itself.

Negative Top values are allowed...

rvk

  • Hero Member
  • *****
  • Posts: 7045
Re: Panel + Image Issue
« Reply #7 on: November 17, 2015, 05:55:01 pm »
... but that will make it a windows only control, in which case you loose any incentive of using lcl and you are far better using delphi.
Yuk, Delphi :) So you consider Delphi superior over lcl for a Windows-only program?  %)
(or just in case of catching messages <=WM_USER?)

No, wmerasebackground is prepossessed for you and painted black before you get any chance of handling it.
Yes, I know everything below WM_USER aren't processed the same way as Delphi but my understanding is that they can be dealt with.

But besides that... looking again at the question a transparent panel won't help because I think the outside of the panel may not contain anything of the image. The only way to do this would be to paint the background on the panel and repaint it when it's moved (repainting all controls after it).
(that's why I was also interested in the way the background was painted on the panel now)

Edit: The negative position christian1987 suggests might also solve a lot. Just set the top/left of the TImage on the panel negative and adjust it during dragging.

taazz

  • Hero Member
  • *****
  • Posts: 5368
Re: Panel + Image Issue
« Reply #8 on: November 17, 2015, 06:03:34 pm »
... but that will make it a windows only control, in which case you loose any incentive of using lcl and you are far better using delphi.
Yuk, Delphi :) So you consider Delphi superior over lcl for a Windows-only program?  %)
(or just in case of catching messages <=WM_USER?)

Delphi as a compiler might not be I only have access to delphi 2007 a not very up to date comparison. VCL as a framework no question, is by far better for windows programming than lcl.
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

DmedZ

  • New Member
  • *
  • Posts: 41
Re: Panel + Image Issue
« Reply #9 on: November 17, 2015, 07:50:20 pm »
"
Don't worry about transparency.

What you need:
DoubleBuffered:=true;
Now:
A TImage inside the TPanel, and a TImage on the form itself.

Negative Top values are allowed...

Hi christian1987
The first thing i tried was putting an image on the panel and one on the form and using
Panel1.DoubleBuffered:= true;
but it doesnt seem so be smooth enough get ALOT of flickering plus im trying to make it look like the panel is coming up to fill the space where the image is if you know what i mean this is the best example i can find ---> https://www.youtube.com/watch?v=h0hHDOOFQMc...

rvk

  • Hero Member
  • *****
  • Posts: 7045
Re: Panel + Image Issue
« Reply #10 on: November 17, 2015, 09:31:23 pm »
@christian1987, I'm not sure if this is exactly what your after?
(attached paneldraw.zip)

It overrules the TPanel so you can use the Paint function.

Code: Pascal  [Select][+][-]
  1. type
  2.   TPanel = class(ExtCtrls.TPanel)
  3.   protected
  4.     procedure Paint; override;
  5.   public
  6.     pnImage: TImage;
  7.   end;
  8.  
  9. procedure TPanel.Paint;
  10. var
  11.   Rc: TRect;
  12. begin
  13.   inherited;
  14.   Rc.Top := -Self.Top;
  15.   Rc.Left := -Self.Left;
  16.   Rc.Bottom := Rc.Top + pnImage.Height;
  17.   Rc.Right := Rc.Left + pnImage.Width;
  18.   Self.Canvas.StretchDraw(Rc, pnImage.Picture.Bitmap);
  19.   //Self.Canvas.Draw(-Self.Left, -Self.Top, pnImage.Picture.Bitmap);
  20. end;
  21.  
  22. procedure TForm1.FormCreate(Sender: TObject);
  23. begin
  24.   Panel1.pnImage := TImage.Create(Panel1);
  25.   Panel1.pnImage.Picture.LoadFromFile('c:\temp\test.jpg');
  26.   Panel1.pnImage.Width := Self.Width;
  27.   Panel1.pnImage.Height := Self.Height;
  28. end;
  29.  

Try it with the attached project.
You only need a test.jpg image in C:\Temp.

It's kind of slow but you can see if it's doable for you.

Edit: O, wow, I noticed if you put components on it, it really gets slow. It works... but it crawls.  :'(
« Last Edit: November 17, 2015, 09:33:04 pm by rvk »

balazsszekely

  • Guest
Re: Panel + Image Issue
« Reply #11 on: November 18, 2015, 07:37:41 am »
Quote
@rvk
Edit: O, wow, I noticed if you put components on it, it really gets slow. It works... but it crawls.
It's not so slow at my side, but things get ugly when you drop another panel to panel1. What about this(see attachment)?

rvk

  • Hero Member
  • *****
  • Posts: 7045
Re: Panel + Image Issue
« Reply #12 on: November 18, 2015, 10:02:19 am »
Quote
@rvk
Edit: O, wow, I noticed if you put components on it, it really gets slow. It works... but it crawls.
It's not so slow at my side, but things get ugly when you drop another panel to panel1. What about this(see attachment)?
I tried putting a TEdit on my panel, which really slowed it down. Just a TLabel and TButton works ok but anything more complex will slow it down a lot. (Just 1 extra TPanel on my panel wasn't actually that bad)

But your code works quite well (even with TEdits). I looked at what the difference was (because the idea is basically the same) and I noticed you called Draw (in which the panel-canvas was painted). This would essentially be the same as calling Panel.Paint (if you had the drawing in the Paint-event, which I had). But I called Invalidate with each mouse-move. And that was a bad call. Invalidate also needs to repaint ALL sub-components. I initially thought this was necessary but it isn't. After changing my code to call Panel1.Paint instead of Panel1.Invalidate it all worked much smoother.

Your code is still a bit smoother because for me, with the canvas-drawing in the paint-event, there is a bit of an echo during dragging. Only when you slow down the dragging, the form-paint will catch up and all is well. That's probably because I draw in the Paint-event directly to the panel-canvas and you only draw to the second image on the panel when the panel is moved (which is less work). But this shows it is possible and how it looks like, so OP can mold this into a component of his/her own so the imBackGround and imParallex are not seen during design-time because they can get in the way (for example it is difficult to move your panel now).

balazsszekely

  • Guest
Re: Panel + Image Issue
« Reply #13 on: November 18, 2015, 10:57:03 am »
Quote
@rvk
I looked at what the difference was (because the idea is basically the same)
Well, to be honest I "stole" your idea.  :D  The only thing I changed is the drawing part. Since TImage is inherited from TGraphicControl(not TWinControl), the canvas is immune to window painting. When you move, resize, minimize a control with a TImage on it, the canvas(TImage) won't get repainted, which is exactly what we need.

I'm still not convinced this is what the OP needs. In the video the background is also moving?

DmedZ

  • New Member
  • *
  • Posts: 41
Re: Panel + Image Issue
« Reply #14 on: November 18, 2015, 01:45:10 pm »
Hey guys thanks for the suggestions  :D
I found that GetMem's idea was a lot smoother when I implemented the move animation but rvk's did what I wanted it to do but was very gittery...problem with GetMems is it moves the whole panel and image when going down which minus the smoothness is what I was doing already.
I've attached the examples you made with my animation to give you an idea of what I wanted to begin with.

 

TinyPortal © 2005-2018