From Clomosy Docs

No edit summary
No edit summary
Line 206: Line 206:
   Form1.Run;
   Form1.Run;
}
}
</pre>
'''Example 2: '''<br>
The example contains a series of procedures for controlling and altering a character's size and position. For instance, the SetZoomIn procedure is used to enlarge the character, but it includes various checks to ensure that the enlargement does not exceed the movement area boundaries. The SetZoomOut procedure reduces the character's size, similarly checking for boundary limits. Additionally, procedures such as SetGoUp, SetGoDown, SetGoLeft, and SetGoRight are used to move the character up, down, left, and right, respectively. These movement and size adjustment operations are carried out with animations to provide visual feedback to the user.<br>
The initial setup of the form and button placement is designed to differ for mobile and desktop platforms. For mobile platforms, buttons are added to provide access to movement and size adjustment functions, while desktop platforms use keyboard shortcuts. This approach ensures that the user interface is designed to support user interaction across different platforms.
:'''TRObject Syntax'''
<pre>
var
  Form1: TclForm;
  pnlMotionConsole, motionPanel: TCLPanel;
  ImgCharacter: TCLImage;
  btnUp,btnDown,btnRight,btnLeft,btnZoomIn,btnZoomOut: TClButton;
  incomingValue, BottomPosX,x,intermediateValue: Integer
  lbltopBar : TclProLabel;
void SetZoomIn
var
  rightPosX,BottomPosX,aradeger:Integer
{
rightPosX=ImgCharacter.Position.X+ImgCharacter.Width
BottomPosX=ImgCharacter.Position.Y+ImgCharacter.Height
  if(((incomingValue>200-ImgCharacter.Height) && (200-ImgCharacter.Height>0)) || ((incomingValue>200-ImgCharacter.Width) && (200-ImgCharacter.Width>0)) )
  {
  x=200-ImgCharacter.Height;
  intermediateValue=200-ImgCharacter.Width;
  clAnimateFloat(ImgCharacter,'Height',200,1,1,0);
  clAnimateFloat(ImgCharacter,'Width',200,1,1,0);
  clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - intermediateValue / 2,1,1,0);
  clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.y - x / 2,1,1,0);
  }
  else if((ImgCharacter.Height+incomingValue>200) || (ImgCharacter.Width+incomingValue>200))
  {
    ShowMessage('You Have Reached Your Magnification Limit!');
  }
  else if((ImgCharacter.Position.X<incomingValue) || (rightPosX+20>motionPanel.Width))
  {
    ShowMessage('You Can''t Exceed the Limits!');
  }
  else if((ImgCharacter.Position.Y<incomingValue) || (BottomPosX+20>motionPanel.Height))
  {
    ShowMessage('You Can''t Exceed the Limits!');
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue / 2,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y - incomingValue / 2,1,1,0);
  }
}
 
 
void SetZoomOut
var
  rightPosX,BottomPosX:Integer
{
rightPosX=ImgCharacter.Position.X+ImgCharacter.Width
BottomPosX=ImgCharacter.Position.Y+ImgCharacter.Height
  if((ImgCharacter.Width<=20) || (ImgCharacter.Height<=20))
  {
    ShowMessage('You Can''t Shrink Any More!');
  }
  else if(((incomingValue>ImgCharacter.Height-20)&&(ImgCharacter.Height-20>0)) || ((incomingValue>ImgCharacter.Width-20)&&(ImgCharacter.Width-20>0)))
  {
    x=ImgCharacter.Height-20
    intermediateValue=ImgCharacter.Width-20
    clAnimateFloat(ImgCharacter,'Width',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  }
}
void SetGoUp
{
  if(ImgCharacter.Position.Y<=0)
  {
    ShowMessage('You Can''t Go Any Higher!');
  }
  else if(ImgCharacter.Position.Y<incomingValue)
  {
    clAnimateFloat(ImgCharacter,'Position.Y',0,1,1,0)
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y-incomingValue,1,1,0)
  }
}
void SetGoDown
var
  BottomPosX: Integer
{
BottomPosX=ImgCharacter.Position.Y+ImgCharacter.Height
  if(BottomPosX>=motionPanel.Height)
  {
    ShowMessage('You Can''t Go Any Lower!');
  }
  else if(motionPanel.Height-BottomPosX<incomingValue)
  {
    clAnimateFloat(ImgCharacter,'Position.Y',motionPanel.Height - ImgCharacter.Height,1,1,0)
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue,1,1,0)
  }
}
void SetGoLeft
{
  if(ImgCharacter.Position.X<=0)
  {
    ShowMessage('You Can''t Go Any Left!');
  }
  else if(ImgCharacter.Position.X < incomingValue)
  {
    clAnimateFloat(ImgCharacter,'Position.X',0,1,1,0)
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue,1,1,0)
  }
}
void SetGoRight
var
  rightPosX: Integer
{
rightPosX=ImgCharacter.Position.X+ImgCharacter.Width
  if(rightPosX>=motionPanel.Width)
  {
    ShowMessage('You can''t go any further to the right');
  }
  else if(motionPanel.Width-rightPosX<incomingValue)
  {
  clAnimateFloat(ImgCharacter,'Position.X',motionPanel.Width - ImgCharacter.Width,1,1,0)
  }
  else
  {
  clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue,1,1,0)
  }
}
 
void SetMotion
{
  if(Form1.clSenderKey == 37)
  {
    SetGoLeft;
  }
  else if(Form1.clSenderKey == 39)
  {
    SetGoRight;
  }
  else if(Form1.clSenderKey == 38)
  {
    SetGoUp;
  }
  else if(Form1.clSenderKey == 40)
  {
    SetGoDown;
  }
  else if((Form1.clSenderKeyChar == 43) || (Form1.clSenderKeyChar == 98) || (Form1.clSenderKeyChar == 66))
  {
    SetZoomIn;
  }
  else if((Form1.clSenderKeyChar == 45) || (Form1.clSenderKeyChar == 107) || (Form1.clSenderKeyChar == 75))
  {
    SetZoomOut;
  }
  else
  {
    ShowMessage('Please Use the Buttons Below'#13'To Move: Arrow Keys'#13'To Enlarge: B or + (numpad)'#13'To Reduce : K or - (numpad)');
  }
}
{
  incomingValue=20
  Form1= TclForm.Create(Self);
  Form1.SetFormColor('#f3afaf', '', clGNone);
  TclButton(Form1.clFindComponent('BtnFormMenu')).Visible = False;
  TclButton(Form1.clFindComponent('BtnGoBack')).Visible = False;
 
  lbltopBar= Form1.AddNewProLabel(Form1,'lbltopBar','Move with the arrow keys. ''+'' and ''-'''#13'You can make the character smaller with the buttons..');
  lbltopBar.Align=alTop;
  lbltopBar.Height= Form1.clHeight / 9;
  lbltopBar.clProSettings.FontColor = clAlphaColor.clHexToColor('#030303');
  lbltopBar.clProSettings.FontSize = 14;
  lbltopBar.clProSettings.FontVertAlign = palcenter;
  lbltopBar.clProSettings.FontHorzAlign = palcenter;
  lbltopBar.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
  lbltopBar.clProSettings.BorderColor = clAlphaColor.clHexToColor('#d55353');
  lbltopBar.clProSettings.BorderWidth = 5;
  lbltopBar.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#d17a7a');
  lbltopBar.clProSettings.IsRound = True;
  lbltopBar.clProSettings.RoundHeight = 20;
  lbltopBar.clProSettings.RoundWidth = 20;
  lbltopBar.SetclProSettings(lbltopBar.clProSettings);
 
  motionPanel= Form1.AddNewPanel(Form1,'motionPanel')
  motionPanel.Align=AlClient;
  motionPanel.Margins.Top = 10;
  motionPanel.Margins.Bottom = 10;
  motionPanel.Margins.Left = 10;
  motionPanel.Margins.Right = 10;
 
  ImgCharacter= Form1.AddNewImage(motionPanel,'ImgCharacter');
  Form1.SetImage(ImgCharacter,'https://clomosy.com/educa/ufo.png');
  ImgCharacter.Align=alNone;
  ImgCharacter.Position.X= Form1.clWidth / 2 - ImgCharacter.Width / 2;
  ImgCharacter.Position.Y= motionPanel.Height / 2 - ImgCharacter.Height / 2;
  ImgCharacter.Height= 50;
  ImgCharacter.Width= 50;
 
  Form1.Run;
 
  if(Clomosy.PlatformIsMobile)
  {
    pnlMotionConsole= Form1.AddNewPanel(Form1,'pnlMotionConsole');
    pnlMotionConsole.Align= AlBottom;
    pnlMotionConsole.Margins.Bottom=20;
    pnlMotionConsole.Height=200;
   
    btnLeft= Form1.AddNewButton(pnlMotionConsole, 'btnLeft', 'LEFT');
    btnLeft.Align=alLeft;
    btnLeft.Width=100;
    btnLeft.Margins.Top=20;
    btnLeft.Margins.Bottom=20;
    Form1.AddNewEvent(btnLeft,tbeOnClick,'SetGoLeft');
   
   
    btnRight= Form1.AddNewButton(pnlMotionConsole, 'btnRight', 'RIGHT');
    btnRight.Align=alRight;
    btnRight.Width=100;
    btnRight.Margins.Top=20;
    btnRight.Margins.Bottom=20;
    Form1.AddNewEvent(btnRight,tbeOnClick,'SetGoRight')
   
   
    btnUp= Form1.AddNewButton(pnlMotionConsole, 'btnUp', 'UP');
    btnUp.Align=alTop;
    btnUp.Width=100;
    btnUp.Margins.Top=10;
    btnUp.Height=40;
    Form1.AddNewEvent(btnUp,tbeOnClick,'SetGoUp');
   
    btnDown= Form1.AddNewButton(pnlMotionConsole, 'btnDown', 'DOWN');
    btnDown.Align=alBottom;
    btnDown.Width=100;
    btnDown.Margins.Bottom=10;
    btnDown.Height=40;
    Form1.AddNewEvent(btnDown,tbeOnClick,'SetGoDown');
   
    btnZoomIn= Form1.AddNewButton(pnlMotionConsole, 'btnZoomIn', '+')
    btnZoomIn.Align=alLeft;
    btnZoomIn.Margins.Top=20;
    btnZoomIn.Margins.Bottom=20;
    btnZoomIn.Margins.Left=5;
    Form1.AddNewEvent(btnZoomIn,tbeOnClick,'SetZoomIn');
   
    btnZoomOut= Form1.AddNewButton(pnlMotionConsole, 'btnZoomOut', '-')
    btnZoomOut.Align=alRight;
    btnZoomOut.Margins.Top=20;
    btnZoomOut.Margins.Bottom=20;
    btnZoomOut.Margins.Right=5;
    Form1.AddNewEvent(btnZoomOut,tbeOnClick,'SetZoomOut');
  }
  else
    Form1.AddNewEvent(Form1,tbeOnKeyDown,'SetMotion');
}
</pre>
:'''Base Syntax'''
<pre>
var
  Form1: TclForm;
  pnlMotionConsole, motionPanel: TCLPanel;
  ImgCharacter: TCLImage;
  btnUp,btnDown,btnRight,btnLeft,btnZoomIn,btnZoomOut: TClButton;
  incomingValue, BottomPosX,x,intermediateValue: Integer
  lbltopBar : TclProLabel;
procedure SetZoomIn
var
  rightPosX,BottomPosX,aradeger:Integer
begin
rightPosX := ImgCharacter.Position.X+ImgCharacter.Width
BottomPosX := ImgCharacter.Position.Y+ImgCharacter.Height
  if((incomingValue > 200-ImgCharacter.Height) and (200-ImgCharacter.Height>0)) or ((incomingValue>200-ImgCharacter.Width) and (200-ImgCharacter.Width>0)) then
  begin
  x:= 200-ImgCharacter.Height;
  intermediateValue := 200-ImgCharacter.Width;
  clAnimateFloat(ImgCharacter,'Height',200,1,1,0);
  clAnimateFloat(ImgCharacter,'Width',200,1,1,0);
  clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - intermediateValue / 2,1,1,0);
  clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.y - x / 2,1,1,0);
  end
  else if (ImgCharacter.Height+incomingValue>200) or (ImgCharacter.Width+incomingValue>200) then
  begin
    ShowMessage('You Have Reached Your Magnification Limit!');
  end
  else if (ImgCharacter.Position.X < incomingValue) or (rightPosX+20 > motionPanel.Width) then
  begin
    ShowMessage('You Can''t Exceed the Limits!');
  end
  else if (ImgCharacter.Position.Y < incomingValue) or (BottomPosX+20 > motionPanel.Height) then
  begin
    ShowMessage('You Can''t Exceed the Limits!');
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue / 2,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y - incomingValue / 2,1,1,0);
  end;
end;
 
 
procedure SetZoomOut
var
  rightPosX,BottomPosX:Integer
begin
rightPosX:=ImgCharacter.Position.X+ImgCharacter.Width;
BottomPosX:=ImgCharacter.Position.Y+ImgCharacter.Height;
  if(ImgCharacter.Width <= 20) or (ImgCharacter.Height <= 20) then
  begin
    ShowMessage('You Can''t Shrink Any More!');
  end
  else if((incomingValue>ImgCharacter.Height-20)and(ImgCharacter.Height-20 > 0)) or ((incomingValue > ImgCharacter.Width-20)and(ImgCharacter.Width-20 > 0)) then
  begin
    x := ImgCharacter.Height-20
    intermediateValue := ImgCharacter.Width-20
    clAnimateFloat(ImgCharacter,'Width',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  end;
end;
procedure SetGoUp
begin
  if ImgCharacter.Position.Y <= 0 then
  begin
    ShowMessage('You Can''t Go Any Higher!');
  end
  else if ImgCharacter.Position.Y<incomingValue then
  begin
    clAnimateFloat(ImgCharacter,'Position.Y',0,1,1,0)
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y-incomingValue,1,1,0)
  end;
end;
procedure SetGoDown
var
  BottomPosX: Integer
begin
BottomPosX := ImgCharacter.Position.Y+ImgCharacter.Height
  if BottomPosX >= motionPanel.Height then
  begin
    ShowMessage('You Can''t Go Any Lower!');
  end
  else if motionPanel.Height-BottomPosX<incomingValue then
  begin
    clAnimateFloat(ImgCharacter,'Position.Y',motionPanel.Height - ImgCharacter.Height,1,1,0)
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue,1,1,0)
  end;
end;
procedure SetGoLeft
begin
  if ImgCharacter.Position.X <= 0 then
  begin
    ShowMessage('You Can''t Go Any Left!');
  end
  else if ImgCharacter.Position.X < incomingValue then
  begin
    clAnimateFloat(ImgCharacter,'Position.X',0,1,1,0)
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue,1,1,0)
  end;
end;
procedure SetGoRight
var
  rightPosX: Integer
begin
rightPosX := ImgCharacter.Position.X+ImgCharacter.Width
  if rightPosX >= motionPanel.Width then
  begin
    ShowMessage('You can''t go any further to the right');
  end
  else if motionPanel.Width - rightPosX<incomingValue then
  begin
  clAnimateFloat(ImgCharacter,'Position.X',motionPanel.Width - ImgCharacter.Width,1,1,0)
  end
  else
  begin
  clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue,1,1,0)
  end;
end;
 
procedure SetMotion
begin
  if Form1.clSenderKey = 37 then
  begin
    SetGoLeft;
  end
  else if Form1.clSenderKey = 39 then
  begin
    SetGoRight;
  end
  else if Form1.clSenderKey = 38 then
  begin
    SetGoUp;
  end
  else if Form1.clSenderKey = 40 then
  begin
    SetGoDown;
  end
  else if(Form1.clSenderKeyChar = 43) or (Form1.clSenderKeyChar = 98) or (Form1.clSenderKeyChar = 66) then
  begin
    SetZoomIn;
  end
  else if (Form1.clSenderKeyChar = 45) or (Form1.clSenderKeyChar = 107) or (Form1.clSenderKeyChar = 75) then
  begin
    SetZoomOut;
  end
  else
  begin
    ShowMessage('Please Use the Buttons Below'#13'To Move: Arrow Keys'#13'To Enlarge: B or + (numpad)'#13'To Reduce : K or - (numpad)');
  end;
end;
begin
  incomingValue:=20
  Form1:= TclForm.Create(Self);
  Form1.SetFormColor('#f3afaf', '', clGNone);
  TclButton(Form1.clFindComponent('BtnFormMenu')).Visible := False;
  TclButton(Form1.clFindComponent('BtnGoBack')).Visible := False;
 
  lbltopBar:= Form1.AddNewProLabel(Form1,'lbltopBar','Move with the arrow keys. ''+'' and ''-'''#13'You can make the character smaller with the buttons..');
  lbltopBar.Align:=alTop;
  lbltopBar.Height:= Form1.clHeight / 9;
  lbltopBar.clProSettings.FontColor := clAlphaColor.clHexToColor('#030303');
  lbltopBar.clProSettings.FontSize := 14;
  lbltopBar.clProSettings.FontVertAlign := palcenter;
  lbltopBar.clProSettings.FontHorzAlign := palcenter;
  lbltopBar.clProSettings.TextSettings.Font.Style := [fsBold,fsItalic];
  lbltopBar.clProSettings.BorderColor := clAlphaColor.clHexToColor('#d55353');
  lbltopBar.clProSettings.BorderWidth := 5;
  lbltopBar.clProSettings.BackgroundColor := clAlphaColor.clHexToColor('#d17a7a');
  lbltopBar.clProSettings.IsRound := True;
  lbltopBar.clProSettings.RoundHeight := 20;
  lbltopBar.clProSettings.RoundWidth := 20;
  lbltopBar.SetclProSettings(lbltopBar.clProSettings);
 
  motionPanel:= Form1.AddNewPanel(Form1,'motionPanel')
  motionPanel.Align:=AlClient;
  motionPanel.Margins.Top := 10;
  motionPanel.Margins.Bottom := 10;
  motionPanel.Margins.Left := 10;
  motionPanel.Margins.Right := 10;
 
  ImgCharacter:= Form1.AddNewImage(motionPanel,'ImgCharacter');
  Form1.SetImage(ImgCharacter,'https://clomosy.com/educa/ufo.png');
  ImgCharacter.Align:=alNone;
  ImgCharacter.Position.X:= Form1.clWidth / 2 - ImgCharacter.Width / 2;
  ImgCharacter.Position.Y:= motionPanel.Height / 2 - ImgCharacter.Height / 2;
  ImgCharacter.Height:= 50;
  ImgCharacter.Width:= 50;
 
  Form1.Run;
 
  if Clomosy.PlatformIsMobile then
  begin
    pnlMotionConsole:= Form1.AddNewPanel(Form1,'pnlMotionConsole');
    pnlMotionConsole.Align:= AlBottom;
    pnlMotionConsole.Margins.Bottom:=20;
    pnlMotionConsole.Height:=200;
   
    btnLeft:= Form1.AddNewButton(pnlMotionConsole, 'btnLeft', 'LEFT');
    btnLeft.Align:=alLeft;
    btnLeft.Width:=100;
    btnLeft.Margins.Top:=20;
    btnLeft.Margins.Bottom:=20;
    Form1.AddNewEvent(btnLeft,tbeOnClick,'SetGoLeft');
   
   
    btnRight:= Form1.AddNewButton(pnlMotionConsole, 'btnRight', 'RIGHT');
    btnRight.Align:=alRight;
    btnRight.Width:=100;
    btnRight.Margins.Top:=20;
    btnRight.Margins.Bottom:=20;
    Form1.AddNewEvent(btnRight,tbeOnClick,'SetGoRight')
   
   
    btnUp:= Form1.AddNewButton(pnlMotionConsole, 'btnUp', 'UP');
    btnUp.Align:=alTop;
    btnUp.Width:=100;
    btnUp.Margins.Top:=10;
    btnUp.Height:=40;
    Form1.AddNewEvent(btnUp,tbeOnClick,'SetGoUp');
   
    btnDown:= Form1.AddNewButton(pnlMotionConsole, 'btnDown', 'DOWN');
    btnDown.Align:=alBottom;
    btnDown.Width:=100;
    btnDown.Margins.Bottom:=10;
    btnDown.Height:=40;
    Form1.AddNewEvent(btnDown,tbeOnClick,'SetGoDown');
   
    btnZoomIn:= Form1.AddNewButton(pnlMotionConsole, 'btnZoomIn', '+')
    btnZoomIn.Align:=alLeft;
    btnZoomIn.Margins.Top:=20;
    btnZoomIn.Margins.Bottom:=20;
    btnZoomIn.Margins.Left:=5;
    Form1.AddNewEvent(btnZoomIn,tbeOnClick,'SetZoomIn');
   
    btnZoomOut:= Form1.AddNewButton(pnlMotionConsole, 'btnZoomOut', '-')
    btnZoomOut.Align:=alRight;
    btnZoomOut.Margins.Top:=20;
    btnZoomOut.Margins.Bottom:=20;
    btnZoomOut.Margins.Right:=5;
    Form1.AddNewEvent(btnZoomOut,tbeOnClick,'SetZoomOut');
  end
  else
    Form1.AddNewEvent(Form1,tbeOnKeyDown,'SetMotion');
end;
</pre>
</pre>

Revision as of 14:35, 7 August 2024

The clSenderKey feature captures the codes of keys on the keyboard that have special functions, excluding standard character keys (a-z, 0-9, etc.), and performs specific actions based on them.

These types of keys are generally referred to as "control keys" or "special keys." These control keys on the keyboard include arrow keys, function keys (F1-F12), Ctrl, Alt, Shift, Escape, Enter, Backspace, and other similar keys.

To detect these keys, the tbeOnKeyDown or tbeOnKeyUp events are used, as these events use virtual key codes and can capture keys that do not represent characters. For example, they can be used to move an image (TclImage) on the screen using the arrow keys.

Below is a table of control keys.

Key Code Key
8 Backspace
9 Tab
13 Enter
16 Shift
17 Ctrl
18 Alt
19 Pause
20 CapsLock
27 Escape
33 PageUp
34 PageDown
35 End
36 Home
37 ArrowLeft
38 ArrowUp
39 ArrowRight
40 ArrowDown
45 Insert
46 Delete
91 Windows Key
93 ContextMenu/ Windows Menu
112 F1
113 F2
114 F3
115 F4
116 F5
117 F6
118 F7
119 F8
120 F9
121 F10
122 F11
123 F12
144 NumLock
145 ScrollLock

NOTE: You should run and test Example 1 on Windows.

Example 1:
In the following example, a form is created with an image that can be moved around the screen using the arrow keys. The SetMotion procedure checks the key code captured by clSenderKey. When the left arrow key (37) is pressed, the image rotates 180 degrees and moves left by 5 units unless it has reached the left edge of the form. When the right arrow key (39) is pressed, the image rotates back to 0 degrees and moves right by 5 units unless it has reached the right edge. When the up arrow key (38) is pressed, the image rotates 270 degrees and moves up by 5 units unless it has reached the top edge. When the down arrow key (40) is pressed, the image rotates 90 degrees and moves down by 5 units unless it has reached the bottom edge. If any other keys are pressed, a message prompts the user to use only the arrow keys. The form is created, an image is added and centered, and an event handler is set up to call the SetMotion procedure on key down.

TRObject Syntax
var
  Form1:TCLForm;
  Image1 : TclImage;
  
procedure SetMotion;
begin
  if Form1.clSenderKey = 37 then //LEFT ok tuşu 37
  begin
    Image1.RotationAngle := 180;
    if Image1.Position.X <= 0 then
      ShowMessage('Can''t Go Any Further Left');
    else 
      Image1.Position.X := Image1.Position.X - 5;
  end;
  else if Form1.clSenderKey = 39 then //RIGHT ok tuşu 39
  begin
    Image1.RotationAngle := 0;
    if Image1.Position.X >= Form1.clWidth then
      ShowMessage('Can''t Go Any Further Right');
    else 
      Image1.Position.X := Image1.Position.X + 5;
  end;
  else if Form1.clSenderKey = 38 then //yukarı ok tuşu 38
  begin
    Image1.RotationAngle := 270;
    if Image1.Position.Y <= 0 then
      ShowMessage('Can''t Go Any Further Higher');
    else 
      Image1.Position.Y := Image1.Position.Y - 5;
  end
  else if Form1.clSenderKey = 40 then //aşağı ok tuşu 40
  begin
    Image1.RotationAngle := 90;
    if Image1.Position.Y >= Form1.clHeight then
      ShowMessage('Can''t Go Any Further Lower');
    else 
      Image1.Position.Y := Image1.Position.Y + 5;
  end else
  begin
    ShowMessage('Please use only directional arrow keys..');
  end;
end;

begin
  Form1 := TCLForm.Create(Self);
  Image1 := Form1.AddNewImage(Form1,'Image1');
  Image1.Align := AlNone;
  Image1.Position.X := Form1.clWidth / 2;
  Image1.Position.Y := Form1.clHeight / 2;
  Image1.Width := 100;
  Image1.Height := 100;
  Form1.setImage(Image1,'https://clomosy.com/demos/circled-right.png');
  
  Form1.AddNewEvent(Form1,tbeOnKeyDown,'SetMotion');
  Form1.Run;
end;
Base Syntax
//Clomosy.RunUnit('clSenderKey');

var
  Form1:TCLForm;
  Image1 : TclImage;
  
void SetMotion;
{
  if(Form1.clSenderKey == 37) //LEFT ok tuşu 37
  {
    Image1.RotationAngle = 180;
    if(Image1.Position.X <= 0)
      ShowMessage('Can''t Go Any Further Left');
    else 
      Image1.Position.X = Image1.Position.X - 5;
  }
  else if(Form1.clSenderKey == 39) //RIGHT ok tuşu 39
  {
    Image1.RotationAngle = 0;
    if(Image1.Position.X >= Form1.clWidth)
      ShowMessage('Can''t Go Any Further Right');
    else 
      Image1.Position.X = Image1.Position.X + 5;
  }
  else if(Form1.clSenderKey == 38) //yukarı ok tuşu 38
  {
    Image1.RotationAngle = 270;
    if(Image1.Position.Y <= 0)
      ShowMessage('Can''t Go Any Further Higher');
    else 
      Image1.Position.Y = Image1.Position.Y - 5;
  }
  else if(Form1.clSenderKey == 40) //aşağı ok tuşu 40
  {
    Image1.RotationAngle = 90;
    if(Image1.Position.Y >= Form1.clHeight)
      ShowMessage('Can''t Go Any Further Lower');
    else 
      Image1.Position.Y = Image1.Position.Y + 5;
  }
  else
  {
    ShowMessage('Please use only directional arrow keys..');
  }
}

{
  Form1 = TCLForm.Create(Self);
  Image1 = Form1.AddNewImage(Form1,'Image1');
  Image1.Align = AlNone;
  Image1.Position.X = Form1.clWidth / 2;
  Image1.Position.Y = Form1.clHeight / 2;
  Image1.Width = 100;
  Image1.Height = 100;
  Form1.setImage(Image1,'https://clomosy.com/demos/circled-right.png');
  
  Form1.AddNewEvent(Form1,tbeOnKeyDown,'SetMotion');
  Form1.Run;
}


Example 2:
The example contains a series of procedures for controlling and altering a character's size and position. For instance, the SetZoomIn procedure is used to enlarge the character, but it includes various checks to ensure that the enlargement does not exceed the movement area boundaries. The SetZoomOut procedure reduces the character's size, similarly checking for boundary limits. Additionally, procedures such as SetGoUp, SetGoDown, SetGoLeft, and SetGoRight are used to move the character up, down, left, and right, respectively. These movement and size adjustment operations are carried out with animations to provide visual feedback to the user.
The initial setup of the form and button placement is designed to differ for mobile and desktop platforms. For mobile platforms, buttons are added to provide access to movement and size adjustment functions, while desktop platforms use keyboard shortcuts. This approach ensures that the user interface is designed to support user interaction across different platforms.

TRObject Syntax
var
  Form1: TclForm;
  pnlMotionConsole, motionPanel: TCLPanel;
  ImgCharacter: TCLImage;
  btnUp,btnDown,btnRight,btnLeft,btnZoomIn,btnZoomOut: TClButton;
  incomingValue, BottomPosX,x,intermediateValue: Integer
  lbltopBar : TclProLabel;


void SetZoomIn
var
  rightPosX,BottomPosX,aradeger:Integer
{
rightPosX=ImgCharacter.Position.X+ImgCharacter.Width
BottomPosX=ImgCharacter.Position.Y+ImgCharacter.Height
  if(((incomingValue>200-ImgCharacter.Height) && (200-ImgCharacter.Height>0)) || ((incomingValue>200-ImgCharacter.Width) && (200-ImgCharacter.Width>0)) ) 
  {
   x=200-ImgCharacter.Height;
   intermediateValue=200-ImgCharacter.Width;
   clAnimateFloat(ImgCharacter,'Height',200,1,1,0);
   clAnimateFloat(ImgCharacter,'Width',200,1,1,0); 
   clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - intermediateValue / 2,1,1,0);
   clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.y - x / 2,1,1,0);
  }
  else if((ImgCharacter.Height+incomingValue>200) || (ImgCharacter.Width+incomingValue>200))
  {
    ShowMessage('You Have Reached Your Magnification Limit!');
  }
  else if((ImgCharacter.Position.X<incomingValue) || (rightPosX+20>motionPanel.Width))
  {
    ShowMessage('You Can''t Exceed the Limits!');
  }
  else if((ImgCharacter.Position.Y<incomingValue) || (BottomPosX+20>motionPanel.Height))
  {
    ShowMessage('You Can''t Exceed the Limits!');
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue / 2,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y - incomingValue / 2,1,1,0);
  }
}
  
  
void SetZoomOut
var
  rightPosX,BottomPosX:Integer
{
rightPosX=ImgCharacter.Position.X+ImgCharacter.Width
BottomPosX=ImgCharacter.Position.Y+ImgCharacter.Height
  if((ImgCharacter.Width<=20) || (ImgCharacter.Height<=20))
  {
    ShowMessage('You Can''t Shrink Any More!');
  }
  else if(((incomingValue>ImgCharacter.Height-20)&&(ImgCharacter.Height-20>0)) || ((incomingValue>ImgCharacter.Width-20)&&(ImgCharacter.Width-20>0)))
  {
    x=ImgCharacter.Height-20
    intermediateValue=ImgCharacter.Width-20
    clAnimateFloat(ImgCharacter,'Width',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  }
}




void SetGoUp
{
  if(ImgCharacter.Position.Y<=0)
  {
    ShowMessage('You Can''t Go Any Higher!');
  }
  else if(ImgCharacter.Position.Y<incomingValue)
  {
    clAnimateFloat(ImgCharacter,'Position.Y',0,1,1,0)
  }
  else
  {
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y-incomingValue,1,1,0)
  }
}

void SetGoDown
var
  BottomPosX: Integer
{
BottomPosX=ImgCharacter.Position.Y+ImgCharacter.Height
   if(BottomPosX>=motionPanel.Height)
   {
    ShowMessage('You Can''t Go Any Lower!'); 
   }
   else if(motionPanel.Height-BottomPosX<incomingValue)
   {
     clAnimateFloat(ImgCharacter,'Position.Y',motionPanel.Height - ImgCharacter.Height,1,1,0)
   }
   else 
   {
     clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue,1,1,0)
   }
}

void SetGoLeft
{
  if(ImgCharacter.Position.X<=0)
  {
    ShowMessage('You Can''t Go Any Left!');
  }
  else if(ImgCharacter.Position.X < incomingValue)
  {
    clAnimateFloat(ImgCharacter,'Position.X',0,1,1,0)
  }
  else 
  {
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue,1,1,0)
  }
}



void SetGoRight
var
  rightPosX: Integer
{
rightPosX=ImgCharacter.Position.X+ImgCharacter.Width
  if(rightPosX>=motionPanel.Width)
  {
    ShowMessage('You can''t go any further to the right');
  }
  else if(motionPanel.Width-rightPosX<incomingValue)
  {
  clAnimateFloat(ImgCharacter,'Position.X',motionPanel.Width - ImgCharacter.Width,1,1,0)
  }
  else 
  {
  clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue,1,1,0)
  }
}
  
void SetMotion
{
  if(Form1.clSenderKey == 37) 
   {
     SetGoLeft;
   }
   else if(Form1.clSenderKey == 39) 
   {
     SetGoRight;
   }
   else if(Form1.clSenderKey == 38) 
   {
     SetGoUp;
   }
   else if(Form1.clSenderKey == 40) 
   {
     SetGoDown;
   }
   else if((Form1.clSenderKeyChar == 43) || (Form1.clSenderKeyChar == 98) || (Form1.clSenderKeyChar == 66))
   {
     SetZoomIn;
   }
   else if((Form1.clSenderKeyChar == 45) || (Form1.clSenderKeyChar == 107) || (Form1.clSenderKeyChar == 75))
   {
     SetZoomOut;
   }
   else
   {
     ShowMessage('Please Use the Buttons Below'#13'To Move: Arrow Keys'#13'To Enlarge: B or + (numpad)'#13'To Reduce : K or - (numpad)');
   }
}


{
  incomingValue=20
  Form1= TclForm.Create(Self);
  Form1.SetFormColor('#f3afaf', '', clGNone);
  TclButton(Form1.clFindComponent('BtnFormMenu')).Visible = False;
  TclButton(Form1.clFindComponent('BtnGoBack')).Visible = False;
  
  lbltopBar= Form1.AddNewProLabel(Form1,'lbltopBar','Move with the arrow keys. ''+'' and ''-'''#13'You can make the character smaller with the buttons..');
  lbltopBar.Align=alTop;
  lbltopBar.Height= Form1.clHeight / 9;
  lbltopBar.clProSettings.FontColor = clAlphaColor.clHexToColor('#030303');
  lbltopBar.clProSettings.FontSize = 14;
  lbltopBar.clProSettings.FontVertAlign = palcenter;
  lbltopBar.clProSettings.FontHorzAlign = palcenter;
  lbltopBar.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
  lbltopBar.clProSettings.BorderColor = clAlphaColor.clHexToColor('#d55353');
  lbltopBar.clProSettings.BorderWidth = 5;
  lbltopBar.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#d17a7a');
  lbltopBar.clProSettings.IsRound = True;
  lbltopBar.clProSettings.RoundHeight = 20;
  lbltopBar.clProSettings.RoundWidth = 20;
  lbltopBar.SetclProSettings(lbltopBar.clProSettings);
  
  motionPanel= Form1.AddNewPanel(Form1,'motionPanel')
  motionPanel.Align=AlClient;
  motionPanel.Margins.Top = 10;
  motionPanel.Margins.Bottom = 10;
  motionPanel.Margins.Left = 10;
  motionPanel.Margins.Right = 10;
  
  ImgCharacter= Form1.AddNewImage(motionPanel,'ImgCharacter');
  Form1.SetImage(ImgCharacter,'https://clomosy.com/educa/ufo.png');
  ImgCharacter.Align=alNone;
  ImgCharacter.Position.X= Form1.clWidth / 2 - ImgCharacter.Width / 2;
  ImgCharacter.Position.Y= motionPanel.Height / 2 - ImgCharacter.Height / 2;
  ImgCharacter.Height= 50;
  ImgCharacter.Width= 50;
  
  Form1.Run;
  
  if(Clomosy.PlatformIsMobile)
  {
    pnlMotionConsole= Form1.AddNewPanel(Form1,'pnlMotionConsole');
    pnlMotionConsole.Align= AlBottom;
    pnlMotionConsole.Margins.Bottom=20;
    pnlMotionConsole.Height=200;
    
    btnLeft= Form1.AddNewButton(pnlMotionConsole, 'btnLeft', 'LEFT');
    btnLeft.Align=alLeft;
    btnLeft.Width=100;
    btnLeft.Margins.Top=20;
    btnLeft.Margins.Bottom=20;
    Form1.AddNewEvent(btnLeft,tbeOnClick,'SetGoLeft');
    
    
    btnRight= Form1.AddNewButton(pnlMotionConsole, 'btnRight', 'RIGHT');
    btnRight.Align=alRight;
    btnRight.Width=100;
    btnRight.Margins.Top=20;
    btnRight.Margins.Bottom=20;
    Form1.AddNewEvent(btnRight,tbeOnClick,'SetGoRight')
    
    
    btnUp= Form1.AddNewButton(pnlMotionConsole, 'btnUp', 'UP');
    btnUp.Align=alTop;
    btnUp.Width=100;
    btnUp.Margins.Top=10;
    btnUp.Height=40;
    Form1.AddNewEvent(btnUp,tbeOnClick,'SetGoUp');
    
    btnDown= Form1.AddNewButton(pnlMotionConsole, 'btnDown', 'DOWN');
    btnDown.Align=alBottom;
    btnDown.Width=100;
    btnDown.Margins.Bottom=10; 
    btnDown.Height=40;
    Form1.AddNewEvent(btnDown,tbeOnClick,'SetGoDown');
    
    btnZoomIn= Form1.AddNewButton(pnlMotionConsole, 'btnZoomIn', '+')
    btnZoomIn.Align=alLeft;
    btnZoomIn.Margins.Top=20;
    btnZoomIn.Margins.Bottom=20;
    btnZoomIn.Margins.Left=5;
    Form1.AddNewEvent(btnZoomIn,tbeOnClick,'SetZoomIn');
    
    btnZoomOut= Form1.AddNewButton(pnlMotionConsole, 'btnZoomOut', '-')
    btnZoomOut.Align=alRight;
    btnZoomOut.Margins.Top=20;
    btnZoomOut.Margins.Bottom=20;
    btnZoomOut.Margins.Right=5;
    Form1.AddNewEvent(btnZoomOut,tbeOnClick,'SetZoomOut');
  }
  else
    Form1.AddNewEvent(Form1,tbeOnKeyDown,'SetMotion');
}
Base Syntax
var
  Form1: TclForm;
  pnlMotionConsole, motionPanel: TCLPanel;
  ImgCharacter: TCLImage;
  btnUp,btnDown,btnRight,btnLeft,btnZoomIn,btnZoomOut: TClButton;
  incomingValue, BottomPosX,x,intermediateValue: Integer
  lbltopBar : TclProLabel;


procedure SetZoomIn
var
  rightPosX,BottomPosX,aradeger:Integer
begin
rightPosX := ImgCharacter.Position.X+ImgCharacter.Width
BottomPosX := ImgCharacter.Position.Y+ImgCharacter.Height
  if((incomingValue > 200-ImgCharacter.Height) and (200-ImgCharacter.Height>0)) or ((incomingValue>200-ImgCharacter.Width) and (200-ImgCharacter.Width>0)) then 
  begin
   x:= 200-ImgCharacter.Height;
   intermediateValue := 200-ImgCharacter.Width;
   clAnimateFloat(ImgCharacter,'Height',200,1,1,0);
   clAnimateFloat(ImgCharacter,'Width',200,1,1,0); 
   clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - intermediateValue / 2,1,1,0);
   clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.y - x / 2,1,1,0);
  end
  else if (ImgCharacter.Height+incomingValue>200) or (ImgCharacter.Width+incomingValue>200) then
  begin
    ShowMessage('You Have Reached Your Magnification Limit!');
  end
  else if (ImgCharacter.Position.X < incomingValue) or (rightPosX+20 > motionPanel.Width) then
  begin
    ShowMessage('You Can''t Exceed the Limits!');
  end
  else if (ImgCharacter.Position.Y < incomingValue) or (BottomPosX+20 > motionPanel.Height) then
  begin
    ShowMessage('You Can''t Exceed the Limits!');
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width+incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue / 2,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y - incomingValue / 2,1,1,0);
  end;
end;
  
  
procedure SetZoomOut
var
  rightPosX,BottomPosX:Integer
begin
rightPosX:=ImgCharacter.Position.X+ImgCharacter.Width;
BottomPosX:=ImgCharacter.Position.Y+ImgCharacter.Height;
  if(ImgCharacter.Width <= 20) or (ImgCharacter.Height <= 20) then
  begin
    ShowMessage('You Can''t Shrink Any More!');
  end
  else if((incomingValue>ImgCharacter.Height-20)and(ImgCharacter.Height-20 > 0)) or ((incomingValue > ImgCharacter.Width-20)and(ImgCharacter.Width-20 > 0)) then
  begin
    x := ImgCharacter.Height-20
    intermediateValue := ImgCharacter.Width-20
    clAnimateFloat(ImgCharacter,'Width',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',20,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Width',ImgCharacter.Width-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Height',ImgCharacter.Height-incomingValue,1,1,0);
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue / 2,1,1,0)
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue / 2,1,1,0)
  end;
end;




procedure SetGoUp
begin
  if ImgCharacter.Position.Y <= 0 then
  begin
    ShowMessage('You Can''t Go Any Higher!');
  end
  else if ImgCharacter.Position.Y<incomingValue then
  begin
    clAnimateFloat(ImgCharacter,'Position.Y',0,1,1,0)
  end
  else
  begin
    clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y-incomingValue,1,1,0)
  end;
end;

procedure SetGoDown
var
  BottomPosX: Integer
begin
BottomPosX := ImgCharacter.Position.Y+ImgCharacter.Height
   if BottomPosX >= motionPanel.Height then
   begin
    ShowMessage('You Can''t Go Any Lower!'); 
   end
   else if motionPanel.Height-BottomPosX<incomingValue then
   begin
     clAnimateFloat(ImgCharacter,'Position.Y',motionPanel.Height - ImgCharacter.Height,1,1,0)
   end
   else 
   begin
     clAnimateFloat(ImgCharacter,'Position.Y',ImgCharacter.Position.Y + incomingValue,1,1,0)
   end;
end;

procedure SetGoLeft
begin
  if ImgCharacter.Position.X <= 0 then
  begin
    ShowMessage('You Can''t Go Any Left!');
  end
  else if ImgCharacter.Position.X < incomingValue then
  begin
    clAnimateFloat(ImgCharacter,'Position.X',0,1,1,0)
  end
  else 
  begin
    clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X - incomingValue,1,1,0)
  end;
end;



procedure SetGoRight
var
  rightPosX: Integer
begin
rightPosX := ImgCharacter.Position.X+ImgCharacter.Width
  if rightPosX >= motionPanel.Width then
  begin
    ShowMessage('You can''t go any further to the right');
  end
  else if motionPanel.Width - rightPosX<incomingValue then
  begin
  clAnimateFloat(ImgCharacter,'Position.X',motionPanel.Width - ImgCharacter.Width,1,1,0)
  end
  else 
  begin
  clAnimateFloat(ImgCharacter,'Position.X',ImgCharacter.Position.X + incomingValue,1,1,0)
  end;
end;
  
procedure SetMotion
begin
  if Form1.clSenderKey = 37 then
   begin
     SetGoLeft;
   end
   else if Form1.clSenderKey = 39 then
   begin
     SetGoRight;
   end
   else if Form1.clSenderKey = 38 then 
   begin
     SetGoUp;
   end
   else if Form1.clSenderKey = 40 then
   begin
     SetGoDown;
   end
   else if(Form1.clSenderKeyChar = 43) or (Form1.clSenderKeyChar = 98) or (Form1.clSenderKeyChar = 66) then
   begin
     SetZoomIn;
   end
   else if (Form1.clSenderKeyChar = 45) or (Form1.clSenderKeyChar = 107) or (Form1.clSenderKeyChar = 75) then
   begin
     SetZoomOut;
   end
   else
   begin
     ShowMessage('Please Use the Buttons Below'#13'To Move: Arrow Keys'#13'To Enlarge: B or + (numpad)'#13'To Reduce : K or - (numpad)');
   end;
end;


begin
  incomingValue:=20
  Form1:= TclForm.Create(Self);
  Form1.SetFormColor('#f3afaf', '', clGNone);
  TclButton(Form1.clFindComponent('BtnFormMenu')).Visible := False;
  TclButton(Form1.clFindComponent('BtnGoBack')).Visible := False;
  
  lbltopBar:= Form1.AddNewProLabel(Form1,'lbltopBar','Move with the arrow keys. ''+'' and ''-'''#13'You can make the character smaller with the buttons..');
  lbltopBar.Align:=alTop;
  lbltopBar.Height:= Form1.clHeight / 9;
  lbltopBar.clProSettings.FontColor := clAlphaColor.clHexToColor('#030303');
  lbltopBar.clProSettings.FontSize := 14;
  lbltopBar.clProSettings.FontVertAlign := palcenter;
  lbltopBar.clProSettings.FontHorzAlign := palcenter;
  lbltopBar.clProSettings.TextSettings.Font.Style := [fsBold,fsItalic];
  lbltopBar.clProSettings.BorderColor := clAlphaColor.clHexToColor('#d55353');
  lbltopBar.clProSettings.BorderWidth := 5;
  lbltopBar.clProSettings.BackgroundColor := clAlphaColor.clHexToColor('#d17a7a');
  lbltopBar.clProSettings.IsRound := True;
  lbltopBar.clProSettings.RoundHeight := 20;
  lbltopBar.clProSettings.RoundWidth := 20;
  lbltopBar.SetclProSettings(lbltopBar.clProSettings);
  
  motionPanel:= Form1.AddNewPanel(Form1,'motionPanel')
  motionPanel.Align:=AlClient;
  motionPanel.Margins.Top := 10;
  motionPanel.Margins.Bottom := 10;
  motionPanel.Margins.Left := 10;
  motionPanel.Margins.Right := 10;
  
  ImgCharacter:= Form1.AddNewImage(motionPanel,'ImgCharacter');
  Form1.SetImage(ImgCharacter,'https://clomosy.com/educa/ufo.png');
  ImgCharacter.Align:=alNone;
  ImgCharacter.Position.X:= Form1.clWidth / 2 - ImgCharacter.Width / 2;
  ImgCharacter.Position.Y:= motionPanel.Height / 2 - ImgCharacter.Height / 2;
  ImgCharacter.Height:= 50;
  ImgCharacter.Width:= 50;
  
  Form1.Run;
  
  if Clomosy.PlatformIsMobile then
  begin
    pnlMotionConsole:= Form1.AddNewPanel(Form1,'pnlMotionConsole');
    pnlMotionConsole.Align:= AlBottom;
    pnlMotionConsole.Margins.Bottom:=20;
    pnlMotionConsole.Height:=200;
    
    btnLeft:= Form1.AddNewButton(pnlMotionConsole, 'btnLeft', 'LEFT');
    btnLeft.Align:=alLeft;
    btnLeft.Width:=100;
    btnLeft.Margins.Top:=20;
    btnLeft.Margins.Bottom:=20;
    Form1.AddNewEvent(btnLeft,tbeOnClick,'SetGoLeft');
    
    
    btnRight:= Form1.AddNewButton(pnlMotionConsole, 'btnRight', 'RIGHT');
    btnRight.Align:=alRight;
    btnRight.Width:=100;
    btnRight.Margins.Top:=20;
    btnRight.Margins.Bottom:=20;
    Form1.AddNewEvent(btnRight,tbeOnClick,'SetGoRight')
    
    
    btnUp:= Form1.AddNewButton(pnlMotionConsole, 'btnUp', 'UP');
    btnUp.Align:=alTop;
    btnUp.Width:=100;
    btnUp.Margins.Top:=10;
    btnUp.Height:=40;
    Form1.AddNewEvent(btnUp,tbeOnClick,'SetGoUp');
    
    btnDown:= Form1.AddNewButton(pnlMotionConsole, 'btnDown', 'DOWN');
    btnDown.Align:=alBottom;
    btnDown.Width:=100;
    btnDown.Margins.Bottom:=10; 
    btnDown.Height:=40;
    Form1.AddNewEvent(btnDown,tbeOnClick,'SetGoDown');
    
    btnZoomIn:= Form1.AddNewButton(pnlMotionConsole, 'btnZoomIn', '+')
    btnZoomIn.Align:=alLeft;
    btnZoomIn.Margins.Top:=20;
    btnZoomIn.Margins.Bottom:=20;
    btnZoomIn.Margins.Left:=5;
    Form1.AddNewEvent(btnZoomIn,tbeOnClick,'SetZoomIn');
    
    btnZoomOut:= Form1.AddNewButton(pnlMotionConsole, 'btnZoomOut', '-')
    btnZoomOut.Align:=alRight;
    btnZoomOut.Margins.Top:=20;
    btnZoomOut.Margins.Bottom:=20;
    btnZoomOut.Margins.Right:=5;
    Form1.AddNewEvent(btnZoomOut,tbeOnClick,'SetZoomOut');
  end
  else
    Form1.AddNewEvent(Form1,tbeOnKeyDown,'SetMotion');
end;