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;
|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.
The TTMSFNCPassLock gives you the ability to add password protection to your application. This can be done with a numpad or a pattern.
|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.)|
|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.