Ways to use code to let a user move a picture on a horizontal line?

[omahadivision]

Hello All,



It's been a while since I've been on, but I'm working on a rather intriguing problem:

I have an Access form where I want users to be able to arrange four objects in any order along a horizontal line and then store their relative positions in a record (it's basically a chemistry experimental apparatus). My idea is to have some fixed point and then have four picture boxes with their relative positions to the fixed point bound to four cells in the underlying table. Then every time a record loads, it would reload the four images in the correct positions.

I have the graphics all figured out from Paint. Now I need to find how to change an image's location on the form coding. It would be great if my users could actually click and drag the four objects into place, but I would also be fine with them entering numeric values. I have also thought about just having several picture boxes of the objects hidden and then having one at a time become unhidden when a user clicks on them, but the problem is that if I have 4 objects with 10 positions each object could be at, I would need 40 picture boxes! Although the scale is relative, the distance between the objects is important.

Thanks for your ideas! Attached is a screenshot of the form; the four objects in the tube are each separate pictures placed in design mode.

Attachment 10360

-Dave

[Rod]

Look at post #9 in the following thread

https://www.accessforums.net/program...tml#post149264

If you have difficulty finding the db or extracting/converting it I have an accdb copy.

It provides a solution for the basic drag and drop. I don't know about retrieving the relative/absolute position after the drop.

[omahadivision]

Thanks Rod! I will look into that.

I also found this page with the move method: http://msdn.microsoft.com/en-us/libr...ice.11%29.aspx

It is only described for forms, but it might be a start. Has anyone used the move method before?

[Rod]

How far have you got? I've been playing and think I could help you develop something. Let me know and I'll put some serious effort in.

[Rod]

MSAFDave.zip


Hi Dave,

Unzip the above db and play with it. Is this what you had in mind. There's a lot of room for making it tighter/more efficient.

[omahadivision]

Thanks Rod. I put it on my Flash Drive and will look at it when I get back to my work computer with Access.

So far, I have programmed one object to move via a textbox. I normalized the range of the object to go from one side to the other between 0-10 and to change positions when the value in the textbox is changed. Here's the coding:

Private Sub PositionTextbox_AfterUpdate()
MoveTwips = 3300 + PositionTextbox.Value * 945 ' Normalizes twips from range 1-10, starts object on left side of ruler/tube
'Twip values range from 3300 to 12750
Me![ImageIAmMoving].Move _
Left:=MoveTwips, Top:=5425
End Sub

[omahadivision]

MSAFDave.zip


Hi Dave,

Unzip the above db and play with it. Is this what you had in mind. There's a lot of room for making it tighter/more efficient.

Rod, your code is brilliant! I didn't even know it was possible! Thank you! I have adapted it to my database and just have one more question. You converted the top and left value to a textbox, with the values separated by a comma. How can I take the values separated by a comma and convert them back into top and left values, so that when I use LoadCurrent, I can have it place the pictures where I want them?

Thanks a bunch again!

[Rod]

Hi Dave,

By now you will have realised that I placed a rectangle along the length of the tube in your diagram and grouped both so that the rectangle kept its place relative to the diagram. I used the rectangle for docking (not locking - my semantic error) the images. You can actually see the border of the rectangle. I suggest you change the rectangle's border style to be transparent and thus the docking features becomes even more 'magical.' I used the images' Tag property to indicate when an image had entered the docking zone.

The way I left things the textboxes show the displacement of left and top of each image in twips; there are 1440 twips to and inch, 567 twips to a centimeter, and the measurements are from the left and top edges of the form's window respectively. If you are interested in the horizontal displacement along the tube then you are in for some tedious arithmetic.

There are two methods available to move a control. I suggest you look up the help for both.

1. ControlName.Move ... This can resize the control as well.
2. ControlName.Left = ... ControlName.Top = ... This moves the control along each axis separately.

An easy way to 'decode' the textbox is to use the Split function. This gives an array. You may code:

Dim varPosition as variant
varPosition = Split(txtOne, ",")

Now varPosition(0) contains the left (X) measurement and varPosition(1) contains the top (Y) measurement.

I was pleased with the result although the image does flicker somewhat as it is moved. All thanks to Chris in that post I quoted for giving me the basic idea. His solution is elegantly generic and uses wrapper class instances for each moveable object, overkill for this situation. You could, if you wished, change the border or special effect of the image as it is being dragged - change on MouseDown and revert on MouseUp. The images need not be the same size although it makes sense that they are all the same height as the tube or less.

I'll issue the normal 'health warning.' I have not tested my code extensively. There may be bugs so I suggest you give it a thorough 'going over.'

[omahadivision]

This is Great, Rod! Better than I ever thought it could be! I even figured out how to have the images resized when they're dropped in the tube. I just have one final question. Not all my images are the same height. 3 are but one is much shorter, so the three taller ones aren't centered. What's the best way to fix this? Build a new rectangle with a different type value or something else? I thought about making the short one taller, but when I do and it overlaps a taller image, there's white space and it looks weird. Thanks again!

[Rod]

Really, the choice is yours. I agree that sometimes resizing distorts the image. Have you played with the picture alignment property?

I would avoid duplicating the rectangle; just keep to one docking zone (rectangle). You may want to introduce another property that determines whether the image docks on the top, centre or bottom of the rectangle - i.e. top to top, centre to centre or bottom to bottom. Unfortunately Access object properties (unlike other object properties) cannot be appended with user-defined properties so the only available slot is the Tag property. In its undocked state the image control might have the tag "Top", "Centre" or "Bottom" indicating how it should be placed (or whatever other values make sense to you). Once docked, why not put the twip value of the top docking axis (Y value) in the Tag? The test for a docked control then becomes If IsNumeric(Me.ImageName.Tag) Then and the Y axis value can simply be obtained by CSng(Me.ImageName.Tag).

However you do this you're in for some tedious kindergarten arithmetic.

[omahadivision]

I am marking this as solved! Thanks for your brilliant response! Because I needed to change the X axis as well, I did end up creating another rectangle, but it's hidden so this all looks great! I also made it so that it stores the relative positions on the objects so that I can have different positions for each object.

-Dave