|
|
| (13 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');
| |
| clComponent.SetupComponent(topBar,'{"Align" : "Top","Width" :180, "Height":45,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000",
| |
| "BorderWidth":2}');
| |
| topBar.Text := 'www.Clomosy.com';
| |
| topBar.ReadOnly := True;<br>
| |
| xWeb:= MyForm.AddNewWebBrowser(MyForm,'xWeb');
| |
| xWeb.Align := alClient;
| |
| xWeb.Navigate('www.Clomosy.com');
| |
| MyForm.Run;<br>
| |
| '''End;'''
| |
|
| |
|
| '''Output:'''<br> | | 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; |
| | } |
| | </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>
| | <b>Link:</b><br> |
| '''var'''
| | : [https://github.com/Clomosy/QR QR Personnel Attendance Control System Application] |
| 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>
| | <h2> IOT App </h2> |
| | |
| <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>
| |
| '''var'''
| |
| 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>
| |
| [[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> | | It is an messaging application made for different devices to communicate with each other with MQTT.<br> |
|
| |
|
| '''Code:'''<br>
| | <b>Link:</b><br> |
| '''var'''
| | : [https://github.com/Clomosy/Mqtt Messaging App] |
| MyForm : TCLForm;
| |
| MyMQTT : TclMQTT;
| |
| BtnSend: TclProButton;
| |
| LblDisplay: TclLabel;
| |
| MemMsg: TclMemo;
| |
| MsgList: TclMemo;
| |
| msjBoxPanel, bigPanel : TclProPanel;
| |
| clomosyImg : TclProImg;
| |
| getMsjLayout : TclLayout;
| |
| msj : String;
| |
|
| |
| '''procedure MemMsgEnter;'''
| |
| '''begin'''
| |
| getMsjLayout.Align:=alMostTop;
| |
| '''end;'''
| |
|
| |
| '''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;
| |
| //ShowMessage('MyMQTTStatusChanged');
| |
| '''End;'''
| |
|
| |
| '''Procedure MyMQTTPublishReceived;'''
| |
| '''begin'''
| |
| msj := Clomosy.AppUserDisplayName;
| |
| If MyMQTT.ReceivedAlright Then Begin
| |
|
| |
| MsgList.Lines.Add(' ' + MyMQTT.ReceivedMessage);
| |
| End;
| |
| '''End;'''
| |
|
| |
| '''Procedure BtnSendClick;'''
| |
| '''begin'''
| |
| MyMQTT.Send(Clomosy.AppUserDisplayName+' : '+MemMsg.Text);
| |
| MsgList.Lines.Add('You: '+MemMsg.Text);
| |
| MemMsg.Text := ' ';
| |
| getMsjLayout.Align:=alBottom;
| |
| MsgList.setFocus;
| |
| '''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;
| |
|
| |
| 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,'{"Align" : "Right" ,"MarginBottom":15,"Width" :80, "MarginTop" : 15,"MarginLeft" : 5,"Height":60,"BorderColor":"#ffffff"}');
| |
| MyForm.SetImage(BtnSend,'https://clomosy.com/educa/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.AddNewEvent(MemMsg,tbeOnEnter,'MemMsgEnter');
| |
|
| |
| MyForm.SetFormBGImage('https://clomosy.com/educa/bg2.png');
| |
| MyForm.Run;
| |
| '''End;'''
| |
|
| |
|
| '''Output:'''<br>
| | <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,462: |
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;
| |
| 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);
| |
| myDeviceManager.Vibrate(1000);
| |
| 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://clomosy.com/educa/bg3.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');
| |
| BtnStartGame.Margins.Bottom := 50;
| |
| MyForm.AddNewEvent(BtnStartGame,tbeOnClick,'BtnStartGameClick');
| |
|
| |
| ImgHole := MyForm.AddNewProImage(MyForm,'ImgHole');
| |
| ImgHole.clSetImage('https://clomosy.com/educa/station.png');
| |
| ImgHole.Margins.Top:=120;
| |
| ImgHole.Properties.AutoSize := True;
| |
| ImgHole.Align := alCenter;
| |
|
| |
| ImgBall := MyForm.AddNewProImage(MyForm,'ImgBall');
| |
| ImgBall.clSetImage('https://clomosy.com/educa/ufo.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');
| |
|
| |
| 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] |
| | |
| | <b>Output:</b><br> |
|
| |
|
| '''var'''
| | [[File:WordGameV1.1.png|frameless|350px]] |
| MyForm:TCLForm;
| |
| LblDisplay,ztStartLbl:TclLabel;
| |
| myGameEngine:TclGameEngine;
| |
| MyWord, WordMean:String;
| |
| WordEdtPanel:TclPanel;
| |
| WordMemo:TclMemo;
| |
| wordEdt :TclEdit;
| |
| wordEdtBtnLyt :TclProPanel;
| |
| ztHintBtn :TclImage;
| |
| ztLayout,ztStartBtnLayout,gameContentLyt,EdtBtnLyt: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');
| |
| wordEdt.Text :=<nowiki>''</nowiki>;
| |
| LblDisplay.Visible := False;
| |
| WordMemo.Text := <nowiki>''</nowiki>;
| |
| end;
| |
| else
| |
| begin
| |
| if wrongCount = 3 then
| |
| begin
| |
| ShowMessage('Word: '+MyWord+' You failed restarted.🙁');
| |
| chance := 0;
| |
| control := false;
| |
| MyForm.setImage(ztStartBtn,'https://clomosy.com/educa/start.png');
| |
| ztStartBtn.Tag := 0;
| |
| wrongCount := 1;
| |
| GetNewWord;
| |
|
| |
| wordEdt.Text := <nowiki>''</nowiki>;
| |
| WordMemo.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');
| |
| ztStartBtn.Tag := 1;
| |
| wrongCount := 1;
| |
| GetNewWord;
| |
| WordMemo.Text := WordMean;
| |
| wordEdt.Text :=<nowiki>''</nowiki>;
| |
| LblDisplay.Visible := False;
| |
| end;
| |
| 1:
| |
| begin
| |
| CheckGameOnClick;
| |
| end;
| |
| end;
| |
| '''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');
| |
|
| |
| '''end;'''
| |
|
| |
| '''Procedure ztHintBtnOnClick;'''
| |
| '''var'''
| |
| hintValue : String;
| |
| firstLetter,secondLetter : String;
| |
| firstIndex,secondIndex : Integer;
| |
| i : Integer;
| |
| rasgeleSayi : Integer;
| |
|
| |
| '''begin'''
| |
| if WordMemo.Text <> <nowiki>''</nowiki> then
| |
| begin
| |
| if control = false then
| |
| begin
| |
| control := true;
| |
|
| |
| if chance < 2 then
| |
| begin
| |
| chance := chance +1;
| |
|
| |
| 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 Other Rights 😞');
| |
|
| |
| end
| |
| else
| |
| ShowMessage('Start Game! 😎');
| |
|
| |
| '''end;'''
| |
|
| |
| '''Procedure GetWordMemo;'''
| |
| '''var'''
| |
| ztProPanel : TclProPanel;
| |
| '''begin'''
| |
|
| |
| ztProPanel:=MyForm.AddNewProPanel(gameContentLyt,'ztProPanel');
| |
| clComponent.SetupComponent(ztProPanel,'{"Align" : "MostTop",
| |
| "MarginLeft" : 10,"MarginRight" : 10, "Height":100,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#9400D3","BorderWidth":3}');
| |
|
| |
| WordMemo:= MyForm.AddNewMemo(ztProPanel,'WordMemo',<nowiki>''</nowiki>);
| |
| WordMemo.Align := alClient;
| |
| WordMemo.Margins.Left:=10;
| |
| WordMemo.Margins.Right:=10;
| |
| WordMemo.Margins.Bottom:=10;
| |
| WordMemo.Margins.Top:=10;
| |
| WordMemo.ReadOnly := True;
| |
| WordMemo.TextSettings.WordWrap := True;
| |
| '''end;'''
| |
|
| |
| '''procedure getTitle;'''
| |
| '''begin'''
| |
| Lblword := MyForm.AddNewProLabel(MyForm,'Lblword','WORD GAME');
| |
| clComponent.SetupComponent(Lblword,'{"Align" : "MostTop","MarginBottom":35,"Width" :210, "Height":26,"TextColor":"#F2F0F0","TextSize":20,"TextVerticalAlign":"top", "TextHorizontalAlign":"center","TextBold":"yes"}');
| |
|
| |
| '''end;'''
| |
|
| |
| '''procedure editBtnHintContent;'''
| |
| '''begin'''
| |
| wordEdtBtnLyt:=MyForm.AddNewProPanel(gameContentLyt,'wordEdtBtnLyt');
| |
| clComponent.SetupComponent(wordEdtBtnLyt,'{"Align" : "Top","Height":130,"MarginTop" : 10,"MarginRight" : 10,"MarginLeft" : 10, "RoundHeight":10,"RoundWidth":10,"BorderColor":"#9400D3","BorderWidth":3,"BackgroundColor":"#ffffff"}');
| |
|
| |
| EdtBtnLyt := MyForm.AddNewLayout(wordEdtBtnLyt,'EdtBtnLyt');
| |
| EdtBtnLyt.Align := alTop;
| |
| EdtBtnLyt.Margins.Top:= 10;
| |
| EdtBtnLyt.Height := 100;
| |
|
| |
| WordEdtPanel:= MyForm.AddNewPanel(EdtBtnLyt,'WordEdtPanel',<nowiki>''</nowiki>);
| |
| WordEdtPanel.Align := alLeft;
| |
| WordEdtPanel.Height := 10;
| |
| WordEdtPanel.Width := 100;
| |
| WordEdtPanel.Margins.Top:= 30;
| |
| WordEdtPanel.Margins.Bottom:= 30;
| |
| WordEdtPanel.Margins.Left:= 20;
| |
|
| |
| wordEdt := MyForm.AddNewEdit(WordEdtPanel,'wordEdt','_____________');
| |
| wordEdt.Align := alClient;
| |
| wordEdt.MaxLength := 5;
| |
|
| |
| ztHintBtn:= MyForm.AddNewImage(EdtBtnLyt,'ztHintBtn');
| |
| ztHintBtn.Align := alRight;
| |
| ztHintBtn.Height := 55;
| |
| ztHintBtn.Width := 55;
| |
| ztHintBtn.Margins.Right:=20;
| |
| MyForm.setImage(ztHintBtn,'https://clomosy.com/educa/hint.png');
| |
| MyForm.AddNewEvent(ztHintBtn,tbeOnClick,'ztHintBtnOnClick');
| |
|
| |
| LblDisplay:= MyForm.AddNewLabel(wordEdtBtnLyt,'LblDisplay',<nowiki>''</nowiki>);
| |
| LblDisplay.Align := alRight;
| |
| LblDisplay.Visible := True;
| |
| EdtBtnLyt.Height := 80;
| |
| LblDisplay.Margins.Right:= 20;
| |
| LblDisplay.Margins.Bottom:= 10;
| |
|
| |
| '''end;'''
| |
|
| |
| '''procedure getGameContent;'''
| |
| '''begin'''
| |
| gameContentLyt := MyForm.AddNewLayout(MyForm,'gameContentLyt');
| |
| gameContentLyt.Align := alTop;
| |
| gameContentLyt.Margins.Left:= 10;
| |
| gameContentLyt.Margins.Right:= 10;
| |
| gameContentLyt.Height := 300;
| |
|
| |
| GetWordMemo;
| |
|
| |
| editBtnHintContent;
| |
| '''end;'''
| |
|
| |
| '''begin'''
| |
| ShowMessage('Welcome to the Word Game. You should start the game by pressing the "START" button. The word you will find in the game is 5 letters long. You have 3 chances. Alright, you are ready to start the game.');
| |
| MyForm := TCLForm.Create(Self);
| |
| chance := 0;
| |
| getTitle;
| |
| getGameContent;
| |
| MyForm.SetFormBGImage('https://clomosy.com/educa/bg4.png');
| |
| control := false;
| |
|
| |
| SetupStartBtn;
| |
|
| |
| MyForm.Run;
| |
| '''End;'''
| |
|
| |
|
| '''Output:'''<br>
| | <h2> Hangman Game</h2> |
|
| |
|
| [[File:WordGameV1.1.png|frameless|350px]]
| | 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> |
|
| |
|
| == 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,hangManImg: TClProImage;
| |
| choiseLbl,nonLettersNonLbl : TClProLabel;
| |
| choiceCombo : TClComboBox;
| |
| forCombo ,numberOfCycles, source,counter : Integer;
| |
| gamePnl,letterPnl,nonLettersNonPnl,screenPnl,gameContentPnl,imageHintContentPnl,hintContentPnl : TclProPanel;
| |
| strdeger, MyWord, WordMean,characterValue:String;
| |
| MyWordMean:TclMemo;
| |
| LblDisplay,ztStartLbl:TclLabel;
| |
| myGameEngine:TclGameEngine;
| |
| MyPanel:TclPanel;
| |
| lettersEdt,MyEdit:TclEdit;
| |
| EditFixWidth:Single;
| |
| ztHintBtn,ztStartBtn:TclImage;
| |
| ztLayout,ztHintBtnLayout: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 wordControl;
| |
| var
| |
| j:integer;
| |
| begin
| |
| for j := 1 to StrToInt(choiceCombo.ItemIndex)+1 do
| |
| begin
| |
| if lettersEdt.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>;
| |
| wordControl;
| |
| 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;
| |
| '''end;'''
| |
|
| |
| '''Procedure BtnStartGameClick;'''
| |
| '''begin'''
| |
| case ztStartBtn.Tag of
| |
| 0:
| |
| begin
| |
| ztStartBtn.Tag := 1;
| |
| wrongCount := 0;
| |
| GetNewWord(StrToInt(choiceCombo.ItemIndex)+1);
| |
| MyWordMean.Text := WordMean;
| |
| lettersEdt.Text:=<nowiki>''</nowiki>;
| |
| lettersEdt.SetFocus;
| |
| LblDisplay.Visible := False;
| |
| ztStartBtn.Visible := False;
| |
| ztStartLbl.Visible := False;
| |
| end;
| |
| 1:
| |
| begin
| |
| CheckGameOnClick;
| |
| end;
| |
| end;
| |
| '''End;'''
| |
|
| |
| '''Procedure MyEditOnChange;'''
| |
| '''var'''
| |
| harfState:Boolean;
| |
| begin
| |
| harfState:=False;
| |
| source := MyWord;
| |
|
| |
| for numberOfCycles := 1 to choiceCombo.ItemIndex+1 do
| |
| begin
| |
| characterValue := Copy(source, numberOfCycles, 1);
| |
| if lettersEdt.Text = characterValue then
| |
| begin
| |
| harfState:=True;
| |
| TClEdit(MYSecondForm.clFindComponent('MyEdit'+IntToStr(numberOfCycles))).Text := lettersEdt.Text;
| |
| CheckGameOnClick;
| |
| end;
| |
| end;
| |
|
| |
| if not harfState then
| |
| begin
| |
| wrongCount := wrongCount +1;
| |
| nonLettersNonLbl.Text:=nonLettersNonLbl.Text+ lettersEdt.Text + ' , ';
| |
| if wrongCount = 11 then
| |
| begin
| |
| ShowMessage('word: '+'"'+ MyWord+'"' +'you failed.');
| |
| 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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(hangManImg,'{"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(gameContentPnl,'MyPanel',<nowiki>''</nowiki>);
| |
| MyPanel.Align := alCenter;
| |
| MyPanel.Height := 25;
| |
| MyPanel.Margins.Top:=5;
| |
| 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 nonLetter;'''
| |
| '''begin'''
| |
| nonLettersNonPnl:=MYSecondForm.AddNewProPanel(gameContentPnl,'nonLettersNonPnl');
| |
| clComponent.SetupComponent(nonLettersNonPnl,'{"Align" : "MostTop","Width" :100, "MarginTop":5,
| |
| "Height":50,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":2}');
| |
|
| |
| nonLettersNonLbl := MYSecondForm.AddNewProLabel(nonLettersNonPnl,'nonLettersNonLbl','Harfler : ');
| |
| 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 getLetter;'''
| |
| '''begin'''
| |
| letterPnl:=MYSecondForm.AddNewProPanel(gameContentPnl,'letterPnl');
| |
| clComponent.SetupComponent(letterPnl,'{"Align" : "Top","Width" :100, "MarginLeft":140,"MarginRight":140,"MarginTop":10,
| |
| "Height":50,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#000000","BorderWidth":2}');
| |
|
| |
| EditFixWidth := 25;
| |
| lettersEdt:= MYSecondForm.AddNewEdit(letterPnl,'lettersEdt','____');
| |
| MYSecondForm.AddNewEvent(lettersEdt,tbeOnChange,'MyEditOnChange');
| |
| lettersEdt.Width := EditFixWidth;
| |
| lettersEdt.Align := alCenter;
| |
| lettersEdt.MaxLength := 1;
| |
|
| |
| '''end;'''
| |
|
| |
| '''Procedure SetupStartBtn;'''
| |
| '''begin'''
| |
| ztLayout := MYSecondForm.AddNewLayout(gamePnl,'ztLayout');
| |
| ztLayout.Align:=alBottom;
| |
| ztLayout.Height := 130;
| |
| ztLayout.Margins.Top := 5;
| |
|
| |
| ztStartBtn:= MYSecondForm.AddNewImage(ztLayout,'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');
| |
|
| |
| ztStartLbl:= MYSecondForm.AddNewLabel(ztLayout,'ztStartLbl','Start Game');
| |
| ztStartLbl.StyledSettings := ssFamily;
| |
| ztStartLbl.TextSettings.Font.Size:=20;
| |
| ztStartLbl.Align := alCenter;
| |
| ztStartLbl.Margins.Top := 5;
| |
| ztStartLbl.Margins.Bottom := 5;
| |
| ztStartLbl.Width := 150;
| |
|
| |
| '''end;'''
| |
|
| |
| '''Procedure ztHintBtnOnClick;'''
| |
| '''begin'''
| |
| LblDisplay.Visible := True;
| |
| '''end;'''
| |
|
| |
| '''procedure SetupHintBtn;'''
| |
| '''begin'''
| |
| ztHintBtnLayout := MYSecondForm.AddNewLayout(hintContentPnl,'ztHintBtnLayout');
| |
| ztHintBtnLayout.Align:=alClient;
| |
| ztHintBtnLayout.Height := 100;
| |
| ztHintBtnLayout.Width := 130;
| |
|
| |
| ztHintBtn:= MYSecondForm.AddNewImage(ztHintBtnLayout,'ztHintBtn');
| |
| ztHintBtn.Align := alMostTop;
| |
| ztHintBtn.Margins.Left:=30;
| |
| ztHintBtn.Margins.Right:=30;
| |
| ztHintBtn.Height:= 80;
| |
| MYSecondForm.setImage(ztHintBtn,'https://clomosy.com/educa/hint1.png');
| |
| MYSecondForm.AddNewEvent(ztHintBtn,tbeOnClick,'ztHintBtnOnClick');
| |
|
| |
| LblDisplay:= MYSecondForm.AddNewLabel(ztHintBtnLayout,'LblDisplay',<nowiki>''</nowiki>);
| |
| LblDisplay.Align := alTop;
| |
| LblDisplay.Margins.Left :=5;
| |
| LblDisplay.Margins.Right:= 5;
| |
| LblDisplay.Margins.Top:=5;
| |
| LblDisplay.Height := 30;
| |
| LblDisplay.TextSettings.Font.Size:=3;
| |
| LblDisplay.Visible := True;
| |
|
| |
| '''end;'''
| |
|
| |
| '''Procedure SetupWordMean;'''
| |
| '''var'''
| |
| ztProPanel : TclProPanel;
| |
| begin
| |
| ztProPanel:=MYSecondForm.AddNewProPanel(gamePnl,'ztProPanel');
| |
| clComponent.SetupComponent(ztProPanel,'{"Align" : "MostTop","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 gameContent;'''
| |
| '''begin'''
| |
| gameContentPnl:=MyForm.AddNewProPanel(gamePnl,'gameContentPnl');
| |
| clComponent.SetupComponent(gameContentPnl,'{"Align" : "Top","MarginTop":10, "MarginLeft":5,"MarginRight":5,
| |
| "Height":400}');
| |
|
| |
| imageHintContentPnl:=MyForm.AddNewProPanel(gameContentPnl,'imageHintContentPnl');
| |
| clComponent.SetupComponent(imageHintContentPnl,'{"Align" : "Bottom","MarginTop":10,"MarginLeft":5,"MarginRight":5,
| |
| "Height":250}');
| |
|
| |
| hangManImg := MYSecondForm.AddNewProImage(imageHintContentPnl,'hangManImg');
| |
| clComponent.SetupComponent(hangManImg,'{"Align" : "Right","RoundHeight":10,"RoundWidth":10,"MarginTop":5,"MarginBottom":5,
| |
| "BorderColor":"#000000","BorderWidth":0,"ImgUrl":"https://clomosy.com/educa/hangerTitle2.png","ImgFit":"yes"}');
| |
| hintContentPnl:=MyForm.AddNewProPanel(imageHintContentPnl,'hintContentPnl');
| |
| clComponent.SetupComponent(hintContentPnl,'{"Align" : "Left","MarginTop":10,"MarginLeft":5,"Width":130}');
| |
|
| |
| SetupHintBtn;
| |
| '''end;'''
| |
|
| |
| '''Procedure secondScreen;'''
| |
| '''begin'''
| |
| MYSecondForm := TCLForm.Create(Self);
| |
| MYSecondForm.SetFormColor('#6af2e4','#CBEDD5',clGVertical);
| |
|
| |
| strdeger:=5;
| |
| gamePnl:=MYSecondForm.AddNewProPanel(MYSecondForm,'gamePnl');
| |
| clComponent.SetupComponent(gamePnl,'{"Align" : "Client","MarginRight":10,"MarginLeft":10,
| |
| "MarginBottom":10,"MarginTop":10,"RoundHeight":10,"RoundWidth":10,
| |
| "BorderColor":"#000000","BorderWidth":2}');
| |
|
| |
| SetupWordMean;
| |
| gameContent;
| |
| SetupLayout;
| |
| SetupStartBtn;
| |
| 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"}');
| |
|
| |
| choiseLbl := MyForm.AddNewProLabel(screenPnl,'choiseLbl','Select word length');
| |
| clComponent.SetupComponent(choiseLbl,'{"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 := 150;
| |
| choiceCombo.Margins.Bottom:=20;
| |
|
| |
| choiceCombo.AddItem('Make Your Choice','0')
| |
|
| |
| for forCombo := 2 to 10 do
| |
| begin
| |
| choiceCombo.AddItem(IntToStr(forCombo),IntToStr(forCombo));
| |
| 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;'''
| |
|
| |
|
| | | <b>Output:</b><br> |
| '''Output:'''<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,241: |
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] |
|
| |
|
| '''var'''
| | <h2> Artificial Intelligence App </h2> |
| MyForm:TclGameForm;
| | 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> |
| GameTimer:TClTimer;
| | |
| BtnRandomFire:TclButton;
| | <b>Link:</b><br> |
| ImgBack:TclProImage;
| | : [https://github.com/Clomosy/AI Artificial Intelligence App] |
| ImgTank:TclProImage;
| | |
| SndFire:Integer;
| | <b>Output:</b><br> |
| tPosX,tPosY:Single;
| | [[File:ArtificalIntelligenceExample.png|frameless|350px]] |
|
| | |
| '''Procedure''' BtnRandomFireClick;
| | <h2> Raffle Application </h2> |
| '''var'''
| | 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. |
| i:Integer;
| | |
| '''begin'''
| | <b>Link:</b><br> |
| MyForm.AnimationWidth := 75;
| | : [https://github.com/Clomosy/raffle-game Raffle Application] |
| MyForm.AnimationHeight := 75;
| | |
| MyForm.clAnimateBitmap.AnimationCount :=9;
| | <h2> Clomosy Notification Sender </h2> |
| MyForm.clAnimateBitmap.AnimationRowCount:=3;
| | 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. |
| MyForm.clAnimateBitmap.Delay := 10;
| | |
| MyForm.clAnimateBitmap.Duration := 2;
| | <b>Link:</b><br> |
| For i:=0 to 5 do
| | : [https://github.com/Clomosy/Notif-Sender Clomosy Notification Sender] |
| Begin
| | |
| MyForm.clAnimateBitmap.Delay := Random()*10;
| | <h2> Find the Difference Game </h2> |
| MyForm.clAnimation(Random() * TForm(MyForm).ClientWidth, Random() * TForm(MyForm).ClientHeight, 0, 'Explosion.png');
| | 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. |
| End;
| | |
| MyForm.PlayGameSound(SndFire);
| | <b>Link:</b><br> |
| '''End;'''
| | : [https://github.com/Clomosy/spot-difference-game Find the Difference Game] |
|
| | <b>Output:</b><br> |
| '''Procedure''' ProcOnGameTimer;
| | [[File:FindTheDifference.png|frameless|350px]] |
| '''begin'''
| | <h2> Drawing Form Application </h2> |
| ImgTank.Visible := True;
| | 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. |
| tPosY := tPosY - 10;
| | |
| ImgTank.Position.X := tPosX;
| | <b>Link:</b><br> |
| ImgTank.Position.Y := tPosY;
| | : [https://github.com/Clomosy/draw-form Drawing Form Application] |
| '''End;'''
| | <b>Output:</b><br> |
|
| | [[File:DrawForm.png|frameless|350px]] |
| '''begin
| | <h2> Online Quiz Application </h2> |
| MyForm := TclGameForm.Create(Self);
| | |
| MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/BackImage.jpg');
| | 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. |
| MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/Fire.wav');
| | |
| MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/Explosion.png');
| | <b>Link:</b><br> |
| MyForm.AddGameAssetFromUrl('https://www.clomosy.com/game/assets/Tank.png');
| | : [https://github.com/Clomosy/question-sender Online Quiz Application] |
|
| | |
|
| | <h2> Toothpick Collection Game </h2> |
|
| | This project represents a fun game where you control an object using motion sensors. |
| tPosX := Random()* TForm(MyForm).ClientWidth;
| | |
| tPosY := TForm(MyForm).ClientHeight;
| | <b>Link:</b><br> |
| SndFire := MyForm.RegisterSound('Fire.wav');
| | : [https://github.com/Clomosy/stick-collector-game Toothpick Collection Game] |
| MyForm.SoundIsActive:=True;
| | |
|
| | <h2> "Explain It to Me" Application </h2> |
| ImgBack := MyForm.AddNewProImage(MyForm,'ImgBack');
| | 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. |
| 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;'''
| |
|
| |
|
| | <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. |
|
| |
|
| == Artificial Intelligence Example ==
| | <b>Link:</b><br> |
| 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>
| | : [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.}} |