SVG GUI

[lainz]

What about an entire UI made with SVG? I'm looking for ideas.

Say we have just resources and we forget about the complex properties system we have now. Anything you can draw with SVG can be drawn on screen at any scale factor.

If you want other style just change the SVG images. That's what we do on Android Studio apps.

Like we currently have for svg button in bgracontrols.

I think the missing part will be 9 slice scaling for SVG. So we can create scalable rectangles. Most vectors app has this stuff. Where you can define a smart rectangle object with rounded borders. If you scale it the borders rounded ratio remains the same for the corners.

I think with that we can do any UI. Of course we can have properties, but these can be less. Themes can use different images so no need to define gradients, line thickness, rounding and so on... change the images and you change the entire app look.

As well is easier because you can hire a designer that can do all the svg files for you.

How it is done on android? The answer is XML. I think that I've seen XML as well on Visual Studio apps for Windows 10.

Not sure if this is reinventing the wheel but the LCL looks really old stuff even with BGRAControls.

Maybe we can have LCL controls in the Lazarus IDE but all SVG and nothing more.

I opened this bug report because I've used the svg viewer of bgracontrols and get amazed. It scales well even if I change the windows dpi when the app is running. The imagelist trick didn't work in that case... I need to close and open lazpaint again to see the effect.

Well that's it. It sounds hard but I think I will start another package only with svg controls. And this time I will not quit soon, even if I don't see the results immediately.

I will try to learn more about how android studio does it because we have really nice looking apps made with that and i want that for Lazarus desktop. Tired of Electron .js I must say.

[circular17]

After testing, in fact there are still some bugs I need to fix.

I think I have fixed the bugs. Will test maybe a bit more to be sure.

[lainz]

Ok. Better to test before the release.

[lainz]

Fixed.

Check this button =) Like 3D (is just a diagonal gradient with 3 colors).

Another with a custom bottom.

I found a way to make pixel perfect icons with Inkscape. So 1px is actually 1px drawn on screen.

You need to setup 2 configurations. First disable this option Behaviour > Transformations > Scale paths width.

Second in document options change scale x and scale y to 1. As well I set the units to pixel in the top combobox and in the bottom combobox as well.

Then when you resize a path, it will not change the width defined (usefull for creating rectangles and buttons, to don't make it wider than it should be), and it will be 1px=1px on screen.

Is possible that drawing without that settings looks 1px = 1px drawing with inkscape? In chrome works fine.

[lainz]

Hi again, I've tested it right now and seems that you already fixed it, it loos pixel perfect with the default inkscape settings with units in mm.

[circular17]

Cool. I still need to fix a few things but I think I am getting there.

[lainz]

Thanks for all your work, I see the commits and don't understand nothing =) But sounds hard indeed.

[circular17]

Ok I think it is fine now. Can you give it a try?

I've added some things:

• support for SVG text with rotation of letters and for offsets for each letters
• gradient for strokes
• handle duplicate identifiers in different groups (for example if you have to sibling elements that have definitions with the same id)
• SVG gradient repetitions and gamma correction
• saving/loading layered SVG as you would do with OpenRaster or LazPaint

[lainz]

Seems that it can't find the font I'm using.

This is the SVG file: test.zip

Screenshots in inkscape and the svg image list:

[circular17]

Ok I fixed that. Also added support for generic names like sans-serif etc.

I patched also the font renderers to handle serif and monospace on MacOS.

[lainz]

Thankyou =)

[lainz]

To release bgracontrols I need to change the required version number of bgrabitmap right?

Edit: done I already changed the required version number and did the release. It was 22 days ago when I started this bug request, it was so fast, you did a lot of work so thank you very much =)

[lainz]

I suppose we can close this issue since the idea become reality now, if we want to add more controls a new issue can be created.