blackosx Posted November 29, 2018 Share Posted November 29, 2018 (edited) Vector themes for Clover are new and currently still under development. Setting out to re-create my BGM theme to vector I realised there was some learning needed in order to create a theme.svg file for Clover to use. As SVG files are text based, I quickly realised that they could be manipulated from the command line and looking at the Clovy theme I decided to break it down in to parts for creating other themes. As a result, I've been working on Clover SVG Theme Builder https://bitbucket.org/blackosx/cloversvgthemebuilder Current Version: 0.4.5 Overview The idea is to allow a theme designer to work on individual images and not worry about the required overall file structure which Clover expects. The designer can populate a Theme directory with a settings file and individual .svg files and let the script generate a final theme.svg file for using with Clover. I've created a basic sample theme to help demonstrate the script.https://bitbucket.org/blackosx/cloversvgthemebuilder/downloads/Theme.zip The Theme directory contains Adobe Illustrator and SVG files for each image in the required folder structure for the script. Using this sample theme, the script will generate this theme from the files. The idea is these can be used to build new themes and I'm currently using it to build my BGM_SVG theme. I can imagine far more complicated themes will be generated in the future, but for now I hope this may serve to help kickstart basic vector theme development. Notes: • Clover's SVG theme development is still underway and things are likely to change so this script and it's supporting template file will need to change with Clover. • I've only tested this using SVG files saved from Adobe Illustrator using the following settings, for files from other apps may need added support. • For the script to correctly inject SVG code in to the template, each SVG image must contain a group of elements. • Font files are currently not included in the final theme file but this can be an option. • In time, maybe other templates can be added which have different layouts?? These are early days, so I'll update this post when necessary. Edited June 17, 2020 by blackosx Add tags 11 Link to comment Share on other sites More sharing options...
apianti Posted November 30, 2018 Share Posted November 30, 2018 (edited) Yeah, this could also be easily solved by implementing the use element. The problem is that nanosvg is pretty incomplete, and actually straight up wrong about a lot of stuff... EDIT: Actually this appears to be implemented but unsure if it actually works. EDIT2: Nevermind it's not properly implemented... I should have known better than to assume it was. lol Edited November 30, 2018 by apianti 1 Link to comment Share on other sites More sharing options...
blackosx Posted November 30, 2018 Author Share Posted November 30, 2018 Thanks for the info. I didn't know about the use element until now. How do you know all the stuff you know? So yeah, referencing an identifier from an external file is exactly the same kinda thing I'm doing here. Though my script does ensure each id is unique as I discovered issues when multiple instances of an id were contained in the same file. 1 Link to comment Share on other sites More sharing options...
apianti Posted November 30, 2018 Share Posted November 30, 2018 (edited) I research stuff before I talk about it and since I already researched which format for drawing would be the best to use for v3 as per properly scaling across many different display sizes and not look terrible, I have been researching SVG a lot. Also, yeah, multiple instances of the same identifier is not a properly formatted SVG. The difference is that the use element could reference any file structure at all that the theme designer decided on, except for of course needing theme.svg. Having multiple same identifiers in different files is totally acceptable and I do not think that the identifiers are imported because you can use the same identifier to import multiple times, also from multiple files. If I inspect the DOM tree in a browser there are no identifiers given to use imported elements (unless you explicitly assign an id to the use element doing the importing/duplicating). However, there is one drawback, you have to create a separate CSS file as CSS is not duplicated by the use element, which means you would need to have a <?xml-stylesheet type="text/css" href="style.css" ?> or <link rel="stylesheet" type="text/css" href="style.css" /> element in all your SVGs to properly style everything. Actually, that's something I'm not 100% sure about, you may only need it in the theme.svg. Most likely that is the only place when I think about it, since everything will have to be styled by CSS. You can always have multiple CSS files as well if they become unwieldy or you want to store them directly with each file or something, but once again this leaves the design AND structure up to the designer. This should make it infinitely easier to create themes knowing you only need to have theme.svg and specifically named items for the GUI. However, it is possible to even remove the second restriction with javascript, since it is supported by SVG as well. There would then have to be a DOM like structure prepared by the GUI but this allows another cool feature, effects and animation by code. No need to duplicate each and every frame of an animation. EDIT: Javascript also allows the theme to decide how and where to draw everything, and when to initiate the booting through the DOM, like say after animating a full screen fade away. Any information that would be needed would be provided by the DOM and retrieved by the theme to fulfill what it needs to do like create entries, get menu information, tools, etc. Themes could have unique menus if they wanted, and even perform GUI stuff like a built in shell, pretty much anything that you wanted. EDIT2: There's actually a second drawback that I just realized, either anything you use import will (should) not have identifiers so you would have to use classes and stuff to actually do anything or it does import child identifiers which brings the same naming conflicts. Using classes could possibly cause a naming conflict similar to multiple identifiers, luckily though this is acceptable and only the last thing provided for a class would be used. However, in javascript there may be unintended side effects if you are not careful since you would have to most likely use classes to represent what you wanted to deal with. I think you should see though that this basically creates a website, and the same rules apply to coding a website... EDIT3: Attributes still override CSS and are imported so if you use attributes to style everything then that would be fine. I need to look into the importing child identifiers, as I can't seem to find any information about it. Although it would be easy to test by creating some SVGs and using them in multiple browsers. I don't have time for that right now, nor is it really relevant currently since I'm talking entirely hypothetically about all of this since none of it is implemented, lol. It could be implemented in anyway that is needed in the end... EDIT4: Oh yeah, forgot you can totally do a link element to import a stylesheet too, changed above. Edited December 1, 2018 by apianti 1 Link to comment Share on other sites More sharing options...
blackosx Posted December 1, 2018 Author Share Posted December 1, 2018 Thanks for the details. It really is amazing when you look at the overall possibilities! Had you planned a lot of that for Clover v3? 1 Link to comment Share on other sites More sharing options...
apianti Posted December 1, 2018 Share Posted December 1, 2018 (edited) Yeah, pretty much. I think I made some posts about it somewhere, either in the general discussion or the v3 topic. I wrote a language parser for v3 so that it would be easier to parse text based formats, like xml, plist, svg, and programming languages with the same object interface. As it stands now, v2 basically parses everything independently even though both plist and svg are just xml with more rules enforcing the structure. Also, I wanted to create a more fluid settings structure that is tree based, instead of the current large memory structure. This allows the current settings to just be converted to and from a plist and that can be pushed onto the datahub to show the exact current configuration instead of regenerating it from partial memory structure like genconfig does. My time is just so limited because by the time I get free time, I'm super exhausted or sick from dealing with lights or screens from my migraines and vertigo. I also have lots of trouble sleeping from pain so I frequently black out when I'm doing things and just wake up in random places with no memory of what happened. This entire comment is super off topic for this thread though, lol. EDIT: I guess I forgot the most important part, redesigning the GUI to allow better management of resources and directly drawing to the video buffer from another thread like the OSes do to prevent the random little freezes that happen when certain events happen. As well as starting the GUI immediately and then populating what's going on with everything so that there is very little time wasted just being at a blank screen. I haven't gotten this far yet, it's pretty much where I'm at now but I have to implement svg in order to actually have anything useful to draw and that takes a concerted amount of effort to design before hand to prevent having the same problem that v2 does which there are so many pieces of dead code and its impossible to tell what needs to be cleaned and what doesn't work and what some code actually even does because there are no comments, or confusing comments. There are plenty of comments from slice and I wondering what entire parts of code are doing/for. Edited December 1, 2018 by apianti 1 Link to comment Share on other sites More sharing options...
blackosx Posted January 11, 2019 Author Share Posted January 11, 2019 (edited) I've been updating and improving CloverSvgThemeBuilder to now include some support for using symbols and to also better handle generating either a day or night preview. I've also updated the sample theme which the script downloads. The script is now at version 0.2.7 and can be found at https://bitbucket.org/blackosx/cloversvgthemebuilder/src/master/ I'm aware the script is not perfect (yet), has bugs and doesn't do much error checking either but all can be improved in time. To also help others with vector themes, I've uploaded the Adobe Illustrator and resulting SVG files for BGM_SVG. There are two versions, one which uses individual images and a second which uses symbols for Functions, OSBadges, Volumes, Checkbox and RadioButtons. Both versions of the theme can be built with CloverSvgThemeBuilder. https://bitbucket.org/blackosx/cloversvgthemebuilder/downloads/ On 12/1/2018 at 11:12 PM, apianti said: Yeah, pretty much. I think I made some posts about it somewhere, either in the general discussion or the v3 topic. I wrote a language parser for v3 so that it would be easier to parse text based formats, like xml, plist, svg, and programming languages with the same object interface. As it stands now, v2 basically parses everything independently even though both plist and svg are just xml with more rules enforcing the structure. Also, I wanted to create a more fluid settings structure that is tree based, instead of the current large memory structure. This allows the current settings to just be converted to and from a plist and that can be pushed onto the datahub to show the exact current configuration instead of regenerating it from partial memory structure like genconfig does. My time is just so limited because by the time I get free time, I'm super exhausted or sick from dealing with lights or screens from my migraines and vertigo. I also have lots of trouble sleeping from pain so I frequently black out when I'm doing things and just wake up in random places with no memory of what happened. This entire comment is super off topic for this thread though, lol. EDIT: I guess I forgot the most important part, redesigning the GUI to allow better management of resources and directly drawing to the video buffer from another thread like the OSes do to prevent the random little freezes that happen when certain events happen. As well as starting the GUI immediately and then populating what's going on with everything so that there is very little time wasted just being at a blank screen. I haven't gotten this far yet, it's pretty much where I'm at now but I have to implement svg in order to actually have anything useful to draw and that takes a concerted amount of effort to design before hand to prevent having the same problem that v2 does which there are so many pieces of dead code and its impossible to tell what needs to be cleaned and what doesn't work and what some code actually even does because there are no comments, or confusing comments. There are plenty of comments from slice and I wondering what entire parts of code are doing/for. I totally missed this post! Yeah OT, but thanks for all the info. Clover V3 sounds like it could/would be amazing but I understand the amount of work involved especially when you're working alone. Spare time is hard to find these days and to dedicate to such a large project is a massive undertaking. Add your health issues on top and no wonder you're exhausted. All we can do is what we can, and when we can. Regards Edited January 11, 2019 by blackosx 1 Link to comment Share on other sites More sharing options...
blackosx Posted January 15, 2019 Author Share Posted January 15, 2019 The script is now at version 0.3.2 and can be found at https://bitbucket.org/blackosx/cloversvgthemebuilder/src/master/ Changelog - Allow just two checkboxes, instead of expecting night icons also. - Include Selection Indicator. - Can now process multiple themes from Themes directory. - Improved logging. 1 Link to comment Share on other sites More sharing options...
insanelyDeepak Posted February 8, 2019 Share Posted February 8, 2019 Great it's time to make vector themes Thank you @blackosx Link to comment Share on other sites More sharing options...
chonylee Posted June 17, 2020 Share Posted June 17, 2020 (edited) Hi, blackosx. First, thanks for your scripts.Nice！ but when I use this script, I load the converted svg font. An error occurs, which prevents the svg theme file from being previewed, indicating that the end identifier "</defs>" is missing, so I added it manually after tag "</font >", And the problem is solved. Can you fix it？ Edited June 17, 2020 by chonylee 1 Link to comment Share on other sites More sharing options...
blackosx Posted June 17, 2020 Author Share Posted June 17, 2020 Thanks for the report. Done. Check v0.4.5 Link to comment Share on other sites More sharing options...
Recommended Posts