MMM-MyGarbage

[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

Download
[card:htilburgs/MMM-MyGarbage]

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

[pugsly]

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

[htilburgs]

@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!

[Zwirbel]

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

[htilburgs]

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.

[Chris62]

@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]

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

[werffje]

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

Regards, Marius

[htilburgs]

@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.

[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.