Recent

Author Topic: ImageList SVG  (Read 1367 times)

lainz

  • Hero Member
  • *****
  • Posts: 3807
  • Leandro Diaz
ImageList SVG
« on: October 17, 2020, 11:05:20 pm »
Hi! With @circular we want to make a SVG / LZP image list.

We need a bit of help.

 Retina display: we have already a solution to this. But we need to pass another parameter to determine the real size of the bitmap.
 As well we drawn the image on the fly, so there is in memory only the SVG file. All the resolutions are drawn when needed.

The idea is to make if possible backward compatible. And we need our own IDE editor since the current one will have no sense since we need to load only svg and lzp images.

If I remember correctly the user wp did most of the new cool changes like multi resolution? So if you can please help us to understand how we can integrate or code.

Basically I think we'll be doing our own draw method targeting any desired size. The we need to integrate with current methods.

Help  :)
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

winni

  • Hero Member
  • *****
  • Posts: 2000
Re: ImageList SVG
« Reply #1 on: October 17, 2020, 11:15:19 pm »
Hi!

Bravo lainz & circular!

This is realy needed.

For a lot a users the multi resolution imagelist is very confusing.
We had the discussion again some days ago in the german forum.

A SVG ImageList - that rocks!

Good luck!

Winni



wp

  • Hero Member
  • *****
  • Posts: 7737
Re: ImageList SVG
« Reply #2 on: October 17, 2020, 11:39:33 pm »
If I remember correctly the user wp did most of the new cool changes like multi resolution? So if you can please help us to understand how we can integrate or code.
No, the imagelist as well as the high-dpi support were written by Ondrej Pokornej, I've seen him in the forum occasionally, but you should probably contact him directly by PM.

Ideally the svg image list should be compatible to the current imagelist and be independent of BGRA. I don't know if this is possible...

There are a lot of virtual methods and properties depending on the ppi of the system, e.g.

Code: Pascal  [Select][+][-]
  1.     procedure DrawForPPI(ACanvas: TCanvas; AX, AY, AIndex: Integer;
  2.       AImageWidthAt96PPI, ATargetPPI: Integer; ACanvasFactor: Double; AEnabled: Boolean = True); overload;
  3.     procedure DrawForPPI(ACanvas: TCanvas; AX, AY, AIndex: Integer;
  4.       AImageWidthAt96PPI, ATargetPPI: Integer; ACanvasFactor: Double; ADrawEffect: TGraphicsDrawEffect); overload;
  5.  
  6.   property
  7.     property Height: Integer read FHeight write SetHeight default 16;
  8.     property HeightForPPI[AImageWidth, APPI: Integer]: Integer read GetHeightForPPI;
  9.     property HeightForWidth[AWidth: Integer]: Integer read GetHeightForWidth;
  10.     property Width: Integer read FWidth write SetWidth default 16;
  11.     property WidthForPPI[AImageWidth, APPI: Integer]: Integer read GetWidthForPPI;
  12.     property SizeForPPI[AImageWidth, APPI: Integer]: TSize read GetSizeForPPI;  
  13.  

In Ondrej's implementation, every control using an ImageList has a property ImagesWidth which defines the image width needed by the control at 96ppt. (by default, this value is 0, which means that the image width is taken from the Width property of the ImageList). This way one control can extract "small" images, another control "large" images from the same image list.
« Last Edit: October 17, 2020, 11:49:59 pm by wp »
Mainly Lazarus trunk / fpc 3.2.0 / all 32-bit on Win-10, but many more...

circular

  • Hero Member
  • *****
  • Posts: 3568
    • Personal webpage
Re: ImageList SVG
« Reply #3 on: October 17, 2020, 11:53:41 pm »
Our image list won't be independent from BGRABitmap for sure. We want to draw SVG as well as LZP files (which can be vectorial as well). Though we would like it to be compatible with TCustomImageList so that it can be used in existing components.
« Last Edit: October 18, 2020, 12:08:11 am by circular »
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 3807
  • Leandro Diaz
Re: ImageList SVG
« Reply #4 on: October 18, 2020, 12:36:03 am »
Yes it will be part of bgracontrols as well. Or lazpaint controls if it requires some lazpaint files.

I don't see the point of not using bgrabitmap since its mature. Well tested and works in all major operating systems.

If we need it installed with lazarus (if that is the reason of don't use BGRA) why not include bgrabitmap into it finally  %)

Edit: I contacted Ondrej
« Last Edit: October 18, 2020, 01:11:48 am by lainz »
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

lainz

  • Hero Member
  • *****
  • Posts: 3807
  • Leandro Diaz
Re: ImageList SVG
« Reply #5 on: October 18, 2020, 03:12:17 am »
I tried with the actual release of the TCustomImageList and seems that I can't override almost nothing. The virtual methods are useless. I don't blame no one for that, is hard sometimes to define what can be overriden and what not..
« Last Edit: October 18, 2020, 03:15:35 am by lainz »
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

circular

  • Hero Member
  • *****
  • Posts: 3568
    • Personal webpage
Re: ImageList SVG
« Reply #6 on: October 18, 2020, 04:22:59 am »
The other option is to fill the image list with images at some definition. Problem is we don't know the scaling factor before the controls are actually created. When the OnShow event of the form is triggered, then the scaling factor is known. So maybe fill the list at that moment.

But it would be much simpler to create the image when they are drawn, because at this point we know the scale. At least I suppose we would need GetResolution method to be virtual, so we can override it. If a resolution is queried that does not exist already, then we could create it at this point, computing all images for this resolution.

At the moment, the only working solution I can see is to populate the image list with images with the wanted size without canvas scale and double the size as well. With the Scale property to True if I understand correctly. Or am I missing something?
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 3807
  • Leandro Diaz
Re: ImageList SVG
« Reply #7 on: October 18, 2020, 04:37:06 am »
Good idea. I like the idea to add the resolutions from the SVG at runtime. The code is more simple, and it can work as well when adding images by code. The image is computed only once not every time it needs to be drawn as well.

I think it will be enough since anyways the wanted image size is fixed in some point, the Width property of the ImageList.

Edit: I changed my mind, Is compatible if just you can plug it and work with current image lists, no need of fancy IDE plugin, just adding images by code is good enough. And if we need to trigger some event in order to work, because is not automatic, no problem at all as well, just write some wiki explaining it and that' all.

Adding a single line of code OnShow is better than rethinking it again for the IDE plugin or because we need to load the images with code.

I prefer anyways storing in project options > resources the stuff, and load with LoadFromResource... methods.

Just my opinion, the code will be more easy to do and it will work with a bit of effort of putting a single line of code in the OnShow event.
« Last Edit: October 18, 2020, 04:56:44 am by lainz »
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

Ondrej Pokorny

  • Full Member
  • ***
  • Posts: 219
Re: ImageList SVG
« Reply #8 on: October 18, 2020, 09:49:24 am »
The needed resolutions are generated at run-time in:
Code: Pascal  [Select][+][-]
  1. TCustomImageListResolutions.GetImageLists
  2. -->
  3. procedure TCustomImageListResolution.AddImages(
  4.   AValue: TCustomImageListResolution);
  5.  

You need your own TCustomImageListResolution class (probably TSVGImageListResolution) that will override the AddImages method (make it virtual protected) and that will generate the bitmap images from the SVG list.

You need to register the new class in TSVGImageList.GetResolutionClass (overridden TCustomImageList.GetResolutionClass).

---
Just work on it, modify the LCL image list code as you need (shouldn't be too much). I will review and apply the patches.

---

As for the SVG imagelist itself. It's a good idea and if it will be based on RGBA then it should be added into the RGBA project/package, or its own. Everybody can install it easily with the OPM.

PascalDragon

  • Hero Member
  • *****
  • Posts: 2418
  • Compiler Developer
Re: ImageList SVG
« Reply #9 on: October 18, 2020, 11:52:45 am »
A SVG ImageList - that rocks!

Especially for small icon sizes (e.g. 16x16 or 24x24) using handmade icons results in much better and cleaner icons than relying on some automatic scaling cause this way one can easily discard details that aren't necessary in these small resolutions. Or one can make sure that indeed one pixel wide lines are used instead of lines that are essentially subpixel thanks to the scaling.

Ondrej Pokorny

  • Full Member
  • ***
  • Posts: 219
Re: ImageList SVG
« Reply #10 on: October 18, 2020, 12:14:07 pm »
A SVG ImageList - that rocks!

Especially for small icon sizes (e.g. 16x16 or 24x24) using handmade icons results in much better and cleaner icons than relying on some automatic scaling cause this way one can easily discard details that aren't necessary in these small resolutions. Or one can make sure that indeed one pixel wide lines are used instead of lines that are essentially subpixel thanks to the scaling.

SVG supports responsive drawing - i.e. you can define different layers/images for different resolutions within one SVG file. The question is if it is supported by RGBA.

Anyway:
Actually it would be a good idea to add a function(event handler) to TImageList to generate icon resultions externally. In that case you could add bitmap resolutions for 16px and 24px normally (PNGs) and higher resolutions could be generated from SVG.

That would be quite easy to do and with this a normal TImageList would support SVG icons itself - just by calling an event handler to generate the needed image resolutions.

In that case a TSVGImageList would just need to store a list for the SVG icons and override the rendering of the bigger resolutions. Simple as that.

circular

  • Hero Member
  • *****
  • Posts: 3568
    • Personal webpage
Re: ImageList SVG
« Reply #11 on: October 18, 2020, 02:56:13 pm »
Nope responsive drawing isn't handled by BGRA. Though I think it is ok if we design the icons to look ok at low resolutions.

For now, I have found this working solution, where GetUnscaledIcons returns an ImageList with images of the requested size (or compute them by stretching them if necessary). On MacOS basically I create both resolutions anyway. Is it how this is supposed to be done with current TImageList?
Code: Pascal  [Select][+][-]
  1.     unscaled := GetUnscaledIcons(ASize);
  2.     retina := GetUnscaledIcons(ASize*2);
  3.     bmpUnscaled := TBitmap.Create;
  4.     bmpRetina := TBitmap.Create;
  5.  
  6.     result := TImageList.Create(nil);
  7.     result.Width := ASize;
  8.     result.Height := ASize;
  9.     result.Scaled := true;
  10.     result.RegisterResolutions([ASize, ASize*2]);
  11.     for i := 0 to unscaled.Count-1 do
  12.     begin
  13.       unscaled.GetBitmap(i, bmpUnscaled);
  14.       retina.GetBitmap(i, bmpRetina);
  15.       result.AddMultipleResolutions([bmpUnscaled, bmpRetina]);
  16.     end;
  17.  
  18.     bmpUnscaled.Free;
  19.     bmpRetina.Free;
  20.     unscaled.Free;
  21.     retina.Free;  

That doesn't work for menus though.
« Last Edit: October 18, 2020, 03:10:02 pm by circular »
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 3807
  • Leandro Diaz
Re: ImageList SVG
« Reply #12 on: October 18, 2020, 04:59:02 pm »
Looking good, so no need of the SVG image list for now, it's too complex to integrate.  :-\
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

circular

  • Hero Member
  • *****
  • Posts: 3568
    • Personal webpage
Re: ImageList SVG
« Reply #13 on: October 18, 2020, 06:21:12 pm »
Going forward, what I really think would be great would be to be able to render the bitmaps on the fly. Basically when the button draws the glyph from the image list, at that point it could be computed with the adequate resolution.
Conscience is the debugger of the mind

BeanzMaster

  • Sr. Member
  • ****
  • Posts: 270
Re: ImageList SVG
« Reply #14 on: October 18, 2020, 06:53:30 pm »
Hi on Delphi a really cool open source project exist https://github.com/EtheaDev/SVGIconImageList perhaps He can inspire you

A good article on svg icon https://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html

Regards
« Last Edit: October 18, 2020, 06:57:13 pm by BeanzMaster »

 

TinyPortal © 2005-2018