Lazarus
Programming => Operating Systems => Android => Topic started by: felipemdc on April 30, 2012, 10:56:07 am
-
I would like to ask you the better way to show image or svg (text and image) into an app. I dont want the user save the image and reuse it.
any advice ? Cause with a tform show and an image in it, it cant be resized
(Answering in the forum to share the knowledge)
To show a raster image you can use TImage. LCL-CustomDrawn supports it fully. It has a Stretch property which will make it stretch the image if you want.
For SVG one idea would be using fpvectorial. I don't remember if it supports reading SVG or only writing, however. Unfortunately I think that only writing: http://wiki.lazarus.freepascal.org/fpvectorial
-
To show a raster image you can use TImage. LCL-CustomDrawn supports it fully. It has a Stretch property which will make it stretch the image if you want.
I used this :
type
{ TForm2 }
TForm2 = class(TForm)
Image1: TImage;
private
{ private declarations }
public
{ public declarations }
end;
the image's scrolling is very bad, and it's not resizable, I think I made something wrong
For svg I'll ask meanderix again with graphics32, thing is installing in lazarus is not working
PS : did you read that ? http://code.google.com/p/svg-android/w/list
-
the image's scrolling is very bad, and it's not resizable, I think I made something wrong
Could you post a screenshot?
About scrolling, do you want scrolling support in the image? Normally one should set AutoSize=True so it will expand to show the entire image, unless it is huge.
About being resizable, this I don't understand. TImage cannot be resized by the user.
PS : did you read that ? http://code.google.com/p/svg-android/w/list
It is written in Java, so doesn't help much. If I would do it I would expand fpvectorial to support SVG reading. But I have a lot of other stuff in my ToDo
-
http://tof.canardpc.com/view/b945126c-9530-46ec-b99e-5d2e03be34f9.jpg
http://tof.canardpc.com/view/12fd293c-1ac0-4909-8b3e-0d4713ca83cb.jpg
For forms, the scrolling feeling "jerky", when you scroll it feels like jumping 3 or 4 lines, also the form with only button.
What I would is the button opens an image which can be zommed or resized. But I think it's not possible, I saw apps like that though.
When you talked about stretch property, I figure out the user can stretch the image, it's more that the image fills the screen, right ?
-
For forms, the scrolling feeling "jerky", when you scroll it feels like jumping 3 or 4 lines, also the form with only button.
Strange, wasn't the scrolling fast after my changes some time ago?
What I would is the button opens an image which can be zommed or resized. But I think it's not possible, I saw apps like that though.
I think it is possible, we simply need to implement OpenDocument API from LCLProc for Android. Then it would open the image in whatever default image viewer, or open a list of choices for the user. I will try doing that this week.
When you talked about stretch property, I figure out the user can stretch the image, it's more that the image fills the screen, right ?
No, it means that the image is stretched to fill the size of the TImage control. Looking at the image that you want to show this doesn't seam like a good idea.
-
Strange, wasn't the scrolling fast after my changes some time ago?
Dont know, the worth is with an image, very jerky imo
I think it is possible, we simply need to implement OpenDocument API from LCLProc for Android. Then it would open the image in whatever default image viewer, or open a list of choices for the user. I will try doing that this week.
Ok, thanks, but then would the user be able to save the image (eg "hack" the app)
Looking at the image that you want to show this doesn't seam like a good idea.
Ok, will try with graphics32 and svg, cause we perhaps need a big zoom sometimes, wondering if i can then zoom inside the app without the native opendocument from android.
EDIT : stretching image does work on windows and on android (I did add Image (Align:alclient,Stretch:true), but the result is terribly slow, with scrolling, etc... You spoke about OpenDocument API but could http://developer.android.com/reference/android/widget/ImageView.html be implemented ?
-
EDIT : stretching image does work on windows and on android (I did add Image (Align:alclient,Stretch:true), but the result is terribly slow, with scrolling, etc... You spoke about OpenDocument API but could http://developer.android.com/reference/android/widget/ImageView.html be implemented ?
In general Java views cannot be mixed with the LCL drawing, so no, ImageView or any other kind of WhateverView has no place in the LCL. The LCL can use only non-visual things, or things which are completely separated from the main drawing, like menus and extra dialogs. Unfortunately there is not "view image" dialog in the LCL, if there was one, we could consider making a native implementation for it.
On the other hand yes, you could use ImageView, and some other kind of java Code to write a image viewer dialog in the .java file and you could call this dialog from your application using JNI. But that would be code from your application. Not LCL code.
Summing up you have to code a solution here. You have all the tools. The LCL has an extensive amount of JNI examples and our .java file has an extensive amount of code examples too. Also use Google and search the site stackoverflow for java questions.
-
So there is no solution within LCL to proper shows an image wich fit the screen ? :(
Or loading an eps file ?
Edit : there is. the stretch property is not so good implement in android, the result is slow and jerky. If I set up the right size with the from, I cant have a full window image. that's enough for the moment. I dont have time, and quality to code with other tools.
-
So there is no solution within LCL to proper shows an image wich fit the screen ? :(
There clearly is a solution, and it works, but you say that it is too slow for you. Well, then it is not about working, it is about performance. And when it comes about performance I have no easy answer for you.
I have already implemented many, many performance improvements in LCL-CustomDrawn, but appearently it was not enough for your device. It will depend a lot on the size of the screen too. LCL-CustomDrawn is faster is smaller screens, screens with less pixels. My device is HTC Wildfire which has 240x320 pixels, so if you have a device with a huge amount of pixels it might be slower.
Or loading an eps file ?
fpvectorial supports reading and rendering EPS files very well. Even clipping and other advanced features.
Edit : there is. the stretch property is not so good implement in android, the result is slow and jerky. If I set up the right size with the from, I cant have a full window image. that's enough for the moment. I dont have time, and quality to code with other tools.
I have already implemented large performance improvements for image rectangle copying (as utilized to render an image), but nothing for image stretching. So yes, stretching was not optimized so it will be much slower then a simple rendering without stretch.
-
Like you said, Image stretching is not optimized. I have an S2, wich is 800x480, 233 dpi.
fpvectorial supports reading and rendering EPS files very well. Even clipping and other advanced features.
WOuld be great but I ask here (http://lazarus.freepascal.org/index.php/topic,16824.0.html) and nobody gave an answer, loading an eps file gives an error in windows with the example (the one in component folder.)
So yes, stretching was not optimized so it will be much slower then a simple rendering without stretch.
Exactly, for example, 4s beetween rotating with a stretch, 0.5s with no stretch. I think that with your form, who are adapting so good, stretching is completly useless
-
I tested your application now in HTC Wildfire and scrolling is fast, also in your image showing.
The image does not fit the page width and there is no scrolling for the X axis, because the scrolling was not created to show images like you are using it for. This form scrolling was made only for user interface scrolling in the Y axis.
One thing that you should try is drawing the image in the OnPaint of the form instead of using a TImage. Create handlers for the events OnPaint and also MouseOver, MouseDown and MouseUp. By correctly handling MouseUp, MouseDown and MouseOver you can implement scrolling on your side. In OnPaint draw only the part of the image currently visible in the screen according to the scrolling. I think that this would work better and possibly be much faster.
-
Scrolling in the X axis is not a pb, since the image fits the page width.
You dont feel the scroll like to fast, or jumping in compare with other apps which are more smooth ? But again it's not a big deal...
For the ONpaint Even, I did see http://wiki.lazarus.freepascal.org/Developing_with_Graphics and some post in the forum but I would like to have one example. Moreover, does this solution better fits the screen ? eg fit in width so that the user do not have to scroll on the X axis ?
-
Scrolling in the X axis is not a pb, since the image fits the page width.
That will depend on the device. In HTC Wildfire it does't fit the screen width.
You dont feel the scroll like to fast, or jumping in compare with other apps which are more smooth ? But again it's not a big deal...
Yes, it could be better.
For the ONpaint Even, I did see http://wiki.lazarus.freepascal.org/Developing_with_Graphics and some post in the forum but I would like to have one example. Moreover, does this solution better fits the screen ? eg fit in width so that the user do not have to scroll on the X axis ?
I think that you cannot force the image to fit the screen width. HTC wildfire for example has only 240 pixels in the width. I can't imagine how the image would fit there ... it is just too small. Even if you stretch, I think it will simply get distorced.
My idea was for you on your side implement your own X scrolling when bitmap.width > screen.Width
-
I think that you cannot force the image to fit the screen width. HTC wildfire for example has only 240 pixels in the width. I can't imagine how the image would fit there ... it is just too small. Even if you stretch, I think it will simply get distorced.
I totally agree ! But on such device, you can turn your phone in landscape mode (could you try if it's readable please ?), like on galaxy ace (320x480). The hight will alway be > or equal to 480. On such phone it's useless to have some such reading in portait mode, I think. But on tablet it'll be problematic, cause the size is way bigger, and the image will be ugly, I don't have such devices to test.
My idea was for you on your side implement your own X scrolling when bitmap.width > screen.Width
didn't understand how to do that.
You spoke about onpaint, but can I add an image with onpaint function ?
Moreover, I think I have a good compromise, knowing that customdrawn_android cant deal with zooming images. If user can see and scroll the image in good condition with landscape or portrait, well then it's ok. X axis is always bad when reading text, I think.
So if you can read good with your phone in landscape mode, I think I'll stay with this solution, unless I can code other way to increase speed, zomming enable, or scrolling faster.
thks felipe.
-
I totally agree ! But on such device, you can turn your phone in landscape mode (could you try if it's readable please ?)
In landscape the image is still too large for HTC Wildfire. It has a resolution of 240x320 so in landscape the width is 320
But on tablet it'll be problematic, cause the size is way bigger, and the image will be ugly, I don't have such devices to test.
In this case you need to stretch the image, or make 2 versions of it. 1 would be a pre-stretched which has 2 times the size of the original.
You spoke about onpaint, but can I add an image with onpaint function ?
Of course. OnPaint is *the drawing event*. You can draw anything there. All controls which exist in LCL-CustomDrawn are painted in the OnPaint event.
Maybe you should start by studying lazeyes: http://lazarus-ccr.svn.sourceforge.net/viewvc/lazarus-ccr/applications/lazeyes/lazeyes2painter.pas?revision=2421&view=markup
See line 81:
81 procedure TLazEye2Painter.DrawToCanvas(ACanvas: TCanvas);
82 begin
83 // Background
84 ACanvas.Brush.Color := clWhite;
85 ACanvas.Pen.Color := clWhite;
86 ACanvas.FillRect(0, 0, Width, Height);
87
88 // Eyes form
89 ACanvas.Pen.Color := clBlack;
90 ACanvas.Pen.Width := 5;
91 ACanvas.Ellipse(
92 0,
93 0,
94 INT_OUTER_EYE_WIDTH,
95 INT_OUTER_EYE_HEIGHT);
96 ACanvas.Ellipse(
97 INT_OUTER_EYE_WIDTH + INT_INTEREYE_SPACE,
98 0,
99 2* INT_OUTER_EYE_WIDTH + INT_INTEREYE_SPACE,
100 INT_OUTER_EYE_HEIGHT);
101
102 // Eyes pupils
103 ACanvas.Brush.Color := clBlack;
104 ACanvas.Pen.Width := 10;
105 ACanvas.Ellipse(
106 LeftEyePos.X - 2,
107 LeftEyePos.Y - 2,
108 LeftEyePos.X + 2,
109 LeftEyePos.Y + 2);
110 ACanvas.Ellipse(
111 RightEyePos.X - 2,
112 RightEyePos.Y - 2,
113 RightEyePos.X + 2,
114 RightEyePos.Y + 2);
115 end;
This routine paints this app: http://wiki.lazarus.freepascal.org/LazEyes#Screenshots
Read the docs about TCanvas too: http://lazarus-ccr.sourceforge.net/docs/lcl/graphics/tcanvas.html
To draw an entire bitmap use this routine: http://lazarus-ccr.sourceforge.net/docs/lcl/graphics/tcanvas.draw.html
To draw part of a bitmap or to stretch use this: http://lazarus-ccr.sourceforge.net/docs/lcl/graphics/tcanvas.copyrect.html
-
Instead of making a finger X axis scrolling you could just put 2 buttons, for left and right scrolling.
Show the buttons only if Screen.Width < Bitmap.Width
-
OMG, it's hard for me and I short in time to publish the app.
I tried
begin
Bitmap := TBitmap.Create;
try
// Initializes the Bitmap Size
Bitmap.Height := Height;
Bitmap.Width := Width;
DrawToCanvas(Bitmap.Canvas);
Canvas.Draw(0, 0, Bitmap);
finally
Bitmap.Free;
end;
Then I tried for several hours to draw an image in canvas with TCanvas.Draw and stretch it with TCanvas.CopyRect with no luck :(
Show the buttons only if Screen.Width < Bitmap.Width
How do I get the screen size of the android device ?
OpenDocument API from LCLProc for Android. Then it would open the image in whatever default image viewer, or open a list of choices for the user. I will try doing that this week.
what about this solution ?
-
OMG, it's hard for me and I short in time to publish the app.
I tried ....
You need to show more code. Show your routine DrawToCanvas(Bitmap.Canvas); and also show the declaration of this procedure too. Also, is it really connected to OnPaint in the LFM?
You will probably want to use LoadFromFile instead of DrawToCanvas, for TBitmap it needs to be a .bmp image file. You can use other graphic classes for other formats. See the full list here: http://wiki.lazarus.freepascal.org/Developing%20with%20Graphics#Image_formats
Just change TBitmap for the appropriate class for the format, the rest remains without change.
How do I get the screen size of the android device ?
Use Screen.Width and Screen.Height
Screen is a global objects of the type TScreen
See: http://lazarus-ccr.sourceforge.net/docs/lcl/forms/tscreen.html
-
OpenDocument API from LCLProc for Android. Then it would open the image in whatever default image viewer, or open a list of choices for the user. I will try doing that this week.
what about this solution ?
I started implementing it today, but it crashes right now. It doesn't work yet.
-
I started implementing it today, but it crashes right now. It doesn't work yet.
Ok, now in revision: 37229 both OpenURL and OpenDocument have initial implementations working.
-
How should I use open document ?
Thks
-
IIRC, I suppose include unit LazUtils and call OpenDocument. At least that's how it works on Windows, Linux...
-
IIRC, I suppose include unit LazUtils and call OpenDocument. At least that's how it works on Windows, Linux...
OpenDocument is in LCLIntf, so:
uses LCLIntf;
OpenDocument('/mnt/sdcard/myfile.png');
Every extension needs to be registered, because it needs to be converted to a mime-type. So far I did it for .txt, .png and .jpg