Welcome, Guest
Username: Password: Remember me
CodeTyphon Web Development Pas2JS, WASM, etc, discussions and problems
  • Page:
  • 1

TOPIC:

Canvas Example in JS Web GUI Web Browser Application 1 year 3 months ago #16073

  • Dan Eller
  • Dan Eller's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 1
 
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.

Canvas Example in JS Web GUI Web Browser Application 1 year 3 months ago #16074

  • Sternas Stefanos
  • Sternas Stefanos's Avatar
  • Offline
  • Moderator
  • Moderator
  • Ex Pilot, M.Sc, Ph.D
  • Posts: 4426
  • Thank you received: 1072
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.

Canvas Example in JS Web GUI Web Browser Application 1 year 3 months ago #16075

  • Dan Eller
  • Dan Eller's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 1
 

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.

Canvas Example in JS Web GUI Web Browser Application 1 year 3 months ago #16076

  • Dan Eller
  • Dan Eller's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 1
Screenshot of the example running on Tablet web browser.
 
Attachments:

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

Canvas Example in JS Web GUI Web Browser Application 1 year 3 months ago #16077

  • Sternas Stefanos
  • Sternas Stefanos's Avatar
  • Offline
  • Moderator
  • Moderator
  • Ex Pilot, M.Sc, Ph.D
  • Posts: 4426
  • Thank you received: 1072
Thanks Sir
PilotLogic Architect and Core Programmer

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

Canvas Example in JS Web GUI Web Browser Application 1 year 1 month ago #16235

  • Darth Florus
  • Darth Florus's Avatar
  • Offline
  • New Member
  • New Member
  • Posts: 1
  • Thank you received: 0
Excelent Demo!
Thank You!

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

  • Page:
  • 1