Lazarus

Programming => Networking and Web Programming => Pas2JS => Topic started by: krolikbest on April 13, 2021, 08:32:26 pm

Title: [SOLVED] canvas
Post by: krolikbest on April 13, 2021, 08:32:26 pm
Hi,

 i try to build web app using WCL as well as a pure pas2js (if i can call it that). Basically the second way (without using WCL) gives me more flexibility in using graphic objects like rectangles, arc, circle and so on. But to build some usable gui for my users it takes more effort in comparision to WCL. So my question - how to paint some graphic on canvas of TWform? Lets say: an arc, in pas2js i paint it on canvas in that way:
Code: Pascal  [Select][+][-]
  1.   c:=TJSHTMLCanvasElement(document.createElement('canvas'));
  2.   ctx:=c.getContextAs2DContext('2d');
  3.   with ctx do
  4.   begin
  5.    beginPath;
  6.    linewidth:=7;
  7.    arc(50,90,40,pi,1.5*pi,false);
  8.    strokeStyle:='#FF0000';
  9.    stroke;
  10.   end;
  11.   with document.body do
  12.    appendChild(c);
  13.  

but have no idea how to do it using WCL. Even if I add this code snippet in WButton OnClick procedure this won't show me graphic. I see created canvas in Chrome's console , but probably using
Code: Pascal  [Select][+][-]
  1. with document.body do
  2.    appendChild(c);
  3.  
makes it in wrong place or is so anyway bad idea..
So hmm.. :-[

Regards,
Title: Re: canvas
Post by: krolikbest on April 14, 2021, 07:03:13 pm
So far I do
Code: Pascal  [Select][+][-]
  1.     c1:=TJSHTMLCanvasElement(document.createElement('canvas'));
  2.     c1.width:=WPanel1.Width;
  3.     c1.height:=WPanel1.Height;
  4.     ctx:=TJSHTMLCanvasElement(c1).getContextAs2DContext('2d');
  5.     with ctx do
  6.     begin
  7.       beginPath;
  8.       linewidth:=7;
  9.       arc(50,90,40,pi,1.5*pi,false);
  10.       strokeStyle:='#FF0000';
  11.       stroke;
  12.     end;
  13.     TJSHTMLElement(document.getElementById('WPanel1')).appendChild(c1);      
and that works, but this code above creates a tag <canvas> in e.g. WPanel1 (a tag <div id="WPanel1">), so in fact I paint on new tag called <canvas> instead of WPanel's canvas.
But if I run (under button.click) this code:
Code: Pascal  [Select][+][-]
  1.   wpanel1.Canvas.MoveTo(10,10);
  2.   wpanel1.Canvas.LineTo(20,20);
then I see next new tag <canvas> within the tag <div id="WPanel1">. It would be good to know how set ID for this tag since then I could do something like
Code: Pascal  [Select][+][-]
  1.     c1:=TJSHTMLCanvasElement(document.getElementById("id of WPanel1.Canvas"));
instead of
Code: Pascal  [Select][+][-]
  1.     c1:=TJSHTMLCanvasElement(document.createElement('canvas'));


Regards,
Title: Re: canvas
Post by: krolikbest on April 14, 2021, 08:09:53 pm
Ok, that was simply:
Code: Pascal  [Select][+][-]
  1.     c1:=TJSHTMLCanvasElement(document.getElementsByTagName('canvas')[x]);
  2.  

where x is just number of (in my example) wpanel. Solved. Tea time...
Title: Re: [SOLVED] canvas
Post by: PascalDragon on April 15, 2021, 09:58:01 pm
I've now added CanvasElement and ContextElement to TCanvas (the fields did already exist, but you couldn't trivially access them). Thus you can now simply do WPanel1.Canvas.ContextElement to access the HTML canvas.
Title: Re: [SOLVED] canvas
Post by: krolikbest on April 16, 2021, 10:26:06 am
Nice. Actually I'm more and more convinced that user interface will be based on web browsers in near future and internet technology in general.
Title: Re: [SOLVED] canvas
Post by: krolikbest on April 16, 2021, 04:32:13 pm
Hi
 @pascaldragon : I've downloaded and installed latest pas2js_widget. After loaded my project I got
Code: Pascal  [Select][+][-]
  1. Compile Project, OS: browser, CPU: ecmascript5, Target: project1.js: Exit code 6, Errors: 1
  2. webctrls.pas(856,42) Error: Incompatible type arg no. 3: Got "TFormatSettings", expected "Char"
  3.  
and there it is:
Code: Pascal  [Select][+][-]
  1. function TWTimeEditBox.GetValue: TTime;
  2. begin
  3.   Result := StrToTimeDef(RealGetText, 0, FormatSettings);
  4. end;  
Supposedly it's related to my Lazarus ver. 20.10 (Win64). Should I do/change something in the code?

Regards,
Title: Re: [SOLVED] canvas
Post by: krolikbest on April 16, 2021, 06:25:39 pm
Never mind. changed to
Code: Pascal  [Select][+][-]
  1. function TWTimeEditBox.GetValue: TTime;
  2. begin
  3.   Result := StrToTimeDef(RealGetText, 0, FormatSettings.DateSeparator);
  4. end;
  5.  
Is OK now.
Title: Re: [SOLVED] canvas
Post by: PascalDragon on April 17, 2021, 10:42:43 am
Never mind. changed to
Code: Pascal  [Select][+][-]
  1. function TWTimeEditBox.GetValue: TTime;
  2. begin
  3.   Result := StrToTimeDef(RealGetText, 0, FormatSettings.DateSeparator);
  4. end;
  5.  
Is OK now.

Seems like the overload of StrToTimeDef with TFormatSettings is only available in the development version of pas2js. I've now applied your change so that it compiles with 2.0.0 again as well.
Title: Re: [SOLVED] canvas
Post by: yus on April 18, 2021, 01:41:39 pm
Never mind. changed to
Code: Pascal  [Select][+][-]
  1. function TWTimeEditBox.GetValue: TTime;
  2. begin
  3.   Result := StrToTimeDef(RealGetText, 0, FormatSettings.DateSeparator);
  4. end;
  5.  
Is OK now.

Sorry, but for TWTimeEditBox you need change FormatSettings.DateSeparator -> FormatSettings.TimeSeparator

https://github.com/pascaldragon/Pas2JS_Widget/pull/5#issue-617449926
TinyPortal © 2005-2018