Vector Themes

[blackosx]

6 hours ago, Slice said:

This commit is right. I got good image using radialGradients, but yes, something is wrong. If you compile Clover with debug enabled in nanosvg and nanosvgrast then we can see what is the issue.

line 73

#define DEBUG_SVG 0

change to 1

I'll try to test this weekend.

 

6 hours ago, Slice said:

Out af that. Did you propose Clover Theme Manager can show SVG themes set as one file?

Not sure yet.

That CloverThemeTemplateAI.svg is good for a preview of a theme. But if it's to hold ALL icons then there could be maybe 50 icons in there if all linux flavours are present. Do you envisage these icons to be hidden so they don't appear in the preview?

[Slice]

I think they may be hidden and not appear in the preview. visibility="none". Clover will show them when necessary.

In this template they are absent as well as many other elements. I am not decided yet what to do in this case.

[blackosx]

Slice

 

I've tested Clover debug but only saw the following which doesn't help trying to identify the gradient changes.

5:450  0:454  GUI ready
7:565  2:115  image real bounds:  29.500000  29.600006  254.000000  254.000000 
7:578  0:013  scaled width= 224.500000 height= 224.399993
7:580  0:002  Image width=224 heigth=224
7:584  0:003  timing rasterize start tx= 0.000000 ty= 0.000000
7:586  0:002   image will be shifted by [ -52.561248, -52.739433]
7:683  0:096  timing rasterize end
7:695  0:012  create textbuffer
7:698  0:002  font loaded status=Not Found
9:975  2:276  ConnectAll after refresh menu

 

I see I would need to enable deeper debugging statements to understand what's going on but I'm not sure what I'd be looking for and TBH don't have the time.

 

You say commit 4699 was to give you good radialGradients. Can you post your code used for radialGradients?

 

I've tested radialGradient code from here:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient

 

Both Clover 4674 and 4706 show it incorrectly, but I feel 4674 shows it better.

But I see Adobe Illustrator shows it differently to how it's shown on Mozilla's page.

 

Argh.. I understand this is just not simple...

[Slice]

Yes, there are mistakes in svg rasterizing. The project is very complex and uses not my logic.

The svg file for testing

 

Radial.svg.zip

[blackosx]

Thanks for your SVG file.

However, I'm not seeing the same results as you. This is what I see here.

[Slice]

Issues I notice

1. Opacity. May be there is not need in nsvg__unpremultiplyAlpha(dst, w, h, stride); at the end of nanosvgrast.c?

2. Gradients. Not sure if it related to 1.

3. Scale. When I raster a theme then I see large elements.

4. DrowSVGtext shows nothing.

I continue working on these issues.

[Badruzeus]

Sorry, does it mean *.plist file will be replaced by "theme.svg" on Vector theme?

Thanks (ah, ignore the screenshot, it was bad *.plist file from my prev. commit).

 

[Slice]

Yes, theme.plist for PNG themes and theme.svg for SVG themes.

 

The work in progress but vector theme is not currently shown correctly. Wait me or help me.

[Badruzeus]

Looks good here with "radialGradient", Sample.svg exported using Gravit Designer.

Export options: Retain attributes and add IDs [via Clover r4714]

Sample_Gravit.zip

 

Edited October 19, 2018 by Badruzeus

[Badruzeus]

Oops, I just got what @blackosx meant with "..not simple."

Two objects or more with layer's arrangement breaking "Gradient".

[Slice]

Show, please, the SVG file.

[Badruzeus]

17 minutes ago, Slice said:

Show, please, the SVG file.

Here is..

Sample_more.zip

[Slice]

On 10/19/2018 at 5:08 PM, Badruzeus said:

Here is..

Sample_more.zip

I fix this but Clover is not ready yet

[Badruzeus]

On 10/22/2018 at 11:47 AM, Slice said:

I fix this but Clover is not ready yet

OK, thanks @Slice for r4720, above "radialGradient" looks as it is. I just tried with more complex gradients (linear, radial) at a same time but it seems not ready yet, or it' s just my bad svg design.

Sample_multiGrads.svg

Edited October 23, 2018 by Badruzeus

[Slice]

Not ready yet. I still can't catch good gradient transform when shapes transformed too.

[Slice]

rev 4723. I think gradients repaired finally.

Radial

Linear

 

I make it very different from initial nanosvg and my method is times faster.

 

There is one feature lack: focus of Radial Gradient is not implemented initially.

Comments by Mikko

		// TODO: spread modes.
		// TODO: plenty of opportunities to optimize.
		// TODO: focus (fx,fy)

Hope later I will make this but there is complex mathematics.

 

Other remaining problem is a distance between the spheres. It is not as designed.

And a feature for future (  ). I can implement gradient dithering. Later.

 

Otherwise we can account SVG rasterization as complete. So begin to parse a theme.svg.

[blackosx]

Thanks for your continued work here slice.

A quick test shows better results with your latest commit.

 

I'll continue my work with the SVG icons.

Edited October 26, 2018 by blackosx

[Slice]

Images are too light? Strange.

Simple test

TwoRect.svg

[blackosx]

Looks pretty good to me slice.

 

I've conducted a proper colour test and almost 100% perfect.

 

 

Sample.svg

[Slice]

Thanks! The difference occured 127-128, no more. 

 

[Slice]

9 hours ago, blackosx said:

Looks pretty good to me slice.

 

No crest square must be darker. Colors should be subtructed, not added.

 

 

Sample.svg

 

[Slice]

Rev 4725. Vector theme can be used. 

The problem is to draw it so that Clover can render 1:1 as designed.

I have not good result.

 

Instructions are not ready, briefly:

1. Create a folder with new name

/EFI/CLOVER/themes/MyNewTheme

2. Place "Theme.svg" inside. The name is exact this.

3. It should be looked by Safari as theme preview.

4. Use as simple SVG language as possible. Avoid multilevel styles and transformations.

5. Write into config.plist

GUI->theme=MyNewTheme

6. Test.

 

[Slice]

13 hours ago, Slice said:

No crest square must be darker. Colors should be subtructed, not added.

[blackosx]

This is what I see in Photoshop when viewing the SVG on dark background and white background.

Left side is original SVG, right side is screenshot from clover gui.

 

 

Centre square when the 50% green is overlaid on the red is good and any visual differences is due to optical illusion.

 

50% green is different in Clover due to the way it's being blended with the background.

 

[blackosx]

12 hours ago, Slice said:

Rev 4725. Vector theme can be used. 

The problem is to draw it so that Clover can render 1:1 as designed.

I have not good result.

 

Instructions are not ready, briefly:

1. Create a folder with new name

/EFI/CLOVER/themes/MyNewTheme

2. Place "Theme.svg" inside. The name is exact this.

3. It should be looked by Safari as theme preview.

4. Use as simple SVG language as possible. Avoid multilevel styles and transformations.

5. Write into config.plist

GUI->theme=MyNewTheme

6. Test.

 

What structure does the Theme.svg need to have?

 

I'm testing with simple attached .svg file but clover debug shows it's not finding any icons inside the file?

1:725  0:005  === [ InitTheme ] =========================================
1:907  0:181  Theme view-bounds: w=1786 h=1116 units=px
1:911  0:004  using scale  0.688110
1:929  0:017  icon Background width= 0.000000 height= 0.000000
1:933  0:004  begin rasterize Background
1:946  0:012  icon Banner width= 0.000000 height= 0.000000
1:950  0:004  begin rasterize Banner
1:954  0:004  parsed banner->width=0
1:958  0:004  search for icon name func_about
1:964  0:005  icon func_about width= 0.000000 height= 0.000000
1:968  0:003  begin rasterize func_about
1:972  0:004  search for icon name func_options
1:977  0:005  icon func_options width= 0.000000 height= 0.000000
1:982  0:004  begin rasterize func_options
1:986  0:004  search for icon name func_clover
1:998  0:012  icon func_clover width= 0.000000 height= 0.000000
2:002  0:004  begin rasterize func_clover
2:006  0:004  search for icon name func_secureboot
2:012  0:005  icon func_secureboot width= 0.000000 height= 0.000000
2:016  0:004  begin rasterize func_secureboot
2:020  0:004  search for icon name func_secureboot_config
2:026  0:005  icon func_secureboot_config width= 0.000000 height= 0.000000
2:030  0:004  begin rasterize func_secureboot_config
2:035  0:004  search for icon name func_reset
2:047  0:012  icon func_reset width= 0.000000 height= 0.000000
2:052  0:004  begin rasterize func_reset
2:056  0:004  search for icon name func_shutdown
2:062  0:005  icon func_shutdown width= 0.000000 height= 0.000000
2:067  0:004  begin rasterize func_shutdown
2:072  0:005  search for icon name func_help
2:078  0:005  icon func_help width= 0.000000 height= 0.000000
2:081  0:003  begin rasterize func_help
2:086  0:005  search for icon name tool_shell
2:092  0:005  icon tool_shell width= 0.000000 height= 0.000000
2:104  0:011  begin rasterize tool_shell
2:108  0:004  search for icon name tool_part
2:115  0:006  icon tool_part width= 0.000000 height= 0.000000
2:120  0:004  begin rasterize tool_part
2:124  0:004  search for icon name tool_rescue
2:131  0:006  icon tool_rescue width= 0.000000 height= 0.000000
2:138  0:006  begin rasterize tool_rescue
2:143  0:005  search for icon name pointer
2:150  0:006  icon pointer width= 0.000000 height= 0.000000
2:154  0:004  begin rasterize pointer
2:166  0:011  search for icon name vol_internal
2:173  0:007  icon vol_internal width= 0.000000 height= 0.000000
2:179  0:005  begin rasterize vol_internal
2:184  0:005  search for icon name vol_external
2:189  0:005  icon vol_external width= 0.000000 height= 0.000000
2:194  0:004  begin rasterize vol_external
2:201  0:007  search for icon name vol_optical
2:207  0:005  icon vol_optical width= 0.000000 height= 0.000000
2:210  0:003  begin rasterize vol_optical
2:214  0:003  search for icon name vol_firewire
2:225  0:011  icon vol_firewire width= 0.000000 height= 0.000000
2:229  0:004  begin rasterize vol_firewire
2:233  0:004  search for icon name vol_clover
2:240  0:006  icon vol_clover width= 0.000000 height= 0.000000
2:245  0:004  begin rasterize vol_clover
2:249  0:003  search for icon name vol_internal_hfs
2:259  0:009  icon vol_internal_hfs width= 0.000000 height= 0.000000
2:264  0:005  begin rasterize vol_internal_hfs
2:269  0:005  search for icon name vol_internal_apfs
2:284  0:014  icon vol_internal_apfs width= 0.000000 height= 0.000000
2:289  0:005  begin rasterize vol_internal_apfs
2:293  0:003  search for icon name vol_internal_ntfs
2:304  0:011  icon vol_internal_ntfs width= 0.000000 height= 0.000000
2:309  0:004  begin rasterize vol_internal_ntfs
2:314  0:005  search for icon name vol_internal_ext3
2:321  0:006  icon vol_internal_ext3 width= 0.000000 height= 0.000000
2:324  0:002  begin rasterize vol_internal_ext3
2:328  0:004  search for icon name vol_recovery
2:340  0:011  icon vol_recovery width= 0.000000 height= 0.000000
2:345  0:004  begin rasterize vol_recovery
2:349  0:004  search for icon name logo
2:356  0:006  icon logo width= 0.000000 height= 0.000000
2:360  0:004  begin rasterize logo
2:366  0:005  search for icon name selection_small
2:374  0:008  icon selection_small width= 0.000000 height= 0.000000
2:379  0:005  begin rasterize selection_small
2:384  0:005  search for icon name selection_big
2:391  0:006  icon selection_big width= 0.000000 height= 0.000000
2:398  0:007  begin rasterize selection_big
2:401  0:002  search for os_mac
2:407  0:005  icon os_mac width= 0.000000 height= 0.000000
2:408  0:001  begin rasterize os_mac
2:410  0:001  search for os_tiger
2:414  0:004  icon os_tiger width= 0.000000 height= 0.000000
2:418  0:003  begin rasterize os_tiger
2:422  0:004  search for os_leo
2:427  0:004  icon os_leo width= 0.000000 height= 0.000000
2:431  0:003  begin rasterize os_leo
2:435  0:003  search for os_snow
2:440  0:005  icon os_snow width= 0.000000 height= 0.000000
2:451  0:010  begin rasterize os_snow
2:452  0:001  search for os_lion
2:456  0:004  icon os_lion width= 0.000000 height= 0.000000
2:460  0:003  begin rasterize os_lion
2:465  0:004  search for os_cougar
2:470  0:005  icon os_cougar width= 0.000000 height= 0.000000
2:475  0:004  begin rasterize os_cougar
2:480  0:005  search for os_mav
2:487  0:006  icon os_mav width= 0.000000 height= 0.000000
2:490  0:003  begin rasterize os_mav
2:494  0:003  search for os_yos
2:511  0:016  icon os_yos width= 0.000000 height= 0.000000
2:517  0:006  begin rasterize os_yos
2:525  0:007  search for os_cap
2:534  0:008  icon os_cap width= 0.000000 height= 0.000000
2:541  0:006  begin rasterize os_cap
2:546  0:005  search for os_sierra
2:556  0:009  icon os_sierra width= 0.000000 height= 0.000000
2:561  0:004  begin rasterize os_sierra
2:565  0:004  search for os_hsierra
2:571  0:005  icon os_hsierra width= 0.000000 height= 0.000000
2:576  0:005  begin rasterize os_hsierra
2:586  0:010  search for os_moja
2:593  0:007  icon os_moja width= 0.000000 height= 0.000000
2:598  0:004  begin rasterize os_moja
2:603  0:005  search for os_linux
2:609  0:006  icon os_linux width= 0.000000 height= 0.000000
2:614  0:004  begin rasterize os_linux
2:619  0:005  search for os_freebsd
2:623  0:003  icon os_freebsd width= 0.000000 height= 0.000000
2:627  0:004  begin rasterize os_freebsd
2:630  0:003  search for os_freedos
2:637  0:006  icon os_freedos width= 0.000000 height= 0.000000
2:647  0:010  begin rasterize os_freedos
2:653  0:005  search for os_win
2:659  0:006  icon os_win width= 0.000000 height= 0.000000
2:663  0:004  begin rasterize os_win
2:669  0:005  search for os_vista
2:675  0:006  icon os_vista width= 0.000000 height= 0.000000
2:679  0:004  begin rasterize os_vista
2:683  0:003  search for radio_button
2:688  0:005  icon radio_button width= 0.000000 height= 0.000000
2:692  0:003  begin rasterize radio_button
2:695  0:002  search for radio_button_selected
2:708  0:012  icon radio_button_selected width= 0.000000 height= 0.000000
2:712  0:004  begin rasterize radio_button_selected
2:717  0:004  search for checkbox
2:723  0:005  icon checkbox width= 0.000000 height= 0.000000
2:728  0:005  begin rasterize checkbox
2:732  0:004  search for checkbox_checked
2:737  0:005  icon checkbox_checked width= 0.000000 height= 0.000000
2:743  0:005  begin rasterize checkbox_checked
2:748  0:004  Using vector theme 'BGM_SVG' (EFI\CLOVER\themes\BGM_SVG)

 

Theme.svg