Icon Collections for DOCKER FOLDER Plugin


40 posts in this topic Last Reply

Recommended Posts

1 hour ago, hernandito said:

That would be awesome.... I have briefly looked at the whole process and I understand the layers and such... I have already vectorized the bulk of them. I have separated them into individual elements. For the "database" I created the solid shape (in yellow) behind the front element. For the blinking eyes I think you can copy and deform the element into something resembling the eye closed. In my quick research (a YouTube video), I believe you can select one on the shapes and mask other elements that are outside the shape.

 

 

-Docker-Folder5.jpg.f6f4f8f2b5c84bea84b2360487305745.jpg

The key would be to create a common background. As an example, your Download.svg has a green circle with the white arrow. If we were to make this the "standard" style and color scheme, all icons would have a green circle and everything should happen inside it. With most elements being white; unless the idea is we are changing colors. I don't know that the green circle would be the right style... I also don't know how easy it would be to create variations of the style; like make a new scheme with a blue square and black inner elements for example. 

 

I am not married to any of my color variations so far. @GooseGoose likes the square "folder style". I think a circle background would be too limiting as the inner animatable elements would be on the small side. Perhaps one of the more neutral versions is best...

 

I am loving this....

 

Thank you!!!!

 

H.

 

So just to give an example of why mine are colored as they are:

image.png.74c02c680960e465f84247885f065dfa.png

 

I like the amount of pop it gives to my otherwise bland dashboard, but I recognize that maybe my taste isn't for everyone. I don't think the background color scheme is too important anyhow seeing as it's very easy for anyone to change afterwards with just a text editor. If we want to pick something though, I don't think it should be black or white so that the default will look good regardless of light/dark theme. Maybe we should make them unraid's orange color. The inside element's should be (in my opinion) white, then black or a lighter/darker version of the background color (used sparingly though so it's easy for people to change the background color).

 

I think you are right about the circles. If we start making a whole bunch of these, it makes it easier to design if you get a little more space in the corners. I personally am not a fan of folders because we get a square to work with and folders are typically rectangular, so it looks stretched to me. If we make it the more natural-looking rectangle though, then we lose space just like the circle. I think the best shape is the rounded square as it gives us the most area to work with but doesn't make it look like we don't know how to use transparency. Alternatively, we can use the circle as an accent and have stuff go outside of it like I did with aggregators. We'd need to be careful with the colors if we do it that way though. I personally think this last one looks best which is why I made my original set the way I did, but this limits the way the inner images can be designed if they stick out at parts (can't have a white or black border).

 

I vote for rounded square with as little use of inner colors that aren't white/black as possible to make the background color easy to change for people (all they would need to do would be to look for the rgb(x,x,x) value in the text file that isn't (0,0,0) or (255,255,255) and change it). We can make exceptions if the point of the animation is to color the inner object.

 

One more thing, one of the things that makes the deform of the large eye harder that's not super obvious is the deform would be slightly curved. It's similar to when I tried making a book flip open. The flip had a slight arch to it, and getting the points on a curve (there's going to be a lot more to deform) to deform on a different curve was pretty tricky. Maybe there's a tool out there to help with this. In any case, I can work on the other ones first.

 

Edit: I think it would look really good if all of the icons were grayscale and then on hover the background turned unraid orange along with whatever other animation we wanted to do. If we do it this way we shouldn't use other color changes in the animation though.

 

Scratch that, until I figure out how to loop some animations but not others.

Edited by Josiah
Link to post
10 minutes ago, hernandito said:

Hi Josiah,

 

Other than the multi-colored version of the icons, I am 100% agreement with your comments. The colors are subjective, and if they are easy to change, we can certainly create variations of the theme.

 

I also agree the rounded squares are the right thing. We want to prove to the world that we indeed know about transparency.

 

I am attaching the icons I have so far... they are in both Illustrator and SVG export from Illustrator. To my icons, we would need to add the rounded rectangle background.

 

Thank you!!!

 

Vectors for SVG.zip 1.17 MB · 0 downloads

Sounds like you might have a few pieces of adobe software. If you have after effects from creative cloud, it can export to svg. I might find a version off the high seas myself to tackle some of the trickier animations that I'm having a hard time doing with the code. Hopefully it doesn't make the svg files a mess though. Some exports are terrible and you basically can't do anything with them from a text editor afterward because it's just a big mess of javascript. I'm not sure if it has the option to just export with css animations, but if it does, and you have after effects, try to use that.

 

Here's a version of the eye blinking that's pretty simplified but I still think looks pretty good. c1ab-eye.svg Let me know what you think. Also, let me know if you think we should use a few different unraid orange colors like the header or stick to the icon colors from: https://unraid.net/

Link to post
17 minutes ago, hernandito said:

Hi... I don't have After Effects... and I have never used it.... only AI, PS and ID.

 

On the blink eye, what if the blink only displays the top eyelid.... eyelid.svg the other paths are turned off.

Yeah I can do that. To help me out, can you make these all different images (so like all the eye parts as one image layered but not together with other icons)? Inkscape is being difficult when I try to delete parts of the svg. Also, adding the background in would be good too.

Edited by Josiah
Link to post
17 minutes ago, hernandito said:

No problem.... give me about 1 hour.

 

Please find link below to download the .ai and .svg of the icons I have so far.

 

https://we.tl/t-QVepFWZOaw

 

I also like your Home Automation Icon. Please include in the collection.

 

Thanks,

 

H.

 

Sweet, that made it a lot easier. Here's the new eye: eye.svg

I'll slowly work on some other ones over the coming days.

Link to post

Alright, here's the set so far. I'll probably just come back and edit this comment till they're all here. I plan on making them three different orange colors to match the unraid orange colors as the defaults.

 

eye.svgcontrol.svgaudio.svgcode.svgship.svgcloud.svgsecurity.svggrafana.svgdash.svggaming.svgmusic.svgdownloads.svg

 

 

 

Edited by Josiah
Added ship/graphana/security/cloud/dash/gaming/music/downloads
Link to post
3 minutes ago, hernandito said:

In looking at the code... I saw in the CDATA section and I removed this:


#egqz9tzsn5ck1 * {animation-play-state: paused !important}

I guess it starts paused...

It looks like svg hover animation does not work with img.
Thats why next version im trying to make them into object for svg so it can animate. Having some issues with it but should be able to get it working ^_^

Link to post
9 hours ago, hernandito said:

I got them working by taking out that line in the code... Works perfectly.

 

 

What GuildDarts means is that the hover CSS animation does not work currently with the Docker Folder plugin because of the way it treats svgs. I've been creating all of the new icons to use hover animations by default still since he is working on supporting it. As you saw, it's quite easy to take out so feel free to have them always animating if you prefer that. I'm still going to be creating with the hover in mind though since it takes extra considerations (like the default frame shouldn't be blank).

 

As an extra, I've added ship and grafana. Ship seems ripe for better color schemes. The flag was a bit tricky. Almost made it white by default, but then it looks like the pirates are surrendering. I tried a couple variations of the slower grafana rotation, but since it's not possible to center it properly without shrinking it, I defaulted to a faster speed which I think makes it look better.

Edited by Josiah
Link to post
4 minutes ago, hernandito said:

As far as colors, the colors I gave the icons is solely so you can distinguish each individual element. They are not the actual colors I propose.

Haha, I know. I meant the colors I used for the ship were ripe for variations. I stuck to the black and white, but I think it could look a lot better if it was other colors.

 

As a side note, I have added a few more icons. I changed up your music one a bit. Hope you like it. If you launch it in a browser it'll be able to render the "off-screen" bits and it'll look a bit weird, but it should look good when it can't show that portion as an unraid folder.

Link to post

@Josiah an update about animating on hover ^_^
 

I have got i working and also working with gifs. Im not using object as it was causing issues (like not being able to open context menu).

Im inserting the svg into the dom, which fixes the use with context and allows me to edit the svg with javascirpt.
Unsure if there might be a conflict if a svg uses the same id has some element in unraid, but i guess time will tell

Something i have been playing with is animating it when you hover over any part of the folder and not just the icon. I feel this lets you see the sweet animations more often (the lazy yellow also triggers animation).
svg_animated.thumb.png.94ed54dbcfd880451343f00e8a0f1d60.png

The way i'm doing the hover on animate, funnily only works with the icons that are always animating and not the ones set to hover on animate. The ones set to hover on animate will only animate when hovering over the icon itself.

Link to post
2 hours ago, GuildDarts said:

The way i'm doing the hover on animate, funnily only works with the icons that are always animating and not the ones set to hover on animate. The ones set to hover on animate will only animate when hovering over the icon itself.

Haha. Well either way, I'll keep adding it into the base ones for now since it's easier to delete a small section then to add it back in in the right spot. We can make a separate zip when I'm all done with the one line deleted from them all. I might start adding these to my github and cleaning the code up a bit too.

Link to post
11 hours ago, hernandito said:

 

Hi Josiah,

 

I have created color variations of the icons you have so far. As you animate the remaining icons, I will create the variations and publish when done.

 

Please let me know how I can help.

 

Thank you!

 

H.

 

 

1477666773_YellowCollection.png.ed0655f1d0a90fe3fb6765ebe0fa0839.png1341081235_BlueCollection.png.3a84ad1833f22639a890202ebbbbe310.png1969419616_greycollection.png.03496f557a279b64ab88c5c03d7052be.png801509615_OrangeCollection.png.b158187c6f563bf1a064a0a1752aab0d.png

These look very good! To help me stay organized, I've created a github repo and I'm tracking new icons with issues. If you could help from there, that would be best: https://github.com/ground7/unraid-animated-svgs

 

I've created issues for all in work icons, and I've tagged the ones that I think need some attention.

 

I would like to publish your color variations there once the collection is complete. I'll tag it version 1.0.0 after completing the initial set. Do you think you can help me do this?

Link to post

Hi Everyone... So I have been able to consolidate the current collections in Github. I have taken the animations @Josiah has created and created alternative color collections. I have sprinkled one or two icons of my own.

 

I am going to delete all my back and forth posts of my discussions w/ Josiah. I think these will confuse people.

 

I am also going to update the original post with the Github location and explanation.

Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.