Josiah Posted May 29, 2020 Share Posted May 29, 2020 (edited) 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. 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: 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 May 29, 2020 by Josiah Quote Link to comment
Josiah Posted May 29, 2020 Share Posted May 29, 2020 Alright, here's an example: c1ab-audio.svg Quote Link to comment
Josiah Posted May 29, 2020 Share Posted May 29, 2020 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/ Quote Link to comment
Josiah Posted May 29, 2020 Share Posted May 29, 2020 Here is an alternate for the eye that I think works pretty good (If you're really good, you can get it to freeze on the eye being closed.) Hehe. c1ab-eye-2.svg Quote Link to comment
Josiah Posted May 29, 2020 Share Posted May 29, 2020 (edited) 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 May 29, 2020 by Josiah Quote Link to comment
Josiah Posted May 29, 2020 Share Posted May 29, 2020 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. Quote Link to comment
Josiah Posted May 30, 2020 Share Posted May 30, 2020 (edited) 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 May 31, 2020 by Josiah Added ship/graphana/security/cloud/dash/gaming/music/downloads 2 Quote Link to comment
GuildDarts Posted May 30, 2020 Share Posted May 30, 2020 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 Quote Link to comment
Josiah Posted May 30, 2020 Share Posted May 30, 2020 (edited) 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 May 30, 2020 by Josiah Quote Link to comment
Josiah Posted May 31, 2020 Share Posted May 31, 2020 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. Quote Link to comment
Josiah Posted May 31, 2020 Share Posted May 31, 2020 22 hours ago, Josiah said: eye.svg 5.34 kB · 6 downloads control.svg 6.14 kB · 7 downloads audio.svg 14.14 kB · 7 downloads code.svg 5.18 kB · 6 downloads ship.svg 25.71 kB · 2 downloads cloud.svg 5.93 kB · 1 download security.svg 6.38 kB · 1 download grafana.svg 5.83 kB · 1 download dash.svg 11.13 kB · 0 downloads gaming.svg 6.59 kB · 0 downloads music.svg 12.28 kB · 0 downloads downloads.svg 4.53 kB · 0 downloads Ok. I think that's good for tonight. Hope you all like. Quote Link to comment
GuildDarts Posted June 1, 2020 Share Posted June 1, 2020 @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). 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. 1 Quote Link to comment
Josiah Posted June 1, 2020 Share Posted June 1, 2020 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. 1 Quote Link to comment
Josiah Posted June 2, 2020 Share Posted June 2, 2020 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. 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? Quote Link to comment
hernandito Posted June 8, 2020 Author Share Posted June 8, 2020 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. 1 1 Quote Link to comment
Mglomniac Posted November 23, 2021 Share Posted November 23, 2021 Is anyone able to make a quick "food/recipe" folder Icon? Quote Link to comment
tcomputerchip Posted January 1, 2022 Share Posted January 1, 2022 Thanks for the great icons, was going to make some of my own until I came across yours. I have been using the docker.folder plugin. I just updated the icons to look like this, thanks for the simple but effective icons: Quote Link to comment
E-ManN Posted June 29, 2022 Share Posted June 29, 2022 (edited) Yetersday I updated to UNRAID 6.10.3 ... I now have a glitch were when I start VMs I cannot manage them from within VMs container properly or from the dashboard.... IE\ can't launch remote console GUI. When I shutdown the VMs I can then manage them and launch the remote console GUI. I have removed all the VMs from the custom folders for now. all the docker custom folders & animated icons still working properly and can be managed properly from both the dashboard and docker pages. Hopefully the developer can find some spare cycles for a update fix. Thank so much I really enjoy your animated icons. 🙂 I see this error in my plugins section ... not sure if this has anything to do with it ? But i am currently investigating further. has anyone else noticed this or is this isolated to my UNRAID server. thanks, E Edited June 29, 2022 by E-ManN Quote Link to comment
Seidmadur Posted July 6, 2022 Share Posted July 6, 2022 On 6/29/2022 at 2:47 PM, E-ManN said: Yetersday I updated to UNRAID 6.10.3 ... I now have a glitch were when I start VMs I cannot manage them from within VMs container properly or from the dashboard.... IE\ can't launch remote console GUI. ... ... I see this error in my plugins section ... not sure if this has anything to do with it ? But i am currently investigating further. has anyone else noticed this or is this isolated to my UNRAID server. thanks, E Hey E, As far as I know the original developer hasn't updated Docker Folders yet, Squid picked it up and has an update available in the community apps. As soon as you update the plugin, the problem will go away. However it's unrelated to the Icons made for that plugin Quote Link to comment
martinkeat Posted November 16, 2023 Share Posted November 16, 2023 Can you use google icons for this? Because if you could that would be awesome. https://fonts.google.com/iconshttps://fonts.google.com/icons Quote Link to comment
K1LLA_KING_KING Posted December 30, 2023 Share Posted December 30, 2023 Would like to see a camera icon to represent photography / photos Quote Link to comment
EC28 Posted January 5 Share Posted January 5 On 11/15/2023 at 8:49 PM, martinkeat said: Can you use google icons for this? Because if you could that would be awesome. https://fonts.google.com/iconshttps://fonts.google.com/icons I just tried it using the base64 converter on the link in the folder creation page and it worked! Quote Link to comment
jake9891 Posted January 10 Share Posted January 10 Logged in to say thank you for these! They look fantastic: 1 Quote Link to comment
hernandito Posted January 10 Author Share Posted January 10 (edited) On 12/30/2023 at 2:16 AM, K1LLA_KING_KING said: Would like to see a camera icon to represent photography / photos Sorry, just saw this... Which version of the color scheme are you using? I cant recall how I made the animations all those years ago. I would be happy to create a static photography icon, but which color version are you using? A screencap of the collection would help. Thanks, H. Edited January 10 by hernandito Quote Link to comment
hernandito Posted January 10 Author Share Posted January 10 39 minutes ago, hernandito said: Sorry, just saw this... Which version of the color scheme are you using? I cant recall how I made the animations all those years ago. I would be happy to create a static photography icon, but which color version are you using? A screencap of the collection would help. Thanks, H. like these.... Quote Link to comment
Recommended Posts
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.