MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    MMM-MyGarbage

    Utilities
    25
    49
    6658
    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.
    • htilburgs
      htilburgs last edited by htilburgs

      Description
      This a module for Magic Mirror². This module displays the schedule for your Garbage pickup (Normal waste - Gray Bin, Garden waste - Green Bin, Recycled Paper - Blue Bin). The schedule is placed in a CSV file by adding lines for each collection. From version 1.2.0 it is possible to dynamicly add bins if needed.

      Screenshot
      alt text

      Download

      Extra
      I’m not an experienced programmer and do this for fun. Feel free to suggest any ideas.

      Version
      27-02-2019 - v1.0.0 - Initial Release
      01-03-2019 - v1.1.0 - Add fade effect
      01-03-2019 - v1.1.1 - Added multiple Locale Support
      04-03-2019 - v1.1.2 - Add dateFormat & capFirst function
      09-04-2019 - v1.2.0 - Implemented Dynamic Bintypes
      11-04-2019 - v1.2.1 - Implemented Alert if remaining garbage entries fall below threshold

      (still trying to learn JS, but not afraid to ask) ☺

      pugsly 1 Reply Last reply Reply Quote 3
      • pugsly
        pugsly @htilburgs last edited by

        @htilburgs
        Is there a way to change the can colors? Ours here are Blue, Green, and Yellow.

        1 Reply Last reply Reply Quote 0
        • htilburgs
          htilburgs last edited by

          @pugsly
          This is possible, follow the next steps.

          Go to the MagicMirror CSS directory

          cd ~\MagicMirror\css\
          

          Edit (or create) the custom.css file

          sudo nano custom.css
          

          Add the next section at the bottom of the custom.css file

          /* MMM-MyGarbage CSS Modification */
          .MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.greenbin {
            fill: #00A651;
          }
          .MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.garbagebin {
            fill: #787878;
          }
          .MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.paperbin {
            fill: #0059ff;
          }
          /* End MMM-MyGarbage */
          

          Now you can modify the colors for your Garbage Bins. In your case, you would like the grey bin to be yellow. The code should be:

          .MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.garbagebin {
            fill: #fffa00;
          }
          

          Save and quit the nano editor and restart your MagicMirror.
          Now you should have a yellow trashbin instead of a grey trashbin.
          Succes!

          (still trying to learn JS, but not afraid to ask) ☺

          L 1 Reply Last reply Reply Quote 0
          • Z
            Zwirbel last edited by

            Do you know if it is also possible to change the icon with CSS? E.g. using a “paper” icon from FontAwesome?

            1 Reply Last reply Reply Quote 0
            • htilburgs
              htilburgs last edited by

              Currently this is not possible, because the icons are embedded in file ‘garbage_icons.svg’. You can create you’re own garbage_icons.svg file. Keep in mind that the icons are 24x24 pixels.

              (still trying to learn JS, but not afraid to ask) ☺

              1 Reply Last reply Reply Quote 0
              • C
                Chris62 last edited by

                @htilburgs

                Hi,

                I would really like to use this module. However, despite following the install instructions, and without changing any of the defaults other than the header (we usually say rubbish in the UK, rather than garbage), I get two instances of the module loading. Also, when I open the default csv file in Excel for instance, the dates do not all seem to be the same. Some are formatted left and some are formatted right in the cell. Surely they should all be the same. I have not altered this file at all but when the module loads in MM2, (twice as mentioned) I just get an entry for ‘Today’ and a grey bin icon.

                Chris

                htilburgs 1 Reply Last reply Reply Quote 0
                • htilburgs
                  htilburgs @Chris62 last edited by

                  @Chris62 can you post a picture and the config.js?

                  (still trying to learn JS, but not afraid to ask) ☺

                  1 Reply Last reply Reply Quote 0
                  • W
                    werffje last edited by

                    I have done everything as described but the module keeps on indicating Loading Loading, what am I doing wrong?

                    Regards, Marius

                    htilburgs 1 Reply Last reply Reply Quote 0
                    • htilburgs
                      htilburgs @werffje last edited by

                      @werffje I’m sorry to hear that, but if it’a keep saying loading, than there is a configuration error. Can you post your config. js.
                      Further take a look at the java console in you browser if you can see an error.

                      (still trying to learn JS, but not afraid to ask) ☺

                      1 Reply Last reply Reply Quote 0
                      • htilburgs
                        htilburgs last edited by htilburgs

                        On my TEST System, I just did a fresh install of MM2 and after that a fresh install of MMM-MyGarbage. Copy and Paste the configuration as in the README.md into the config.js and no errors. MMM-MyGarbage displays 2 entries with the garbage_schedule.csv that is installed with the git clone…

                        @Chris62, @werffje, if you still expirience problems, than:

                        • add config.js into reply
                        • look at the javascript console if you see any errors in the Console tab

                        Open Javascript Console:
                        Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the Console

                        • any other information that maybe relevant

                        I’ll look at it and try to reproduce and/or correct the issue.

                        (still trying to learn JS, but not afraid to ask) ☺

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 1 / 5
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy