Gmap2 (GDImage drag and drop)

[Patrice Terrier]

Gmap2 is the new release of the GDImage MAP WD17 project.

Because the size of the zip file size is 9.7 Mb, you will have to download the project there:
http://www.zapsolution.com/preview/Gmap2.zip

This version shows the use of image drag and drop between two GDImage controls.


Added:
Indeed this project is using 4 GDImage controls at the same time.

[Patrice Terrier]

Here is the transposition in PowerBASIC 32-bit, of the original gMap2 WD17 project.

Some of the features of the PB version:

• Full zooming capabilities.
• Layered marker drag and drop.
• Text annotation.
• Advanced view port panning.
• Full range rotation of marker/annotation.
• Custom graphic menu to setup the object properties.
• Automatic language detection (french/english).
• Detailed user documentation (richedit control).
• Anchored popup tool windows.
• Four different GDImage controls used altogether.
• WinLIFT customized interface.
• Splitter controls.
• Multiple selection.
• Clipboard cut and paste.
• Multiple project selection.
• Spinner animation for lengthy process.
• Composited Z-order adjustment.
• Object cloning.
• Graphic memory optimization.
• Image marker with multiple states.
• Easy customization of the content of the project folders.
• GDImage events callback.

gMap2 Version 2.50

The purpose of this software is to identify a specific location on a map or a plan, using markers and annotations. It is based on the use of drag and drop, altogether with zooming capabilities, to map everything in an intuitive way.

Each project is based on a main background image, that is the surface used to display the markers and the annotations, the coordinates and properties of the objects are saved inside the application's "Map" subfolder. The file name used to save a project, is build on the name of the background image, followed with the extension ".gns".

The supported graphic formats are: bmp, jpg, png, gif, tif.

User interface:

1.   Contact sheet:
Located above the main working area, it allows the selection of a specific project.
The active project is shown in opaque mode, while the others are using half transparency.

2.   Working area:
Located below the contact sheet and above the command pannel, it takes most of the main window area. The aspect of the working area relies on the zooming factor being used, and the view port section can be adjusted with the scrollbars. It is also possible to scroll the image using the left mouse button to drag directly the background.

3.   Markers:
They are shown inside of the floating tool window located on the right side of the working area.
To add new markers on the working area, just use drag and drop from this window.

4.   Command pannel:
It is at the bottom of the main window, under the working area. It is used to display the mouse coordinates and all the command buttons, as well as the "Close" button (on the right side). You can use the command panel, as you would do for a standard window caption, to move the whole window to another location (using drag and drop).

5.   Moving and zooming:
This small floating toold window is located on the top left corner, it is used to display a thumbnail of the whole background image, altogether with a rectangular shape, using a red perimeter to delimit the part of the image currently shown in the working area. The size of the rectangle, is based on the current zoom level, that could be adjusted from the horizontal slider below the thumbnail. You can drag the inside of the rectangle, to adjust the viewport, just like what you would do with the scrollbars aside the working area.

Project creation or modification:

Select, on the contact sheet, the image of the project you want to work with.

The software computes the correct zoom factor, to fit the whole project inside of the working area view port.

If there was already markers and annotations for this project, they are restored using the latest coordinates and properties saved in the ".gns" file.

Adding markers:

Select a marker icon, from the list shown on the right side of the working area, and use drag and drop to add it to the correct location onto the image background.

You can adjust the zoom factor, and move the new marker with high accuracy once the mouse cursor is turned into a "four-pointed arrow". As soon as you start dragging the marker, the cursor shape becomes a small hand as long as you hold down the left mouse button, until you reach the exact location you want to use.

When a marker has the focus, you can also use the keyboard arrow keys to move it. To speed up the moving, hold down either the left "SHIFT" key, the "CTRL" key, or a combination of "SHIFT+CTRL", while using any of the arrow key.

Adding annotations:

Click with the right mouse button on the image background, at the location you want to add the new annotation.
In the contextual popup menu, select "Add annotation", this command opens the "Annotation" window where you can select the font, the size, the color, the opacity, the 3D shadow effect, to apply to the text entered into the edit section.

Note: The first time you open the "Annotation" window, it takes some time to perform the font detection, but the next time it is almost instantaneous.

After you have entered the text and setup all its parameters, press the "OK" button. The new annotation is added to the project, using the current zoom factor. To move the annotation to another location, just drag it to a new place.
The annotation's XY coordinates is the top left corner of the text.

Once annotation has the focus, you can also use the keyboard arrow keys to move it. To speed up the moving, hold down either the left "SHIFT" key, the "CTRL" key, or a combination of "SHIFT+CTRL", while using any of the arrow key.

Contextual menu:

The purpose of the contextual popup menu is to display a list of commands to change the parameters that could apply to a specific marker or annotation. It shows up when you click with the right mouse button onto an object. Some of the commands could be grayed (disabled) based on the object type.

•   Edit annotation
Apply only to annotation, shows the "Annotation" window, to edit the text or changing its visual attributes (font, size, color, opacity, 3D shadow effect).

•   Change label
The label is the tooltip name associated to an object, it shows up also into the "zooming and moving" window, as well as in the edit control of the "command pannel". When you use it, the focus goes to the edit control of the "command pannel" for the purpose of text edition. Once done, click with the left mouse button onto the working area to apply change.

•   Display next frame
Apply only to marker, because a marker can be made of several image sections with one section (frame) active at a time, this command switches from one frame to another in loop mode.

•   Flip horizontaly
Revert the object horizontaly.

•   Flip verticaly
Revert the object verticaly.

•   Rotate counterclock
Apply a counterclock rotation of 90° to the object.

•   Rotate clockwise
Apply a clockwise rotation of 90° to the object.

•   Move up
Move the object one range up on Z-order.

•   On top
The object is moved on top of Z-order.

•   Move down
Move the object one range down on Z-order.

•   On bottom
The object is moved to the bottom of Z-order.

•   Clone
Duplicate an object with all its properties, the new object is put on top of Z-order.

•   Lock
Protect from unwanted move. Must be unlocked to be able to move it again with the mouse.
Note: an object can always be moved with the keyboard arrow keys.

•   Delete
The matching object is removed from the project.

Object manipulation:

When the mouse hover and object than can be moved, the mouse cursor shape change from the "standard arrow" to a  "four-pointed arrow", and as soon as you start dragging, the cursor shape is turned into a "holding hand" until you release the left mouse button.

Before doing anything with an object, it must have the focus, this is done by clicking with the left mouse button on that object.

Once an object got the focus, you can also use the keyboard arrow keys to move it. To speed up the moving, hold down either the left "SHIFT" key, the "CTRL" key, or a combination of "SHIFT+CTRL", while using any of the arrow key.

Moving several objects at a time:

Before being able to move several objects altogether, you must first select each of them individually. This is done by holding down the "Ctrl" key while selecting each of the sprite with a left mouse click. Each selected object is surrounded by a focus rectangle to show it has been selected.

Once all the objects have been selected, you can drag any of them, and that will move the whole group to a new location. To disable the multiple selection, double click directly onto the image background .

Performing free angle rotation:

You can rotate any object on itself, using a full 360° range, either clockwise or counterclock.

This is done by holding down the left "Shift" key, while rotating the mouse wheel up or down.

Using the command pannel:

From the left to the right, you see first the mouse XY coordinates changing in real time while moving the cursor hover the image background, then for the object under the mouse, its unique ID, its friendly "label" name, and its XY coordinates (those saved in the ".gns" file).

•   Button "Select a project from the contact sheet"
Show or hide the content of the contact sheet. When selecting a new project, the program offers first to save the previous one if needed.

•   Button "Print a project image"
Print the whole projetc in WYSIWYG mode.

•   Button "Create a project image"
Create a flatten WYSIWYG image of the whole project, using any of the standard graphic format supported.

•   Button "Crop a rectangular section"
When you use it, the shape of the cursor changes to let you know that the "crop mode" is enabled. Click the left mouse button to anchor the top left corner of the delimited section, and hold it down while moving the mouse to resize the rectangular frame. To resize the delimited section itself, move the mouse hover the frame, and drag it to its new location. Once done, use a right mouse click to popup the contextual menu, then choose "Select" to validate the capture or "Cancel" if you want to delimit another section. When "Select" is being used you should ear a small beep, to inform you that the delimited section has been sent to the Windows clipboard. To leave the "crop mode" and restore the default mouse cursor, double click with the left mouse button on the background of the working area.

•   Button "Lock all the objetcs"
All objects get locked, to avoid moving them unexpectedly. Once locked, you have to use the contextual menu to unlock them individualy.

•   Button "Save project"
This button is visible only when the content of the project has changed. It becomes hidden as son as the saving has been done.

•   Button "Close"
That is the way to close the application, and if needed there is first a dialog box offering to save the project.

Horizontal splitters:

Located above and below the working area, the horizontal splitters are used to enlarge the working area, hidding either the contact sheet or the command pannel. They work like an On/Off switch, whenever you click on one of them with the left mouse button.