MMM-MyGarbage

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.

Chris62

Hi,

Thanks for your reply. I have fixed it now. I loaded the csv file into excel to alter the dates but something was wrong with the formatting and I just couldn’t get it to work. Anyway, I loaded up MM into a Ubuntu virtual machine and changed the dates in notepad. I sorted out the config issue (I moved the position within the config file to make it easier to read but accidentally did copy rather than cut and paste so I had two loading), fired it up and it worked like a charm. I have now copied everything to my Pi and it now works there too.

Just a quick question, I only have two bins, blue and green, is it possible to remove the column for the other one without mucking it up, or should I just set all the values to zero?

Thanks

Chris

htilburgs

@Chris62 Good to hear it’s fixed.
You can do both

Remove the unused column entirly
Fill the unused column with zero’s

As of version v1.2.0 you can also use you’re own column names, as long as they are color names. The garbage bin is showed in the color of the name of the column.

example
WeekStarting,Green,Brown
04/15/19,1,1