Kast2k Posted January 30, 2018 Share Posted January 30, 2018 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 Quote Link to comment Share on other sites More sharing options...
mhmda Posted January 30, 2018 Share Posted January 30, 2018 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. Quote Link to comment Share on other sites More sharing options...
Kast2k Posted January 30, 2018 Author Share Posted January 30, 2018 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. Quote Link to comment Share on other sites More sharing options...
mhmda Posted January 30, 2018 Share Posted January 30, 2018 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. 1 Quote Link to comment Share on other sites More sharing options...
Kast2k Posted January 30, 2018 Author Share Posted January 30, 2018 Here is the solution, works as expected Thank You very much! it works great! I need to learn more about UniGui and Sencha. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.