MMM-DumpsterDay

[DeanoNoire]

@BD0G So I’ve made some changes:
Now there are 3 possible cans, user can disable each one in config or change the image via css.
Pulsing is now switchable and I also changed the startDate input format.

Check it out ;)

EDIT: I also added a blue version of the recylcing can as you mentioned (In Czech Republic it’s yellow)

[mrdenmark]

could you post a working config for this? i’m having no luck writing it into mine

[BD0G]

@DeanoNoire

You are awesome! .
We will need a working config file with all the parameters listed so that it is apparent what settings control what features.

You can comment out the features using // backslashes as you know and add what they do to the right of the line or above it using // backslashes

Example :
//Line below this one controls the day that one sets to count from
//Line below this one controls pulsing or constant

etc…

Also is there the need to clone a module into the modules directory below MagicMirror/modules?

Specific instructions would be helpful to add to the git hub repository as there are alot of places where people can get hung up.

Questions that I have are where does one place the trashcan.css file? Where does one place the trashcan.js file?
Does one clone a directory into the MagicMirror/modules directory?
What does one add to the config.js file within MagicMirror/config?

Also you mis-spelled Dumpster again within the Noted files on the git hub repository.

Thanks for the quick work!

Let me know if you need assistance with writing the instructions and I can lend a hand if needed.

[Stoffbeuteluwe]

@DeanoNoire a blue can would be Perfect Thanks :folded_hands_medium-light_skin_tone:

[BD0G]

@Stoffbeuteluwe Its included within the trashcan.css file , but waiting on configuration options and how to setup.

[Stoffbeuteluwe]

@BD0G ok Thanks

[DeanoNoire]

@BD0G Hi there,
I added the install instructions and example of config with descriptions to the readme file.
I’ll copy it here also:

{
	module:"trashcan",
	position:"lower_third",
	config: {
		refreshInterval: 18000000, // Default: 18000000 = 5 hours
		pulse: true, 			   // Default: true - Makes the module pulsating

		enableBasic: true, 				// Enable basic trashcan 
		basicStartDate: "24.10.2019", 	// The first dumpster day (Always use 2 digit dates (01 instead of 1))
		basicDateDiff_1: 14,			// 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: "16.01.2019", 
		plasticDateDiff_1: 28,
		plasticNotifyDayBefore: true,	

		enableLandscape: false,			// Same values as basic but for Landscape
		landscapeStartDate: "29.10.2019",
		landscapeDateDiff_1: 28,		
		landscapeNotifyDayBefore: true,
	}

I hope it’s clear now :)

Also note the module should not appear today, as it’s not a dumpster day :) Try changing the Start date in the config to make it appear it’s dumpster day today to test it. I may also implement a AlwaysOn config key for testing purposes. Maybe during the week :)

If anything is unclear or can be improved, please let me know :)

[BD0G]

Many of the other modules that are published use the following syntax to copy the files needed to the MagicMirror/modules directory.

git clone https://github.com/DeanoNoire/MMM-DumpsterDay.git

So perhaps it would be advantageous to add the following as the first step.

1. Navigate to the MagicMirror/modules sub-directory
2. Run the following command “git clone https://github.com/DeanoNoire/MMM-DumpsterDay.git” (this will copy the needed files into the sub-directory)

[BD0G]

Also the code for the config.js appears to be missing

},

at the end.

[BD0G]

I switched to the sub directory MagicMirror/modules and did a git clone git clone https://github.com/DeanoNoire/MMM-DumpsterDay.git

That created a directory named MMM-DumpsterDay with the files below that directory.

Then I added the code you posted to my MagicMirror/config/config.js file exactly as you posted. I found that there was a missing }, at the end of the code.

I modified the config.js to reflect today as trashday and launched Magic Mirror . Nothing was displayed onscreen.

Shoundlnt the config.js code for module be MMM-DumpsterDay
?

[BD0G]

This post is deleted!

[BD0G]

Here is my current config.js after renaming the module portion to MMM-DumpsterDay

{
	module:"MMM-DumpsterDay",
	position:"bottom_bar",
	config: {
		refreshInterval: 18000000, // Default: 18000000 = 5 hours
		pulse: true, 			   // Default: true - Makes the module pulsating

		enableBasic: true, 				// Enable basic trashcan 
		basicStartDate: "11.10.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: false,			// Same values as basic but for Plastic
		plasticStartDate: "16.01.2019", 
		plasticDateDiff_1: 28,
		plasticNotifyDayBefore: true,	

		enableLandscape: true,			// Same values as basic but for Landscape
		landscapeStartDate: "11.10.2019",
		landscapeDateDiff_1: 14,		
		landscapeNotifyDayBefore: true,
		}		
		},
		
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},

[DeanoNoire]

@BD0G this seems right :)
Thanks for the tips! I will change the installation process :) I’m still new, this is my first real programming project, so this colaboration process is new to me.

[BD0G]

Well I am kinda forced to collaborate if I want to use this awesome module . Right? :) LOL

My config.js does not work so I want to get it going so we can all use this module!

[DeanoNoire]

@BD0G i will give it a try with your config and check what’s wrong and let you know.

[DeanoNoire]

@BD0G Hey there, I changed the file names of the modules and the paths, so it can be used the way you described - via clone.
Can pull the current version and give it a try? Also change the date accordingly :) I believe we’re getting there! :D

Have a good one.

[BD0G]

@DeanoNoire
I deleted the sub-directory that was created under MagicMirror/modules named mmm-dumpsterday . All lowercase.

I then used the command git clone https://github.com/DeanoNoire/MMM-DumpsterDay.git.

This created the correct the directory named MMM-DumpsterDay . Capital letters in proper places.

Then I modified my config.js under the MagicMirror/config directory to reflect today as being trash day . Turned off Recycle by using the false specifier. Turned on Landscape by using the specifier true. Set the Landscape date to todays date as well.

Restarted the MagicMirror and I do see a pulsing white trash can ,BUT no can for Landscape. ???

The trash can is displayed within the bottom_bar area of the screen and the trash can is quiet large onscreen. I am assuming that I can modify the MagicMirror/modules/MMM-DumpsterDay/MMM-DumpsterDay.css file to change the size to better fit the screen?

Here is my current config.js file to troubleshoot the absence of the Landscape can. on screen

	{
	module:"MMM-DumpsterDay",
	position:"bottom_bar",
	config: {
		refreshInterval: 18000000, // Default: 18000000 = 5 hours
		pulse: true, 			   // Default: true - Makes the module pulsating

		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: false,			// Same values as basic but for Plastic
		plasticStartDate: "16.01.2019", 
		plasticDateDiff_1: 28,
		plasticNotifyDayBefore: true,	

		enableLandscape: true,			// Same values as basic but for Landscape
		landscapeStartDate: "11.11.2019",
		landscapeDateDiff_1: 14,		
		landscapeNotifyDayBefore: true,
		}		
		},
		
		{
			module: "alert",
		},

[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;
}