Print Page - [SOLVED] [LAMW] jCanvas and text measurement

Programming => Operating Systems => Android => Topic started by: r.lukasiak on December 03, 2021, 06:12:05 am

Title: [SOLVED] [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 03, 2021, 06:12:05 am

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?

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 03, 2021, 07:08:04 pm

Quote

I've tried jDrawingView, it has all the functions I need

Good!

Quote

but jScrollView doesn't seem to accept jDrawingView.GetImage().

I will try some solution!

Thank you!

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 03, 2021, 08:50:16 pm

well, in my test

after set jScrollView property "InnerLayout = ilLinear"

this code lines works perfectly!

Code: Pascal [Select][+]

 jScrollView1.AddImage(jDrawingView1.GetImage()); 
 jScrollView1.AddImage(jDrawingView1.GetImage()); 
 jScrollView1.AddImage(jDrawingView1.GetImage()); 
 

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 04, 2021, 12:03:00 am

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][+]

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][+]

  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?

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 04, 2021, 02:19:53 am

Quote

Is that possible to achieve using jScrollBox?

No. you need draw you "perfect" image "like a chat" in jDrawingView before add it to jScrollView.

Quote

I 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....

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 05, 2021, 04:58:41 am

Quote

No. 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][+]

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!

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 05, 2021, 06:56:02 am

Ok. I will do a simple demo for you....

(but, now I need a few hours of sleep) O:-)

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 05, 2021, 08:16:47 am

I really appreciate it, thank you very much!

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 05, 2021, 09:55:34 pm

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!

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 06, 2021, 01:19:15 am

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 :D

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 06, 2021, 03:09:08 am

Quote

I was able to recreate you demo on my app

No. My demo don't have visibility issue....

Quote

I 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!

Quote

Turning the phone horizontally....

we'll take care of that later...

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 06, 2021, 04:42:45 am

Quote

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!

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 :D

Quote

Yes!

it'd be wonderful!

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 06, 2021, 06:01:59 am

And then:

w:= jScrollView1.Width; // <<--------------------------
h:= 300; //variable
jCanvas1.CreateBitmap(w , h, colbrLinen);

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 06, 2021, 06:31:21 am

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?

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 07, 2021, 05:54:07 am

Quote

would it be a big deal to implement TextWidth and TextHeight on jCanvas?

Maybe, no. I will try!

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 07, 2021, 07:25:10 am

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.

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 07, 2021, 09:42:24 am

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][+]

DrawingView.FontSize:=round(Canvas.PaintTextSize);
DrawingView.FontFace:=Canvas.Typeface;
//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 :-)

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 07, 2021, 06:13:59 pm

Why you need jDrawingView?

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 07, 2021, 06:28:19 pm

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 :/

Title: Re: [LAMW] jCanvas and text measurement
Post by: jmpessoa on December 08, 2021, 04:56:36 am

Done!

Improved jCanvas component!

added new properties:

Code: Pascal [Select][+]

    property FontFace: TFontFace read FFontFace write SetFontface;
    property TextTypeFace: TTextTypeFace read FTextTypeFace write SetTextTypeFace;  
 

added new methods:

Code: Pascal [Select][+]

    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...

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 08, 2021, 06:32:01 pm

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? :o

Title: Re: [LAMW] jCanvas and text measurement
Post by: dseligo on December 08, 2021, 08:57:51 pm

Quote from: r.lukasiak on December 08, 2021, 06:32:01 pm

I 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][+]

cd \LAMW\ccr\lamw
C:\LAMW\fpcbootstrap\git\cmd\git.exe checkout master
C:\LAMW\fpcbootstrap\git\cmd\git.exe reset --hard
C:\LAMW\fpcbootstrap\git\cmd\git.exe pull
pause

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 pm

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.

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.

Title: Re: [LAMW] jCanvas and text measurement
Post by: r.lukasiak on December 08, 2021, 09:44:21 pm

Quote

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.

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?

Quote

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.

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:

Quote

Switched 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!