TUniCanvas, Layout problem

[Kast2k]

Dear colleagues,

 

I hava a problem with TUniCanvas layout.

I need to place it as alClient on TUnipanel for future drawing, but it always have the pre-designed sizes and doesn't fill all the panel.

May be i'm doing something wrong?

 

Test example attached.

 

Thank You.

TestsUniCanvas.zip

[mhmda]

Hi,

 

The the width & Height are the same as server side, you may pass them from the client-side to server-side and after that do your drawing, you can use the Delphi debugger and the browser console to see the difference of the size.

 

And don't use 'alClient' with layouts. 

[Kast2k]

Hi,

 

The the width & Height are the same as server side, you may pass them from the client-side to server-side and after that do your drawing, you can use the Delphi debugger and the browser console to see the difference of the size.

 

And don't use 'alClient' with layouts. 

Thank You for reply.

I removed alClient, set Height and Width of TUnicanvas to 100% but still no results.

 

In browser console i see that data:

<canvas id="O2A_canvas" width="481px" height="233px">Your browser does not support <canvas> element.</canvas></canvas>

 

Could you please explain what is going wrong in my DFM?

 

Thank You.

 

P.S. Firefox 58, IE 11

 

P.P.S Temporary i fixed the error by setting manually canvas Width and Height in UniFrameCreate procedure, but i think that this is not good decision.

[mhmda]

Here is the solution, works as expected 

 

1. In order to access frame in js you must assign a name:

procedure TMainForm.UniFormShow(Sender: TObject);
var
  s:string;
  FrC : TUniFrameClass;
  Fr : TUniFrame;
begin
  s:=AnsiUpperCase(UniApplication.Parameters.Values['ViewType']);
  if s=AnsiUpperCase('Test') then
    begin
      FrC := TUniFrameClass(FindClass('TframTest'));
      Fr := FrC.Create(Self);
      Fr.Name:='frmCanvas';{<---------------}
      Fr.Parent := Self;
    end;
end;

2. Capture the 'resize' event of the Frame and send ajaxRequest to inform the server about the actual size by sending ajax to parent panel: 'UniPanel1':

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
  console.log(frmCanvas.UniPanel1.getWidth());
  ajaxRequest(frmCanvas.UniPanel1, 'updateCanvasSize', ['w='+frmCanvas.UniPanel1.getWidth(),'h='+frmCanvas.UniPanel1.getHeight()]);
}

3. 'UniPanel1': 'AjaxEvent'

procedure TframTest.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
 var
  w,h:integer;
  a:string;
begin
 if EventName='updateCanvasSize' then
 begin
  a:=Params.Text;
  w:=StrToIntDef(Params.Values['w'],100);//the 100 is default in case of error
  h:=StrToIntDef(Params.Values['h'],100);//the 100 is default in case of error
  cnvCounter.Width:=w;
  cnvCounter.Height:=h;
 end;
end;

Take this in mind: you should remove the 'Div 2' in delphi code:

X1:=Random(Width div 2);
Y1:=Random(Height div 2);
X2:=Random(Width div 2);
Y2:=Random(Height div 2);

If you leave the 'Div 2' the it will draw the shape only in half of actual size of the canvas.

[Kast2k]

Here is the solution, works as expected 

 

Thank You very much! it works great!

 

I need to learn more about UniGui and Sencha.