From Clomosy Docs

No edit summary
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
= Clomosy Seminar Demos =
<div class="alert alert-success" role="alert" data-bs-theme="light">
The codes of the examples we prepared during the Clomosy seminar event are provided here.<br>
The examples prepared during the Clomosy seminar event are provided below.<br>
These examples are written to demonstrate the features of Clomosy infrastructure. As Clomosy developers, you can improve these examples and use the features within them in other applications.<br>
These examples were created to demonstrate the features of the Clomosy platform. As Clomosy developers, you can enhance these examples and utilize the features in other applications.
== Hello World Example ==
</div>
-------
Let the first example you do in the Clomosy development environment be the Hello World example. That way, you get started with the easy step.<br>
In this application, you will learn how to actually use the message box by giving your message in ShowMessage. In addition, you will learn the for loop, case condition, procedure creation and finally the use of the button component.<br>


'''Code:'''
'''var'''
    MyForm:TclForm;
    I:integer;
    startBtn:TCLButton;<br>
    '''Procedure''' StartBtnOnClick;
    '''begin'''   
    for I := 1 to 6 do
    begin
      case I of
        1:ShowMessage('Hello World');
        2:ShowMessage('Number 2');
        else
        begin
          ShowMessage('Others=> counter: '+IntToStr(I));
        end;
      end;
    end;   
  '''end;'''<br>
'''begin'''
  MyForm := TclForm.Create(Self);<br>
  startBtn:= MyForm.AddNewButton(MyForm,'startBtn','SHOW');
  startBtn.TextSettings.Font.Size:=50;
  startBtn.Align := alCenter;
  startBtn.Height := 50;
  startBtn.Width := 100;
  MyForm.AddNewEvent(startBtn,tbeOnClick,'StartBtnOnClick');<br>
  MyForm.Run;
'''end;'''


== Web Browser Example ==
<h2> Hello World Example </h2>
--------
Let the first example you do in the Clomosy development environment be the Hello World example.<br>
The programs used to access internet pages are called browser or web browser. Using Clomosy with the TclWebBrowser component, we can access any website we want.<br>
That way, you get started with the easy step.<br>
In this application, a form and a button are created. When the button is clicked, it triggers a procedure. In this procedure, a loop iterates 6 times. Within this loop, a conditional statement (case) generates different outcomes for each value.<br>


'''Code:'''<br>
<b>Code:</b><br>
'''Var'''
<pre>
  MyForm:TclForm;
var
  xWeb:TclWebBrowser;
  MyForm:TclForm;
  topBar:TCLProEdit;<br>
  I:integer;
  '''Begin'''
  startBtn:TCLButton;
  MyForm := TclForm.Create(Self);
 
  topBar := MyForm.AddNewProEdit(MyForm,'topBar','www.Clomosy.com');
void StartBtnOnClick;
  clComponent.SetupComponent(topBar,'{"Align" : "Top","Width" :180, "Height":45,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
{   
  "BorderWidth":2}');
  for (I = 1 to 6)
  topBar.Text := 'www.Clomosy.com';
{
  topBar.ReadOnly := True;<br>
  case I of
  xWeb:= MyForm.AddNewWebBrowser(MyForm,'xWeb');
  {
  xWeb.Align := alClient;
    1:ShowMessage('Hello World');
  xWeb.Navigate('www.Clomosy.com');
    2:ShowMessage('Number 2');
  MyForm.Run;<br>
    else
  '''End;'''
    {
      ShowMessage('Others=> counter: '+IntToStr(I));
    }
  }
   
  }
}   


'''Output:'''<br>
{
MyForm = TclForm.Create(Self);
 
startBtn= MyForm.AddNewButton(MyForm,'startBtn','SHOW');
startBtn.TextSettings.Font.Size=50;
startBtn.Align = alCenter;
startBtn.Height = 50;
startBtn.Width = 100;
MyForm.AddNewEvent(startBtn,tbeOnClick,'StartBtnOnClick');
 
MyForm.Run;
}
</pre>
 
<h2> Web Browser App </h2>
 
The programs used to access internet pages are called browser or web browser. Using Clomosy with the [[TclWebBrowser]] component, we can access any website we want.<br>
 
<b>Link:</b><br>
: [https://github.com/Clomosy/WebBrowser Web Browser App]
<b>Output:</b><br>
[[File:WebBrowserExample.jpg|frameless|300px]]
[[File:WebBrowserExample.jpg|frameless|300px]]


== Combo Color Selection Example ==
<h2> Clothing Selection App </h2>
By using color palettes in the application, you can create a combination by selecting the color of the clothes you wear. You can also choose your gender in the application. As you click on the colors, the colors change. If you want to get the code of a color you like, just click on the area where the color code text is located.<br>
By using color palettes in the application, you can create a combination by selecting the color of the clothes you wear. You can also choose your gender in the application. As you click on the colors, the colors change. If you want to get the code of a color you like, just click on the area where the color code text is located.<br>


'''Code:'''<br>
<b>Link:</b><br>
'''Var''' 
: [https://github.com/Clomosy/ColorCombination Clothing Selection App]
MyForm:TclForm;
TitleEdit: TClProEdit;
color1Pnl,color2Pnl,color3Pnl:TclProPanel;
FirstImg,SecondImg,ThirdImg:TclProImg;
OnlyLayout,genderLyt:TclLayout;
color1Lbl,color2Lbl,color3Lbl:TclProLabel;
firstColor,lastColor:string;
MaleBtn,femaleBtn:TcLProButton;
genderState:integer;
myObject : TclProLabel;
'''procedure''' SetEdit;
'''begin'''
  TitleEdit := MyForm.AddNewProEdit(MyForm,'TitleEdit','Couldn't Choose Your Combination?');
  clComponent.SetupComponent(TitleEdit,'{"Align" : "MostTop", "Height":55,"RoundHeight":13,
  "RoundWidth":13,"BorderColor":"#f5f5f5","BorderWidth":4,"MarginLeft":30, "MarginRight":30}');
  TitleEdit.enabled:=False;
'''end;'''
'''function''' GenerateRandomHexColor: string;
'''var'''
  Red, Green, Blue: Byte;
'''begin'''
  Red := clMath.GenerateRandom(0,256);
  Green := clMath.GenerateRandom(0,256);
  Blue := clMath.GenerateRandom(0,256);
  Result := '#' + IntToHex(Red, 2) + IntToHex(Green, 2) + IntToHex(Blue, 2);
'''end;'''
'''Procedure''' color1PnlOnClick;
'''var'''
  rndmColor:string;
'''begin'''   
  rndmColor := GenerateRandomHexColor;
  firstColor := rndmColor;
  clComponent.SetupComponent(color1Pnl,'{"BackgroundColor":"'+rndmColor+'"}');
  color1Lbl.Text := rndmColor;
  clComponent.SetupComponent(color1Lbl,'{"TextColor":"'+rndmColor+'"}');
'''end;'''
'''Procedure''' color2PnlOnClick;
'''var'''
  rndmColor:string;
'''begin'''
  rndmColor := GenerateRandomHexColor;
  clComponent.SetupComponent(color2Pnl,'{"BackgroundColor":"'+rndmColor+'"}');
  color2Lbl.Text := rndmColor;
  clComponent.SetupComponent(color2Lbl,'{"TextColor":"'+rndmColor+'"}');
'''end;'''
'''Procedure''' color3PnlOnClick;
'''var'''
  rndmColor:string;
'''begin'''
  rndmColor := GenerateRandomHexColor;
  lastColor := rndmColor;
  clComponent.SetupComponent(color3Pnl,'{"BackgroundColor":"'+rndmColor+'"}');
  color3Lbl.Text := rndmColor;
  clComponent.SetupComponent(color3Lbl,'{"TextColor":"'+rndmColor+'"}');
'''end;'''
'''procedure''' copy;
'''begin'''
  clUtils.SaveToClipBoard(myObject.Text);
  ShowMessage ('Kopyalandı');
'''end;'''
'''Procedure''' color1LblOnClick;
'''begin'''
  myObject:=color1Lbl ;
  copy;
'''end;'''
'''Procedure''' color2LblOnClick;
'''begin'''
  myObject:=color2Lbl ;
  copy;
'''end;'''
'''Procedure''' color3LblOnClick;
'''begin'''
  myObject:=color3Lbl ;
  copy;
'''end;'''
'''procedure''' genderdetermination;
'''begin'''
  if genderState=1 then
              begin
              clComponent.SetupComponent(FirstImg,'{"ImgUrl":"https://clomosy.com/illustration/erkekust.png"}');
              clComponent.SetupComponent(SecondImg,'{"ImgUrl":"https://clomosy.com/illustration/erkekalt.png"}');
              clComponent.SetupComponent(ThirdImg,'{"ImgUrl":"https://clomosy.com/illustration/erkekayakkabi.png"}');
              end
              else
              begin
              clComponent.SetupComponent(FirstImg,'{"ImgUrl":"https://clomosy.com/illustration/kizust.png"}');
              clComponent.SetupComponent(SecondImg,'{"ImgUrl":"https://clomosy.com/illustration/kizalt.png"}');
              clComponent.SetupComponent(ThirdImg,'{"ImgUrl":"https://clomosy.com/illustration/kizayakkabi.png"}');
             
              end;
  '''end;'''
'''Procedure''' MaleBtnOnClick;
'''begin'''
  genderState:=1;
  genderdetermination;
'''end;'''
'''Procedure''' FemaleBtnOnClick;
'''begin'''
  genderState:=0;
  genderdetermination;
'''end;'''
'''begin'''
  MyForm := TclForm.Create(Self);
  SetEdit;
  //...........Layout.............//
  OnlyLayout := MyForm.AddNewLayout(MyForm,'OnlyLayout');
  OnlyLayout.Align:=alClient;
  OnlyLayout.Margins.Top:=50;
  OnlyLayout.Margins.Bottom:=100;
  //............Panels..........//
  firstColor := '#5e61ff';
  color1Pnl:=MyForm.AddNewProPanel(OnlyLayout,'color1Pnl');
  clComponent.SetupComponent(color1Pnl,'{"Align" : "MostTop",
  "Height":140,"BackgroundColor":"#5e61ff"}');
  MyForm.AddNewEvent(color1Pnl,tbeOnClick,'color1PnlOnClick');
  color1Lbl := MyForm.AddNewProLabel(color1Pnl,'color1Lbl','#5e61ff');
  clComponent.SetupComponent(color1Lbl,'{"Align" : "Right","MarginTop":80,"RoundHeight":10,
  "RoundWidth":10,"BorderColor":"null","BorderWidth":2,"BackgroundColor":"#ffffff",
  "TextColor":"#AF1B3F","TextSize":20,"TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color1Lbl,tbeOnClick,'color1LblOnClick');
  FirstImg := MyForm.AddNewProImage(color1Pnl,'FirstImg');
  clComponent.SetupComponent(FirstImg,'{"Align" : "Client","BorderColor":"null","BackgroundColor":"null",
  "ImgUrl":"https://clomosy.com/illustration/erkekust.png"}');
  //---------------------------------------------------------------------------
  color2Pnl:=MyForm.AddNewProPanel(OnlyLayout,'color2Pnl');
  clComponent.SetupComponent(color2Pnl,'{"Align" : "Top",
  "Height":140,"BackgroundColor":"#AF1B3F"}');
  MyForm.AddNewEvent(color2Pnl,tbeOnClick,'color2PnlOnClick');
  color2Lbl := MyForm.AddNewProLabel(color2Pnl,'color2Lbl','#AF1B3F');
  clComponent.SetupComponent(color2Lbl,'{"Align" : "Right","MarginTop":80,"RoundHeight":10,
  "RoundWidth":10,"BorderColor":"null","BorderWidth":2,"BackgroundColor":"#ffffff",
  "TextColor":"#AF1B3F","TextSize":20,"TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color2Lbl,tbeOnClick,'color2LblOnClick');
  SecondImg := MyForm.AddNewProImage(color2Pnl,'SecondImg');
  clComponent.SetupComponent(SecondImg,'{"Align" : "Client","BorderColor":"null",
  "BackgroundColor":"null","ImgUrl":"https://clomosy.com/illustration/erkekalt.png"}');
  //---------------------------------------------------------------------------
  color3Pnl:=MyForm.AddNewProPanel(OnlyLayout,'color3Pnl');
  clComponent.SetupComponent(color3Pnl,'{"Align" : "Top",
  "Height":140,
  "BackgroundColor":"#01FDF6"}');
  MyForm.AddNewEvent(color3Pnl,tbeOnClick,'color3PnlOnClick');
  lastColor := '#01FDF6';
  color3Lbl := MyForm.AddNewProLabel(color3Pnl,'color3Lbl','#01FDF6');
  clComponent.SetupComponent(color3Lbl,'{"Align" : "Right","MarginTop":80,"RoundHeight":10,
  "RoundWidth":10,"BorderColor":"null","BorderWidth":2,"BackgroundColor":"#ffffff",
  "TextColor":"#AF1B3F","TextSize":20,"TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color3Lbl,tbeOnClick,'color3LblOnClick');
  ThirdImg := MyForm.AddNewProImage(color3Pnl,'ThirdImg');
  clComponent.SetupComponent(ThirdImg,'{"Align" : "Client","BorderColor":"null","BackgroundColor":"null",
  "ImgUrl":"https://clomosy.com/illustration/erkekayakkabi.png"}');
 
  //..............................................................................//
    genderLyt := MyForm.AddNewLayout(MyForm,'testLayout');
    genderLyt.Align:=alBottom;
    genderLyt.Height := 65;
    genderLyt.Width := 270;
    genderLyt.Margins.Top := 20;
    genderLyt.Margins.Left := 90;
    genderLyt.Margins.Right := 90;
    genderLyt.Margins.Bottom := 40;
    MaleBtn := MyForm.AddNewProButton(genderLyt,'MaleBtn',<nowiki>''</nowiki>);
    clComponent.SetupComponent(MaleBtn,'{"Align" : "left","Width" :80,
  "Height":50,"BorderColor":"#ffffff","BackgroundColor":"#689bca", "BorderWidth":1,"RoundHeight":10,"RoundWidth":10,
  "ImgUrl":"https://clomosy.com/educa/male.png", "ImgFit":"yes"}');
  MyForm.AddNewEvent(MaleBtn,tbeOnClick,'MaleBtnOnClick');
  femaleBtn := MyForm.AddNewProImage(genderLyt,'femaleBtn');
  clComponent.SetupComponent(femaleBtn,'{"Align" : "right","Width" :80,
  "Height":50,"BorderColor":"#ffffff","BackgroundColor":"#cd5c5c",
  "BorderWidth":1,"RoundHeight":10,"RoundWidth":10,"ImgUrl":"https://clomosy.com/educa/female.png", "ImgFit":"yes"}');
  MyForm.AddNewEvent(femaleBtn,tbeOnClick,'FemaleBtnOnClick');
  MyForm.SetFormBGImage('https://clomosy.com/educa/bg1.png');
  MyForm.Run;
'''end;'''


'''Output:'''<br>
<b>Output:</b><br>
[[File:OutfitColorSelectionExample.png|frameless|350px]]
[[File:OutfitColorSelectionExample.png|frameless|350px]]


== Body Mass Index Calculator Example ==
<h2> Body Mass Index (BMI) Calculator App </h2>
------------
 
In this application, the body mass index is calculated by entering the weight, height and gender of the person and clicking the confirmation button. According to calculations, it gives messages such as weak, normal, overweight and obese. In addition, the picture below changes according to the weight.<br>
In this application, the body mass index is calculated by entering the weight, height and gender of the person and clicking the confirmation button. According to calculations, it gives messages such as weak, normal, overweight and obese. In addition, the picture below changes according to the weight.<br>


'''Code:'''<br>
<b>Link:</b><br>
'''var'''
: [https://github.com/Clomosy/BodyMassIndexApp Body Mass Index (BMI) Calculator App]
  MyForm:TclForm;
  formLayout:TclLayout;
  mainPnl:TclProPanel;
 
  mainPnlHeight,
  mainPnlWidth:integer;
  kgLyt,heightLyt,genderLyt:TclLayout;
  kgEdt,heightEdt:TclProEdit;
  kgLbl,heightLbl,outputLbl,genderLbl,titleLbl:TclProLabel;
 
  maleBtn,femaleBtn,checkBtn,outputImg:TClProImage;
  resultValue:double;
  genderState:integer;
 
  '''Procedure''' CheckBtnOnClick;
  '''begin'''
    if (heightEdt.text =<nowiki>''</nowiki>) or (kgEdt.Text=<nowiki>''</nowiki>) then
    begin
        ShowMessage('Please Enter Weight and Height Values.');
        exit;
    end;
       
   
    resultValue := StrToFloat(kgEdt.Text)/Sqr((StrToFloat(heightEdt.text))/100);
    if resultValue < (18.5) then
    begin
      ShowMessage('Weak');
      case genderState of
        1:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/underweightman.png", "ImgFit":"yes"}');
       
        end;
        2:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/underweightwoman.png", "ImgFit":"yes"}');
        end;
      end;
    end
    else if resultValue < 24.9 then
    begin
      ShowMessage('Normal');
      case genderState of
        1:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/normalman.png", "ImgFit":"yes"}');
       
        end;
        2:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/normalwoman.png", "ImgFit":"yes"}');
        end;
      end;
    end
    else if resultValue < 29.9 then
    begin
      ShowMessage('Overweight');
      case genderState of
        1:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/overweightman.png", "ImgFit":"yes"}');
       
        end;
        2:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/overweightwoman.png", "ImgFit":"yes"}');
        end;
      end;
    end
    else
    if resultValue < 39.9 then
    begin
     
      case genderState of
        1:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/obeseman.png", "ImgFit":"yes"}');
          ShowMessage('Obese');
       
        end;
        2:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/obesewoman.png", "ImgFit":"yes"}');
         
          ShowMessage('Obese');
        end;
      end;
    end
    else
    begin
     
      case genderState of
        1:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/obeseman2.png", "ImgFit":"yes"}');
         
          ShowMessage('Obese');
       
        end;
        2:
        begin
          clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
          "BackgroundColor":"null",
          "MarginTop" : 50,
          "ImgUrl":"https://clomosy.com/illustration/obesewoman2.png", "ImgFit":"yes"}');
         
          ShowMessage('Obese');
        end;
      end;
    end;
  '''end;'''<br>
  '''Procedure''' MaleBtnOnClick;
  '''begin'''
    genderState := 1;
    clComponent.SetupComponent(maleBtn,'{"Align" : "Left","Width" :50, "Height":300,
    "BackgroundColor":"#689bca",
    "BorderColor":"#ffffff",
    "BorderWidth":1,
    "RoundHeight":10,
    "RoundWidth":10,
    "ImgUrl":"https://img.icons8.com/ios-filled/100/FFFFFF/male.png", "ImgFit":"yes"}');
 
    clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
    "BackgroundColor":"null",
    "MarginTop" : 50,
    "ImgUrl":"https://clomosy.com/illustration/normalman.png", "ImgFit":"yes"}');
   
    clComponent.SetupComponent(femaleBtn,'{"Align" : "Left","Width" :50, "Height":300,
    "BackgroundColor":"null",
    "BorderColor":"#ffffff",
    "BorderWidth":1,
    "RoundHeight":10,
    "RoundWidth":10,
    "MarginLeft":30,
    "ImgUrl":"https://img.icons8.com/ios-filled/100/FFFFFF/female.png", "ImgFit":"yes"}');
  end;
  Procedure FemaleBtnOnClick;
  begin
    genderState := 2;
    clComponent.SetupComponent(maleBtn,'{"Align" : "Left","Width" :50, "Height":300,
    "BackgroundColor":"null",
    "BorderColor":"#ffffff",
    "BorderWidth":1,
    "RoundHeight":10,
    "RoundWidth":10,
    "ImgUrl":"https://img.icons8.com/ios-filled/100/FFFFFF/male.png", "ImgFit":"yes"}');
 
    clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
    "BackgroundColor":"null",
    "MarginTop" : 50,
    "ImgUrl":"https://clomosy.com/illustration/normalwoman.png", "ImgFit":"yes"}');
   
    clComponent.SetupComponent(femaleBtn,'{"Align" : "Left","Width" :50, "Height":300,
    "BackgroundColor":"#D37bc5",
    "BorderColor":"#ffffff",
    "BorderWidth":1,
    "RoundHeight":10,
    "RoundWidth":10,
    "MarginLeft":30,
    "ImgUrl":"https://img.icons8.com/ios-filled/100/FFFFFF/female.png", "ImgFit":"yes"}');
  '''end;'''
 
  '''Procedure''' SetupContents;
  '''begin'''
    genderState := 1;
   
 
    {          KG Edit Start                }
    kgLyt := MyForm.AddNewLayout(mainPnl,'kgLyt');
    kgLyt.Align:=alMostTop;
    kgLyt.Height := 35;
    kgLyt.Width := 200;
    kgLyt.Margins.Top := 20;
    kgLyt.Margins.Left := 20;
    kgLyt.Margins.Right := 20;
    kgLyt.Margins.Bottom := 20;
   
    kgLbl := MyForm.AddNewProLabel(kgLyt,'kgLbl','KG :');
    clComponent.SetupComponent(kgLbl,'{"Align" : "Left","Width" :60, "Height":30,"TextColor":"#ffffff",
    "TextVerticalAlign":"center",
    "TextHorizontalAlign":"left",
    "MarginBottom":0,
    "TextSize":12,"TextBold":"yes"}');
   
   
    kgEdt := MyForm.AddNewProEdit(kgLyt,'kgEdt','80');
    clComponent.SetupComponent(kgEdt,'{"Align" : "Client",
    "Width" :129,
    "Height":33,
    "MarginBottom":0,
    "BackgroundColor":"null",
    "TextColor":"#ffffff",
    "BorderColor":"#ffffff",
    "BorderWidth":1}');
   
    kgEdt.StyledSettings := ssFamily;
    kgEdt.TextSettings.FontColor := clAlphaColor.clHexToColor('#ffffff');
   
    kgEdt.clTypeOfField := taFloat;
    {          KG Edit End                }
   
    {          HEIGHT Edit Start                }
    heightLyt := MyForm.AddNewLayout(mainPnl,'heightLyt');
    heightLyt.Align:=alMostTop;
    heightLyt.Height := 35;
    heightLyt.Width := 200;
    heightLyt.Margins.Top := 20;
    heightLyt.Margins.Left := 20;
    heightLyt.Margins.Right := 20;
    heightLyt.Margins.Bottom := 20;
   
    heightLbl := MyForm.AddNewProLabel(heightLyt,'heightLbl','Length :');
    clComponent.SetupComponent(heightLbl,'{"Align" : "Left","Width" :60, "Height":30,"TextColor":"#ffffff",
    "TextVerticalAlign":"center",
    "TextHorizontalAlign":"left",
    "MarginBottom":0,
    "TextSize":12,"TextBold":"yes"}');
   
   
    heightEdt := MyForm.AddNewProEdit(heightLyt,'heightEdt','1.80');
    clComponent.SetupComponent(heightEdt,'{"Align" : "Client",
    "Width" :129,
    "Height":33,
    "MarginBottom":0,
    "BackgroundColor":"null",
    "TextColor":"#ffffff",
    "BorderColor":"#ffffff",
    "BorderWidth":1}');
   
    HeightEdt.StyledSettings := ssFamily;
    HeightEdt.TextSettings.FontColor := clAlphaColor.clHexToColor('#ffffff');
   
    HeightEdt.clTypeOfField := taFloat;
    {          HEIGHT Edit End                }
   
    genderLyt := MyForm.AddNewLayout(mainPnl,'genderLyt');
    genderLyt.Align:=alMostTop;
    genderLyt.Height := 35;
    genderLyt.Width := 200;
    genderLyt.Margins.Top := 20;
    genderLyt.Margins.Left := 20;
    genderLyt.Margins.Right := 20;
    genderLyt.Margins.Bottom := 20;
   
    genderLbl := MyForm.AddNewProLabel(genderLyt,'genderLbl','Gender :');
    clComponent.SetupComponent(genderLbl,'{"Align" : "Left","Width" :60, "Height":30,"TextColor":"#ffffff",
    "TextVerticalAlign":"center",
    "TextHorizontalAlign":"left",
    "MarginBottom":0,
    "TextSize":12,"TextBold":"yes"}');
   
    maleBtn := MyForm.AddNewProImage(genderLyt,'maleBtn');
    clComponent.SetupComponent(maleBtn,'{"Align" : "Left","Width" :50, "Height":300,
    "BackgroundColor":"#689bca",
    "BorderColor":"#ffffff",
    "BorderWidth":1,
    "RoundHeight":10,
    "RoundWidth":10,
    "ImgUrl":"https://img.icons8.com/ios-filled/100/FFFFFF/male.png", "ImgFit":"yes"}');
   
    MyForm.AddNewEvent(maleBtn,tbeOnClick,'MaleBtnOnClick');
   
    femaleBtn := MyForm.AddNewProImage(genderLyt,'femaleBtn');
    clComponent.SetupComponent(femaleBtn,'{"Align" : "Left","Width" :50, "Height":300,
    "BackgroundColor":"null",
    "BorderColor":"#ffffff",
    "BorderWidth":1,
    "RoundHeight":10,
    "RoundWidth":10,
    "MarginLeft":30,
    "ImgUrl":"https://img.icons8.com/ios-filled/100/FFFFFF/female.png", "ImgFit":"yes"}');
   
    MyForm.AddNewEvent(femaleBtn,tbeOnClick,'FemaleBtnOnClick');
   
    checkBtn := MyForm.AddNewProImage(mainPnl,'checkBtn');
    clComponent.SetupComponent(checkBtn,'{"Align" : "Top","Width" :60, "Height":60,
    "BackgroundColor":"null",
    "ImgUrl":"https://img.icons8.com/ios-filled/50/FFFFFF/checked--v1.png", "ImgFit":"yes"}');
   
    MyForm.AddNewEvent(checkBtn,tbeOnClick,'CheckBtnOnClick');
       
    outputImg := MyForm.AddNewProImage(mainPnl,'outputImg');
    clComponent.SetupComponent(outputImg,'{"Align" : "Client","Width" :150, "Height":150,
    "BackgroundColor":"null",
    "MarginTop" : 50,
    "ImgUrl":"https://clomosy.com/illustration/normalman.png", "ImgFit":"yes"}');
   
  '''end;'''
  '''Procedure''' SetupFormLayout;
  '''begin'''
    formLayout := MyForm.AddNewLayout(MyForm,'formLayout');
    formLayout.Align:=alContents;
    mainPnlHeight := (formLayout.Height)/2;
    mainPnlWidth := (formLayout.Width)/2;
  '''end;'''
  '''Procedure''' SetupPanel;
  '''begin'''
    mainPnl:=MyForm.AddNewProPanel(MyForm,'mainPnl');
    clComponent.SetupComponent(mainPnl,'{"Align" : "Client","Width" :'+IntToStr(mainPnlWidth)+',
    "Height":'+IntToStr(mainPnlHeight)+',
    "BackgroundColor":"null",
    "BorderColor":"null",
    "MarginTop" : 1,
    "MarginBottom":20,
    "MarginRight":50,
    "MarginLeft":50,
    "RoundHeight":10,
    "RoundWidth":10,
    "BorderWidth":1}');
  '''end;'''
'''begin'''
  MyForm := TclForm.Create(Self);
 
  MyForm.SetFormBGImage('https://images.clomosy.com/media/ThemeStyle5.png');
  SetupFormLayout;
  SetupPanel;
  SetupContents;
  MyForm.Run;
'''end;'''


'''Output:'''<br>
<b>Output:</b><br>
[[File:BodyMassIndexCalculatorExample.png|frameless|300px]]
[[File:BodyMassIndexCalculatorExample.png|frameless|300px]]


== QR Code Scanning (Personnel Tracking System) Example ==
<h2> QR Personnel Attendance Control System Application </h2>
----------
The purpose of this example is to keep track of the arrival and departure times of employees in businesses. Special devices and software are required for these operations. We have made all the work possible with a simple processing through clomosy.<br>
The purpose of this example is to keep track of the arrival and departure times of employees in businesses. Special devices and software are required for these operations. We have made all the work possible with a simple processing through clomosy.<br>
: A tablet produces a changing QR code, preventing any irregularities. We have also solved the problem of reading in different locations by changing the code every 10 seconds. An administrator in the project must be responsible for generating the QR code.
*A tablet produces a changing QR code, preventing any irregularities. We have also solved the problem of reading in different locations by changing the code every 10 seconds. An administrator in the project must be responsible for generating the QR code.
: The personnel can arrive and scan the QR code with their phones.
*The personnel can arrive and scan the QR code with their phones.
: The registration process and scanned time of the personnel are recorded on the administrator's screen. (The administrator must log in through Windows.)
*The registration process and scanned time of the personnel are recorded on the administrator's screen. (The administrator must log in through Windows.)
 
'''Code:'''<br>
'''var'''
  MyForm:TCLForm;
  QRGen : TClQRCodeGenerator;
  QrTimer, QrTimeTimer:TClTimer;
  BtnNewQrCode:TclButton;
  BtnReadQrCode:TclButton;
  ReadQrEdt : TclEdit;
  LblDisplay:TclLabel;
  IntQROnStartVal:Extended;
  QrAppType:Integer;
  QrSecondLimit:Integer;
  '''Procedure''' BtnNewQrCodeClick;
  '''begin'''
    BtnNewQrCode.Caption := FormatDateTime('yymmdd0hhnnss', Now);
    QRGen.Text := Clomosy.ProjectEncryptAES(BtnNewQrCode.Caption);
  '''End;'''
  '''Procedure''' OnQrTimer;
  '''begin'''
    QrTimeTimer.Tag := QrSecondLimit;
    BtnNewQrCodeClick;
  '''End;'''
  '''Procedure''' SaveRecordThread;
  '''Begin'''
    Clomosy.DBCloudPostJSON(ftThreads,'[{"Thread_Value_Str":"'+ReadQrEdt.Text+'","Thread_Quantity":1}]');
  '''End;'''
  '''Procedure''' OnGetQRCode;
    '''var'''
      s:String;
      IntQRVal:Extended;
  '''begin'''
    If ReadQrEdt.Text=<nowiki>''</nowiki> Then Exit;
    s := FormatDateTime('yymmdd0hhnnss', Now);
    IntQROnStartVal := StrToFloat(s);
    Try
      s := Clomosy.ProjectDecryptAES(ReadQrEdt.Text);
      ReadQrEdt.Text := s;
      IntQRVal := StrToFloat(s);
    Except
      IntQRVal :=0;
    end;
   
    If (IntQROnStartVal-QrSecondLimit)<= IntQRVal Then
    Begin
      SaveRecordThread;
    End Else ShowMessage('Invalid QR Code.  Please complete the process within '+IntToStr(QrSecondLimit)+' seconds. Try again!');
  '''End;'''
  '''Procedure''' BtnReadQrCodeClick;
  '''begin'''
    MyForm.CallBarcodeReaderWithScript(ReadQrEdt,'OnGetQRCode');
  '''End;'''
  '''Procedure''' OnQrTimeTimer;
  '''begin'''
    QrTimeTimer.Tag := QrTimeTimer.Tag - 1;
    LblDisplay.Text := IntToStr(QrTimeTimer.Tag);
  '''End;'''
'''begin'''
  QrAppType := 0;
  QrSecondLimit := 30;
  If Clomosy.PlatformIsMobile Then QrAppType := 2;
  If Not Clomosy.PlatformIsMobile Then
    QrAppType := 1;
  IF QrAppType=1 Then
  Begin
    Clomosy.OpenForm(ftMembers,fdtsingle,froReadOnly, ffoNoFilter);
    Exit;
  End;
  if Clomosy.AppUserGUID ='6MFW419738' then
    QrAppType:=1;
  If Clomosy.AppUserProfile=1 Then
  QrAppType:=0;
  MyForm := TCLForm.Create(Self);
  LblDisplay:= MyForm.AddNewLabel(MyForm,'LblDisplay','--');
  LblDisplay.Align := alTop;
  If QrAppType=0 then
  Begin
    QRGen:= MyForm.AddNewQRCodeGenerator(MyForm,'QRGen','Hello World');
    QRGen.Height := 200;
    QRGen.Align := alCenter;
    BtnNewQrCode:= MyForm.AddNewButton(MyForm,'BtnNewQrCode','Starting');
    BtnNewQrCode.Align := alTop;
    MyForm.AddNewEvent(BtnNewQrCode,tbeOnClick,'BtnNewQrCodeClick');
  End;
  If QrAppType=2 then
  Begin
    BtnReadQrCode:= MyForm.AddNewButton(MyForm,'BtnReadQrCode','Scan the QR Code');
    BtnReadQrCode.Height := 100;
    BtnReadQrCode.Width := 200;
    BtnReadQrCode.Align := alCenter;
    MyForm.AddNewEvent(BtnReadQrCode,tbeOnClick,'BtnReadQrCodeClick');
    ReadQrEdt := MyForm.AddNewEdit(MyForm,'ReadQrEdt','Scan the Barcode...');
    ReadQrEdt.Align := alBottom;
    ReadQrEdt.ReadOnly := True;
    ReadQrEdt.Visible := False;
  End;
  If QrAppType=0 then
  Begin
    QrTimer:= MyForm.AddNewTimer(MyForm,'QrTimer',1000*QrSecondLimit);
    QrTimer.Interval := 1000*QrSecondLimit;
    QrTimer.Enabled := True;
    MyForm.AddNewEvent(QrTimer,tbeOnTimer,'OnQrTimer');
    QrTimeTimer:= MyForm.AddNewTimer(MyForm,'QrTimeTimer',1000);
    QrTimeTimer.Interval := 1000;
    QrTimeTimer.Tag := QrSecondLimit;
    QrTimeTimer.Enabled := True;
    MyForm.AddNewEvent(QrTimeTimer,tbeOnTimer,'OnQrTimeTimer');
  End;
  MyForm.Run;
'''end;'''
 
== Microsoft Azure Connection Example ==
Microsoft Azure (previously known as Windows Azure) is a cloud platform service that "provides a wide variety of Internet services that can be consumed both from open environment environments and from the Internet. Clomosy supports this database system. You can establish an Azure database connection and perform the desired operations through your Clomosy application.<br>
 
In this application, user name, surname, phone information are taken and added and deleted on the database.<br>
 
<pre style="background-color:#E14D2A; color:white"> When performing local SQL operations, you must write your database information in the red fields in the code section, otherwise the code will not work. </pre><br>


'''Code:'''<br>
<b>Link:</b><br>
'''var'''
: [https://github.com/Clomosy/QR QR Personnel Attendance Control System Application]
  myForm:TclForm;
  layout1,layout2,layout3,layout4: TclLayout;
  btnLayout:TclLayout;
  upperPanel,downPanel    : TclPanel;
  saveBtn,deleteBtn,reloadBtn  : TclProButton; 
  nameLbl,surnameLbl,telNumLbl,userIDLbl:TclLabel; 
  nameEdt,surnameEdt,telNumEdt,userIDEdt:TclEdit; 
  mainListView:TClListView;
  '''procedure''' Clear;
  '''begin'''
    nameEdt.Text    :=<nowiki>''</nowiki>;
    surnameEdt.Text :=<nowiki>''</nowiki>;
    telNumEdt.Text:=<nowiki>''</nowiki>;
    userIDEdt.Text:=<nowiki>''</nowiki>;
  '''end;'''
  '''procedure''' onItemClick;
  '''var'''
    clOgrenciQuery :TclSQLQuery;
    recordGUID : String;
  '''begin'''
    recordGUID := mainListView.clSelectedItemData('RECORD_GUID');
   
    clOgrenciQuery:=TclSQLQuery.Create(Nil);
    Try
      clOgrenciQuery.Connection := Clomosy.DBSQLServerConnection;
      clOgrenciQuery.SQL.Text := 'SELECT ID AS RECORD_GUID,AD AS MAIN_TEXT,SOYAD AS SUB_TEXT ,TELEFON_NUMARASI AS FOOTER_TEXT, ID AS SIDE_TEXT_CENTER FROM TBLOGRENCI WHERE ID = ' + recordGUID;
      clOgrenciQuery.Open;
      nameEdt.Text      := clOgrenciQuery.FieldByName('MAIN_TEXT').AsString;
      surnameEdt.Text    := clOgrenciQuery.FieldByName('SUB_TEXT').AsString;
      telNumEdt.Text  := clOgrenciQuery.FieldByName('FOOTER_TEXT').AsString;
      userIDEdt.Text  := clOgrenciQuery.FieldByName('RECORD_GUID').AsString;
      clOgrenciQuery.Close;
    Finally
      clOgrenciQuery.Free;
    End;
  '''End''';
  '''procedure''' SetupSqlConnection;
  '''begin'''
    Clomosy.DBSQLServerConnect(<span style="color:red">'SQL Server','server_name','user_name','user_password','database_name',port</span>);
  '''end;'''
  '''Procedure''' OnloadListView;
  '''var'''
    clViewDataQuery :TclSQLQuery;
  '''begin'''
      clViewDataQuery:=TclSQLQuery.Create(Nil);
    Try
      clViewDataQuery.Connection := Clomosy.DBSQLServerConnection;
      clViewDataQuery.SQL.Text :='SELECT  ID AS RECORD_GUID,NAME AS MAIN_TEXT,SURNAME AS SUB_TEXT ,TEL_NUMBER AS FOOTER_TEXT, ID AS SIDE_TEXT_CENTER FROM TBLSTUDENT ORDER BY ID DESC ';
      clViewDataQuery.Open;
      mainListView.clLoadListViewDataFromDataset(clViewDataQuery);
    finally
      clViewDataQuery.Free;
    End;
  '''End;'''
  '''procedure''' SetLayout;
  '''begin'''
    upperPanel:=myForm.AddNewPanel(myForm,'upperPanel',<nowiki>''</nowiki>);
    upperPanel.Align:=alMostTop;
    upperPanel.Height := 200;
    upperPanel.StyleLookup:='pushpanel';
    layout1 := myForm.AddNewLayout(upperPanel,'layout1');
    layout1.Align := alMostTop;
    layout1.Height := 25;
    layout1.Width := 200;
    userIDLbl:= MyForm.AddNewLabel(layout1,'userIDLbl','User ID: ');
    userIDLbl.StyledSettings := ssFamily;
    userIDLbl.TextSettings.Font.Size:=15;
    userIDLbl.Align := alMostLeft;
    userIDLbl.Margins.Left:= 20;
    userIDLbl.Height := 20;
    userIDLbl.Width := 100;
    userIDEdt:= MyForm.AddNewEdit(layout1,'userIDEdt','ID...');
    userIDEdt.ReadOnly := True;
    userIDEdt.TextSettings.Font.Size:=25;
    userIDEdt.Align := alLeft;
    userIDEdt.Height := 25;
    userIDEdt.Width := 170;
    //          LAYOUT 2
    layout2 := myForm.AddNewLayout(upperPanel,'layout2');
    layout2.Align := alMostTop;
    layout2.Height := 25;
    layout2.Width := 200;
    nameLbl:= MyForm.AddNewLabel(layout2,'nameLbl','Name: ');
    nameLbl.StyledSettings := ssFamily;
    nameLbl.TextSettings.Font.Size:=15;
    nameLbl.Align := alMostLeft;
    nameLbl.Margins.Left:= 20;
    nameLbl.Height := 20;
    nameLbl.Width := 100;
    nameEdt:= MyForm.AddNewEdit(layout2,'nameEdt','Name...');
    nameEdt.TextSettings.Font.Size:=25;
    nameEdt.Align := alLeft;
    nameEdt.Height := 25;
    nameEdt.Width := 170;
    //            LAYOUT 3
    layout3 := myForm.AddNewLayout(upperPanel,'layout3');
    layout3.Align := alMostTop;
    layout3.Height := 25;
    layout3.Width := 200;
    surnameLbl:= MyForm.AddNewLabel(layout3,'surnameLbl','Surname: ');
    surnameLbl.StyledSettings := ssFamily;
    surnameLbl.TextSettings.Font.Size:=15;
    surnameLbl.Align := alLeft;
    surnameLbl.Margins.Left:= 20;
    surnameLbl.Height := 20;
    surnameLbl.Width := 100;
    surnameEdt:= MyForm.AddNewEdit(layout3,'surnameEdt','Surname...');
    surnameEdt.TextSettings.Font.Size:=25;
    surnameEdt.Align := alLeft;
    surnameEdt.Height := 25;
    surnameEdt.Width := 170;
    //            LAYOUT 4
    layout4 := myForm.AddNewLayout(upperPanel,'layout4');
    layout4.Align := alMostTop;
    layout4.Height := 25;
    layout4.Width := 200;
    telNumLbl:= MyForm.AddNewLabel(layout4,'telNumLbl','Tel: ');
    telNumLbl.StyledSettings := ssFamily;
    telNumLbl.TextSettings.Font.Size:=15;
    telNumLbl.Align := alMostLeft;
    telNumLbl.Margins.Left:= 20;
    telNumLbl.Height := 20;
    telNumLbl.Width := 100;
    telNumEdt:= MyForm.AddNewEdit(layout4,'telNumEdt','Tel...');
    telNumEdt.TextSettings.Font.Size:=25;
    telNumEdt.Align := alLeft;
    telNumEdt.Height := 25;
    telNumEdt.Width := 170;
    telNumEdt.MaxLength := 11;
    telNumEdt.ClTypeOfField :=taFloat;
    btnLayout := myForm.AddNewLayout(upperPanel,'btnLayout');
    btnLayout.Align := alMostTop;
    btnLayout.Height := 100;
    btnLayout.Width := 100;
    saveBtn := MyForm.AddNewProButton(btnLayout,'saveBtn',<nowiki>''</nowiki>);
    clComponent.SetupComponent(saveBtn,'{"Align" : "MostLeft","MarginLeft":10,"Width" :100, "Height":100}');
    MyForm.SetImage(saveBtn,'https://clomosy.com/educa/board-check.png');
    MyForm.AddNewEvent(saveBtn,tbeOnClick,'InsertBtnOnClick');
    If Not Clomosy.PlatformIsMobile Then
    begin
        deleteBtn := MyForm.AddNewProButton(btnLayout,'deleteBtn',<nowiki>''</nowiki>);
        clComponent.SetupComponent(deleteBtn,'{"Align" : "Left","MarginLeft":10,"Width" :100, "Height":100}');
        MyForm.SetImage(deleteBtn,'https://clomosy.com/educa/trash.png');
        MyForm.AddNewEvent(deleteBtn,tbeOnClick,'DeleteBtnOnClick');
    end;
    reloadBtn := MyForm.AddNewProButton(btnLayout,'reloadBtn',<nowiki>''</nowiki>);
    clComponent.SetupComponent(reloadBtn,'{"Align" : "Left","MarginLeft":10,"Width" :100, "Height":100}');
    MyForm.SetImage(reloadBtn,'https://clomosy.com/educa/refresh.png');
    MyForm.AddNewEvent(reloadBtn,tbeOnClick,'ReloadBtnOnClick');
    downPanel:=myForm.AddNewPanel(myForm,'downPanel',<nowiki>''</nowiki>);
    downPanel.Align:=alClient;
    downPanel.StyleLookup:='pushpanel';
    downPanel.Margins.Right := 0;
    mainListView := MyForm.AddNewListView(downPanel,'mainListView');
    mainListView.Align := alClient;
    mainListView.Margins.Right := 0;
    MyForm.AddNewEvent(mainListView,tbeOnItemClick, 'onItemClick');
  '''end;'''
 
'''procedure''' ReloadBtnOnClick;
  '''begin'''
      OnloadListView;
  '''end;'''
 
  '''procedure''' DeleteBtnOnClick;
  '''var'''
    clViewDataQuery :TclSQLQuery;
  '''begin'''
      if (nameEdt.Text <> <nowiki>''</nowiki>) and (surnameEdt.Text <> <nowiki>''</nowiki>) and (telNumEdt.Text <> <nowiki>''</nowiki>) and (userIDEdt.Text <> <nowiki>''</nowiki>) then
    begin
          clViewDataQuery:=TclSQLQuery.Create(Nil);
          Try
              clViewDataQuery.Connection := Clomosy.DBSQLServerConnection;
              clViewDataQuery.SQL.Text :='DELETE FROM TBLSTUDENT  WHERE ID= '+userIDEdt.Text;
              clViewDataQuery.ExecSql;
          finally
              clViewDataQuery.Free;
          End;
    end;
     
    OnloadListView;
    Clear;
  '''end;'''
  '''procedure''' InsertBtnOnClick;
  '''var'''
    clViewDataQuery :TclSQLQuery;
  '''begin'''
    if telNumEdt.Text =<nowiki>''</nowiki> then
    ShowMessage('Please Enter Phone Number.!');
   
    if surnameEdt.Text =<nowiki>''</nowiki> then
    ShowMessage('Please Enter Surname.!');
   
    if nameEdt.Text = <nowiki>''</nowiki> then
    ShowMessage('Please Enter Name.!');
    if (nameEdt.Text <> <nowiki>''</nowiki>) and (surnameEdt.Text <> <nowiki>''</nowiki>) and (telNumEdt.Text <> <nowiki>''</nowiki>) and (userIDEdt.Text = <nowiki>''</nowiki>) then
    begin
          clViewDataQuery:=TclSQLQuery.Create(Nil);
          Try
              clViewDataQuery.Connection := Clomosy.DBSQLServerConnection;
              clViewDataQuery.SQL.Text :=' INSERT TBLSTUDENT (NAME,SURNAME,TEL_NUMBER) VALUES ('+QuotedStr(nameEdt.Text)+','+QuotedStr(surnameEdt.Text)+','+QuotedStr(telNumEdt.Text)+')';
              clViewDataQuery.ExecSql;
          finally
              clViewDataQuery.Free;
          End;
      end;
      if (nameEdt.Text <> <nowiki>''</nowiki>) and (surnameEdt.Text <> <nowiki>''</nowiki>) and (telNumEdt.Text <> <nowiki>''</nowiki>) and (userIDEdt.Text <> <nowiki>''</nowiki>) then
    begin
          clViewDataQuery:=TclSQLQuery.Create(Nil);
          Try
              clViewDataQuery.Connection := Clomosy.DBSQLServerConnection;
              clViewDataQuery.SQL.Text :='UPDATE TBLSTUDENT SET NAME='+QuotedStr(nameEdt.Text)+' ,SURNAME='+QuotedStr(surnameEdt.Text)+', TEL_NUMBER='+QuotedStr(telNumEdt.Text)+' WHERE ID= '+userIDEdt.Text;
              clViewDataQuery.ExecSql;
          finally
              clViewDataQuery.Free;
          End;
    end;
     
    OnloadListView;
    Clear;
  '''end;'''
'''begin'''
  myForm := TclForm.Create(Self);
  SetLayout;
  SetupSqlConnection;
  OnloadListView;
  myForm.Run;
'''end;'''




'''Output:'''<br>
<h2> IOT App </h2>
[[File:AzureDatabaseExample.png|frameless|350px]]
 
== IOT Example ==
---------
:'''<span style="color:blue">What is IOT?</span>'''
:'''<span style="color:blue">What is IOT?</span>'''
The Internet of Things (IoT) describes the network of physical objects embedded with sensors, software, and other technologies for the purpose of connecting and sharing data with other devices and systems over the Internet. These devices range from ordinary household objects to advanced industrial tools.<br>
The Internet of Things (IoT) describes the network of physical objects embedded with sensors, software, and other technologies for the purpose of connecting and sharing data with other devices and systems over the Internet. These devices range from ordinary household objects to advanced industrial tools.<br>
Line 1,054: Line 96:
Information: It is necessary to write the desired codes into the Raspberry Pi system. For this, we coded in Python and integrated the activation code of our Clomosy project. In this way, we established our connection.
Information: It is necessary to write the desired codes into the Raspberry Pi system. For this, we coded in Python and integrated the activation code of our Clomosy project. In this way, we established our connection.


'''Code:'''<br>
<b>Link:</b><br>
'''var'''
: [https://github.com/Clomosy/iot-demo IOT App]
  MyForm:TCLForm;
  color1Pnl,color2Pnl,color3Pnl,color4Pnl,color5Pnl:TclProPanel;
  colorPnlTag:integer;
  color1Lbl,color11Lbl,color2Lbl,color22Lbl,color3Lbl,color33Lbl,color4Lbl,color44Lbl,color5Lbl,color55Lbl,stateLbl:TclProLabel;
 
  mainPnlHeight, mainPnlWidth:integer;
  formLayout:TclLayout;
 
  MyMQTT : TclMQTT; 
 
  '''Procedure''' SetupMQTT;
  '''begin'''
    stateLbl := MyForm.AddNewProLabel(MyForm,'stateLbl','Not Connected');
    clComponent.SetupComponent(stateLbl,'{"Align" : "Top","Width" :20, "Height":20,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
    "TextHorizontalAlign":"center","TextBold":"yes"}');
 
    MyMQTT := MyForm.AddNewMQTTConnection(MyForm,'MyMQTT');
    MyForm.AddNewEvent(MyMQTT,tbeOnMQTTStatusChanged,'MyMQTTStatusChanged');
 
 
    MyMQTT.Channel := 'clomosy';//project guid + channel
    MyMQTT.Connect;
 
    if CLomosy.AppUserProfile = 1 then
      ShowMessage(Clomosy.Project_GUID);
  '''end;'''
  '''Procedure''' MyMQTTStatusChanged;
  '''begin'''
    If MyMQTT.Connected Then
    begin
      stateLbl.Text:='Connected';
      clComponent.SetupComponent(stateLbl,'{"Align" : "Top","Width" :20, "Height":20,"TextColor":"#00ff00","TextSize":24,"TextVerticalAlign":"center",
      "TextHorizontalAlign":"center","TextBold":"yes"}');
    end;
    else
    begin
      stateLbl.Text:= 'Not Connected';
      clComponent.SetupComponent(stateLbl,'{"Align" : "Top","Width" :20, "Height":20,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
      "TextHorizontalAlign":"center","TextBold":"yes"}');
    end;
  '''End;'''
  '''Procedure''' SetupFormLayout;
  '''begin'''
    formLayout := MyForm.AddNewLayout(MyForm,'formLayout');
    formLayout.Align:=alContents;
    mainPnlHeight := ((formLayout.Height)/5)-25;
    mainPnlWidth := (formLayout.Width)/5;
  '''end;'''
  '''procedure''' color1LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('ON5');
    end;
  '''end;'''
  '''procedure''' color11LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('OFF5');
    end;
  '''end;'''
  '''procedure''' color2LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('ON1');
    end;
  '''end;'''
  '''procedure''' color22LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('OFF1');
    end;
  '''end;'''
  '''procedure''' color3LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('ON2');
    end;
  '''end;'''
  '''procedure''' color33LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('OFF2');
    end;
  '''end;'''
  '''procedure''' color4LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('ON4');
    end;
  '''end;'''
  '''procedure''' color44LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('OFF4');
    end;
  '''end;'''
  '''procedure''' color5LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('ON3');
    end;
  '''end;'''
  '''procedure''' color55LblOnClick;
  '''begin'''
    If Clomosy.AppUserProfile=1 Then
    begin
      If not MyMQTT.Connected then
        MyMQTT.Connect;
      MyMQTT.Send('OFF3');
    end;
  '''end;'''
'''begin'''
  MyForm := TCLForm.Create(Self);
  SetupFormLayout;
  SetupMQTT;
  {                RED START                              }
  color1Pnl:=MyForm.AddNewProPanel(MyForm,'color1Pnl');
  clComponent.SetupComponent(color1Pnl,'{"Align" : "Top",
  "Width" :'+IntToStr(mainPnlWidth)+',
  "Height":'+IntToStr(mainPnlHeight)+',
  "BackgroundColor":"#ff0000"}');
  color1Lbl := MyForm.AddNewProLabel(color1Pnl,'color1Lbl','On');
  clComponent.SetupComponent(color1Lbl,'{"Align" : "Right","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  color11Lbl := MyForm.AddNewProLabel(color1Pnl,'color11Lbl','Off');
  clComponent.SetupComponent(color11Lbl,'{"Align" : "MostRight","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color1Lbl,tbeOnClick,'color1LblOnClick');
  MyForm.AddNewEvent(color11Lbl,tbeOnClick,'color11LblOnClick');
  {              RED end                                }
  {              BLUE START                                }
  color2Pnl:=MyForm.AddNewProPanel(MyForm,'color2Pnl');
  clComponent.SetupComponent(color2Pnl,'{"Align" : "Top",
  "Width" :'+IntToStr(mainPnlWidth)+',
  "Height":'+IntToStr(mainPnlHeight)+',
  "BackgroundColor":"#00ccff"}');
  color2Lbl := MyForm.AddNewProLabel(color2Pnl,'color2Lbl','On');
  clComponent.SetupComponent(color2Lbl,'{"Align" : "Right","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  color22Lbl := MyForm.AddNewProLabel(color2Pnl,'color22Lbl','Off');
  clComponent.SetupComponent(color22Lbl,'{"Align" : "MostRight","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color2Lbl,tbeOnClick,'color2LblOnClick');
  MyForm.AddNewEvent(color22Lbl,tbeOnClick,'color22LblOnClick');
  {                BLUE end                                    }
  {                GREEN START                          }
  color3Pnl:=MyForm.AddNewProPanel(MyForm,'color3Pnl');
  clComponent.SetupComponent(color3Pnl,'{"Align" : "Top",
  "Width" :'+IntToStr(mainPnlWidth)+',
  "Height":'+IntToStr(mainPnlHeight)+',
  "BackgroundColor":"#33cc33"}');
  color3Lbl := MyForm.AddNewProLabel(color3Pnl,'color3Lbl','On');
  clComponent.SetupComponent(color3Lbl,'{"Align" : "Right","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  color33Lbl := MyForm.AddNewProLabel(color3Pnl,'color33Lbl','Off');
  clComponent.SetupComponent(color33Lbl,'{"Align" : "MostRight","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color3Lbl,tbeOnClick,'color3LblOnClick');
  MyForm.AddNewEvent(color33Lbl,tbeOnClick,'color33LblOnClick');
  {                GREEN END                          }
  {                WHITE START                        }
  color4Pnl:=MyForm.AddNewProPanel(MyForm,'color4Pnl');
  clComponent.SetupComponent(color4Pnl,'{"Align" : "Top",
  "Width" :'+IntToStr(mainPnlWidth)+',
  "Height":'+IntToStr(mainPnlHeight)+',
  "BackgroundColor":"#FFFFFF"}');
  color4Lbl := MyForm.AddNewProLabel(color4Pnl,'color4Lbl','On');
  clComponent.SetupComponent(color4Lbl,'{"Align" : "Right","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  color44Lbl := MyForm.AddNewProLabel(color4Pnl,'color44Lbl','Off');
  clComponent.SetupComponent(color44Lbl,'{"Align" : "MostRight","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color4Lbl,tbeOnClick,'color4LblOnClick');
  MyForm.AddNewEvent(color44Lbl,tbeOnClick,'color44LblOnClick');
  {                WHITE END                        }
  {                YELLOW START                        }
  color5Pnl:=MyForm.AddNewProPanel(MyForm,'color5Pnl');
  clComponent.SetupComponent(color5Pnl,'{"Align" : "Top",
  "Width" :'+IntToStr(mainPnlWidth)+',
  "Height":'+IntToStr(mainPnlHeight)+',
  "BackgroundColor":"#ffff00"}');
  color5Lbl := MyForm.AddNewProLabel(color5Pnl,'color5Lbl','On');
  clComponent.SetupComponent(color5Lbl,'{"Align" : "Right","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  color55Lbl := MyForm.AddNewProLabel(color5Pnl,'color55Lbl','Off');
  clComponent.SetupComponent(color55Lbl,'{"Align" : "MostRight","MarginTop":70,"RoundHeight":10,"RoundWidth":10,"BorderColor":"000000",
  "BorderWidth":2,"BackgroundColor":"#ffffff","Width" :110, "Height":150,"TextColor":"#ff0000","TextSize":24,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.AddNewEvent(color5Lbl,tbeOnClick,'color5LblOnClick');
  MyForm.AddNewEvent(color55Lbl,tbeOnClick,'color55LblOnClick');
  {                YELLOW END                        } 
  MyForm.Run;
'''end;'''


'''Output:'''<br>
<b>Output:</b><br>
[[File:IotMqttExample.png|frameless|300px]]
[[File:IotMqttExample.png|frameless|300px]]


== Messaging App - MQTT ==
<h2> Messaging App - MQTT </h2>
----------
It is an application made for different devices to communicate with each other with MQTT.<br>


'''Code:'''<br>
It is an messaging application made for different devices to communicate with each other with MQTT.<br>
'''var'''
  MyForm:TclForm;
  MyMQTT : TclMQTT;
  BtnSend:TclProButton;
  LblDisplay:TclLabel;
  MemMsg:TclMemo;
  MsgList:TclMemo;
  msjBoxPanel, bigPanel :TclProPanel;
  getMsjLayout : TclLayout;
  msj : String;
  '''Procedure''' MyMQTTStatusChanged;
  '''begin'''
    If MyMQTT.Connected Then
    begin
    LblDisplay.Text := 'Connected';
    LblDisplay.TextSettings.FontColor := clAlphaColor.clHexToColor('#0d7d0b');
    end
    Else
    begin
    LblDisplay.Text := 'Not Connected';
    LblDisplay.TextSettings.FontColor := clAlphaColor.clHexToColor('#7a1209');
   
    end;
  '''End;'''
  '''Procedure''' MyMQTTPublishReceived;
  '''begin'''
    msj := Clomosy.AppUserDisplayName;
    If MyMQTT.ReceivedAlright Then Begin
     
      MsgList.Lines.Add('                  ' + MyMQTT.ReceivedMessage);
    End;
      //Else MsgList.Lines.Add(MyMQTT.ReceivedMessage);
  '''End;'''
  '''Procedure''' BtnSendClick;
  '''begin'''
    MyMQTT.Send(Clomosy.AppUserDisplayName+' : '+MemMsg.Text);  //Data is sent opposite and communicates with other devices.
    MsgList.Lines.Add('You: '+MemMsg.Text);
    MemMsg.Text := ' ';
  '''End;'''
'''begin'''
  MyForm := TclForm.Create(Self);
  bigPanel:=MyForm.AddNewProPanel(MyForm,'bigPanel');
  clComponent.SetupComponent(bigPanel,'{"Align" : "Client","MarginBottom":10,"MarginTop":10,"MarginLeft":10,
  "MarginRight":10,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#5f00bf","BorderWidth":2}');
  LblDisplay:= MyForm.AddNewLabel(bigPanel,'LblDisplay','--');
  LblDisplay.Align := alTop;
  LblDisplay.Visible := True;
  LblDisplay.Margins.Left := 10;
  LblDisplay.StyledSettings := ssFamily;
  LblDisplay.TextSettings.Font.Size := 13;
 
  MyMQTT := MyForm.AddNewMQTTConnection(bigPanel,'MyMQTT');
  MyForm.AddNewEvent(MyMQTT,tbeOnMQTTStatusChanged,'MyMQTTStatusChanged');
  MyForm.AddNewEvent(MyMQTT,tbeOnMQTTPublishReceived,'MyMQTTPublishReceived');
  MyMQTT.Channel := 'chat';//project guid + channel
  MyMQTT.Connect;//After the screen is turned on, the method of calling with a button should also be tested.
  MsgList:= MyForm.AddNewMemo(bigPanel,'MsgList',<nowiki>''</nowiki>);
  MsgList.Align := alClient;
  MsgList.Margins.Top := 10;
  MsgList.Margins.Bottom := 10;
  MsgList.Margins.Left := 10;
  MsgList.Margins.Right := 10;
  MsgList.TextSettings.WordWrap := True;
  MsgList.ReadOnly := True;
    getMsjLayout := MyForm.AddNewLayout(bigPanel,'getMsjLayout');
    getMsjLayout.Align:=alBottom;
    getMsjLayout.Height := 90;
    getMsjLayout.Margins.Bottom := 5;
    getMsjLayout.Width := 400;
    getMsjLayout.Margins.Left := 10;
    getMsjLayout.Margins.Right := 10;
    BtnSend := MyForm.AddNewProButton(getMsjLayout,'BtnSend',<nowiki>''</nowiki>);
    clComponent.SetupComponent(BtnSend,'{"caption":" ","Align" : "Right" ,"MarginBottom":15,"Width" :80,
    "MarginTop" : 15,"MarginLeft" : 5,"Height":60,"BorderColor":"#ffffff"}');
    MyForm.SetImage(BtnSend,'https://img.icons8.com/nolan/256/send.png');
    MyForm.AddNewEvent(BtnSend,tbeOnClick,'BtnSendClick');
    msjBoxPanel:=MyForm.AddNewProPanel(getMsjLayout,'msjBoxPanel');
    clComponent.SetupComponent(msjBoxPanel,'{"Align" : "Left","RoundHeight":15,"Width" :240,"Height":30,
    "MarginLeft":10,"MarginBottom":20,"MarginTop":20,
    "RoundWidth":15,"BorderColor":"#bf00bf","BorderWidth":1}');
  MemMsg:= MyForm.AddNewMemo(msjBoxPanel,'MemMsg',<nowiki>''</nowiki>);
  MemMsg.Align := alClient;
  MemMsg.Margins.Left := 5;
  MemMsg.Margins.Right := 5;
  MemMsg.Margins.Bottom := 5;
  MemMsg.Margins.Top := 5;
  MemMsg.TextSettings.WordWrap := True;
  MyForm.SetFormBGImage('https://i.pinimg.com/originals/2f/04/bf/2f04bfaf8ab4e619682fbcd040893a3b.jpg');
  MyForm.Run;
'''End;'''


'''Output:'''<br>
<b>Link:</b><br>
: [https://github.com/Clomosy/Mqtt Messaging App]
 
<b>Output:</b><br>
[[File:MessagingExample.jpg|frameless|300px]]
[[File:MessagingExample.jpg|frameless|300px]]


== Gyroscope Ufo Game ==
<h2> Gyroscope Ufo Game </h2>
------------
Before we get into the game, let's understand what a gyroscope is.
Before we get into the game, let's understand what a gyroscope is.


Line 1,458: Line 125:
A simple game has been developed using the gyroscope feature. In this way, you can develop the games you want.<br>
A simple game has been developed using the gyroscope feature. In this way, you can develop the games you want.<br>


'''Code:'''<br>
<b>Link:</b><br>
: [https://github.com/Clomosy/jireskop Gyroscope Ufo Game]


'''Var'''
<h2> Word Game </h2>
  MyForm:TclGameForm;
  ImgBall, ImgHole:TclProImage;
  DeviceMotionSensor:TClMotionSensor;
  LblDisplay:TclLabel;
  GameTimer:TClTimer;
  BtnStartGame:TclButton;
  SoundIndex:Integer;
  myDeviceManager:TclDeviceManager;
  HoleMin_X,HoleMax_X : Single; // Ball must be placed inside these coordinates
  HoleMin_Y,HoleMax_Y : Single;
  '''function''' isBallinTheHole: Boolean;
  '''var'''
    centX,CentY : Single;
  '''begin'''
    Result := False;
    centX := ImgBall.Position.X + (ImgBall.Width/2);
    centY := ImgBall.Position.Y + (ImgBall.Height/2);
    if (centX <= HoleMax_X) and (centX >= HoleMin_X) and
        (centY <= HoleMax_Y) and (centY >= HoleMin_Y) then
      Result := True;
  '''end;'''
  '''Procedure''' ProcOnGameTimer;
  '''Const'''
    BallSpeed = 5;
  '''begin'''
    If Clomosy.PlatformIsMobile Then
    '''Begin'''
      Case DeviceMotionSensor.GetDirectionX of
        1:ImgBall.Position.X := ImgBall.Position.X - BallSpeed;//Move left
        2:ImgBall.Position.X := ImgBall.Position.X + BallSpeed;//Move right
      End;
      Case DeviceMotionSensor.GetDirectionY of
        1:ImgBall.Position.Y := ImgBall.Position.Y - BallSpeed;//Move up
        2:ImgBall.Position.Y := ImgBall.Position.Y + BallSpeed;//Move down
      End;
      if (ImgBall.Position.X + ImgBall.Width) > TForm(MyForm).ClientWidth then  // Form Right border control
        ImgBall.Position.X := TForm(MyForm).ClientWidth - ImgBall.Width;
   
      if (ImgBall.Position.X) < 0 then // Left border control
        ImgBall.Position.X := 0;
      if (ImgBall.Position.Y + ImgBall.Height) > TForm(MyForm).ClientHeight then  // Form Bottom border control
        ImgBall.Position.Y := TForm(MyForm).ClientHeight - ImgBall.Height;
      if (ImgBall.Position.Y < 0) then  // Top border control
        ImgBall.Position.Y := 0;
      if isBallinTheHole then
      begin
        GameTimer.Enabled := False;
        ImgBall.Position.X := HoleMin_X;
        ImgBall.Position.Y := HoleMin_Y;
        If Clomosy.PlatformIsMobile Then DeviceMotionSensor.Active := False;//game stopped
        BtnStartGame.Text := 'START GAME';
        MyForm.PlayGameSound(SoundIndex); //sound effect
        myDeviceManager.Vibrate(1000); // vibration feature
        ShowMessage('Congratulations');
      end;
    End;
  '''End'''
  '''Procedure''' BtnStartGameClick;
  '''begin'''
    GameTimer.Enabled := Not GameTimer.Enabled;
    If GameTimer.Enabled Then BtnStartGame.Text := 'STOP GAME' ELSE BtnStartGame.Text := 'START GAME';
    If GameTimer.Enabled Then
    Begin
      ImgBall.Align := alNone;
      ImgBall.Position.x := 0;
      ImgBall.Position.y := 0;
      If Clomosy.PlatformIsMobile Then DeviceMotionSensor.Active := True;
    End Else If Clomosy.PlatformIsMobile Then DeviceMotionSensor.Active := False;//game stopped
  '''End;'''
'''Begin'''
  MyForm := TclGameForm.Create(Self);
  myDeviceManager := TclDeviceManager.Create;
  MyForm.SetFormBGImage('https://i.hizliresim.com/it411uu.png');
  MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/win.wav');
  SoundIndex := MyForm.RegisterSound('win.wav');
  MyForm.SoundIsActive:=True;
  LblDisplay:= MyForm.AddNewLabel(MyForm,'LblDisplay','--');
  LblDisplay.Align := alTop;
  LblDisplay.Visible := False;
  BtnStartGame:= MyForm.AddNewButton(MyForm,'BtnStartGame','START GAME');
  BtnStartGame.Align := alBottom;
  BtnStartGame.Height:=30;
  BtnStartGame.StyledSettings := ssFamily;
  BtnStartGame.TextSettings.FontColor := clAlphaColor.clHexToColor('#FFFFFF');
  MyForm.AddNewEvent(BtnStartGame,tbeOnClick,'BtnStartGameClick');
  ImgHole := MyForm.AddNewProImage(MyForm,'ImgHole');
  ImgHole.clSetImage('https://i.hizliresim.com/jdpgz0k.png');
  ImgHole.Margins.Top:=120;
  ImgHole.Properties.AutoSize := True;
  ImgHole.Align := alCenter;
  ImgBall := MyForm.AddNewProImage(MyForm,'ImgBall');
  ImgBall.clSetImage('https://i.hizliresim.com/9meyjep.png');
  ImgBall.Width := 50;
  ImgBall.Height := 50;
  ImgBall.Align := alCenter;
  HoleMin_X := ImgBall.Position.X;
  HoleMax_X := HoleMin_X + ImgBall.Width; // Ball must be placed inside these coordinates
  HoleMin_Y := ImgBall.Position.Y+18;
  HoleMax_Y := HoleMin_Y + ImgBall.Height;
  ImgBall.Align := alNone;
  ImgBall.Position.Y := HoleMin_Y;
  DeviceMotionSensor := MyForm.AddNewSensorsMotion(MyForm,'DeviceMotionSensor');
  DeviceMotionSensor.Active := Clomosy.PlatformIsMobile;
  GameTimer:= MyForm.AddNewTimer(MyForm,'GameTimer',1000);
  GameTimer.Interval := 30;
  GameTimer.Enabled := False;
  MyForm.AddNewEvent(GameTimer,tbeOnTimer,'ProcOnGameTimer');
  MyForm.Run;
'''End;'''


== Word Game ==
------------
The game is started by pressing the "START" button. Then, questions with 5-letter answers are drawn from the database. In this way, it is tried to find the desired word in the game. There are 3 rights and 1 hint in a game. When these rights expire, you save and the game is reset.<br>
The game is started by pressing the "START" button. Then, questions with 5-letter answers are drawn from the database. In this way, it is tried to find the desired word in the game. There are 3 rights and 1 hint in a game. When these rights expire, you save and the game is reset.<br>


'''Code:'''<br>
<b>Link:</b><br>
: [https://github.com/Clomosy/WordGame Word Game]


'''var'''
<b>Output:</b><br>
  MyForm:TclForm;
 
  LblDisplay,ztStartLbl:TclLabel;
[[File:WordGameV1.1.png|frameless|350px]]
  myGameEngine:TclGameEngine;
 
  MyWord, WordMean:String;
<h2> Hangman Game</h2>
  MyPanel:TclPanel;
  MyWordMean:TclMemo;
  wordEdt :TclEdit;
  ztHintBtnLayout:TclLayout;
  ztHintBtn :TclImage;
  LblDisplayLayout,ztLayout,ztStartBtnLayout,ztStartLblLayout:TclLayout;
  ztStartBtn:TclImage;
  AnswStr:String;
  wrongCount:integer;
  Lblword:TcLProLabel;
  control : Boolean;
  chance : Integer;
  '''Procedure''' GetNewWord;
  '''begin'''
    myGameEngine:= TclGameEngine.Create;
    MyWord := MyGameEngine.WordService('GETWORD:5',<nowiki>''</nowiki>);
    With Clomosy.ClDataSetFromJSON(MyWord) Do
    Begin
      MyWord := FieldByName('Word').AsString;
      MyWord := AnsiUpperCase(MyWord);
      LblDisplay.Text := MyWord;
      WordMean := FieldByName('MeanText').AsString;
    End;
  '''End;
  '''Procedure''' CheckGameOnClick;
  '''begin'''
    AnswStr := wordEdt.Text;
    AnswStr := AnsiUpperCase(AnswStr);
    If AnswStr=MyWord Then
    begin
      ShowMessage('Congratulations🤗');
      chance := 0;
      control := false;
      ztStartBtn.Tag := 0;
      MyForm.setImage(ztStartBtn,'https://clomosy.com/educa/start.png');
      ztStartLbl.Text := ' ';
      wordEdt.Text :=<nowiki>''</nowiki>;
        LblDisplay.Visible := False;
        MyWordMean.Text := <nowiki>''</nowiki>;
    end;
    else
    begin
      if wrongCount = 3 then
      begin
        ShowMessage('Word: '+MyWord+'. You lost. Restart.🙁');
        chance := 0;
        control := false;
        MyForm.setImage(ztStartBtn,'https://clomosy.com/educa/start.png');
        ztStartLbl.Text := ' ';
        ztStartBtn.Tag := 0;
        wrongCount := 1;
        GetNewWord;
        wordEdt.Text := <nowiki>''</nowiki>;
        MyWordMean.Text := <nowiki>''</nowiki>;
        LblDisplay.Visible := False;
      end
      else
      begin
        wrongCount := wrongCount +1;
        ShowMessage('Wrong. Try again.🙁  Your Remaining Right  '+IntToStr(wrongCount-1)+'/3');
        wordEdt.Text := <nowiki>''</nowiki>;
      end;
    end;
  '''end;'''
  '''Procedure''' BtnStartGameClick;
  '''begin'''
    case ztStartBtn.Tag of
      0:
      begin
        MyForm.setImage(ztStartBtn,'https://clomosy.com/educa/ok.png');
        ztStartLbl.Text := ' ';
        ztStartBtn.Tag := 1;
        wrongCount := 1;
        GetNewWord;
        MyWordMean.Text := WordMean;
        wordEdt.Text :=<nowiki>''</nowiki>;
        LblDisplay.Visible := False;
      end;
      1:
      begin
        CheckGameOnClick;
      end;
    end;
  '''End;'''
  '''Procedure''' SetupLayout;
  '''begin'''
    LblDisplayLayout:= MyForm.AddNewLayout(MyForm,'LblDisplayLayout');
    LblDisplayLayout.Align := alBottom;
    LblDisplayLayout.Height := 35;
    LblDisplay:= MyForm.AddNewLabel(LblDisplayLayout,'LblDisplay',' ');
    LblDisplay.Align := alRight;
    LblDisplay.Visible := True;
    LblDisplay.Margins.Bottom:=0;
    MyPanel:= MyForm.AddNewPanel(MyForm,'MyPanel',<nowiki>''</nowiki>);
    MyPanel.Align := alCenter;
    MyPanel.Height := 25;
    MyPanel.Margins.Top:=100;
    MyPanel.Margins.Left:=125;
    MyPanel.Width := 125;
    wordEdt := MyForm.AddNewEdit(MyPanel,'wordEdt','________________');
    wordEdt.Width := 125;
    wordEdt.Align := alLeft;
    wordEdt.MaxLength := 5;
  end;
  '''Procedure''' SetupStartBtn;
  '''begin'''
    ztLayout := MyForm.AddNewLayout(MyForm,'ztLayout');
    ztLayout.Align:=alBottom;
    ztLayout.Height := 200;
    ztLayout.Width := 100;
    ztLayout.Margins.Bottom := 30;
    ztStartBtnLayout := MyForm.AddNewLayout(ztLayout,'ztStartBtnLayout');
    ztStartBtnLayout.Align:=alCenter;
    ztStartBtnLayout.Height := 100;
    ztStartBtnLayout.Width := 100;
    ztStartBtn:= MyForm.AddNewImage(ztStartBtnLayout,'ztStartBtn');
    ztStartBtn.Align := alTop;
    ztStartBtn.Height := 100;
    ztStartBtn.Width := 100;
    ztStartBtn.Tag := 0;
    MyForm.setImage(ztStartBtn,'https://clomosy.com/educa/start.png');
    MyForm.AddNewEvent(ztStartBtn,tbeOnClick,'BtnStartGameClick');
    ztStartLblLayout := MyForm.AddNewLayout(ztLayout,'ztStartLblLayout');
    ztStartLblLayout.Align:=alCenter;
    ztStartLblLayout.Height := 100;
    ztStartLblLayout.Width := 150;
    ztStartLblLayout.Margins.Top := 40;
    ztStartLblLayout.Margins.Left := 55;
    ztStartLbl:= MyForm.AddNewLabel(ztStartLblLayout,'ztStartLbl',' ');
    ztStartLbl.StyledSettings := ssFamily;
    ztStartLbl.TextSettings.Font.Size:=16;
    ztStartLbl.Align := alBottom;
  '''end;'''
  '''Procedure''' ztHintBtnOnClick;
  '''var'''
    hintValue : String;
    firstLetter,secondLetter : String;
    firstIndex,secondIndex : Integer;
    i : Integer;
  '''begin'''
    if MyWordMean.Text <> <nowiki>''</nowiki> then
    begin
          if control = false then
    begin
      control := true;
            if chance < 2 then
          begin
            chance := chance +1;
              // TAKES 2 RANDOM VALUES
              for i := 1 to 5 do
              begin
                  firstIndex := clMath.GenerateRandom(1,5);
                  secondIndex := clMath.GenerateRandom(1,5);
                  if secondIndex <> firstIndex then
                    break;
              end;
            firstLetter := Copy(MyWord,firstIndex,1);
            secondLetter := Copy(MyWord,secondIndex,1);
            LblDisplay.Visible := True;
            LblDisplay.Text := <nowiki>''</nowiki>;
                for i:= 1 to 5 do
                begin
                    if i = firstIndex then
                      LblDisplay.Text := LblDisplay.Text + firstLetter
                    else if i = secondIndex then
                      LblDisplay.Text := LblDisplay.Text + secondLetter
                    else
                      LblDisplay.Text := LblDisplay.Text + ' - ';
                end;
          end;
    end
    else
      ShowMessage('You have no more rights. 😞');
    end
    else
      ShowMessage('Start The Game! 😎');
  '''end;'''
  '''procedure''' SetupHintBtn;
  '''begin'''
    ztHintBtnLayout := MyForm.AddNewLayout(MyForm,'ztHintBtnLayout');
    ztHintBtnLayout.Align:=alcenter;
    ztHintBtnLayout.Align:=alRight;
    ztHintBtnLayout.Margins.Right:=30;
    ztHintBtnLayout.Height := 50;
    ztHintBtnLayout.Width := 100;
    ztHintBtn:= MyForm.AddNewImage(ztHintBtnLayout,'ztHintBtn');
    ztHintBtn.Align := alRight;
    ztHintBtn.Height := 55;
    ztHintBtn.Width := 55;
    ztHintBtn.Margins.Bottom:=-100;
    MyForm.setImage(ztHintBtn,'https://clomosy.com/educa/hint.png');
    MyForm.AddNewEvent(ztHintBtn,tbeOnClick,'ztHintBtnOnClick');
  '''end;'''
  '''Procedure''' SetupWordMean;
  '''var'''
    ztProPanel : TclProPanel;
    '''begin'''
    ztProPanel:=MyForm.AddNewProPanel(MyForm,'ztProPanel');
    clComponent.SetupComponent(ztProPanel,'{"Align" : "Top","Width" :95,"MarginBottom" : 0,
    "MarginLeft" : 20,"MarginRight" : 20,
    "Height":110,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#9400D3","BorderWidth":3}');
    MyWordMean:= MyForm.AddNewMemo(ztProPanel,'MyWordMean',<nowiki>''</nowiki>);
    MyWordMean.Align := alClient;
    MyWordMean.Margins.Left:=10;
    MyWordMean.Margins.Right:=10;
    MyWordMean.Margins.Bottom:=10;
    MyWordMean.Margins.Top:=10;
    MyWordMean.ReadOnly := True;
    MyWordMean.TextSettings.WordWrap := True;
  '''end;'''
'''begin'''
  MyForm := TclForm.Create(Self);
  chance := 0;
  Lblword := MyForm.AddNewProLabel(MyForm,'Lblword','WORD GAME');
  clComponent.SetupComponent(Lblword,'{"Align" : "TOP","MarginBottom":35,"Width" :210,
"Height":26,"TextColor":"#F2F0F0","TextSize":20,"TextVerticalAlign":"top", "TextHorizontalAlign":"center","TextBold":"yes"}');
  MyForm.SetFormBGImage('https://clomosy.com/educa/bg4.png');
  control := false;
  SetupLayout;
  SetupWordMean;
  SetupStartBtn;
  SetupHintBtn;
  MyForm.Run;
'''End;'''


'''Output:'''<br>
The game starts by choosing the word length on the first page. After that, clicking the button at the bottom leads to the game page.<br>
[[File:WordGame.png|frameless|350px]]


== Hangman Game ==
----------
The game starts by choosing the word length on the first page. After that, clicking the button at the bottom leads to the game page.
Here, by clicking the "Start Game" button, our question appears on the screen. You have 11 rights in the game. In this way, if you find the word until you are full, you win the game.<br>
Here, by clicking the "Start Game" button, our question appears on the screen. You have 11 rights in the game. In this way, if you find the word until you are full, you win the game.<br>


'''Code:'''<br>
<b>Link:</b><br>
'''var'''
: [https://github.com/Clomosy/Hangman Hangman Game]
  MyForm, MYSecondForm:TclForm;
  startBtn : TclProButton;
  titleImg,manImg: TClProImage;
  selectionLbl,nonLettersNonLbl  : TClProLabel;
  choiceCombo : TClComboBox;
  comboForInt , numberOfCycles, source,counter : Integer;
  gamePnl,letterPnl,nonLettersNonPnl,screenPnl : TclProPanel;
  MyWord, WordMean,characterValue:String;
  mainVertScrollBox: TclVertScrollBox;
  MyWordMean:TclMemo;
  LblDisplay,imageLbl,ztStartLbl:TclLabel;
  myGameEngine:TclGameEngine;
  MyPanel:TclPanel;
  lettersEdit,MyEdit:TclEdit;
  EditFixWidth:Single;
  ztHintBtn,ztStartBtn:TclImage;
  ztLayout,ztHintBtnLayout, ztStartBtnLayout, ztStartLblLayout,imageLayout:TclLayout;
  AnswStr,word:String;
  wrongCount:integer;
  '''Procedure''' GetNewWord(wordLength:Integer);
  '''begin'''
    myGameEngine:= TclGameEngine.Create;
    MyWord := MyGameEngine.WordService('GETWORD:'+IntToStr(wordLength),<nowiki>''</nowiki>);
    With Clomosy.ClDataSetFromJSON(MyWord) Do
    Begin
      MyWord := FieldByName('Word').AsString;
      MyWord := AnsiUpperCase(MyWord);
      LblDisplay.Text := MyWord;
      WordMean := FieldByName('MeanText').AsString;
    End;
  '''End;'''
  '''Procedure''' kelimeKontrol;
  '''var'''
    j:integer;
  '''begin'''
    for j := 1 to StrToInt(choiceCombo.ItemIndex)+1 do
    begin
      if lettersEdit.Text = <nowiki>''</nowiki> Then
      begin
        exit;
      end
      else
        word := word+TClEdit(MYSecondForm.clFindComponent('MyEdit'+IntToStr(j))).Text;
    end;
  '''End;'''
  '''Procedure''' CheckGameOnClick;
  '''begin'''
    word := <nowiki>''</nowiki>;
    kelimeKontrol;
    AnswStr := word;
    AnswStr := AnsiUpperCase(AnswStr);
    If AnswStr=MyWord Then
    begin
      ShowMessage('Congratulations');
      ztStartBtn.Tag := 0;
      MYSecondForm.setImage(ztStartBtn,'https://clomosy.com/educa/circled-play.png');
      ztStartLbl.Text := 'Start Game';
      nonLettersNonLbl.Text :=<nowiki>''</nowiki>;
      TclProButton(MYSecondForm.clFindComponent('BtnGoBack')).Click;
    end;
    else
    begin
    end;
  end;
  '''Procedure''' BtnStartGameClick;
  '''begin'''
    case ztStartBtn.Tag of
      0:
      begin
        ztStartBtn.Tag := 1;
        wrongCount := 0;
        GetNewWord(StrToInt(choiceCombo.ItemIndex)+1);
        MyWordMean.Text := WordMean;
        lettersEdit.Text:=<nowiki>''</nowiki>;
        lettersEdit.SetFocus;
        LblDisplay.Visible := False;
        ztStartBtn.Visible := False;
        ztStartLbl.Visible := False;
      end;
      1:
      begin
        CheckGameOnClick;
      end;
    end;
  '''End;'''
  '''Procedure''' MyEditOnChange;
  '''var'''
  letterState:Boolean;
  '''begin'''
    letterState:=False;
    source := MyWord;
    for numberOfCycles := 1 to choiceCombo.ItemIndex+1 do
    begin
      characterValue := Copy(source, numberOfCycles, 1);
      if lettersEdit.Text = characterValue then
      begin
        letterState:=True;
        TClEdit(MYSecondForm.clFindComponent('MyEdit'+IntToStr(numberOfCycles))).Text := lettersEdit.Text;
        CheckGameOnClick;
      end;
    end;
    if not letterState then
    begin
      wrongCount := wrongCount +1;
      nonLettersNonLbl.Text:=nonLettersNonLbl.Text+ lettersEdit.Text + ' , ';
      if wrongCount = 11 then
      begin
        ShowMessage('Word: '+'"'+ MyWord+'"' +' Christ no! It didn''t happen..');
        MYSecondForm.setImage(ztStartBtn,'https://clomosy.com/educa/checked2.png');
        ztStartLbl.Text := 'Check Word';
        ztStartBtn.Tag := 1;
        wrongCount := 1;
        GetNewWord(StrToInt(choiceCombo.ItemIndex));
        MyWordMean.Text := WordMean;
        MyEdit.Text:=<nowiki>''</nowiki>;
        MyEdit.SetFocus;
        LblDisplay.Visible := False;
        nonLettersNonLbl.Text:=<nowiki>''</nowiki>;
        clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,
        "RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,
        "ImgUrl":"https://clomosy.com/educa/hangerTitle2.png", "ImgFit":"yes"}');
        TclProButton(MYSecondForm.clFindComponent('BtnGoBack')).Click;
      end;
      case wrongCount of
      1:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman1.png", "ImgFit":"yes"}');
      2:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman2.png", "ImgFit":"yes"}');
      3:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman3.png", "ImgFit":"yes"}');
      4:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman4.png", "ImgFit":"yes"}');
      5:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman5.png", "ImgFit":"yes"}');
      6:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman6.png", "ImgFit":"yes"}');
      7:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman7.png", "ImgFit":"yes"}');
      8:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman8.png", "ImgFit":"yes"}');
      9:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman9.png", "ImgFit":"yes"}');
      10:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman10.png", "ImgFit":"yes"}');
      11:clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangman11.png", "ImgFit":"yes"}');
      end;
    end;
  '''end;'''
 
  '''Procedure''' SetupLayout;
  '''begin'''
    MyPanel:= MYSecondForm.AddNewPanel(gamePnl,'MyPanel',<nowiki>''</nowiki>);
    MyPanel.Align := alCenter;
    MyPanel.Height := 25;
    MyPanel.Margins.Top:=-10;
    MyPanel.Margins.Left:=20;
    MyPanel.Margins.Right:=20;
    for counter:= 1 to choiceCombo.ItemIndex+1 do
    begin
      EditFixWidth := 25;
      MyEdit := MYSecondForm.AddNewEdit(MyPanel,'MyEdit'+IntToStr(counter),'_');
      MyEdit.Width := EditFixWidth;
      MyEdit.Align := alLeft;
      MyEdit.ReadOnly := True;
 
    end;
    MyPanel.Width := EditFixWidth*(choiceCombo.ItemIndex+1);
  '''end;'''
  '''Procedure''' getletter
  '''begin'''
    letterPnl:=MYSecondForm.AddNewProPanel(gamePnl,'letterPnl');
    clComponent.SetupComponent(letterPnl,'{"Align" : "center","Width" :100, "MarginLeft":100,"MarginRight":100,"MarginTop":100,
    "Height":50,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":2}');
    EditFixWidth := 25;
    lettersEdit:= MYSecondForm.AddNewEdit(letterPnl,'lettersEdit','____');
    MYSecondForm.AddNewEvent(lettersEdit,tbeOnChange,'MyEditOnChange');
    lettersEdit.Width := EditFixWidth;
    lettersEdit.Align := alCenter;
    lettersEdit.MaxLength := 1;
  '''end;'''
  '''Procedure''' nonLetter
  '''begin'''
    nonLettersNonPnl:=MYSecondForm.AddNewProPanel(gamePnl,'nonLettersNonPnl');
    clComponent.SetupComponent(nonLettersNonPnl,'{"Align" : "Bottom","Width" :100, "MarginLeft":10,"MarginRight":10,"MarginBottom":10,
    "Height":50,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":2}');
    nonLettersNonLbl := MYSecondForm.AddNewProLabel(nonLettersNonPnl,'nonLettersNonLbl','Letters : ');
  clComponent.SetupComponent(nonLettersNonLbl,'{"Align" : "left","MarginBottom":10,"MarginLeft":20,"Width" :250, "Height":30,"TextColor":"#000000","TextSize":12,"TextVerticalAlign":"center",
  "TextHorizontalAlign":"left","TextBold":"yes"}');
  '''end;'''
  '''Procedure''' SetupStartBtn;
  '''begin'''
    ztLayout := MYSecondForm.AddNewLayout(gamePnl,'ztLayout');
    ztLayout.Align:=alCenter;
    ztLayout.Height := 200;
    ztLayout.Width := 100;
    ztLayout.Margins.Top := 250;
    ztStartBtnLayout := MYSecondForm.AddNewLayout(ztLayout,'ztStartBtnLayout');
    ztStartBtnLayout.Align:=alCenter;
    ztStartBtnLayout.Height := 100;
    ztStartBtnLayout.Width := 100;
    ztStartBtn:= MYSecondForm.AddNewImage(ztStartBtnLayout,'ztStartBtn');
    ztStartBtn.Align := alTop;
    ztStartBtn.Height := 100;
    ztStartBtn.Width := 100;
    ztStartBtn.Tag := 0;
    MYSecondForm.setImage(ztStartBtn,'https://clomosy.com/educa/circled-play.png');
    MYSecondForm.AddNewEvent(ztStartBtn,tbeOnClick,'BtnStartGameClick');
    ztStartLblLayout := MYSecondForm.AddNewLayout(ztLayout,'ztStartLblLayout');
    ztStartLblLayout.Align:=alCenter;
    ztStartLblLayout.Height := 100;
    ztStartLblLayout.Width := 150;
    ztStartLblLayout.Margins.Top := 40;
    ztStartLblLayout.Margins.Left := 55;
    ztStartLbl:= MYSecondForm.AddNewLabel(ztStartLblLayout,'ztStartLbl','Start Game');
    ztStartLbl.StyledSettings := ssFamily;
    ztStartLbl.TextSettings.Font.Size:=20;
    ztStartLbl.Align := alBottom;
  '''end;'''
  '''Procedure''' ztHintBtnOnClick;
  '''begin'''
    LblDisplay.Visible := True;
  '''end;'''
  '''procedure''' SetupHintBtn;
  '''begin'''
    ztHintBtnLayout := MYSecondForm.AddNewLayout(imageLayout,'ztHintBtnLayout');
    ztHintBtnLayout.Align:=alLeft;
    ztHintBtnLayout.Height := 100;
    ztHintBtnLayout.Width := 130;
    ztHintBtn:= MYSecondForm.AddNewImage(ztHintBtnLayout,'ztHintBtn');
    ztHintBtn.Align := alBottom;
    ztHintBtn.Margins.Bottom:=0;
    ztHintBtn.Height := 75;
    ztHintBtn.Width := 75;
    LblDisplay:= MYSecondForm.AddNewLabel(ztHintBtnLayout,'LblDisplay',' ');
    LblDisplay.Align := alTop;
    LblDisplay.Margins.Left :=10;
    LblDisplay.Margins.Top:= -25;
    LblDisplay.TextSettings.Font.Size:=3;
    LblDisplay.Height:=50;
    LblDisplay.Visible := True;
    MYSecondForm.setImage(ztHintBtn,'https://clomosy.com/educa/hint1.png');
    MYSecondForm.AddNewEvent(ztHintBtn,tbeOnClick,'ztHintBtnOnClick');
  '''end;'''
  '''Procedure''' imageProcedure
  '''Begin'''
    imageLayout:= MYSecondForm.AddNewLayout(gamePnl,'imageLayout');
    imageLayout.Align := alcenter;
    imageLayout.Height := 75;
    imageLayout.Margins.Bottom := 300;
    imageLbl:= MYSecondForm.AddNewLabel(imageLayout,'imageLbl','image');
    imageLbl.Align := alcenter;
    imageLbl.Visible := True;
    manImg := MYSecondForm.AddNewProImage(imageLayout,'manImg');
clComponent.SetupComponent(manImg,'{"Align" : "Center","MarginLeft":5,"MarginRight":5,"MarginTop":50,"Width" :150, "Height":250,
"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":0,
"ImgUrl":"https://clomosy.com/educa/hangerTitle2.png", "ImgFit":"yes"}');
  '''End;'''
  '''Procedure''' SetupWordMean;
  '''var'''
  ztProPanel : TclProPanel;
  '''begin'''
    ztProPanel:=MYSecondForm.AddNewProPanel(gamePnl,'ztProPanel');
    clComponent.SetupComponent(ztProPanel,'{"Align" : "Top","Width" :80, "MarginTop":10,"MarginRight":10,"MarginLeft":10,
    "Height":100,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":2}');
    MyWordMean:= MYSecondForm.AddNewMemo(ztProPanel,'MyWordMean',<nowiki>''</nowiki>);
    MyWordMean.Align := alClient;
    MyWordMean.ReadOnly := True;
    MyWordMean.TextSettings.WordWrap := True;
    MyWordMean.Height := MyWordMean.Height * 2;
  '''end;'''
  '''Procedure''' secondScreen;
  '''begin'''
  MYSecondForm := TclForm.Create(Self);
  MYSecondForm.SetFormColor('#6af2e4','#CBEDD5',clGVertical);
  gamePnl:=MYSecondForm.AddNewProPanel(MYSecondForm,'gamePnl');
  clComponent.SetupComponent(gamePnl,'{"Align" : "Client","Width" :350, "MarginRight":10,"MarginLeft":10,"MarginBottom":10,"MarginTop":10,
  "Height":600,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":2}');
  mainVertScrollBox := MYSecondForm.AddNewVertScrollBox(gamePnl,'main');
  mainVertScrollBox.Align := alClient;
  imageProcedure;
  SetupWordMean;
  SetupLayout;
  SetupStartBtn;
  SetupHintBtn;
  getletter;
  nonLetter;
  MYSecondForm.Run;
  '''End;'''
  '''procedure''' BtnOnClick;
  '''var'''
    valueStr : String;
  '''begin'''
    if choiceCombo.ItemIndex <> 0 then
    secondScreen;
    else
    ShowMessage('Make Your Choice!');
    '''end;'''
'''begin'''
  MyForm := TclForm.Create(Self);
  MyForm.SetFormColor('#6af2e4','#CBEDD5',clGVertical);
screenPnl:=MyForm.AddNewProPanel(MyForm,'screenPnl');
clComponent.SetupComponent(screenPnl,'{"Align" : "Client","Width" :300, "MarginTop":15,"MarginRight":15,"MarginLeft":15,"MarginBottom":15,
"Height":600,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":2}');
titleImg := MyForm.AddNewProImage(screenPnl,'titleImg');
clComponent.SetupComponent(titleImg,'{"Align" : "Top","MarginTop":45,"MarginRight":15,"MarginLeft":15,"Width" :150, "Height":150,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2","BorderWidth":0,
"ImgUrl":"https://clomosy.com/educa/hangerTitle.png", "ImgFit":"yes"}');
selectionLbl := MyForm.AddNewProLabel(screenPnl,'selectionLbl','Choose Word Length');
clComponent.SetupComponent(selectionLbl,'{"Align" : "Center",
"MarginBottom":100,
"Width" :150,
"Height":30,
"TextColor":"#000000",
"TextSize":14,
"TextVerticalAlign":"center",
"TextHorizontalAlign":"left",
"TextBold":"yes"}');
  choiceCombo := MyForm.AddNewComboBox(screenPnl,'choiceCombo');
  choiceCombo.Align := alCenter;
  choiceCombo.Width := 170;
  choiceCombo.Margins.Bottom:=20;
  choiceCombo.AddItem('Make Your Choice!','0')
  for comboForInt := 2 to 10 do
  begin
  choiceCombo.AddItem(IntToStr(comboForInt),IntToStr(comboForInt));
  end;
  startBtn := MyForm.AddNewProButton(screenPnl,'startBtn',<nowiki>''</nowiki>);
  clComponent.SetupComponent(startBtn,'{"caption":"","Align" : "Bottom","MarginBottom":40,"Width" :100,
  "Height":70,"RoundHeight":2,
  "RoundWidth":2,"BorderColor":"#000000","BorderWidth":2}');
  MyForm.SetImage(startBtn,'https://clomosy.com/educa/hanger.png');
  MyForm.AddNewEvent(startBtn,tbeOnClick,'BtnOnClick');
MyForm.Run;
'''end;'''


'''Output:'''<br>
<b>Output:</b><br>
<gallery widths="400px" heights="550px" align="center" mode="nolines">
<gallery widths="400px" heights="550px" align="center" mode="nolines">
File: HangmanGameMainPage.png | '' Main Page ''
File: HangmanGameMainPage.png | '' Main Page ''
Line 2,265: Line 154:
</gallery>
</gallery>


== Animation and Effects Game ==
<h2> Animation and Effects Game </h2>
----------------
TclGameForm is used as the form structure in this game. Besides, TclTimer component is also used. Features such as adding animation and sound effects are used on TclGameForm. You can develop applications by looking at the definitions here.<br>
TclGameForm is used as the form structure in this game. Besides, TclTimer component is also used. Features such as adding animation and sound effects are used on TclGameForm. You can develop applications by looking at the definitions here.<br>


'''Code:'''<br>
<b>Link:</b><br>
: [https://github.com/Clomosy/GameAnimation Animation and Effects Game]
 
<h2> Artificial Intelligence App </h2>
A conversational AI chat engine specialized in dialogue using the OpenAI engine has been developed within the Clomosy infrastructure, and it has been utilized in this example.<br>
 
<b>Link:</b><br>
: [https://github.com/Clomosy/AI Artificial Intelligence App]
 
<b>Output:</b><br>
[[File:ArtificalIntelligenceExample.png|frameless|350px]]
 
<h2> Raffle Application </h2>
This project includes a Raffle Application where users can participate and determine the winners. The application provides real-time communication and the ability to share the results of the draw via MQTT.
 
<b>Link:</b><br>
: [https://github.com/Clomosy/raffle-game Raffle Application]
 
<h2> Clomosy Notification Sender </h2>
This project includes the Clomosy Notification Sender application. Users or administrators can send a specific message or announcement to all users as notifications. The application provides customized user interfaces for different user profiles.
 
<b>Link:</b><br>
: [https://github.com/Clomosy/Notif-Sender Clomosy Notification Sender]
 
<h2> Find the Difference Game </h2>
This project includes a find the difference game where users try to identify the differences between two images. The game consists of a total of 4 levels. The goal of the game is to detect the specified differences to advance to the next level.
 
<b>Link:</b><br>
: [https://github.com/Clomosy/spot-difference-game Find the Difference Game]
<b>Output:</b><br>
[[File:FindTheDifference.png|frameless|350px]]
<h2> Drawing Form Application </h2>
This project includes a drawing form application where users can create and edit images using various drawing tools. The project provides a first-class drawing experience.
 
<b>Link:</b><br>
: [https://github.com/Clomosy/draw-form Drawing Form Application]
<b>Output:</b><br>
[[File:DrawForm.png|frameless|350px]]
<h2> Online Quiz Application </h2>
 
This project involves an online quiz application where users can answer questions and view results through graphs. The project is a dual-platform application designed for both mobile and desktop use.


'''var'''
<b>Link:</b><br>
  MyForm:TclGameForm;
: [https://github.com/Clomosy/question-sender Online Quiz Application]
  GameTimer:TClTimer;
  BtnRandomFire:TclButton;
  ImgBack:TclProImage;
  ImgTank:TclProImage;
  SndFire:Integer;
  tPosX,tPosY:Single;
  '''Procedure''' BtnRandomFireClick;
  '''var'''
    i:Integer;
  '''begin'''
    MyForm.AnimationWidth := 75;
    MyForm.AnimationHeight := 75;
    MyForm.clAnimateBitmap.AnimationCount :=9;
    MyForm.clAnimateBitmap.AnimationRowCount:=3;
    MyForm.clAnimateBitmap.Delay := 10;
    MyForm.clAnimateBitmap.Duration := 2;
    For i:=0 to 5 do
    Begin
      MyForm.clAnimateBitmap.Delay := Random()*10;
      MyForm.clAnimation(Random() * TForm(MyForm).ClientWidth, Random() * TForm(MyForm).ClientHeight, 0, 'Explosion.png');
    End;
    MyForm.PlayGameSound(SndFire);
  '''End;'''
  '''Procedure''' ProcOnGameTimer;
  '''begin'''
    ImgTank.Visible := True;
    tPosY := tPosY - 10;
    ImgTank.Position.X := tPosX;
    ImgTank.Position.Y := tPosY;
  '''End;'''
'''begin
    MyForm := TclGameForm.Create(Self);
    MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/BackImage.jpg');
    MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/Fire.wav');
    MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/Explosion.png');
    MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/Tank.png');
   
   
   
    tPosX := Random()* TForm(MyForm).ClientWidth;
    tPosY := TForm(MyForm).ClientHeight;
    SndFire := MyForm.RegisterSound('Fire.wav');
    MyForm.SoundIsActive:=True;
 
    ImgBack := MyForm.AddNewProImage(MyForm,'ImgBack');
    ImgBack.clSetImage('BackImage.jpg');
    ImgBack.Align := alClient;
   
    ImgTank := MyForm.AddNewProImage(MyForm,'ImgTank');
    ImgTank.clSetImage('Tank.png');
    ImgTank.Properties.AutoSize := False;
    ImgTank.Width := ImgTank.Width * 2;
    ImgTank.Height := ImgTank.Height * 2;
    ImgTank.Visible := False;
 
    BtnRandomFire:= MyForm.AddNewButton(MyForm,'BtnRandomFire','RANDOM FIRE');
    MyForm.AddNewEvent(BtnRandomFire,tbeOnClick,'BtnRandomFireClick');
    BtnRandomFire.Align := alBottom;
   
    GameTimer:= MyForm.AddNewTimer(MyForm,'GameTimer',1000);
    GameTimer.Interval := 500;
    GameTimer.Enabled := True; 
    MyForm.AddNewEvent(GameTimer,tbeOnTimer,'ProcOnGameTimer');
   
 
    MyForm.Run;
'''End;'''


<h2> Toothpick Collection Game </h2>
This project represents a fun game where you control an object using motion sensors.


<b>Link:</b><br>
: [https://github.com/Clomosy/stick-collector-game Toothpick Collection Game]


== Artificial Intelligence Example ==
<h2> "Explain It to Me" Application </h2>
A conversational AI chat engine specialized in dialogue using the OpenAI engine has been developed within the Clomosy infrastructure, and it has been utilized in this example.<br>
This project includes a lottery and word game application. The aim of the project is to enable users to participate in the raffle and other players try to explain the word to the person who won the raffle. The player who wins the draw collects points as he guesses.
 
<b>Link:</b><br>
: [https://github.com/Clomosy/tellme-game Explain It to Me" Application]
 
<h2> Balloon Popping </h2>
This project includes a balloon popping game where computers and mobile devices work simultaneously. The draw is held and whoever won the draw tries to know the question without popping the balloon.
 
<b>Link:</b><br>
: [https://github.com/Clomosy/balloon-game Balloon Popping]
 
<h2> Asteroid Game </h2>
This project involves an asteroid escape application.
 
<b>Link:</b><br>
: [https://github.com/Clomosy/astroid-game Asteroid Game]


'''Code:'''<br>
<h2> Fruit Collect Game </h2>
'''var'''
In this project, we are collecting food falling from the sky. If we collect healthy foods, our score increases, and if we collect unhealthy foods, our score decreases. Players are listed according to their scores.
  MyForm:TclForm;
  BtnSend:TclProButton;
  LblDisplay:TclLabel;
  MemMsg:TclMemo;
  ghMsgList,MsgList:TclMemo;
  MyOpenAIEngine:TclOpenAIEngine;
  bigPanel,smallPanel:TclProPanel;
  bigLyt:TClLayout;
  sendLbl:TClProLabel;
  MyMQTT : TclMQTT;
  GetTimer,
  settingsTmr: TClTimer;
  counter:integer;
  '''Procedure''' BtnSendClick;
  '''begin'''
  if Clomosy.AppUserProfile=1 then
  begin
      if MemMsg.Text = <nowiki>''</nowiki> then
      begin
          ShowMessage('Please write your message.!');
      end
      else
      begin
          MyOpenAIEngine.SendAIMessage(MemMsg.Text);
          MemMsg.Text := <nowiki>''</nowiki>;
      end;
  end;
  '''End;'''
  '''Procedure''' OnNewMessageEvent;
  '''begin'''
      if MyMQTT.ReceivedAlright = False then
      begin
        MsgList.Lines.Add(<nowiki>''</nowiki>);
        MyMQTT.Send(MyOpenAIEngine.NewMessageContent);
          if Clomosy.AppUserProfile = 1 then
            MsgList.Lines.Add(MyOpenAIEngine.NewMessageContent);
        MsgList.ScrollTo(0,MsgList.Lines.Count*MsgList.Lines.Count,True);
      end;
  '''End;'''
  '''Procedure''' MyMQTTStatusChanged;
  '''begin'''
    If MyMQTT.Connected Then
    begin
      LblDisplay.TextSettings.FontColor := clAlphaColor.clHexToColor('#00ff00');
    end
    Else
    begin
      LblDisplay.TextSettings.FontColor := clAlphaColor.clHexToColor('#ff0000');
    end;
  '''End;'''
  '''Procedure''' MyMQTTPublishReceived;
  '''begin'''
        If MyMQTT.ReceivedAlright Then
        Begin
          if Clomosy.AppUserProfile <> 1 then
          begin
            MsgList.Lines.Add(<nowiki>''</nowiki>);
            MsgList.Lines.Add('                  ' + MyMQTT.ReceivedMessage);
          MsgList.ScrollTo(0,MsgList.Lines.Count*MsgList.Lines.Count,True);
          if MyMQTT.ReceivedMessage = 'e95vX2faG@3M' then
            begin
              MsgList.Text := <nowiki>''</nowiki>;
              MsgList.Visible := False;
            end;
          if MyMQTT.ReceivedMessage = '52eJz#EzV6Yz' then
            begin
              MsgList.Text := <nowiki>''</nowiki>;
              MsgList.Visible := True;
            end;
          end;
        End;
  '''end;'''
  '''procedure''' runTimer;
  '''begin'''
    Dec(counter);
    BtnSend.caption := IntToStr(counter);
    if counter = 19 then
    begin
      if Clomosy.AppUserProfile = 1 then
      begin
        MyMQTT.Send('e95vX2faG@3M');
        MyOpenAIEngine.SendAIMessage('Clomosy stands for cloud mobile system.
        Currently, we are testing an OpenAI chatbot application through Clomosy.
        Clomosy is a platform that enables businesses to develop custom mobile applications to meet their specific needs.
        It is a cloud-based mobile application development system that allows for the creation of user-friendly,
        customizable, and platform-independent mobile applications that can be developed for different platforms such as Android, iOS, and Windows.
        To become a Clomosy developer, you need to create an account on the website (clomosy.com).
        To use the projects you have developed on Clomosy, you need to upload the applications from the platforms (AppStore/PlayStore).  
        You can visit docs.clomosy.com to access Clomosy documentation.');
      end;
    end;
    if counter <=0 then
    begin
      if Clomosy.AppUserProfile = 1 then
      begin
        ShowMessage('Now you can start asking your questions.');
        MemMsg.Enabled := True;
        MemMsg.SetFocus;
        BtnSend.Enabled := True;
        BtnSend.caption := 'Send';
      end;
      MsgList.Visible := True;
      MsgList.Text := <nowiki>''</nowiki>;
     
      GetTimer.Enabled := False;
      counter := 20;
      MyMQTT.Send('52eJz#EzV6Yz');
     
    end;
  '''end;'''
'''begin'''
  MyForm := TclForm.Create(Self);
  MyForm.SetFormBGImage('https://clomosy.com/educa/bg5.png');
  bigLyt := MyForm.AddNewLayout(MyForm,'bigLyt');
  bigLyt.Align:=alContents;
  bigLyt.Margins.Left:=20;
  bigLyt.Margins.Right:=20;
  bigLyt.Margins.Top:=30;
  bigLyt.Margins.Bottom:=30;
  smallPanel:=MyForm.AddNewProPanel(bigLyt,'smallPanel');
  clComponent.SetupComponent(smallPanel,'{"Align" : "Top","Width" :300,"Height":50,"RoundHeight":10,
  "MarginBottom":10,"RoundWidth":10,"BorderColor":"#808080","BorderWidth":2,"BackgroundColor":"9b9b9b"}');
  LblDisplay:= MyForm.AddNewLabel(smallPanel,'LblDisplay','CLOMOSY Artificial Intelligence');
  LblDisplay.Align := alcenter;
  LblDisplay.StyledSettings := ssFamily;
  LblDisplay.TextSettings.Font.Size := 18;
  LblDisplay.TextSettings.FontColor := clAlphaColor.clHexToColor('#000000');
  LblDisplay.Margins.Left:=10;
  LblDisplay.Margins.Right:=10;
  LblDisplay.Height:=45;
  LblDisplay.Width := 200;
  MyMQTT := MyForm.AddNewMQTTConnection(MyForm,'MyMQTT');
  MyForm.AddNewEvent(MyMQTT,tbeOnMQTTStatusChanged,'MyMQTTStatusChanged');
  MyForm.AddNewEvent(MyMQTT,tbeOnMQTTPublishReceived,'MyMQTTPublishReceived');
  MyMQTT.Channel := 'chat';//project guid + channel
  MyMQTT.Connect;
  bigPanel:=MyForm.AddNewProPanel(bigLyt,'bigPanel');
  clComponent.SetupComponent(bigPanel,'{"Align" : "Client","MarginRight":10,"MarginLeft":10,
  "RoundHeight":10,"RoundWidth":10,"BorderColor":"#008000","BorderWidth":3}');
  MsgList:= MyForm.AddNewMemo(bigPanel,'MsgList',<nowiki>''</nowiki>);
  MsgList.Align := alClient;
  MsgList.ReadOnly := True;
  MsgList.Margins.Top:= 10;
  MsgList.Margins.Left:= 10;
  MsgList.Margins.Right :=10;
  MsgList.TextSettings.Font.Size:=26;
  MsgList.TextSettings.WordWrap := True;
  MsgList.EnabledScroll := True;
  MsgList.Visible := False;
  if Clomosy.AppUserProfile = 1 then
  begin
    MemMsg:= MyForm.AddNewMemo(bigPanel,'MemMsg',<nowiki>''</nowiki>);
    MemMsg.Align := alBottom;
    MemMsg.Height := MemMsg.Height * 2;
    MemMsg.Margins.Right:=10;
    MemMsg.Margins.Left:=10;
    MemMsg.Margins.Bottom:= 10;
    MemMsg.Enabled := False;
    sendLbl := MyForm.AddNewProLabel(bigPanel,'sendLbl','Write your message');
    clComponent.SetupComponent(sendLbl,'{"Align" : "Bottom","MarginBottom":5,"MarginTop":5,
    "MarginLeft":15,"Width" :150,"Height":15,"TextColor":"#000000","TextSize":10,"TextVerticalAlign":"center",
    "TextHorizontalAlign":"left","TextBold":"yes"}');
    BtnSend := MyForm.AddNewProButton(bigPanel,'BtnSend',<nowiki>''</nowiki>);
    clComponent.SetupComponent(BtnSend,'{"caption":"GÖNDER","Align" : "MostBottom",
    "MarginLeft":100,"MarginRight":100,"RoundHeight":2, "RoundWidth":2,"MarginBottom":8,
    "BorderColor":"#808080","BorderWidth":2,"TextBold":"yes"}');
    BtnSend.Enabled := False;
    MyForm.AddNewEvent(BtnSend,tbeOnClick,'BtnSendClick');
    MyOpenAIEngine:=TclOpenAIEngine.Create(Self);
    MyOpenAIEngine.ParentForm := MyForm;
    MyOpenAIEngine.SetToken('setTokenKey'); //your api key
    MyOpenAIEngine.OnNewMessageEvent := 'OnNewMessageEvent';
    ShowMessage('Hello! Wait for me to get ready. After 20 seconds you can manage me the problem.');
    counter := 20;
    BtnSend.Caption := IntToStr(counter);
    GetTimer:= MyForm.AddNewTimer(MyForm,'GetTimer',1000);
    GetTimer.Enabled := True;
    MyForm.AddNewEvent(GetTimer,tbeOnTimer,'runTimer');
  end;
  MyForm.Run;
'''End;'''


'''Output:'''<br>
<b>Link:</b><br>
[[File:ArtificalIntelligenceExample.png|frameless|350px]]
: [https://github.com/Clomosy/fruit-collect Fruit Collect Game]
{{#seo:|title=Event and Seminar Demos - Clomosy Docs}}
{{#seo:|description=Access hands-on examples and practical applications showcased in our workshops and events.}}

Latest revision as of 07:31, 7 November 2025


Hello World Example

Let the first example you do in the Clomosy development environment be the Hello World example.
That way, you get started with the easy step.
In this application, a form and a button are created. When the button is clicked, it triggers a procedure. In this procedure, a loop iterates 6 times. Within this loop, a conditional statement (case) generates different outcomes for each value.

Code:

var
   MyForm:TclForm;
   I:integer;
   startBtn:TCLButton;

void StartBtnOnClick;
{    
 for (I = 1 to 6)
 {
   case I of
   {
     1:ShowMessage('Hello World');
     2:ShowMessage('Number 2');
     else
     {
       ShowMessage('Others=> counter: '+IntToStr(I));
     }
   }
     
 }
}    

{
 MyForm = TclForm.Create(Self);

 startBtn= MyForm.AddNewButton(MyForm,'startBtn','SHOW');
 startBtn.TextSettings.Font.Size=50;
 startBtn.Align = alCenter;
 startBtn.Height = 50;
 startBtn.Width = 100;
 MyForm.AddNewEvent(startBtn,tbeOnClick,'StartBtnOnClick');

 MyForm.Run;
}

Web Browser App

The programs used to access internet pages are called browser or web browser. Using Clomosy with the TclWebBrowser component, we can access any website we want.

Link:

Web Browser App

Output:
WebBrowserExample.jpg

Clothing Selection App

By using color palettes in the application, you can create a combination by selecting the color of the clothes you wear. You can also choose your gender in the application. As you click on the colors, the colors change. If you want to get the code of a color you like, just click on the area where the color code text is located.

Link:

Clothing Selection App

Output:
OutfitColorSelectionExample.png

Body Mass Index (BMI) Calculator App

In this application, the body mass index is calculated by entering the weight, height and gender of the person and clicking the confirmation button. According to calculations, it gives messages such as weak, normal, overweight and obese. In addition, the picture below changes according to the weight.

Link:

Body Mass Index (BMI) Calculator App

Output:
BodyMassIndexCalculatorExample.png

QR Personnel Attendance Control System Application

The purpose of this example is to keep track of the arrival and departure times of employees in businesses. Special devices and software are required for these operations. We have made all the work possible with a simple processing through clomosy.

  • A tablet produces a changing QR code, preventing any irregularities. We have also solved the problem of reading in different locations by changing the code every 10 seconds. An administrator in the project must be responsible for generating the QR code.
  • The personnel can arrive and scan the QR code with their phones.
  • The registration process and scanned time of the personnel are recorded on the administrator's screen. (The administrator must log in through Windows.)

Link:

QR Personnel Attendance Control System Application


IOT App

What is IOT?

The Internet of Things (IoT) describes the network of physical objects embedded with sensors, software, and other technologies for the purpose of connecting and sharing data with other devices and systems over the Internet. These devices range from ordinary household objects to advanced industrial tools.

We use the MQTT protocol to enable IoT devices to communicate with each other on Clomosy. So what is MQTT, see MQTT page for detailed information.

In this example, we transmit the code embedded in Raspberry Pi technology to the server with the help of MQTT protocol over Clomosy. By providing communication in this way, we can connect to the Raspberry remotely and turn our led on and off.

Information: It is necessary to write the desired codes into the Raspberry Pi system. For this, we coded in Python and integrated the activation code of our Clomosy project. In this way, we established our connection.

Link:

IOT App

Output:
IotMqttExample.png

Messaging App - MQTT

It is an messaging application made for different devices to communicate with each other with MQTT.

Link:

Messaging App

Output:
MessagingExample.jpg

Gyroscope Ufo Game

Before we get into the game, let's understand what a gyroscope is.

What is Gyroscope?

The gyroscope sensor is a system that can detect angular velocity. In other words, the rotation direction and speed of a stationary object are determined by comparing the angular ratios in three vertical axes. It processes the data it detects with the help of the processor and converts it into electrical signals. The gyroscope works on the principle of maintaining angular balance, which is used to measure or adjust direction. The basis of gyroscopic motion is based on the laws of physics and the principle of centrifugation. For these reasons, it allows us to perform instant movements faster.

Cell phone, tablet etc. It is integrated in technological devices and is a system that we use a lot in applications, games and 3D software. It is used in applications such as car races, game consoles, camera sensitivity adjustment in photo shoots and navigation that we steer by turning left and right on mobile phones.

In the game, we reach x, y location information by directing our device with the gyroscope method. Afterwards, when we bring the UFO to the desired area, the game is over. It is used in 2 different features in the game. These; Device vibration and device sound effect.

A simple game has been developed using the gyroscope feature. In this way, you can develop the games you want.

Link:

Gyroscope Ufo Game

Word Game

The game is started by pressing the "START" button. Then, questions with 5-letter answers are drawn from the database. In this way, it is tried to find the desired word in the game. There are 3 rights and 1 hint in a game. When these rights expire, you save and the game is reset.

Link:

Word Game

Output:

WordGameV1.1.png

Hangman Game

The game starts by choosing the word length on the first page. After that, clicking the button at the bottom leads to the game page.

Here, by clicking the "Start Game" button, our question appears on the screen. You have 11 rights in the game. In this way, if you find the word until you are full, you win the game.

Link:

Hangman Game

Output:

Animation and Effects Game

TclGameForm is used as the form structure in this game. Besides, TclTimer component is also used. Features such as adding animation and sound effects are used on TclGameForm. You can develop applications by looking at the definitions here.

Link:

Animation and Effects Game

Artificial Intelligence App

A conversational AI chat engine specialized in dialogue using the OpenAI engine has been developed within the Clomosy infrastructure, and it has been utilized in this example.

Link:

Artificial Intelligence App

Output:
ArtificalIntelligenceExample.png

Raffle Application

This project includes a Raffle Application where users can participate and determine the winners. The application provides real-time communication and the ability to share the results of the draw via MQTT.

Link:

Raffle Application

Clomosy Notification Sender

This project includes the Clomosy Notification Sender application. Users or administrators can send a specific message or announcement to all users as notifications. The application provides customized user interfaces for different user profiles.

Link:

Clomosy Notification Sender

Find the Difference Game

This project includes a find the difference game where users try to identify the differences between two images. The game consists of a total of 4 levels. The goal of the game is to detect the specified differences to advance to the next level.

Link:

Find the Difference Game

Output:
FindTheDifference.png

Drawing Form Application

This project includes a drawing form application where users can create and edit images using various drawing tools. The project provides a first-class drawing experience.

Link:

Drawing Form Application

Output:
DrawForm.png

Online Quiz Application

This project involves an online quiz application where users can answer questions and view results through graphs. The project is a dual-platform application designed for both mobile and desktop use.

Link:

Online Quiz Application

Toothpick Collection Game

This project represents a fun game where you control an object using motion sensors.

Link:

Toothpick Collection Game

"Explain It to Me" Application

This project includes a lottery and word game application. The aim of the project is to enable users to participate in the raffle and other players try to explain the word to the person who won the raffle. The player who wins the draw collects points as he guesses.

Link:

Explain It to Me" Application

Balloon Popping

This project includes a balloon popping game where computers and mobile devices work simultaneously. The draw is held and whoever won the draw tries to know the question without popping the balloon.

Link:

Balloon Popping

Asteroid Game

This project involves an asteroid escape application.

Link:

Asteroid Game

Fruit Collect Game

In this project, we are collecting food falling from the sky. If we collect healthy foods, our score increases, and if we collect unhealthy foods, our score decreases. Players are listed according to their scores.

Link:

Fruit Collect Game