TMS Software

Frequently Asked Component Specific Questions

Options

Display all FAQ items

Search FAQ items:

Displaying items 61 to 75 of 508, page 5 of 34

<< previous next >>

THotSpotImage
Saving & loading HotSpots at runtime

Hotspots can be easily saved & loaded at runtime. The HotSpotImage.HotSpots collection has following methods:

THotSpotImage.HotSpots.SaveToStream(S: Stream);
THotSpotImage.HotSpots.LoadFromStream(S: Stream); 
THotSpotImage.HotSpots.SaveToFile(FName: string);
THotSpotImage.HotSpots.LoadFromFile(FName: string);

THotSpotImage
Getting started with the HotSpot editor

Drop a THotSpotImage on the form and load a background picture via the Picture property. Start the HotSpots editor by clicking the HotSpots property in the Object Inspector.

Select the magic wand tool to automatically select an area:

After clicking inside the area of France and going to selection mode again by clicking the first arrow button on the toolbar, this becomes:

On the right pane, the properties for the hotspot can be edited. The name, ID, Hint, Angle and state of the hotspot can be set. In the different tabs, either image, color or imagelist image can be set for the different states of the hotspot. For example, moving to the Selected tab and setting the Selected color to orange results in:

After clicking the hotspot at runtime to select it, this appears as:

Visual organisation of TMS GUIMotions

The TMS GUIMotions component has 8 modes to display & animate your images, custom drawn information or controls. Animation can be controlled with the mouse or the keyboard. In the screenshot below is an overview of the major and important elements of the component.

1) When selecting an image the caption(1) will have the caption text assigned to the image. The caption can be positioned in every corner or in the top or bottom center of the control.

2) The scrollbar(2) can be used to navigate through the collection of images. This scrollbar can be positioned in every corner or in the top or bottom center of the control.

3) The most important element of the control is the collection of images(3). The images in this collection will eventually be loaded in the DirectX video memory. DirectX will create a texture on a vertex buffer which can be animated. You can define these images on three different ways:

a. Normal image: just add a PNG, JPEG, BMP, GIF file to the collection. Note that the formats supported depend on the installed TPicture formats.
b. Custom painted image : paint on the canvas of the custom image (OnImageCustomDraw required) and this will be animated
c. Control painted image : Paint a control on the image that will be animated

For each image you can also add an alternate image which can be created on the same way as the normal image (see the three image types above). The alternate image can be optionally shown when right-clicking on the selected image.

4) Depending on the animation mode choosen, the normal images will be loaded skewed, scaled or transformed. When you select an image the selected image will transform to a different state.

5) When you click on the selected image you can zoom in depending on PictureWidthZoomed and PictureHeightZoomed you have chosen.

There are three ways of loading images into video memory (controlled by the ImageQuality property)

a) iqNone : lower resolution for minimum memory usage and maximum animation speed (PictureWidth and PictureHeight properties will be used to set resolution to load Image).
b) iqSelected : Only the selected image will be loaded in high resolution (for reasonable animation speed and memory usage)
c) IqFull: all images will be loaded in video memory at full resolution. (longer loading time for images and higher memory usage)

Initializing images

There is not much code needed to initialize and start using the component. First of all, images need to be added to the image collection, either in design time or in code.

Directly loading the pictures in code:

for I := 1 to 12 do 
begin
   with GUIMotions1.Images.Add do 
   begin 
   //Add picture already loaded 
   Picture.LoadFromFile(‘image1.jpg’); 
   //Same for adding alternate picture but specify AlternatePicture 
   //Set some properties… 
   end; 
end;

Letting GUIMotions load the image from file by just setting the filename:

for I := 1 to 12 do 
begin 
   with GUIMotions1.Images.Add do 
   begin 
   //Just set reference to the image filename, GUIMotions will load the 
   //image when needed 
   PictureLocation := ‘image1.jpg’; 
   //Same for adding alternate picture but specify AlternatePicture 
   //Set some properties… 
   end; 
end;

Letting GUIMotions load the image in a separate thread from file by just setting the filename:

for I := 1 to 12 do 
begin 
   with GUIMotions1.Images.Add do 
   begin 
   //Just set reference to the image filename, GUIMotions will load the 
   //image when needed 
   ThreadPictureLocation := ‘image1.jpg’; 
   end; 
end;

Load many images at once:

GUIMotions1.AddImagesFromFolder('.\Images\*.jpg');

GUIMotions1.AddImageLocationsFromFolder('.\Images\*.jpg');
//or any other format supported by TPicture

GUIMotions1.AddThreadedImageLocationsFromFolder('.\Images\*.jpg');
//images are loaded in a separate thread

Initializing controls

The TMS GUIMotions control can also be used to display and paint controls that have the ability to draw to a canvas (ie. properly implement the PaintTo() method). To use controls, first references to the controls need to be added to the Images collection. Secondly, controls need to be set visible and positioned correct at the appropriate events. Here is a small tutorial which might help to setup similar projects.

Step 1: adding references to the controls to the collection. (Sample with chart control)

for I := 0 to 10 do 
begin 
   with GUIMotions1.Images.Add do 
   begin 
      // 1) Create control with parent GUIMotions1
      c := TAdvGDIPChartview.Create(GUIMotions1); 
      // 2) Set the control visible to false
      c.Visible := false; 
      // 3) Set the parent to GUIMotions1
      c.Parent := GUIMotions1 
      // 4) Add some random data to your control 
      // 5) Add control to image collection
      Control := c; 
   end; 
end;

This will by default only show white images (as nothing is loaded in the picture property). In case a GUIMotions.DefaultPicture is set the default picture will be used.

Step 2: making sure the control is displayed in the animation:

Add an event handler for GUIMotions.OnImageCustomDraw. This event can be called when the GUIMotions component is trying to create a texture. When no picture was set for the image from the collection to be rendered, GUIMotions will call this custom drawing event. In this event you need to draw the control on the canvas of the picture variable.

procedure TForm42.GUIMotions1ImageCustomDraw(Sender: TObject; Image: Integer; Picture: TBitmap); 
var
   c: TAdvGDIPChartView; 
begin
   c := TAdvGDIPChartView(GUIMotions1.Images[Image].Control);
   c.Width := GUIMotions1.PictureWidthZoomed;
   c.Height := GUIMotions1.PictureHeightZoomed;
   picture.Width := GUIMotions1.PictureWidthZoomed;
   picture.Height := GUIMotions1.PictureHeightZoomed;
   c.PaintTo(Picture.Canvas, 0, 0);
   Picture.Canvas.Pen.Color := clBlack;
   Picture.Canvas.Pen.Width := 2;
   Picture.Canvas.Brush.Style := bsClear;
   Picture.Canvas.Rectangle(0,0,Picture.Width,Picture.Height);
end;

Step 3: show and hide the control:

The control has 3 events that can be used to make the control visible. OnImageClick, OnImageDblClick, OnImageZoomed. In this case we are using the OnImageZoomed event.

procedure TForm42.GUIMotions1ImageZoomed(Sender: TObject; Image: Integer; ImageRectangle: TRect); 
var
   r: TRect; 
begin
   AdvChartPanesEditorDialogGDIP1.ChartView := TAdvGDIPChartview(GUIMotions1.Images[Image].Control);
   r := ImageRectangle;
   TAdvGDIPChartview(GUIMotions1.Images[Image].Control).SetBounds(r.Left, r.Top, r.Right - r.Left, r.Bottom - r.Top);
   TAdvGDIPChartview(GUIMotions1.Images[Image].Control).visible := true; 
end;

From the OnImageUnzoom, the control can be hidden again.

procedure TForm42.GUIMotions1ImageUnZoom(Sender: TObject; Image: Integer; ImageRectangle: TRect); 
var
   r: TRect; 
begin
   TAdvGDIPChartview(GUIMotions1.Images[Image].Control).visible := false; 
end;

Step 4: Update the image / texture upon control changes:

Wherever you make changes to the control you need to force an update to pass the changes of the control to the image. The update will automatically call the OnImageCustomDraw event and will paint the latest updated control on the image.

GUIMotions1.Images[GUIMotions1.ImageSelected].Update;

TAdvTouchKeyBoard
Saving & loading keyboard layouts

Keyboard layouts can be saved & loaded at any time. For this, TAdvTouchkeyboard exposes two methods:

SaveKeybLayout(FileName: string); 
LoadKeybLayout(FileName: string);

TMS Advanced Dropdown Controls
Changing the color selection style of the TAdvColorPickerDropDown

To change the color selection style use the code below:

AdvColorPickerDropDown1.ColorSelectionStyle := csColorCube;

Selection modes are:
csList
csDiscrete
csColorCube
csSpectrum

TMS Advanced Dropdown Controls
Setting / getting the selected color of the TAdvColorPickerDropDown

To set the selected color of the TAdvCalculatorDropDown component use the code below:

AdvColorPickerDropDown1.SelectedColor := clLime; 
//OR 
AdvColorPickerDropDown1.ItemIndex := 10;

To get the selected color of the TAdvCalculatorDropDown component use the code below:

var 
  c: TColor; 
  i: Integer; 
begin 
  c := AdvColorPickerDropDown1.SelectedColor; 
  //OR 
  I := AdvColorPickerDropDown1.ItemIndex; 
  c := AdvColorPickerDropDown1.Colors[i].Color; 
end;

TMS Advanced Dropdown Controls
Adding custom colors in the TAdvColorPickerDropDown

To add custom colors in the TAdvCalculatorDropDown component use the code below:

with AdvColorPickerDropDown1.Colors.Add do 
begin 
  Color := clWebSnow; 
  Caption := 'Web Snow';
end;

TMS Advanced Dropdown Controls
Assigning a Panel to the TAdvControlDropDown

To assign a Panel to the TAdvControlDropDown component use the code below:

AdvControlDropDown1.Control := Panel1;

When a control is assigned, the control is automatically aligned in the dropdown container.

TMS Advanced Dropdown Controls
Changing Control values when editing text of TAdvControlDropDown

To change control values when editing text of TAdvControlDropDown use the code below:

procedure TForm1.AdvControlDropDown1Change(Sender: TObject); 
begin 
  Edit1.Text := AdvControlDropDown1.Text; 
end;

TMS Advanced Dropdown Controls
Adding an item in TAdvDetailDropDown

To add an item in the TAdvDetailDropDown component use the code below:

with AdvDetailDropDown1.Items.Add do 
begin 
  Caption := 'This is an item'; 
  Notes := 'This is the notes section'; 
  ImageIndex := 1; 
end;

TMS Advanced Dropdown Controls
Adding an item in TAdvImagePickerDropDown

To add an item in the TAdvImagePickerDropDown component use the code below:

with AdvImagePickerDropDown1.Items.Add do 
begin 
  Caption := 'Image 1'; 
  Image.LoadFromFile('Image1.jpg'); 
end;

TMS Advanced Dropdown Controls
Adding cancel and ok buttons in TAdvMemoDropDown

To add cancel and ok buttons in the TAdvMemoDropDown component use the code below:

var 
  bOk, bCancel: TFooterButton; 
begin 
  with AdvMemoDropDown1.DropDownFooter do 
  begin 
    bOk := Buttons.Add; 
    bOk.Caption := 'Ok'; 
    bOk.ModalResult := mrOk; 

    bCancel := Buttons.Add; 
    bCancel.Caption := 'Cancel'; 
    bCancel.ModalResult := mrCancel; 
  end; 
end;

These buttons will allow you to save or cancel the text you have inserted in the Memo control.

TMS Advanced Dropdown Controls
Adding Columns and Items in TAdvMultiColumnDropDown

To add Columns and Items in the TAdvMultiColumnDropDown component use the code below:

var 
  it: TDropDownItem; 
begin 
  AdvMultiColumnDropDown1.DropDownAutoWidth := true; 
  AdvMultiColumnDropDown1.Columns.Add.Header := 'Column 1'; 
  AdvMultiColumnDropDown1.Columns.Add.Header := 'Column 2'; 
  AdvMultiColumnDropDown1.Columns.Add.Header := 'Column 3'; 

  it := AdvMultiColumnDropDown1.Items.Add; 
  it.Text.Add('Item 1 at column 1'); 
  it.Text.Add('Item 1 at column 2'); 
  it.Text.Add('Item 1 at column 3'); 

  it := AdvMultiColumnDropDown1.Items.Add; 
  it.Text.Add('Item 2 at column 1'); 
  it.Text.Add('Item 2 at column 2'); 
  it.Text.Add('Item 2 at column 3'); 
end;

Explore All Products

Frequently Asked Component Specific Questions

Options