Solved

Change the order pictures on a panel

Posted on 2013-11-24
29
621 Views
Last Modified: 2013-12-04
Hello guys

I have a panel with 5 pictures. I'd like to know how can I change the order of my pictures on the panel?

I am posting with this thread a source made in Delphi XE4 with 5 pictures, there is a function

on it to realign all the pictures on the panel.

Example:

pic1  pic2  pic3  pic4  pic5

When I click the left mouse button on the pic5 and I drag it where is the pic1, I want to insert it exact the place where is the pic1, then the pictures will be on this sequence:

pic5  pic1  pic2  pic3  pic4

I tried insert this code:

procedure TForm1.Panel3DragDrop(Sender, Source: TObject; X, Y: Integer);
begin
  if (Source is TImage)  then
  Begin
    TImage(Source).Left := x
  End;
  AlignImages(Panel3, TImage(Source).Width, 15);
end;

Open in new window


How can I do that?

 I can change the image, but I notice that the function AlignImages doesn't allow reorder and it always put the image in the same order.

thanks
Source.zip
0
Comment
Question by:hidrau
  • 16
  • 7
  • 6
29 Comments
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 39673129
Hi hidrau. Why are you trying to change the order in Panel3? Shouldn't it be Panel1?
And I suggest to rename your panels in a meaningful way: pnlSource and pnlDest, for instance... But, definitely, want you rearrange the images once thei're dropped in the Panel1 or before to drag them?
0
 
LVL 1

Author Comment

by:hidrau
ID: 39673138
marqusG, this is for another part of my game.

Drag and Drop from Panel 3 to panel1 is ok

Now I need a way to change the order in panel3.

I want to rearrange the images in my first panel. actually, I just need to know how to do that so that I can use the formula in my parts of my game.

did you get it?
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 39673145
ok...
0
 
LVL 1

Author Comment

by:hidrau
ID: 39673149
Another think that I am trying to is to give a double click in my image that is already in my
pnlDest and to send it to pnlSource , I tried to change only the parent of my image, but it didn't work yet.
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 39673153
Hey, guy, one thing per time otherwise we go out! :)
0
 
LVL 1

Author Comment

by:hidrau
ID: 39673190
don't worry friend. Take your time :)

I just comment with you about this.
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 39673211
I'm working on, but it will take a bit. Be patient friend: we'll get it :)
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
ID: 39674224
I use you source as a core. Modified in D2007 but can work in later versions.
I use Delphi's TFlowPanel which works great for your needs. I use it because it aligns controls. To get drop ovet image you need to set DragOver and DragDrop on TImage itself but only when parent is TFlowPanel.

As a bounus I show image of card while dragging.
FloatImage2.zip
0
 
LVL 1

Author Comment

by:hidrau
ID: 39674273
sinisav, I think you post the solution in a wrong thread.

This solution is for this thread:

http://www.experts-exchange.com/Programming/Languages/Pascal/Delphi/Q_28302691.html#a39674272
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
ID: 39674281
sorry - similar questions.... here it is....
Source2.zip
0
 
LVL 1

Author Comment

by:hidrau
ID: 39674292
Thanks sinisav for the post.

But your code is only to floating image, right? Not for ordering the images, right?
0
 
LVL 1

Author Comment

by:hidrau
ID: 39674299
I understood that TFlowPanel allow me to move the components on it, that is, according to delphi's help. But the proposal the thread I can achieve this.
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
ID: 39674303
when you drag image over existing one - then insert (and align too) is run.
0
 
LVL 1

Author Comment

by:hidrau
ID: 39674309
Ok, I tested it and I notice that the card is only inserted in the beginning of the cards, it doesn't allow to insert one in the middle of two cards.

Something like this:

pic1  pic2  pic3  pic4  pic5

changed

pic1  pic2  pic5  pic3  pic4  

See that I moved the card pic5 between pic2 and pic3.

This I wasn't able to do.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 25

Expert Comment

by:Sinisa Vuk
ID: 39674354
It works when you drag image over lower image - then it is inserted ok. If you need to drag into space between two images...

..change this event:
procedure TForm1.FlowPanel1DragDrop(Sender, Source: TObject; X, Y: Integer);
var
  img, rightImg: TImage;
  i: Integer;
begin
  if (Source is TCardDragObject) and ((Sender as TFlowPanel).ControlCount < 5) then
  begin
    //add image
    img := ((Source as TCardDragObject).Control as TImage);

    img.Left := X;
    img.Top := Y;
    img.Margins.Left := 10;
    img.AlignWithMargins := True;

    //get image on right if exists
    rightImg := nil;
    for i := 0 to (Sender as TFlowPanel).ControlCount-1 do
    begin
      if X<(Sender as TFlowPanel).Controls[i].Left then
      begin
        rightImg := TImage((Sender as TFlowPanel).Controls[i]);
        Break;
      end;
    end;

    img.Parent := (Sender as TFlowPanel); //append

    if rightImg <> nil then //...and insert before if needed
      (Sender as TFlowPanel).SetControlIndex(img,
        (Sender as TFlowPanel).GetControlIndex(rightImg));
  end;
end;

Open in new window

0
 
LVL 30

Assisted Solution

by:Marco Gasi
Marco Gasi earned 250 total points
ID: 39674392
Here the working code, hidrau. It has required a bit of work but it's nice :)
DragDropImages.zip
0
 
LVL 1

Author Comment

by:hidrau
ID: 39674498
marqusG, very nice your code too.

I'm gonna try all of them in details, I noticed that was a little hard code, not so simple.

Sinisav, I also gonna Try your code in details too, it gave me another vision and a good vision floating the card when I want to change it.

At a first glance I noticed some difficult to operate it.

===============================================================


A question for Sinisav:

1) Why can't I drag the image between them? It must work only when I drag the image over the lower image. It is not so good for what I need to do. Isn't there any way to do it between the pictures?

A question for marqusG

1) The propose of the change order that you gave me has some problem. When I insert the last picture between too at the beginning, the right pictures takes place the of my last picture. See this example so that you can understand:

 You way:

pic1  pic2  pic3  pic4  pic5

I take the pic5 and insert it between pic1 and pic2, the figures stay:

pic1  pic5  pic3  pic4  pic2

As you can see, it took place the pic5.

What I would like:

pic1  pic5  pic2 pic3  pic4  

as you can see, the pic5 pushed the pic2 to the right direction, and if I also do this :

pic2 pic3  pic4  pic5 pic1

take pic1 and insert after the pic5, the pic1 pushed the pic5 to the left direction.
0
 
LVL 25

Accepted Solution

by:
Sinisa Vuk earned 250 total points
ID: 39674837
Here is modified version with shuffling...

Old code is blocking dragging images within flowpanel. Main goal is to get right index position in flowpanel control list.
Source3.zip
0
 
LVL 1

Author Comment

by:hidrau
ID: 39675320
Hummm, very very good Sinisav. It was what I needed.

Now, I need to study your code, learn the way you made it and understand it for the futures programming on my software.

Well, I also want to tell that marqsG already gave me some idea of programming, I want to thank him a lot for his devotion on this.

I really liked the marqsG code fixed, so that I can study both ways. I want to know whether marqsG wants to go ahead on this or can I close the Thread?

I'm gonna split the points later.
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 39675356
Hi hidrau. I'm working on because it's a challenge I wnat to win, but you can close the thread
without problems. When I'll get it working I'll post here for you if you'll want to see it :)

Cheers
0
 
LVL 1

Author Comment

by:hidrau
ID: 39676159
MarqusG, please, post your code here, I will appreciate it to study.

Thanks very much for your help
0
 
LVL 1

Author Comment

by:hidrau
ID: 39676188
Sinisav, when I gave a double click on the picture, why it doesn't return to the panel3?

I inserted this code on and thought it would work, but none:

procedure TForm1.Image7DblClick(Sender: TObject);
begin
  Timage(sender).Parent := Panel3;
end;

Open in new window


is there any function that I should disable?
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
ID: 39676802
Becasue drag is started which reverted parent back. Try this:

procedure TForm1.Image7DblClick(Sender: TObject);
begin
  if TImage(sender).Parent is TFlowPanel then
  begin
    TImage(sender).Parent := Panel3;
    //set position
    TImage(sender).Left := Panel3.ControlCount * (TImage(sender).Width+10); //space between
  end;
end;

procedure TForm1.Image7MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if not (ssDouble in Shift) then
    TImage(Sender).BeginDrag(True);
end;

Open in new window

0
 
LVL 1

Author Comment

by:hidrau
ID: 39677209
Once thanks, I am gonna try it :)
0
 
LVL 1

Author Closing Comment

by:hidrau
ID: 39677942
Thanks very much
0
 
LVL 1

Author Comment

by:hidrau
ID: 39695239
Sinisav, only to know.

I have a listbox1 with some words and a second empty listbox2. I can drag any word from listbox1 and drop it to listbox2, but the cursor is a drag figure and can't see the word that I am draging to the destination.

Is it possible to do it as it was made to picture? When I drag the image, I can pic it and it float with my cursor until the destination, can I do that with words?
0
 
LVL 25

Expert Comment

by:Sinisa Vuk
ID: 39695283
Yes, it can be done. You must calc text widith and height using current font in canvas of listbox, set this widith/height to DragImgList, draw this text with TextOut do bitmap, and assign bitmap to imagelist (similar like for card).
If you need example I can make it.
0
 
LVL 1

Author Comment

by:hidrau
ID: 39695407
hummm, alright.

I am gonna open another thread. I'd like an example of this.

I am reading a book as you recommend, little by little I am gonna reach a good knowledge :) I hope lol
0
 
LVL 1

Author Comment

by:hidrau
ID: 39695494
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

The uses clause is one of those things that just tends to grow and grow. Most of the time this is in the main form, as it's from this form that all others are called. If you have a big application (including many forms), the uses clause in the in…
Creating an auto free TStringList The TStringList is a basic and frequently used object in Delphi. On many occasions, you may want to create a temporary list, process some items in the list and be done with the list. In such cases, you have to…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now