[SOLVED] [LAMW] jCanvas and text measurement lazarus / 43-Android ---------------------------------------------------------------------- r.lukasiak · 2021-12-03 05:12 Hi everyone! I'm trying to figure out how to use jCanvas, from demos I found out how to draw simple figures but I can't figure out how to work with text. There is DrawText but... 1. how to set font size (+style etc)? 2. how to measure width and height of given string? Something like Canvas.TextWidth():integer for Linux/Windows. I need a custom drawn jBitmap for jScrollView.AddImage. I've tried jDrawingView, it has all the functions I need but jScrollView doesn't seem to accept jDrawingView.GetImage(). has anyone played with this? ---------------------------------------------------------------------- jmpessoa · 2021-12-03 18:08 QuoteI've tried jDrawingView, it has all the functions I need Good! Quotebut jScrollView doesn't seem to accept jDrawingView.GetImage(). I will try some solution! Thank you! ---------------------------------------------------------------------- jmpessoa · 2021-12-03 19:50 well, in my test after set jScrollView property "InnerLayout = ilLinear" this code lines works perfectly! Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i  jScrollView1.AddImage(jDrawingView1.GetImage());  jScrollView1.AddImage(jDrawingView1.GetImage());  jScrollView1.AddImage(jDrawingView1.GetImage()); ---------------------------------------------------------------------- r.lukasiak · 2021-12-03 23:03 I set the InnerLayout and it worked, it added the object. However the size and position is out of control and it displayed just white block, not what I tried to draw. How can I set the exact dimmensions? what I did: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure MyApp.BtnClick(Sender: TObject);var txt: string;  tw,th: single;begin  txt:="My example text"  tw:=jDrawingView1.GetTextWidth(Txt);  th:=jDrawingView1.GetTextHeight(Txt);  jDrawingView1.Width :=Round(tw)+10;  jDrawingView1.Height:=Round(th)+10;  jDrawingView1.PaintColor:=colbrDimGray;  jDrawingView1.DrawRoundRect(0,0,Round(tw)+10,Round(th)+10,15,15);  jDrawingView1.PaintColor:=colbrBlack;  jDrawingView1.DrawText(Txt,5,5);  jScrollView1.AddImage(jDrawingView1.GetImage());   end.  I was also improvising and tried: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i   Jdrawingview1.PosRelativeToParent:=[rpRight];  jdrawingview1.LayoutParamHeight:=lpExact;  jdrawingview1.LayoutParamWidth:=lpExact; but with no effect. What I need is to create something like a chat with "message bubbles" aligned to the left or right and each another one appearing below the others. Is that possible to achieve using jScrollBox? ---------------------------------------------------------------------- jmpessoa · 2021-12-04 01:19 QuoteIs that possible to achieve using jScrollBox? No.  you need draw you "perfect" image "like a chat" in jDrawingView  before add it to jScrollView. QuoteI was also improvising and tried:   Jdrawingview1.PosRelativeToParent:=[rpRight];   jdrawingview1.LayoutParamHeight:=lpExact;   jdrawingview1.LayoutParamWidth:=lpExact; No. Setting jScrollView property "InnerLayout = ilLinear"  these parameters will not works.... ---------------------------------------------------------------------- r.lukasiak · 2021-12-05 03:58 QuoteNo.  you need draw you "perfect" image "like a chat" in jDrawingView  before add it to jScrollView.So I can draw an image, setting its width according to ScollView.Width with a transparent background and just draw the part I need, either on the left or right side? It makes sense but I can't actually draw anything. Whatever I do, it always adds white rectangle, around 1/3 the screen width and more than 100% height. 1. How can I set the size of the image? 2. How can I actually apply my drawing to the image? I've tried many things, one of them: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure TKapp.BtnClick(Sender: TObject);var msg: string;  tw,th: single;begin  tw:=jDrawingView1.GetTextWidth(MsgEdit.Text);  th:=jDrawingView1.GetTextHeight(MsgEdit.Text);  jDrawingView1.Width :=ScrollView.Width;  jDrawingView1.Height:=Round(th)+10;            jDrawingView1.DrawBackground($00FF00);   //jDrawingView1.Clear(colbrRed); <-I also tried this, I assume it cleans the bitmap and sets the background color??  jDrawingView1.PaintColor:=colbrDimGray;  jDrawingView1.DrawRoundRect(0,0,Round(tw)+10,Round(th)+10,15,15);  jDrawingView1.PaintColor:=colbrBlack;  jDrawingView1.DrawText(MsgEdit.Text,5,5);    ChatScrollView.AddImage(jDrawingView1.GetImage();  //ChatScrollView.AddImage(jDrawingView1.GetImage(),0,scaleFitXY);  <-I also tried this. I assumed that scaleFitXY makes it follow image's original dimensions?end.  what am I doing wrong? DrawView doesn't have anything like CreateBitmap(x,y,color) as jCanvas does so I assume that I should use DrawView.width and height to set the size or I'm completely mistaken? Thanks in advance! ---------------------------------------------------------------------- jmpessoa · 2021-12-05 05:56 Ok. I will do a simple demo for you.... (but, now I need a few hours of sleep) ---------------------------------------------------------------------- r.lukasiak · 2021-12-05 07:16 I really appreciate it, thank you very much! ---------------------------------------------------------------------- jmpessoa · 2021-12-05 20:55 Done! Now you can start from the [updated] demo "AppDrawingInBitmap" and as soon as necessary I will be improving the components jCanvas e jBitmap Have fun! ---------------------------------------------------------------------- r.lukasiak · 2021-12-06 00:19 Thank you very much! I see we are back to jCanvas. I was able to recreate you demo on my app. Actually Canvas worked well from the beginning but the main issue for me was lack of txt measurement. Is there any way to implement it on jCanvas? Meanwhile I discovered something really weird. The same like with jDrawingView only part of jCanvas is visible, more or less 2/5 of the area. Turning the phone horizontally does the same, I can see more than vertically but it's still ~2/5 of the area. Check the screenshot. What you see here is jCanvas 500x200 with text "hello" at 10,10. It looks like jScrollView area starts beyond the screen, but the scrollbar is where it's supposed to be. Is that some bug or I messed up with some settings? Sorry for being a pain in the...neck ---------------------------------------------------------------------- jmpessoa · 2021-12-06 02:09 QuoteI was able to recreate you demo on my app No. My demo don't have visibility issue.... QuoteI messed up with some settings? Yes. You need set property:     "jScrollView1.LayoutParamWidth = lpMatchParent" and then:    w:= jScrollView1.Width;  // <<--------------------------    h:= 300; //variable    jCanvas1.CreateBitmap(w , h, colbrLinen); // Take a good look at all the properties configurations of the demo! Quote[txt measurement] Is there any way to implement it on jCanvas? Yes! QuoteTurning the phone horizontally.... we'll take care of that later... ---------------------------------------------------------------------- r.lukasiak · 2021-12-06 03:42 QuoteYes. You need set property:     "jScrollView1.LayoutParamWidth = lpMatchParent" and then:    w:= jScrollView1.Width;  // <<--------------------------    h:= 300; //variable    jCanvas1.CreateBitmap(w , h, colbrLinen); // Take a good look at all the properties configurations of the demo! That's what I did.  jScrollView1.LayoutParamWidth is set lpMatchParent through Object Inspector but I will also add it runtime, just to make sure but I think if it weren't set, the scrollbar wouldn't appear on the right side where it's expected but I may be wrong QuoteYes! it'd be wonderful! ---------------------------------------------------------------------- jmpessoa · 2021-12-06 05:01 And then:    w:= jScrollView1.Width;  // <<--------------------------    h:= 300; //variable    jCanvas1.CreateBitmap(w , h, colbrLinen); ---------------------------------------------------------------------- r.lukasiak · 2021-12-06 05:31 yes, I did this. I'm trying to test something but now I got some problems with Gradle, it fails on compiling  I hope to solve it soon. Thx UPDATE: fixed, tested and it's working perfectly! would it be a big deal to implement TextWidth and TextHeight on jCanvas? ---------------------------------------------------------------------- jmpessoa · 2021-12-07 04:54 Quotewould it be a big deal to implement TextWidth and TextHeight on jCanvas? Maybe, no. I will try! ---------------------------------------------------------------------- r.lukasiak · 2021-12-07 06:25 it'd be amazing! I keep discovering it, I'm able to make pretty cool things but I can't find FontStyle. I found PaintTextSize but I can't figure out how to set the font Italic or Bold, is it possible? It'd be pretty useful. ---------------------------------------------------------------------- r.lukasiak · 2021-12-07 08:42 I found some workaround for TextWidth and TextHeight. I use jDrawingView functions to calculate the dimensions and use them to draw the text on jCanvas but I'm not sure if there are some drawbacks of this solution but in my case it's giving (seemingly) accurate values. After setting Canvas as needed: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i DrawingView .FontSize:=round(Canvas.PaintTextSize);DrawingView.FontFace:=Canvas.Ty peface;//DrawingView.TextTypeFace:=Canvas.???; //there is no TextTypeFace on jCanvas   and DrawingView.GetTextWidth or DrawingView.GetTextWidth seem to give accurate values. I'm just wondering why the same properties  on DrawingView and Canvas (and other components as well) have different naming and what's even more surprising they have different data type. I don't know much about typography so real type for FontSize maybe makes sense (does it?) but as far as I'm concerned no pixel can be 0.5? (can it?). DrawingView.GetTextWidth returns single. I don't mind using Round() but it just makes me wonder :-) ---------------------------------------------------------------------- jmpessoa · 2021-12-07 17:13 Why you need jDrawingView? ---------------------------------------------------------------------- r.lukasiak · 2021-12-07 17:28 I'm using jDrawingView for calculating TextWidth and TextHeight. jCanvas doesn't have these functions so I'm using DrawingView to get it and I use the values to draw text on jCanvas. A little workaround :-) So far it's actually working well, however I'm not sure if there are some drawbacks :/ ---------------------------------------------------------------------- jmpessoa · 2021-12-08 03:56 Done! Improved jCanvas component! added new properties: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     property FontFace: TFontFace read FFontFace write SetFontface;    property TextTypeFace: TTextTypeFace read FTextTypeFace write SetTextTypeFace; added new methods: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     function GetTextHeight(_text: string): single;    function GetTextWidth(_text: string): single; warning:  the property "TypeFace" was replaced by "FontFace" hint: on "Read error" dialog click "Continue loading" and then delete jCanvas component from form and "Save All" the project.... and then insert  jCanvas again... and "Run" --> "Clean up and build" to produce new binaries... ---------------------------------------------------------------------- r.lukasiak · 2021-12-08 17:32 Excellent! you made my day, Sir! I'll test it in moment. UPDATE: I had updated using FPCupDeluxe but no effect, new functions weren't available so I downloaded sources from you website and just unzipped in the LAMW location. Functions are available, I modified my code, "clean up and build" but... now the app doesn't work at all. I also tried a new project and the same. only the title page shows up and nothing else happens (even though I set ActinBarTitle=abtHide) Normally it appears just for a moment and then disappears behind my app but now it gets stuck on that screen. Any clue what I screwed up? ---------------------------------------------------------------------- dseligo · 2021-12-08 19:57 Quote from: r.lukasiak on December 08, 2021, 06:32:01 pmI had updated using FPCupDeluxe but no effect, new functions weren't available I had same problem. To solve it I made small batch with following commands: Code: Text  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i cd \LAMW\ccr\lamwC:\LAMW\fpcbootstrap\git\cmd\git.exe checkout masterC:\LAMW\fpcbootstrap\git\cmd\git.exe reset --hardC:\LAMW\fpcbootstrap\git\cmd\git.exe pullpause It came up with some errors ("overwritten by merge") in demos directory. I just deleted these directories and run batch file again with success (that was probably error in FPCUPdeluxe as well). After that I just rebuild Lazarus. Quote from: r.lukasiak on December 08, 2021, 06:32:01 pmso I downloaded sources from you website and just unzipped in the LAMW location. Functions are available, I modified my code, "clean up and build" but... now the app doesn't work at all. I also tried a new project and the same. only the title page shows up and nothing else happens (even though I set ActinBarTitle=abtHide) Normally it appears just for a moment and then disappears behind my app but now it gets stuck on that screen. Try to create new project and see if it works. Also try some simple demos to see if it works. That way you'll know if the problem is in your app or in Lazarus installation. ---------------------------------------------------------------------- r.lukasiak · 2021-12-08 20:44 QuoteIt came up with some errors ("overwritten by merge") in demos directory. I just deleted these directories and run batch file again with success (that was probably error in FPCUPdeluxe as well). After that I just rebuild Lazarus.I just downloaded and unzipped sources directly but the script is a better idea. I'm using Linux but git commands are the same so I can wrap it into a bash script. Only thing I didn't do is rebuilding Lazarus. Now I'm trying to do so but it's giving me some error, it says clocale.ppu is missing but it's not. I'm trying to figure it out. Do you think not rebuilding Lazarus might cause my problem? QuoteTry to create new project and see if it works. Also try some simple demos to see if it works. That way you'll know if the problem is in your app or in Lazarus installation.I tried a new project and the result is the same. It gets stuck on the title screen, even though it's supposed to be hidden. It doesn't even fire OnCreate event. I added ShowMessage on OnCreate even but it doesn't even show up. UPDATE: I reinstalled everything using FPXupDeluxe and it looks like this time it pulled the latest version of LAMW. I fired the update script and I got: QuoteSwitched to branch 'master' Your branch is up to date with 'origin/master'. HEAD is now at f7178ffc Improved jCanvas component Already up to date. I opened my project, it mentioned something about Read Error so as you said, I removed jCanvas, saved the project and added it back. Everything went smoothly. I built the project etc but I faced the same problem, the app doesn't work, it stops at the title screen. UPDATE #2: I rebuilt everything one more time and now it seems to be ok, the app ran as it should. Now I'm testing new functions and they work perfectly! One more time, thanks a lot for your great help!