× CodeTyphon Pascal to JavaScript Development, discussions and problems

Question Canvas Example in JS Web GUI Web Browser Application

  • Dan Eller
  • Topic Author
  • Offline
  • New Member
  • New Member
More
2 months 1 week ago #16073 by Dan Eller
 
Hi,
Not sure if anybody would want this, but I converted the classic Canvas drawing example to run as a JS GUI Web Brower Application in CT 7.5 . Enjoy!
-Dan Eller







unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  JS, Classes, SysUtils, Graphics, Controls, Forms, Dialogs, WebCtrls,math;

type

  { TWForm1 }

  TWForm1 = class(TWForm)
    WTimer1: TWTimer;
    procedure FormCreate(Sender: TObject);
    procedure FormResize(Sender: TObject);
    procedure WTimer1Timer(Sender: TObject);
     procedure FormPaint();
    procedure RotatePoints();

  private

  public

  end;


    type
    TRPoint = record

          X,Y:Real;

    end;

var
  WForm1: TWForm1;


   PointCount, MaxPoints:integer;
   Rotation:Real;


   Points: array [0..15] of TRPoint;

implementation

{$R *.frm}

{ TWForm1 }

procedure TWForm1.FormCreate(Sender: TObject);
begin
  Canvas.Pen.Color := clGreen;
    Rotation := 0;
        MaxPoints:=15;
    PointCount := MaxPoints;
         RotatePoints();
end;

procedure TWForm1.FormResize(Sender: TObject);
begin
  Invalidate();
  FormPaint();

end;

procedure TWForm1.WTimer1Timer(Sender: TObject);
begin
  RotatePoints();
  Invalidate();
  FormPaint();
end;



procedure TWForm1.RotatePoints();
var
   M_2PI,StepAngle,j:Real;
   i:integer;

begin
        M_2PI:=2 * PI;
        StepAngle:=M_2PI / PointCount;
        Rotation :=Rotation+ PI / 1024;
        if Rotation > StepAngle then
           begin
             Rotation  :=-StepAngle;
           end;
      i:=0;
      j:=Rotation;
       while i<PointCount do



              begin
                 j:=j+StepAngle;
                 i:=i+1;
                   Points.X :=cos(j);
                   Points.Y :=sin(j);
              end;




end;




procedure TWForm1.FormPaint();
var
   centerX,centerY,radius,i,j:integer;
begin

      Canvas.Clear;
       centerX := Width div 2;
     centerY := Height div 2;
          radius := min(centerY, centerX);
   //       Canvas.Ellipse(0, 0, radius*2, radius*2);



          for i := 0 to PointCount do
              begin
                     for j:=i+1 to PointCount do
                           begin
                                Canvas.MoveTo(radius+floor(Points.X*radius),radius+floor(Points.Y*radius));
                                Canvas.LineTo(radius+floor(Points[j].X*radius),radius+floor(Points[j].Y*radius));





                           end;
                end;

end;



end.
                               
The following user(s) said Thank You: Darth Florus

Please Log in or Create an account to join the conversation.

  • Sternas Stefanos
  • Sternas Stefanos's Avatar
  • Away
  • Moderator
  • Moderator
  • Ex Pilot, M.Sc, Ph.D
More
2 months 1 week ago #16074 by Sternas Stefanos
Replied by Sternas Stefanos on topic Canvas Example in JS Web GUI Web Browser Application
Thanks Sir
if you want to put your code to CodeOcean,
please attach the full project here

PilotLogic Architect and Core Programmer

Please Log in or Create an account to join the conversation.

  • Dan Eller
  • Topic Author
  • Offline
  • New Member
  • New Member
More
2 months 1 week ago #16075 by Dan Eller
 

File Attachment:

File Name: ct_jsgui_canvas.7z
File Size:451 KB



Okay, here are the project files. Hope they can help someone in CodeOcean.
-Dan Eller
Attachments:

Please Log in or Create an account to join the conversation.

  • Dan Eller
  • Topic Author
  • Offline
  • New Member
  • New Member
More
2 months 1 week ago #16076 by Dan Eller
Screenshot of the example running on Tablet web browser.
 
Attachments:

Please Log in or Create an account to join the conversation.

  • Sternas Stefanos
  • Sternas Stefanos's Avatar
  • Away
  • Moderator
  • Moderator
  • Ex Pilot, M.Sc, Ph.D
More
2 months 1 week ago #16077 by Sternas Stefanos
Replied by Sternas Stefanos on topic Canvas Example in JS Web GUI Web Browser Application
Thanks Sir

PilotLogic Architect and Core Programmer

Please Log in or Create an account to join the conversation.

More
1 day 16 hours ago #16235 by Darth Florus
Replied by Darth Florus on topic Canvas Example in JS Web GUI Web Browser Application
Excelent Demo!
Thank You!

Please Log in or Create an account to join the conversation.