Icon Collections for DOCKER FOLDER Plugin

[hernandito]

Hi Guys,

 

I really love GuildDarts Docker Folder plugin.

 

 

I am stating this thread so that people can share their icons for the Docker Folders. Below I have pasted my first Collection. I hope to create more.

 

Please feel free to share, add requests, ideas, suggestions, etc.

 

A million thanks to @GuildDarts for creating such a fantastic and useful plugin.

 

Thanks,

 

H.

 

 

Edited May 24, 2020 by hernandito

[hernandito]

UPDATE: 6/8/2020

 

Animated Icons

@josiah and I have been collaborating on animating the icons in my collections. For the ease of keeping current, and doing updates, the both of us have created Github repos. You can think of Josiah's icons as the initial animated icons, my Github are the same icons (plus a couple of my own) that are in the various color schemes.

 

Josiah is taking requests for animating icons. But you have to provide him with the vector artwork. If you are NOT able to create the vector icons, I am happy to take on those requests. Please leave a post on this thread with your idea.

 

So I invite you to visit both our Githubs so you can the see icons in action:

 

Josiah: https://github.com/ground7/unraid-animated-svgs

Mine: https://github.com/hernandito/unRAID-Docker-Folder-Animated-Icons---Alternate-Colors

 

If static icons are more you cup of tea, the below icons are static png images.

 

Icon Collection 1

 

This is my first try at a Category Docker Folder icons. I have done it in two color versions. Please understand that I only use the "Light Theme". I am not sure how these would look like on the Dark Theme.

 

 

 

 

I am pasting a zip file that contains:

• Icons at 128px x 128px
• The layered Photoshop file for anyone to modify
• Preview image of the collection (image above. Anyone w/ rudimentary PS skills can easily create variations.

 

I would love constructive criticism.... please don't say you like if you don't. If you don't please tell me why.

 

Thanks,

 

H.

 

EDITS:

5/24/20 - COMPLETED

• Planning to add icons for Search, Grafana, NZBs. Completed 5/25/20
• Planing to add pale yellow background color options. Completed 5/25/20

 

 

1/11/224 - COMPLETED

• Adden Jellyfin icon

 

 

 

C1-128px.zip

Edited January 11 by hernandito

[GooseGoose]

I am loving the icons, they look great in both colours in dark mode! Although i think i am going to go with yellow. I don't think that i have any criticism. Great work to complement a great plugin! 

[hernandito]

Icon Collection 1a

 

This is my first try at a Category Docker Folder icons. I have done it in two color versions. Please understand that I only use the "Light Theme". I am not sure how these would look like on the Dark Theme.

 

I am pasting a zip file that contains:

• Icons at 128px x 128px
• The layered Photoshop file for anyone to modify
• Preview image of the collection (image above. Anyone w/ rudimentary PS skills can easily create variations.

I would love constructive criticism.... please don't say you like if you don't. If you don't please tell me why.

 

Thanks,

 

H.

 

PS: Icons are much better quality than what the image above shows. I think the forum over-compresses the jpgs.

[hernandito]

Collection 1a Black

 

A darker version of the grey icon collection above.

 

 

EDIT: Added Gaming and Multimedia icons

 

 

C1ab-128px.rar

Edited May 27, 2020 by hernandito

[DarphBobo]

Sweet.  But while it may now be defunct, I think that the Pirate Bay logo really conveys the meaning of what containers may be within the folder.

[hernandito]

1 hour ago, DarphBobo said:

Sweet.  But while it may now be defunct, I think that the Pirate Bay logo really conveys the meaning of what containers may be within the folder.

Pirate Bay’s logo was a ship... 😛

[Josiah]

I made some svg icons because I wanted to be extra and animate my folders. Here's the set:

aggregators.svg books.svg cloud.svg downloaders.svg home-automation.svg indexers.svg ldap.svg media.svg utilities.svg

 

If you want to change the colors, it's super easy. Just open it in a text editor and give some of the rgb(x,x,x) new values.

Edited May 26, 2020 by Josiah

[GooseGoose]

super cool. I love the home automation one!

 

On a side note what do you use for LDAP? I really want to setup active directory (I used microsoft active directory at work 5 years ago and linked it) to manage my home network but thinking microsoft charges and not having had the time to research alternatives that much. 

 

[Josiah]

I use openldap combined with phpldapadmin for a gui interface. I use ldap-auth for sites that don't have ldap integration (nearly everything I have that is user facing has it though). I use nextcloud for ldap password reset for users combined with the external sites plugin to show links to my users if they are in the ldap group for certain sites. Like so:

I have a group for media stuff like emby and ombi, one for books and manga, one for home users for shared folders and grocy, then some more specific ones for guac vms.

 

I went down the rabbit hole last Christmas to get it all working. I saw that the linuxserver.io group had put out a ldap-auth container with hooks for it in their commonly used let's-encrypt container. They only had a guide on how to set it up with AD as far as I could find, so I ended up pioneering the openldap/phpldapadmin integration on unraid.

 

I found a couple of really well maintained docker containers by osixia and implemented those. They were fairly complicated to set up, but I laid out the process as best as I could in the unraid templates that I made. The templates are in community applications now, so you can try setting them up.

[GooseGoose]

2 hours ago, Josiah said:

I use openldap combined with phpldapadmin for a gui interface. I use ldap-auth for sites that don't have ldap integration (nearly everything I have that is user facing has it though). I use nextcloud for ldap password reset for users combined with the external sites plugin to show links to my users if they are in the ldap group for certain sites. Like so:

I have a group for media stuff like emby and ombi, one for books and manga, one for home users for shared folders and grocy, then some more specific ones for guac vms.

 

I went down the rabbit hole last Christmas to get it all working. I saw that the linuxserver.io group had put out a ldap-auth container with hooks for it in their commonly used let's-encrypt container. They only had a guide on how to set it up with AD as far as I could find, so I ended up pioneering the openldap/phpldapadmin integration on unraid.

 

I found a couple of really well maintained docker containers by osixia and implemented those. They were fairly complicated to set up, but I laid out the process as best as I could in the unraid templates that I made. The templates are in community applications now, so you can try setting them up.

Awesome thanks! I will try to get it working! You have given me hope! Is it alright if i ask you some questions? i will take it off this thread though

Edited May 26, 2020 by GooseGoose

[Josiah]

13 minutes ago, GooseGoose said:

Awesome thanks! I will try to get it working! You have given me hope! Is it alright if i ask you some questions? i will take it off this thread though

Yeah that's fine.

[hernandito]

On 5/26/2020 at 12:49 AM, Josiah said:

I made some svg icons because I wanted to be extra and animate my folders. Here's the set:

aggregators.svg 14.16 kB · 4 downloads books.svg 19.79 kB · 3 downloads cloud.svg 7.53 kB · 3 downloads downloaders.svg 2.46 kB · 2 downloads home-automation.svg 8.03 kB · 5 downloads indexers.svg 7.8 kB · 2 downloads ldap.svg 10.99 kB · 2 downloads media.svg 3.65 kB · 1 download utilities.svg 7.38 kB · 2 downloads

 

If you want to change the colors, it's super easy. Just open it in a text editor and give some of the rgb(x,x,x) new values.

Oooohhhh man... I did not know you could do that.

 

That is the coolest. Puts mine to shame.

[Josiah]

2 hours ago, hernandito said:

Oooohhhh man... I did not know you could do that.

 

That is the coolest. Puts mine to shame.

Thanks man. Yours was definitely more comprehensive though. I only made icons for my folders.

 

I made them svgs originally to take advantage of the hover effect so it would only animate on mouseover: aggregators-hover.svg. However, it's not working in my unraid GUI for whatever reason, so I just made it so they always animate. You can do the same thing with a gif, but a gif would be a lot harder to change the colors on. You can do super complex stuff with gifs a lot easier though. For instance, I wanted a spinning globe for a remote folder. Doing that with an svg is kind of a nightmare if you want it to have the depth necessary to look like it's actually spherical, so I just made a gif:

 

 

Gifs are also not scalable, and a decent size larger, but they are a lot more common and easier to create with free tools.

 

If there are a couple more super common categories people want, I don't mind making a few more animated icons in the same style. If I get a couple votes for an icon category, I'll give it a shot.

 

Edited May 27, 2020 by Josiah

[GuildDarts]

45 minutes ago, Josiah said:

I made them svgs originally to take advantage of the hover effect so it would only animate on mouseover

Hey it really love your icons the animations are just so cool, my only thing is that i feel it gets a bit to busy with them animating all the time.
When i saw your original intent was to only animate on hover i was like please please can i have.
After a bit of playing found out that if you use and object instead of img it will animate on hover.
Will make it use object instead of img for svgs next update 

Edited May 28, 2020 by GuildDarts

[Josiah]

3 minutes ago, GuildDarts said:

Hey it really love your icons the animations are just so cool, my only thing is that i feel it gets a bit to busy with them animating all the time.
When i saw your original intent was to only animate on hover i was like please please can i have.
After a bit of playing found out that if you use and object instead of img it will animate on hover.
Will make it use object instead of img for svgs next update 

Sweet. I'll go ahead and update them to animate on hover.

[Josiah]

Alright here is the hover set. I tweaked the animations on a couple of them, like the cloud drifts a little more than before. This set will freeze in place when you stop hovering, but I'm going to make a separate set that will reset in case anyone prefers that behavior.

cloud-hover.svgdownloaders-hover.svgmedia-hover.svgaggregators-hover.svghome-automation-hover.svgldap-hover.svgutilities-hover.svgindexers-hover.svgbooks-hover.svg

Edited May 28, 2020 by Josiah

[Josiah]

Here is the variant that resets. 

aggregators-hover-reset.svg utilities-hover-reset.svg ldap-hover-reset.svg home-automation-hover-reset.svg indexers-hover-reset.svg cloud-hover-reset.svg media-hover-reset.svg downloaders-hover-reset.svgbooks-hover-reset.svg

Edited May 28, 2020 by Josiah

[hernandito]

Hi Joslah,

 

I have zero experience creating animated SVG. I want your thoughts/opinions. Taking my icon lists above, it would be great to create a single consistent generic color background (circle, square, blank, rounded square). Then the icon part would be animated. Please refer to the image below on how I think each icon could be animated.

The whole idea would be that the animations are slow and/or subtle so the whole page does not look like a blinking Christmas tree.

 

Each of the icon shapes would need to be vector-ized. This much I know and I know what to do. When it comes to the animation, I am clueless.

 

Questions:

• Do you think the animations I describe are possible in SVGs?
• Would you be interested to help in creating the animation part? I can handle all the raster stuff.
• If you are not able, could you point me in the right direction to get started.

I think the goal would be to do a consistent collection in the same style/color scheme. Pertinent Icons can be continually added to the collection based on relevant requests...

 

Fun stuff.

 

Thank you!

 

H.

 

 

[GooseGoose]

I am afraid i know less than you but i would really like that. I am actually still using your icon pack as it covers more of my bases and i really like the consistent look across all of the icons. I really like the idea of the pirate and other eye icon blinking. I think it would be cool to get both of the clouds moving, maybe at different speeds or directions. For the database one maybe have the discs separate and come back together? 

 

As far as the background i do quite like the one that looks like a folder (it is what i am using currently) but i do also like the square ones that you have made. 

 

Thanks for all of your hard work! 

[hernandito]

The animations need to be subtle. I don’t want my Docker tab to feel something like this:

 

https://www.cameronsworld.net/

 

😁

[GooseGoose]

I definitely agree! Maybe i didn't describe it very well but i wasn't picturing large movements

[hernandito]

11 hours ago, GooseGoose said:

I definitely agree! Maybe i didn't describe it very well but i wasn't picturing large movements

Sorry.... I did not mean to criticize what you said... I wanted to reiterate my idea by showing a "bad" (but funny) example.

[Josiah]

21 hours ago, hernandito said:

 

 

Each of the icon shapes would need to be vector-ized. This much I know and I know what to do. When it comes to the animation, I am clueless.

 

Questions:

• Do you think the animations I describe are possible in SVGs?
• Would you be interested to help in creating the animation part? I can handle all the raster stuff.
• If you are not able, could you point me in the right direction to get started.

So, I can easily animate most of them to do what you've described, however, some will really depend on the vectorization. For instance, all the ones where the background image is doing something, you'd need to make a layer, where the rear image was the full vector but just obscured (in the case of the two clouds the front cloud needs to be surrounded by a thick dark outline with the full other cloud hidden beneath). If you can do that, then I don't see a problem making most of these.

 

Some potentially problematic ones: blinking eye (it's a kind of morphing which is possible but requires moving specific points which can be a huge pain depending on how it's been vectorized), winking pirate (should be much easier but same sort of deal), and sliding database (I don't know how to make it change layers like that but I can look into it). Scratch that it sounds like you just wanted it move it on the back layer upon rereading.

 

For everything else, so long as you give me a properly vectorized image, I don't see a problem.

 

As far as I know, to animate svgs, you can either write the code (hard) or use a program (free ones all suck I think but maybe you can find one). The clean up vectorization can be done easily with inkscape which is what I use.

Edited May 29, 2020 by Josiah

[hernandito]

12 hours ago, GooseGoose said:

I definitely agree! Maybe i didn't describe it very well but i wasn't picturing large movements

Sorry.... I did not mean to criticize what you said... I wanted to reiterate my idea by showing a "bad" (but funny) example.