show image or svg lazarus / 43-Android ---------------------------------------------------------------------- felipemdc · 2012-04-30 08:56 QuoteI 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 ---------------------------------------------------------------------- huberte · 2012-05-01 04:28 QuoteTo 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 : Quotetype   { 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 ---------------------------------------------------------------------- felipemdc · 2012-05-01 07:15 Quote from: huberte on May 01, 2012, 06:28:14 amthe 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. QuotePS : 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 ---------------------------------------------------------------------- huberte · 2012-05-01 12:51 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 ? ---------------------------------------------------------------------- felipemdc · 2012-05-01 13:11 QuoteFor 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? QuoteWhat 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. QuoteWhen 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. ---------------------------------------------------------------------- huberte · 2012-05-01 16:17 QuoteStrange, wasn't the scrolling fast after my changes some time ago? Dont know, the worth is with an image, very jerky imo QuoteI 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) QuoteLooking 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 ? ---------------------------------------------------------------------- felipemdc · 2012-05-04 14:28 Quote from: huberte on May 01, 2012, 06:17:34 pmEDIT : 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. ---------------------------------------------------------------------- huberte · 2012-05-04 15:11 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. ---------------------------------------------------------------------- felipemdc · 2012-05-05 11:09 Quote from: huberte on May 04, 2012, 05:11:45 pmSo 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. QuoteOr loading an eps file ? fpvectorial supports reading and rendering EPS files very well. Even clipping and other advanced features. QuoteEdit : 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. ---------------------------------------------------------------------- huberte · 2012-05-05 12:18 Like you said, Image stretching is not optimized. I have an S2, wich is 800x480, 233 dpi. Quotefpvectorial 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.) QuoteSo 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 ---------------------------------------------------------------------- felipemdc · 2012-05-07 11:30 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. ---------------------------------------------------------------------- huberte · 2012-05-07 17:21 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 ? ---------------------------------------------------------------------- felipemdc · 2012-05-08 05:30 Quote from: huberte on May 07, 2012, 07:21:16 pmScrolling 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. QuoteYou 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. QuoteFor 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 ---------------------------------------------------------------------- huberte · 2012-05-08 06:30 QuoteI 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. QuoteMy 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. ---------------------------------------------------------------------- felipemdc · 2012-05-08 12:24 Quote from: huberte on May 08, 2012, 08:30:34 amI 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 QuoteBut 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. QuoteYou 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 ---------------------------------------------------------------------- felipemdc · 2012-05-08 12:36 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 ---------------------------------------------------------------------- huberte · 2012-05-09 00:38 OMG, it's hard for me and I short in time to publish the app. I tried Quotebegin   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 QuoteShow the buttons only if Screen.Width < Bitmap.Width How do I get the screen size of the android device ? QuoteOpenDocument 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 ? ---------------------------------------------------------------------- felipemdc · 2012-05-09 07:05 Quote from: huberte on May 09, 2012, 02:38:15 amOMG, 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. QuoteHow 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 ---------------------------------------------------------------------- felipemdc · 2012-05-09 10:09 Quote from: huberte on May 09, 2012, 02:38:15 amQuoteOpenDocument 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. ---------------------------------------------------------------------- felipemdc · 2012-05-09 12:21 Quote from: felipemdc on May 09, 2012, 12:09:37 pmI 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. ---------------------------------------------------------------------- huberte · 2012-05-09 23:31 How should I use open document ? Thks ---------------------------------------------------------------------- BigChimp · 2012-05-10 05:30 IIRC, I suppose include unit LazUtils and call OpenDocument. At least that's how it works on Windows, Linux... ---------------------------------------------------------------------- felipemdc · 2012-05-10 06:02 Quote from: BigChimp on May 10, 2012, 07:30:08 amIIRC, 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