MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Can someone do the coding for me? $$



  • I am basically clueless when it comes to coding and Ive only barely been able to create my own mirror (which does not have a mirror, I just use it as an information screen for my office) and it has some issues and could be way better based on some of the mirrors Ive seen members make.

    I had a facebook counter which stopped working once I refreshed the program because the calendar does not update after the month is over. So in order to get to December I had to ctrl+r and when it came back my business page FB likes is stuck at 0.

    There are way better calendars it appears and overall mine is pretty boring. It doesnt even show what day it currently is.

    Would anyone be interested in providing the coding so that I can drag and drop the files into my magicmirror folder and have it working? Honestly Id be willing to pay for your time. It will take me way too long to figure it out and thats if I can even get it going.

    Ive seen some modern designs with backgrounds which interest me. Please let me know if youre interested and we can discuss design further.

    Thank you so much!



  • Start by posting your currently installed modules.
    Like this

    1. MMM-Calendar
      etc.

    The copy your config.js entries (MagicMirror/config) in thier entirety using the code option </> above.

    Then post your custom.css file (MagicMirror/css) using the code option </>

    This will give the coders and people willing to assist a headstart .

    This project seems perfect for some of the pro’s on this forum.

    @Module-Developers



  • @Hellonoonan I am willing to discuss. send me a better description. My email is my user ID here on Gmail.

    We can also chat on discord.



  • @BD0G Ill give that a shot. Thanks for the suggestion!



  • /* Magic Mirror Module: calendar_monthly

    • v1.0 - June 2016
    • By Ashley M. Kirchner
    • Beer Licensed (meaning, if you like this module, feel free to have a beer on me, or send me one.)
      */

    Module.register(“calendar_monthly”, {

    // Module defaultsca
    defaults: {
    	debugging:		false,
    	initialLoadDelay:	0,		// How many seconds to wait on a fresh start up.
    						// This is to prevent collision with all other modules also
    						// loading all at the same time. This only happens once,
    						// when the mirror first starts up.
    	fadeSpeed:		2,		// How fast (in seconds) to fade out and in during a midnight refresh
    	showHeader:		true,		// Show the month and year at the top of the calendar
    	cssStyle:		"block",	// which CSS style to use, 'clear', 'block', 'slate', or 'custom'
    	updateDelay:		5,		// How many seconds after midnight before a refresh
    						// This is to prevent collision with other modules refreshing
    						// at the same time.
    },
    
    // Required styles
    getStyles: function() {
    	return [this.data.path + "/css/mcal.css", this.getThemeCss()];
    },
    
    getThemeCss: function() {
    	return this.data.path + "/css/themes/" + this.config.cssStyle + ".css";
    },
    
    // Required scripts
    getScripts: function() {
    	return ["moment.js"];
    },
    
    // Override start method
    start: function() {
    	Log.log("Starting module: " + this.name);
    	// Set locale
    	moment.locale(config.language);
    	
    	// Calculate next midnight and add updateDelay
    	var now = moment();
    	this.midnight = moment([now.year(), now.month(), now.date() + 1]).add(this.config.updateDelay, "seconds");
    
    	this.loaded = false;
    
    	this.scheduleUpdate(this.config.initialLoadDelay * 1000);
    },
    
    // Override dom generator
    getDom: function() {
    
    	if ((moment() > this.midnight) || (!this.loaded)) {
    
    		var month = moment().month();
    		var year = moment().year();
    		var monthName = moment().format("MMMM");
    		var monthLength = moment().daysInMonth();
    
    		// Find first day of the month, LOCALE aware
    		var startingDay = moment().date(1).weekday();
    
    		var wrapper = document.createElement("table");
    		wrapper.className = 'large';
    		wrapper.id = 'calendar-table';
    
    		// Create THEAD section with month name and 4-digit year
    		var header = document.createElement("tHead");
    		var headerTR = document.createElement("tr");
    
    		// We only fill in the THEAD section if the .showHeader config is set to true
    		if (this.config.showHeader) {
    			var headerTH = document.createElement("th");
    			headerTH.colSpan = "7";
    			headerTH.scope = "col";
    			headerTH.id = "calendar-th";
    			var headerMonthSpan = document.createElement("span");
    			headerMonthSpan.id = "monthName";
    			headerMonthSpan.innerHTML = monthName;
    			var headerYearSpan = document.createElement("span");
    			headerYearSpan.id = "yearDigits";
    			headerYearSpan.innerHTML = year;
    			// Add space between the two elements
    			// This can be used later with the :before or :after options in the CSS
    			var headerSpace = document.createTextNode(" ");
    
    			headerTH.appendChild(headerMonthSpan);
    			headerTH.appendChild(headerSpace);
    			headerTH.appendChild(headerYearSpan);
    			headerTR.appendChild(headerTH);
    		}
    		header.appendChild(headerTR);
    		wrapper.appendChild(header);
    
    		// Create TFOOT section -- currently used for debugging only
    		var footer = document.createElement('tFoot');
    		var footerTR = document.createElement("tr");
    		footerTR.id = "calendar-tf";
    
    		var footerTD = document.createElement("td");
    		footerTD.colSpan ="7";
    		footerTD.className = "footer";
    		if (this.config.debugging) {
    			footerTD.innerHTML = "Calendar currently in DEBUG mode!<br />Please see console log.";
    		} else {
    			footerTD.innerHTML = " ";
    		}
    
    		footerTR.appendChild(footerTD);
    		footer.appendChild(footerTR);
    		wrapper.appendChild(footer);
    
    		// Create TBODY section with day names
    		var bodyContent = document.createElement("tBody");
    		var bodyTR = document.createElement("tr");
    		bodyTR.id = "calendar-header";
    
    		for (var i = 0; i  0 || j >= startingDay)) {
    					if (day == moment().date()) {
    						innerSpan.id = "day" + day;
    						innerSpan.className = "today";
    					} else {
    						innerSpan.id = "day" + day;
    						innerSpan.className = "daily";
    					}
    					innerSpan.innerHTML = day;
    					day++;
    				} else if (day > monthLength && i > 0) {
    					// Last row, fill in empty space
    					innerSpan.className = "monthNext";
    					innerSpan.innerHTML = moment([year, month, monthLength]).add(nextMonth, 'days').date();
    					nextMonth++;
    				}
    				squareContentInner.appendChild(innerSpan);
    				squareContent.appendChild(squareContentInner);
    				squareDiv.appendChild(squareContent);
    				bodyTD.appendChild(squareDiv);	
    				bodyTR.appendChild(bodyTD);
    			}
    			// Don't need any more rows if we've run out of days
    			if (day > monthLength) {
    				break;
    			} else {
    				bodyTR.appendChild(bodyTD);
    				bodyContent.appendChild(bodyTR);
    				var bodyTR = document.createElement("tr");
    				bodyTR.className = "weekRow";
    			}
    		}	
    
    		bodyContent.appendChild(bodyTR);
    		wrapper.appendChild(bodyContent);
    
    		this.loaded = true;
    		return wrapper;
    
    	}
    
    },
    
    scheduleUpdate: function(delay) {
    	if (this.config.debugging) {
    		Log.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
    		Log.log("CALENDAR_MONTHLY IS IN DEBUG MODE!");
    		Log.log("Remove 'debugging' option from config/config.js to disable.");
    		Log.log("             Current moment(): " + moment() + " (" + moment().format("hh:mm:ss a") + ")");
    		Log.log("scheduleUpdate() delay set at: " + delay);
    	}
    
    	if (typeof delay !== "undefined" && delay >= 0) {
    		nextReload = delay;
    	}
    
    	if (delay > 0) {
    		// Calculate the time DIFFERENCE to that next reload!
    		nextReload = moment.duration(nextReload.diff(moment(), "milliseconds"));
    		if (this.config.debugging) {
    			var hours = Math.floor(nextReload.asHours());
    			var  mins = Math.floor(nextReload.asMinutes()) - hours * 60;
    			var  secs = Math.floor(nextReload.asSeconds()) - ((hours * 3600 ) + (mins * 60));
    			Log.log("  nextReload should happen at: " + delay + " (" + moment(delay).format("hh:mm:ss a") + ")");
    			Log.log("                  which is in: " + mins + " minutes and " + secs + " seconds.");
    			Log.log("              midnight set at: " + this.midnight + " (" + moment(this.midnight).format("hh:mm:ss a") + ")");
    			Log.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
    		}
    	}
    
    	var self = this;
    	setTimeout(function() {
    		self.reloadDom();
    	}, nextReload);
    
    },
    
    reloadDom: function() {
    	if (this.config.debugging) {
    		Log.log("          Calling reloadDom()!");
    	}
    
    	var now = moment();
    	if (now > this.midnight) {
    		this.updateDom(this.config.fadeSpeed * 1000);
    		this.midnight = moment([now.year(), now.month(), now.date() + 1]).add(this.config.updateDelay, "seconds");
    	}
    
    	var nextRefresh = moment([now.year(), now.month(), now.date(), now.hour() + 1]);
    	this.scheduleUpdate(nextRefresh);
    }
    

    });



  • Module.register(“OfficeHours”,{

    // Default module config.
    defaults: {
    	text: ""
    },
    
    getTemplate: function () {
    	return "OfficeHours.njk"
    },
    
    getTemplateData: function () {
    	return this.config
    }
    

    });



  • Module.register(“MMM-fbPageCounter”,{

    // Module config defaults.
    defaults: {
    	access_token: "",
    	page_id: "",
    	refresh_interval_sec: 10, //minimum 30. If your daily visitors of page are under 10, use 30 as this value.
    	size: "default"
    },
    
    getStyles: function() {
    	return ["MMM-fbPageCounter.css", "flipcounter.css"]
    },
    
    getScripts: function() {
    	return [
    		this.file("js/flipcounter.js")
    	]
    },
    
    start: function() {
    	this.fb = {}
    	this.myCounter = null
    	this.apiUrl = "https://graph.facebook.com/v2.10/"
    		+ this.config.page_id
    		+ "/?fields=fan_count,name&access_token="
    		+ this.config.access_token
    
    	if (this.config.refresh_interval_sec < 10) {
    		this.config.refresh_interval_sec = 10
    	}
    },
    
    getDom: function() {
    	var wrapper = document.createElement("div")
    	wrapper.className = "fb_board"
    	var myCounter = document.createElement("ul")
    	myCounter.className = "flip-counter " + this.config.size
    	myCounter.id = "myCounter_" + this.data.identifier
    	wrapper.appendChild(myCounter)
    
    	return wrapper
    },
    
    
    notificationReceived:function(noti, payload, sender) {
    	if (noti == "DOM_OBJECTS_CREATED") {
    		this.myCounter = new flipCounter("myCounter_" + this.data.identifier, {value: 0, pace:100, auto: false})
    		this.updateCounter()
    		var self = this
    		setInterval(function() {
    			self.updateCounter()
    		}, this.config.refresh_interval_sec * 1000)
    	}
    },
    
    updateCounter: function() {
    	var self = this
    	this.loadJSON(this.apiUrl,
    		function (result) {
    			self.fb = result
    		},
    		function (err) {
    			console.log("[FBKCNT] ERROR!", err)
    		}
    	)
    	if (this.fb.fan_count) {
    		this.myCounter.incrementTo(this.fb.fan_count, 100, 20)
    	}
    },
    
    loadJSON: function(path, success, error) {
    	var xhr = new XMLHttpRequest()
    	xhr.onreadystatechange = function() {
    		if (xhr.readyState === XMLHttpRequest.DONE) {
    			if (xhr.status === 200) {
    				if (success) {
    					success(JSON.parse(xhr.responseText))
    				}
    			} else {
    				if (error) {
    					error(xhr)
    				}
    			}
    		}
    	}
    	xhr.open("GET", path, true)
    	xhr.send()
    },
    

    })



  • /*****************************************************

    • Magic Mirror *
    • Custom CSS *
    •                                               *
      
    • By Michael Teeuw http://michaelteeuw.nl *
    • MIT Licensed. *
    •                                               *
      
    • Add any custom CSS below. *
    • Changes to this files will be ignored by GIT. *
      *****************************************************/

    body {

    #yearDigits {
    color: #fff;
    font-weight: normal;
    }

    #monthName {
    font-weight: normal;
    }

    #monthName:after {
    content: " •";
    color: #80ff00;
    font-weight: bold;
    }

    .monthPrev {
    color: #333333;
    }

    .monthNext {
    color: #333333;
    }

    .square-box {
    position: relative;
    width: 50%;
    overflow: hidden;
    margin: 0px auto;
    }

    .square-box:before {
    content: “”;
    display: block;
    padding-top: 20%;
    }

    .square-content {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }

    .square-content .today {
    border: 1px solid #80ff00;
    font-weight: normal;
    color: #80ff00;
    }

    .square-content div {
    display: table;
    width: 100%;
    height: 100%;
    }

    .square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }

    .OfficeHours {
    text-align: left;
    color: #fff;
    font-size: 50px;
    }

    header {
    text-transform: none;
    font-size: 65px;
    font-family: “Roboto Condensed”, Arial, Helvetica, sans-serif;
    font-weight: 600;
    border-bottom: 2px solid #0084ff;
    line-height: 55px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: #fff;
    }

    }


Log in to reply