TAdvSVGImageCollection visual editor

I'm missing a nice UI for adding SVG images to TAdvSVGImageCollection. Currently, you can only add one at a time, and you can't visually see what you are adding. I'd like a UI like the one for TVirtualImageCollection, so I decided to make one myself that operates on the .DFM file.

image

Once you have opened the .DFM file (and selected the collection to work with, if there are more than one in the .DFM file), it'll load all the SVG images into an image list:

image

When you click one in the list, you can see it in large format on the right. You can Add new SVG images to the list. If you select a .ZIP file, it'll be scanned for .SVG files and you're presented with a list of all found, incl. a preview window, and you can select which ones you'd like to add to your collection:

You can also enable multi-selection via popup menu and check a bunch of .SVG files from your image list and then delete them:

image

The .EXE file can be downloaded here:

https://www.dropbox.com/s/lwkcz2831bevs5e/SVG.zip?dl=1

Error reports and suggestions for improvements are welcome...

Wow, that is very nice indeed!
Something that was definitely on our todolist to add something like this for design-time use.

Thank you. v1.1 is now available, now with Rename option and skinning capability. First time you run it, it'll only allow skinning for the default Windows style, but if you browse to

C:\Program Files (x86)\Embarcadero\Studio\xx.0\Redist\styles\vcl (where xx.0 is your RAD Studio version) and load a style file from there, the program will remember the location of all the standard styles and allow you to select from them in future runs. It will also allow you to select from style files located in the same directory as the .EXE file.

Which leads me to a question: I'm using TAdvFileNameEdit and it appears that it doesn't support skinning (VCL Styles). Is that true?

Nice!

Wrt TAdvFileNameEdit, we have seen an issue with VCL styles for the button. We addressed this and this improvement will be included in the next update.

Very good.

Drag'n'Drop (to change the order of the SVG files within the collection) has now been implemented as well...

Any chance we can discuss integrating this as design-time editor?

Of course, Bruno, but I'm using ImageEn components to handle the preview and the image list, so I'm not sure how that influences the possibilities...

Edit: Just thought of a possible way: If I make a .DLL that accepts a TList<TAdvSVGBitMap> and then I manipulate that (instead of the .DFM file directly), then I can deliver the .DLL file to you (so you don't need to purchase and license ImageEn) and you can call me at an appropriate time. Then it'll be your responsibility to stream the list in and out of the .DFM file.

Only caveat at this is that a TList<> across a .DLL boundary would require that your code and mine are compiled with the same Delphi version, as the internal structure of TList<> may possibly change in a future version.

What specific ImageEn component(s) is/are used? There are no replacements for these in VCL UI Pack?

TImageEnView (preview) & TImageEnMView (image collection list).

I'm not aware of any replacements in VCL UI Pack (but haven't looked, as I'm used to working with ImageEn components)

TImageEnView could probably easily be replaced with a more-or-less standard TImage, but I'm also using the image processing capabilities (such as transparency in TBitMap to enable transparency in the rendered SVG files) so it's not only the visual components that I'm using.

To give you an idea, here's the SVG-2-BMP Renderer I'm using (it also uses a bunch of my own CLASS/RECORD HELPERs so it doesn't compile as-is, but shows what I have to do in order to get a transparency from the rendered SVG files):

PROCEDURE RenderSVG2BMP(SVG : TAdvSVGBitmap ; BMP : TIEBitMap ; Background : TColor = clNone);
  VAR
    SZ  : TSize;
    R   : TRect;
    F   : TColor;

  BEGIN
    SZ:=TSize.Create(SVG.Width,SVG.Height);
    SZ:=SZ.ReSize(BMP.Width,BMP.Height);
    R:=Rect((BMP.Width-SZ.Width) DIV 2,(BMP.Height-SZ.Height) DIV 2,SZ.Width,SZ.Height);
    BMP.PixelFormat:=TIEPixelFormat.ie32RGB;
    IF Background=clNone THEN F:=RGB(1,2,3) ELSE F:=Background;
    BMP.Canvas.Brush.Style:=TBrushStyle.bsSolid;
    BMP.Canvas.Brush.Color:=F;
    BMP.Canvas.FillRect(R);
    SVG.Draw(BMP.Canvas,R);
    IF Background=clNone THEN BEGIN
      BMP.SetTransparentColors(F,F,0);
      PROC.SetBMP(BMP).CastColorRange(F,F,clBlack)
    END
  END;

v1.2 now available, which handles the upcoming properties, as discussed here:

image

To use the new properties (which are updated on-the-fly in the preview if you change them), you must check the "TMS v10.6.8 or later" checkbox to specify that you have a version that supports these properties. If you don't check it, it'll default back to pre-v10.6.8 behaviour:

image

Hi, thank you for this update. I noticed that the images are drawing with some kind of anti-aliasing, are you converting SVGs to images before rendering them? Because it should be possible to render the SVGs using GDI+ without quality loss as pure vector graphics.

Yes, I am. In order to get transparency to work properly, I had to jump through a few hoops (may be because I don't know how to do it otherwise, but unless I did it as shown in the code sample above, the transparency didn't work properly the way I did it - it would either remain 100% transparent for the entire image if I started with a fully transparent image, or would leave the transparent area non-transparent - usually black - if I started without a transparent image).

The reason I render to BMP first is that the Image List and Image View components (from ImageEn) works with bitmaps. I don't know how to make it work with TGraphic, so I have to convert it to T(IE)Bitmap in order to "squeeze" them into these components. If you know of a (free or TMS) multi-image viewer that supports TGraphic descendants and have support for drag-and-drop movement and text at the bottom of thumbnails, as well as a TGraphic-capable TImage (I think standard TImage may do here), then I'll be happy to experiment with that one instead...

TImage should just be able to handle SVG as we register SVG as a TGraphic. Alternatively, drawing SVG on a TPaintBox with TAdvGraphics is also possible. We currently don't have a component that combines the above, but with some customization you should be able to mimic the same behavior.

Nice, but how do I save the changes? The "Save" button is always grayed.

The "Save" button should be active once you have added an .SVG file to the collection. When you save, it'll be disabled until you add a new one (so you can see the "Edited" status by the active state of the Save button).

Pieter: I don't want to code an entire thumbnail viewer manually - it's too much hassle, when I have one already that works :slight_smile: albeit with anti-aliasing. If I can't have a finished TGraphic-capable multiple-image thumbnail viewer with built-in support for name label and drag'n'drop, I'll stay with TImageEnMView :slight_smile:

v1.25 now online with a few bug-fixes, better rendering to (hopefully) eliminate/minimize anti-aliasing, and a "Check All"/"Uncheck All"/"Toggle All" option in the .ZIP loader. You can now also adjust the relative size of the preview window/collection window (there's a Splitter between them).

GREAT!