An indicator for illustrating an indefinite waiting time for a task that is in progress.
|Active||Activates the animation.|
|Appearance||Property for various appearance settings.|
|AnimationSpeed||Can be used to set the duration of an animation cycle.|
|OverlayParent||If enabled, the indicator is shown with an overlay over the complete parent.|
|OnAppearanceChanged||Event triggered when the one of the Appereance properties is changed.|
|OnBeforeDrawIndicator||Event triggered before drawing the indicator(s).|
|OnAfterDrawIndicator||Event triggered after drawing the indicator(s).|
|OnBeforeDrawOverlay||Event triggered before drawing the overlay if OverlayParent is true and the control is Active.|
|OnAfterDrawOverlay||Event triggered after drawing the overlay.|
An image that has different areas (TTMSFNCHotSpot further referred to as hotspot) which can be hovered or selected and each with an individual appereance.
|Bitmap||The standard image of the component|
|DefaultHotSpotAppearance||The appearance settings used for newly added hotspots|
|HotSpotNameLocation||Where you want to show the name of the hotspots|
|HotSpots||The different areas that are defined, here you can select to show them on hover, down or selected state and if you want to show the name of the hotspot and the specific appearance for each of these states.|
|HoverBitmap||An image that will be placed over the full standard image, and where the hotspots will be cut out from, when in a hovered state.|
|MultiSelect||If you want to select more than one hotspot.|
|SelectedBitmap||An image that will be placed over the full standard image, and where the hotspots will be cut out from, when in a selected state.|
|SelectedHotSpot||The hotspot that is selected. (In case of multiselect the last one that was selected.)|
|OnHoveredHotSpotChange||Event triggered before the hovered hotspot is changed.|
|OnHoveredHotSpotChanged||Event triggered after the hovered hotspot is changed.|
|OnSelectedHotSpotChange||Event triggered before the selected hotspot is changed.|
|OnSelectedHotSpotChanged||Event triggered after the selected hotspot is changed.|
|OnHotSpotAppearanceChanged||Event triggered when one of the Appereance properties is changed in a hotspot.|
|OnHotSpotShapeChanged||Event triggered when the polygon of a hotspot is changed.|
|OnAfterDrawDownHotSpot||Event triggered after drawing the hotspot polygon in down state.|
|OnBeforeDrawHoveredHotSpot||Event triggered before drawing the hovered hotspot polygon.|
|OnAfterDrawHoveredHotSpot||Event triggered after drawing the hovered hotspot polygon.|
|OnBeforeDrawSelectedHotSpot||Event triggered before drawing the polygon of the selected hotspots.|
|OnAfterDrawSelectedHotSpot||Event triggered after drawing the polygon of the selected hotspots.|
|OnBeforeDrawHotSpotName||Event triggered before drawing the hotspot name.|
|OnAfterDrawHotSpotName||Event triggered after drawing the hotspot name.|
How to add a hotspot via code
The coordinates given for the shape should be in relation to the original image size. The component will adjust the size of the polygon, so that it will be placed on the correct spot if the image is drawn with other dimensions.
Adding a hotspot can be done in a couple of ways depending on shape that you want to add. First of all you can just use the collection and ’Add’ a hotspot. This will add a hotspot with an empty polygon.
If you immmediately want to add a shape you can use these calls:
- TTMSFNCHotSpotImage.AddEllipseHotSpot(ABounds: TRectF);
- TTMSFNCHotSpotImage.AddRectangleHotSpot(ARect: TRectF);
- TTMSFNCHotSpotImage.AddPathHotSpot(APath: TTMSFNCGraphicsPath);
- TTMSFNCHotSpotImage.AddPolygonHotSpot(APolygon: TTMSFNCGraphicsPathPolygon);
All of these calls can be overloaded with the name of the hotspot and a TTMSFNCHotSpotAppearance.
An example to add an ellipse:
procedure TForm1.AddHotSpotClick(Sender: TObject); var hs: TTMSFNCHotSpot; begin //Add a hotspot with an elliptical shape and a name hs := HotSpotImage. AddEllipseHotSpot(RectF(50,100,200,150), 'HotSpot Name'); hs.DataString := 'Additional information'; hs.ShowOnHover := False; hs.Selected := True; //Set the fill color when the hotspot is selected to green hs.Appearance.SelectedFill.Color := gcGreen; end;
If the hotspot was already created and you want to change the shape, you can do this on hotspot level with the functions TTMSFNCHotSpot.SetEllipse, SetRectangle and SetPath. For the polygon you can just assign this to the property TTMSFNCHotSpot.HotSpotPolygon
Other properties that can be set are, ’Selectable’ which indicates if the hotspot can be selected and with the ’Selected’ property you can set the hotspot to a selected or unselected state.
You can also choose if you want to show the polygon when hovered, down or selected and if you want to show the name of the hotspot. The name is also linked to the property HotSpotNameLocation of the TTMSFNCHotSpotImage, if that property is set to none, then the name will not be shown as well.
Using the events
The events can be used to manipulate if a hotspot should be hovered or selected, or to change or check the hotspot settings before or after drawing them. This is an example to change the color or to not draw the hotspot at all, based on the ’DataString’ property.
procedure TForm1.HotSpotImageBeforeDrawHoveredHotSpot(Sender: TObject; AGraphics: TTMSFNCGraphics; AIndex: Integer; ABoundsRect: TRectF; APolyogn: TTMSFNCGraphicsPathPolygon; ABitmap: TTMSFNCBitmap; var AAllow, ADefaultDraw: Boolean); begin //Change the fill color if HotSpotImage.HotSpots[AIndex].DataString = 'yes' then AGraphics.Fill.Color := gcRed; //Don't draw the hotspot if HotSpotImage.HotSpots[AIndex].DataString = 'no' then AAllow = False; end;