Jump to content

Vector Themes


Slice
 Share

455 posts in this topic

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
KBg2Pcs.png
FtfsY0W.png


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

 

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.png

Sample_multiGrads.svg

Edited by Badruzeus
  • Like 1
Link to comment
Share on other sites

rev 4723. I think gradients repaired finally.

Radial

Снимок экрана 2018-10-26 в 23.17.53.png

Linear

Снимок экрана 2018-10-26 в 23.19.57.png

 

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.

  • Like 3
Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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.

 

VvMXk7n.png

 

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

×
×
  • Create New...