MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Can someone do the coding for me? $$

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    8 Posts 3 Posters 1.1k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sdetweil @Hellonoonan
      last edited by

      @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.

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 2
      • H Offline
        Hellonoonan @BD0G
        last edited by

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

        1 Reply Last reply Reply Quote 1
        • H Offline
          Hellonoonan
          last edited by

          /* Magic Mirror Module: calendar_monthly

          • v1.0 - June 2016
          • By Ashley M. Kirchner kirash4@gmail.com
          • 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 = "&nbsp;";
          		}
          
          		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 <= 6; i++ ){
          			var bodyTD = document.createElement("td");
          			bodyTD.className = "calendar-header-day";
          			bodyTD.innerHTML = moment().weekday(i).format("ddd");
          			bodyTR.appendChild(bodyTD);
          		}
          		bodyContent.appendChild(bodyTR);
          		wrapper.appendChild(bodyContent);
          
          		// Create TBODY section with the monthly calendar
          		var bodyContent = document.createElement("tBody");
          		var bodyTR = document.createElement("tr");
          		bodyTR.className = "weekRow";
          
          		// Fill in the days
          		var day = 1;
          		var nextMonth = 1;
          		// Loop for amount of weeks (as rows)
          		for (var i = 0; i < 9; i++) {
          			// Loop for each weekday (as individual cells)
          			for (var j = 0; j <= 6; j++) {
          				var bodyTD = document.createElement("td");
          				bodyTD.className = "calendar-day";
          				var squareDiv = document.createElement("div");
          				squareDiv.className = "square-box";
          				var squareContent = document.createElement("div");
          				squareContent.className = "square-content";
          				var squareContentInner = document.createElement("div");
          				var innerSpan = document.createElement("span");
          
          				if (j < startingDay && i == 0) {
          					// First row, fill in empty slots
          					innerSpan.className = "monthPrev";
          					innerSpan.innerHTML = moment().subtract(1, 'months').endOf('month').subtract((startingDay - 1) - j, 'days').date();
          				} else if (day <= monthLength && (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);
          }
          

          });

          1 Reply Last reply Reply Quote 0
          • H Offline
            Hellonoonan
            last edited by Hellonoonan

            Module.register(“OfficeHours”,{

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

            });

            1 Reply Last reply Reply Quote 0
            • H Offline
              Hellonoonan
              last edited by

              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()
              },
              

              })

              1 Reply Last reply Reply Quote 0
              • H Offline
                Hellonoonan
                last edited by

                /*****************************************************

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

                }

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy