TTMSFNCHotSpotImageEditor

This is the editor which can be used to change the TTMSFNCHotSpotImage. It is available in designtime via the context-menu when you rightclick on the TTMSFNCHotSpotImage or the editor, or by a double click on the TTMSFNCHotSpotImage. Additionally, the editor is available when editing the ‘HotSpots’ property for TTMSFNCHotSpotImage in the object inspector. It is also available as a component which can be opened in runtime.

The code that can be used for this:

procedure TForm1.ButtonClick(Sender: TObject);
var
 hie: TTMSFNCHotSpotImageEditor;
begin
 hie := TTMSFNCHotSpotImageEditor.Create(Self);
 hie.HotSpotImage := HotSpotImage;
 hie.Execute;
end;

The different tools in the toolbar that you can use to manipulate the polygons:

Image	Name	Description
	Select	Will select a hotspot if you click in a polygon and also can give you the ability to select and move specific points of a selected hotspot.
	Rectangle	Will create a rectangle hotspot from a mouse down to a mouse up.
	Ellipse	Will create an ellipse hotspot from a mouse down to a mouse up.
	Wand	With the magic wand you can select an area with a similar color. You can finetune this with the sliders in the bottom panel.
	Add point	You can add the points as you want by clicking on the image. And in this way create your polygon.
	Delete point	Let’s you remove the selected or last point in the polygon.
	Eraser	Clears the polygon.
	Create hotspot	Create a new hotspot.
	Delete hotspot	Remove the selected hotspot.

There are two ways to create a new hotspot. As long as no hotspot is selected in the listbox, you can start creating a shape with the ‘Rectangle’, ‘Ellipse’, ‘Wand’ or ‘Add Point’ tools. This will show the temporary shape in a blue dashed line.

Once the hotspot shape is as wanted, they can be created with the ‘Create hotspot’ button in the toolbar or the ‘New’ button on the right side. This will add the hotspot and fill the appearance with the default appearance.

If one of the hotspots is selected in the listbox, these tools will change the previous hotspot shape.

To check and change the appearance on the different states you can switch between the ‘Hover’, ‘Down’ and ‘Selected’ buttons on the right side.

Below the listbox there is the ability to toggle if the hotspot is ‘Selectable’, if it should show the polygon and/or the name in the chosen state and you can change the name if any hotspot is selected.

At the bottom of that panel you can create a new hotspot as mentioned before or delete the selected. (These last two have the same behavior as the buttons on the toolbar.)

Then there is the pager that gives you the ability to set the appearance of the hotspots. In the different pages you can see the different points of the polygon in the’Polygon’ tab and change the fill, stroke and font. In case none of the hotspots are selected, you can change the default appearance otherwise you change the appearance of the specific hotspot.

Another way to fill the hotspots is via the hover or selected bitmap. Which can be set with the button on the bottom of the ‘Fill’ page. This will cut out the respective part of the hotspot from the image.

TTMSFNCPassLock

The TTMSFNCPassLock gives you the ability to add password protection to your application. This can be done with a numpad or a pattern.

Properties

Property name	Description
ButtonAppearance	Down, hover and normal fill, stroke and font of the buttons in the numpad or pattern. And the maximum size of the buttons.
EntryAppearance	Down and normal fill and stroke of the entry indicators in the numpad. And the maximum size of the entry indicators.
Options	Can set the type of passlock (numpad or pattern), to show the ‘OK’ (in case you want the ability to use a variable password length) and ‘CE’ (to clear the last value added to the entry) button in numpad and to enable the learn mode (to set a new password) and enable the keyboard input.
PasswordEntry	Is the current combination that is entered at the moment.
PasswordLength	The length of the password that is set (Read-Only).
PasswordValue	The current password that is set, is a numerical value according to the index of the button. (Eg. for the pattern it is ‘156’ in the image above.)

Events

Event name	Description
OnBeforeDrawBackground	Event triggered before drawing the Fill and Stroke.
OnAfterDrawBackground	Event triggered after drawing the Fill and Stroke.
OnBeforeDrawButton	Event triggered after drawing the Fill and Stroke.
OnAfterDrawButton	Event triggered after drawing the button
OnBeforeDrawButtonValue	Event triggered before drawing the button value.
OnAfterDrawButtonValue	Event triggered after drawing the button value.
OnBeforeDrawEntry	Event triggered before drawing the password entry.
OnAfterDrawEntry	Event triggered after drawing the password entry.
OnBeforeDrawPattern	Event triggered before drawing the pattern line.
OnAfterDrawPattern	Event triggered after drawing the pattern line.
OnBeforeDrawPatternCircle	Event triggered before drawing the pattern circle.
OnAfterDrawPatternCircle	Event triggered after drawing the pattern circle.
OnButtonAppearanceChanged	Event triggered when the button appearance is changed.
OnButtonDownChanged	Event triggered when the button in down state is changed.
OnButtonHoverChanged	Event triggered when the hovered button is changed.
OnButtonUpChanged	Event triggered when the button in up state is changed.
OnConfirmPassword	Event triggered when password is set for the second time in learn mode.
OnEntryAppearanceChanged	Event triggered when the entry appearance is changed.
OnLearnPassword	Event triggered when password is set for the first time in learn mode
OnNewPassword	Event triggered when new password is set.
OnOptionsChanged	Event triggered when the options settings are changed.
OnPasswordCheck	Event triggered when the entry and password are compared.
OnPasswordEntryChanged	Event triggered when the entry is changed.
OnPatternEntryChanged	Event triggered when the entry of the pattern is changed.
OnPatternEntryEnd	Event triggered when the entry of the pattern is ended.

If you want the user to set a new password you can do this with the LearnMode property in Options. This enables the user to enter the password that they want (OnLearnPassword event). To set the new password, the user needs to enter the same one for a second time (OnConfirmPassword event). In case these are both similar, then you will have set a new password (OnNewPassword event), otherwise the password will need to be set for the first time again.

The TMSFNCPassLock will center the buttons and the entry indicators automatically based on the size of the component. To block the underlying components it is possible to set the control client alligned and set the size of the buttons and the indicators with the MaxSize property in the appearances. In case you want them to take the full space, you can set the value to -1.

When you don’t want to show the password length you can set the ShowPasswordLength property to false. This will check the password only after the ‘OK’ button was clicked. Which will initially be shown when you set the ShowPasswordLength property to false.