MMM-MyGarbage

htilburgs

MMM-MyGarbage

This a module for MagicMirror².
This displays the schedule for your Garbage pickup. It supports multiple types of garbage bins.
You can show the schedule using a CSV file (garbage_schedule.csv) of by using an ical URL.

Installation

Clone this repository in your modules folder, and install dependencies:

cd ~/MagicMirror/modules 
git clone https://github.com/htilburgs/MMM-MyGarbage.git
cd MMM-MyGarbage
npm install

Update

When you need to update this module:

cd ~/MagicMirror/modules/MMM-MyGarbage
git pull
npm install

Configuration

Go to the MagicMirror/config directory and edit the config.js file.
Add the module to your modules array in your config.js.

{
        module: 'MMM-MyGarbage',
        position: 'top_right',
        header: "My Garbage Calendar",
        disabled: false,
        config: {
                weeksToDisplay: 4,
                limitTo: 99,
                dateFormat: "dddd LL",
                alert: true,
                fade:true,
                fadePoint: 0.25,
                dataSource: "ical",                         // csv (schedule_garbage.csv | ical (put URL in icalUrl)
                icalUrl: "PLACE_HERE_PUBLIC_ICAL_URL",      // only used if dataSource is "ical"
                debug: false,                               // Only set on true for debugging 
                binColors: {                                // Define custom Bin Colors
                            GreenBin: "#00A651",
                            PaperBin: "#0059ff",
                            GarbageBin: "#787878",
                            PMDBin: "#ffff00",
                            OtherBin: "#B87333"
                            },
                icalBinMap: {                                // Map iCal event names to standard bin names
                            "PAPIER": "PaperBin",
                            "GFT": "GreenBin",
                            "PMD": "PMDBin",
                            "REST": "GarbageBin",
                            "KERSTBOOM": "OtherBin",
                            }
                }
},

Module configuration

Here is the documentation of options for the modules configuration:

Option	Description
`weeksToDisplay`	How many weeks into the future to show collection dates. Number Default: `2`
`limitTo`	Limit the display to the spcified number of pickups. Number Default: `99`
`dateFormat`	Format to use for the date of events Default: `dddd D MMMM` (e.g. January 18) Possible values: See https://momentjs.com/
`alert`	(optional) Show alert, if remaining entries in csv file fall under this threshold Number Default: `false`
`fade`	Fade the future events to black. (Gradient). Default: `true` Possible values: `true` or `false`
`fadePoint`	Where to start fade? Default: `0.25` Possible values: `0` (top of the list) - `1` (bottom of list)
`dataSource`	Select datasource your're using Default: `"csv"` Possible values: `"csv" or "ical"`
`icalUrl`	Fill in your (public) ical URL Only use in combination with dataSourc: "ical"
`debug`	For debugging the module when failure Default: `false` Possible values: `true` or `false`
`binColors`	Define your own Bin Colors
`icalBinMap`	Define the EXACT names as provided in the iCal Calendar. The names will be matches with the type of Bin. If there is no match, otherBin wil be used.

Creating and using your Garbage Schedule for use with dataSource CSV

You can use this module by creating your own Garbage Schedule file with the name garbage_schedule.csv
An example file garbage_schedule.csv is added.

Create a CSV based on the following template:

WeekStarting,Greenbin,GarbageBin,PaperBin,PMDBin,OtherBin
03/07/18,1,0,1,0,0
03/14/18,1,1,1,0,0
03/21/18,1,0,1,0,1
03/28/18,1,1,1,1,0

Default there are 3 bins defined (green, gray and blue) If you need more garbage bins, simply add an extra column in the garbage_schedule.csv file. The name is the color you like the bin to have.

Add lines for each garbage pickup date as needed.
The date format needs to be specified as MM/DD/YY (e.g.: 05/28/18 for 28-May-2018)

Colors can be defined in the config.js file:

Legacy Values:
- GreenBin (defaults to #00A651)
- GarbageBin (defaults to #787878)
- PaperBin (defaults to #0059ff)
- PMDBin (defaults to #ffff00)
- OtherBin (defaults to #B87333)
Any CSS color string (red, chocolate, cornflowerblue, etc…)
Any HEX-Color (#FF0000, #8c8c8c, etc)
Any rgb, rgba or hsl value if in double quotes (“rgb(128,65,98)”, “rgba(134,56,32,0.5)”, “hsl(0, 100%, 50%)”, etc.)

The following is VERY important:

The CSV file must be delimited using commas
The date format needs to be specified as MM/DD/YY (e.g.: 05/28/18 for 28-May-2018)
The remaining fields of each line specify whether the particular waste product is scheduled to be picked up on the given date. A value of 0 means no pick up. A value of ANYTHING ELSE means the product will be picked up. Using the first pick up date entry in the template above, 1,0,1 means that green and blue will be picked up on that date, while gray will not be picked up.

Save the file as garbage_schedule.csv in the MMM-MyGarbage directory and restart Magic Mirror²

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

Note

The original script is from Jeff Clarke MMM-MyWastePickup and only for the Toronto area.
Now it has become a general script, to use in all areas all over the world.

Versions

1.0.0 : Initial version
1.0.1 : Minor changes
2.0.0 : Changed for use with CSV or with iCal Calendar

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.