show image or svg

[felipemdc]

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

[huberte]

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

[felipemdc]

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

[huberte]

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]

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.

[huberte]

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 ?

[felipemdc]

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.

[huberte]

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]

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.

[huberte]

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

[felipemdc]

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]

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]

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

[huberte]

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.

[felipemdc]

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