Skip to content

TTMSFNCWaitingIndicator

TTMSFNCUIPack147

An indicator for illustrating an indefinite waiting time for a task that is in progress.

Properties

Property name Description
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.

Events

Event name Description
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.

TTMSFNCHotSpotImage

TTMSFNCUIPack148

An image that has different areas (TTMSFNCHotSpot further referred to as hotspot) which can be hovered or selected and each with an individual appereance.

Properties

Property name Description
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.)

Events

Event name Description
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;