MMM-DumpsterDay

BD0G

Also, I dont know how much additional code would be needed to display the words
Tomorrow is Trash Day
for the day preceding what one sets for Trash Day and then the words Today is Trash Day
for the day in which is actually trash day. This would be in small text (alterable within the .css file) below the trash can icons. That way one would know at a glance.

mrdenmark

@DeanoNoire
i have this module working and it looks good,thanks
i would like to use the basic,recycle_blue and recycle_yellow bins,how do i modify the config to work with those?

BD0G

@mrdenmark
Try this setup in your MagicMirror/config/config.js

enableBasic: true, 				// Enable basic trashcan 
		basicStartDate: "11.11.2019", 	// The first dumpster day (Always use 2 digit dates (01 instead of 1))
		basicDateDiff_1: 7,			// Trashday reoccurance - Default: 14 (every 14 days)
		basicNotifyDayBefore: true,		//Default: true - If you want the notification to appear also the day before the dumpster day
		
		enablePlastic: true,			// Same values as basic but for Plastic
		plasticStartDate: "11.11.2019", 
		plasticDateDiff_1: 28,
		plasticNotifyDayBefore: true,	

		enableLandscape: true,			// Same values as basic but for Landscape
		landscapeStartDate: "11.11.2019",
		landscapeDateDiff_1: 7,		
		landscapeNotifyDayBefore: true,
		}		
		},

Then just modify the MagicMirror/modules/MMM-DumpsterDay/MMM-DumpsterDay.css file to have the Landscape setting display a blue can.

.landscapeDiv{
	height:70px;
	width:20%;
	background-image: url(imgs/recycle_blue.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	overflow: auto;
	display:inline-block;

If you want the Blue can next to the White can instead of the Yellow Can then just modify the MagicMirror/modules/MMM-DumpsterDay/MMM-DumpsterDay.css file like this

.plasticDiv{
	height:70px;
	width:20%;
	background-image: url(imgs/recycle_blue.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	overflow: auto;
	display:inline-block;
}

.landscapeDiv{
	height:70px;
	width:20%;
	background-image: url(imgs/recycle_yellow.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	overflow: auto;
	display:inline-block;
}

mrdenmark

@BD0G
thanks for that,one last thing,is it possible change the colour of the basic bin?in my case i’d like red.

BD0G

Give me a few minutes and I will try and fill the one that is white with a red color.

BD0G

Save the file I uploaded (right click -Save Image As) to this directory MagicMirror/modules/MMM-DumpsterDay/imgs

Then change your MagicMirror/modules/MMM-DumpsterDay/MMM-DumpsterDay.css file so that it has this entry

.basicDiv{
	height:70px;
	width:20%;
	background-image: url(imgs/basic_red.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	overflow: auto;
	display:inline-block;

BD0G

I have learned alot during the process to get this module working.

Getting only 2 of the cans to show up.

One must set all of the cans to true and adjust the dates within the MagicMirror/config/config.js file the very first time and save the file.

So these lines must be set to true
enableBasic: true,
enablePlastic: true,
enableLandscape: true,

Then launch MagicMirror. Then shut down MagicMirror and change the can or cans that one does not want to be shown on screen by changing the setting to false.

For instance,
enableBasic: true,
enablePlastic: false,
enableLandscape: true,

Save the file and restart MagicMirror. This will display the cans selected.
Strange behavior , but thats what I found.

I also needed to change the date on each of the cans within the same MagicMirror/config/config.js file

basicStartDate: “11.13.2019”,
plasticStartDate: “11.13.2019”,
landscapeStartDate: “11.13.2019”,

to reflect the same dates . If I left
plasticStartDate: “11.13.2019”,

as the default date then the recycle nor the landscape can would show up.

Changing the size of the cans. Initially the can size on my MagicMirror were way too big and I needed to modify the

MagicMirror/modules/MMM-DumpsterDay/MMM-DumpsterDay.css file.

I changed the value for height from 120 px (I think this was the default size -maybe 200px) to 70px and that turned out to be a good size.

.basicDiv{
	height:70px; // I changed this line to 70px
	width:20%;
	background-image: url(imgs/basic.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	overflow: auto;
	display:inline-block;
}

.landscapeDiv{
	height:70px;  // I changed this line to 70px
	width:20%;
	background-image: url(imgs/landscape.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	overflow: auto;
	display:inline-block;
}


.plasticDiv{
	height:70px;  //I changed this line to 70px
	width:20%;
	background-image: url(imgs/recycle_yellow.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	overflow: auto;
	display:inline-block;

mrdenmark

@BD0G
fantastic,thankyou,the helpfulness of people on tghis forum never ceases to surprise me!

BD0G

@mrdenmark So I take it that worked as intended? :)

You are welcome. I have just been focused on getting this module to work. Trash day is in 2 days. LOL!

Hopefully we can have @DeanoNoire add the red trashcan to the github repository under images just in case someone else wants that color for thier trash can as well.

BD0G

What I have yet to figure out is how to get the basic trash can and the landscape can to be shown with less space between them. It appears as if there is enough space between those 2 cans to show the recycle can and since its set to false it is not shown onscreen , but there is a blank space between the cans for it to fit.

I want the 2 cans centered and with less space between them.

Here is the current spacing
DropBox Link