Recent

Author Topic: [SOLVED] canvas  (Read 4418 times)

krolikbest

  • Full Member
  • ***
  • Posts: 246
[SOLVED] canvas
« 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,
« Last Edit: April 14, 2021, 08:10:18 pm by krolikbest »

krolikbest

  • Full Member
  • ***
  • Posts: 246
Re: canvas
« Reply #1 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,

krolikbest

  • Full Member
  • ***
  • Posts: 246
Re: canvas
« Reply #2 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...

PascalDragon

  • Hero Member
  • *****
  • Posts: 5446
  • Compiler Developer
Re: [SOLVED] canvas
« Reply #3 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.

krolikbest

  • Full Member
  • ***
  • Posts: 246
Re: [SOLVED] canvas
« Reply #4 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.

krolikbest

  • Full Member
  • ***
  • Posts: 246
Re: [SOLVED] canvas
« Reply #5 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,

krolikbest

  • Full Member
  • ***
  • Posts: 246
Re: [SOLVED] canvas
« Reply #6 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.

PascalDragon

  • Hero Member
  • *****
  • Posts: 5446
  • Compiler Developer
Re: [SOLVED] canvas
« Reply #7 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.

yus

  • Jr. Member
  • **
  • Posts: 57
Re: [SOLVED] canvas
« Reply #8 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
« Last Edit: April 18, 2021, 01:44:31 pm by yus »

 

TinyPortal © 2005-2018