MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-MyWastePickup

    Scheduled Pinned Locked Moved Troubleshooting
    11 Posts 2 Posters 2.7k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      MyMirror
      last edited by

      Hi everyone,
      i would like to change one icon (svg?) in https://github.com/jclarke0000/MMM-MyWastePickup but don’t know how.
      If possible, i would like to change the recycling icon 84033aaa-0cae-48ce-9d74-a954a81b8b12-grafik.png
      to something like this one:7f24d61a-b424-4ca7-bef0-75873dec39ed-grafik.png
      found here: https://www.svgrepo.com/vectors/bin/4
      and change green to blue …

      Who can help me to do that?
      I’m a complete novice when it comes to programming modules, so I’m afraid I need some accurate help.
      Thanks

      A 1 Reply Last reply Reply Quote 0
      • A Offline
        ashishtank Module Developer @MyMirror
        last edited by

        @MyMirror Changing color is easier here using css

        dfe1c49e-64a7-4d42-bffe-668ceae6adeb-image.png

        you can create similar class in custom.css and change the value of fill property to what you want.


        But changing icon itself will be difficult as here author is using svg image sprite and not separate icon files.
        you will need to change below file and replace the icon with the one you wanted (also with correct size)

        b4ea4e83-7847-4699-be7e-3eb73115b410-image.png

        More on image sprite
        https://css-tricks.com/svg-sprites-use-better-icon-fonts/

        1 Reply Last reply Reply Quote 0
        • M Offline
          MyMirror
          last edited by

          Thanks for the info and links.
          I’ll have to take a closer look at that first. Since I don’t have Illustrator, I guess I’ll have to do it with Grunt. I found the file and path description - now it seems to be only the missing groups.
          How do I find out what size the original image is and how do I resize the new image to fit it? Hmm …
          Let’s see how far I get …

          A 1 Reply Last reply Reply Quote 0
          • A Offline
            ashishtank Module Developer @MyMirror
            last edited by

            @MyMirror you can also try with notepad++, it is xml text only. from file it looks like each image is of 24x24 size. see view box attribute value in symbol.

            1 Reply Last reply Reply Quote 0
            • M Offline
              MyMirror
              last edited by

              Ok, I have tried but can’t get it to work.
              Who can help me that I can transfer the image in the correct size into the Icon_sprite.svg?
              ![0_1608914302925_recycle-bin1.svg](Lade 100% hoch)

              Thanks a lot!

              1 Reply Last reply Reply Quote 0
              • M Offline
                MyMirror
                last edited by

                OK, svg upload does not work - here is a Link …
                https://1drv.ms/u/s!ApE0YZ4Ndle9lisnl74TgPwwgUgf?e=drs4kn

                A 1 Reply Last reply Reply Quote 0
                • A Offline
                  ashishtank Module Developer @MyMirror
                  last edited by ashishtank

                  @MyMirror I tried to edit it but image didn’t work correctly. moreover the image you uploaded contains image data(base64 encoded). While on https://www.svgrepo.com/vectors/bin/4 files are with svg xml only and not image data. Looks like some svg editor needs to be use to combine the images. or you can use below my hacky solution.

                  1. Edit the icon_sprite.svg and rename recycle to recycle1 for symbol id (this is to load empty svg)
                  < svg xmlns="http://www.w3.org/2000/svg">
                  
                    < !-- recycle -->
                    < symbol id="recycle1" viewBox="0 0 24 24"> < --this line
                  
                  
                  1. add below in custom.css
                  .waste-pickup-icon.recycle {
                    background-image:url('https://www.svgrepo.com/show/270587/recycle-bin-trash.svg');
                  }
                  

                  Result

                  2020-12-26-01-30-04-Magic-Mirror

                  1 Reply Last reply Reply Quote 0
                  • M Offline
                    MyMirror
                    last edited by

                    Hi ashishtank,

                    Thanks for your attempts to format the SVG appropriately. I like your way for me, because the result is the way for me here.
                    Where exactly can I find the custom.css?
                    Do I have to create this file new in the MMM-MyWastePickup folder?
                    Is there anything to keep in mind when doing this? Are the 3 lines enough?

                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      MyMirror
                      last edited by

                      I have changed the color of the trash can and saved the SVG in the MMM-MyWastePickup directory.
                      Is this call correct then?

                      .waste-pickup-icon.recycle {
                        background-image:url('file:///home/pi/MagicMirror/modules/MMM-MyWastePickup/recycle-bin2.svg');
                      }
                      A 1 Reply Last reply Reply Quote 0
                      • A Offline
                        ashishtank Module Developer @MyMirror
                        last edited by

                        @MyMirror

                        1. You renamed the recycle to recycle1 in the icon_sprite.svg file right ?
                        2. You should use relative web url in css, then it will always work even if your Pi’s ip address changes.

                        Do below in custom.css this file should be in css folder in magicmirror directory

                        .waste-pickup-icon.recycle {
                          background-image:url('../modules/MMM-MyWastePickup/recycle-bin2.svg');
                        }
                        
                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy