@BD0G Ill give that a shot. Thanks for the suggestion!
Read the statement by Michael Teeuw here.
Best posts made by Hellonoonan
-
RE: Can someone do the coding for me? $$
-
RE: MMM-fbPageCounter
@justjim1220 I did not get that. I keep getting errors. Ive only been able to get the basic magic mirror modules to work by help forums and copy/paste. This is beyond my knowledge. Honestly Id rather venmo you like $10 to do this for me haha. It seems like its easy for those who know what theyre doing but I dont.
I have the screen up in my office similar to what the OP shows (without any mirror) just as an information screen and I think this would be a nice touch to boost social media presence.
Any interest in taking on the job?
Latest posts made by Hellonoonan
-
RE: MMM-fbPageCounter
I know this is an old thread but I am back again having issues. It stopped working for me and Ive been able to get all codes to work up until the permanent code. When I do this it only says data and nothing else.
Shown below. I never get a permanent access code. Even with the long live one my counter is still at zero.
{
“data”: []
}Please help! and thank you
-
RE: Rolling Calendar
Thats awesome! Thank you. Didnt think to search for multimonthly calendar, probably why I had trouble finding anything other that modifications of the typical one.
-
Rolling Calendar
Sorry if this has been done but I couldnt find it. I am looking for a monthly calendar that will continually scroll as the weeks pass so that you can always see the weeks ahead.
Currently the calendar I have does show the dates and which day we are on but its only the current month and the program needs to be restarted once the month has ended to see the current month.
This also isnt much help towards the end of the month and you can only see the current week and not the next few weeks since they are in the next month.
Hope that makes sense. Basically a calendar where once the first week is over, everything moves up and you start to see the weeks for the next month.
Thanks!
-
RE: costum.css modified but font color still the same
What is the solution to this? I am having the same issue so I didnt want to create a new topic.
Here is my custom.css. Office hours remain Blue and Id like to change the color as Ive changed the background image and they are now drowned out.
/***************************************************** * 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 {# } .region.fullscreen.below { background-image: url('image.jpg'); background-repeat: no-repeat; background-size: cover; margin: 5px; position: absolute; height: calc (50% - 0px); width: calc (50% - 0px); font-family: "Roboto Condensed", sans-serif; font-weight: 400; font-size: 2em; line-height: 1.5em; -webkit-font-smoothing: antialiased } .brightb { color: #fff; } .currentweather .wi-sunrise { color: #ffd700; } .currentweather .wi-sunset { color: #ffa500; } .currentweather .wi-day-sunny { color: #ffff00; } .currentweather .wi-night-showers { color: #55acee; } .currentweather .wi-degrees { color: #fff; } .currentweather .wi-rain { color: #55acee; } .currentweather .wi-showers { color: #55acee; } .currentweather .wi-night-showers { color: #55acee; } .currentweather .wi-night-alt-cloudy-windy { color: #aaa; } .currentweather .wi-night-cloudy { color: #aaa; } .currentweather .wi-cloudy { color: #aaa; } .currentweather .wi-day-cloudy { color: #aaa; } .currentweather .wi-cloudy { color: #aaa; } .currentweather .wi-cloudy-windy { color: #aaa; } .currentweather .wi-showers { color: #55acee; } .currentweather .wi-thunderstorm { color: #ff00ff; } .currentweather .wi-snow { color: #fff; } .currentweather .wi-fog { color: #999; } .currentweather .wi-night-clear { color: #fff; } .currentweather .wi-night-rain { color: #55acee; } .currentweather .wi-night-thunderstorm { color: #ff00ff; } .currentweather .wi-night-snow { color: #fff; } .weatherforecast .wi-sunrise { color: #ffd700; } .weatherforecast .wi-sunset { color: #ffa500; } .weatherforecast .wi-day-sunny { color: #ffff00; } .weatherforecast .wi-night-showers { color: #55acee; } .weatherforecast .wi-degrees { color: #fff; } .weatherforecast .wi-rain { color: #55acee; } .weatherforecast .wi-showers { color: #55acee; } .weatherforecast .wi-night-showers { color: #55acee; } .weatherforecast .wi-night-alt-cloudy-windy { color: #aaa; } .weatherforecast .wi-night-cloudy { color: #aaa; } .weatherforecast .wi-cloudy { color: #aaa; } .weatherforecast .wi-day-cloudy { color: #aaa; } .weatherforecast .wi-cloudy { color: #aaa; } .weatherforecast .wi-cloudy-windy { color: #aaa; } .weatherforecast .wi-showers { color: #55acee; } .weatherforecast .wi-thunderstorm { color: #ff00ff; } .weatherforecast .wi-snow { color: #fff; } .weatherforecast .wi-fog { color: #999; } .weatherforecast .wi-night-clear { color: #fff; } .weatherforecast .wi-night-rain { color: #55acee; } .weatherforecast .wi-night-thunderstorm { color: #ff00ff; } .currentweather .wi-night-snow { color: #fff; } .compliments .bright { color : #fff; font-size: 30px; } .calendar_monthly #yearDigits { color: #fff; font-weight: normal; } .calendar_monthly #monthName { font-weight: normal; } .calendar_monthly #monthName:after { content: " •"; color: #fff; font-weight: bold; } .calendar_monthly .monthPrev { color: #fff; } .calendar_monthly .monthNext { color: #fff; } .calendar_monthly .square-box { position: relative; width: 85%; overflow: hidden; margin: 0px auto; } .calendar_monthly .square-box:before { content: ""; display: custom; padding-top: 20%; } .calendar_monthly .square-content { top: 0; left: 0; bottom: 0; right: 0; } .calendar_monthly .square-content .today { border: 3px solid #80ff00; font-weight: light; color: #7dcfff; } .calendar_monthly .square-content div { display: table; width: 100%; height: 100%; } .calendar_monthly { color: #fff; } .calendar_monthly2 #yearDigits { color: #fff; font-weight: normal; } .calendar_monthly2 #monthName { font-weight: normal; } .calendar_monthly2 #monthName:after { content: " •"; color: #80ff00; font-weight: bold; } .calendar_monthly2 .monthPrev { color: #333333; } .calendar_monthly2 .monthNext { color: #333333; } .calendar_monthly2 .square-box { position: relative; width: 50%; overflow: hidden; margin: 0px auto; } .calendar_monthly2 .square-box:before { content: “”; display: block; padding-top: 20%; } .calendar_monthly2 .square-content { top: 0; left: 0; bottom: 0; right: 0; } .calendar_monthly2 .square-content .today { border: 1px solid #80ff00; font-weight: normal; color: #80ff00; } .calendar_monthly2 .square-content div { display: table; width: 100%; height: 100%; } .calendar_monthly2 .square-content span { display: table-cell; text-align: center; vertical-align: middle; } .clock .date { color: #fff; } .normal { color: #999; } .bright { color: #fff; } .square-content span { display: table-cell; text-align: center; vertical-align: middle; } .OfficeHours .bright { text-align: left; color: #fff; font-size: 40px; } header { text-transform: none; font-size: 35px; 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; } .clock .bright { font-size: 100px; color: #7dcfff } /* wind speed selector */ .currentweather > .module-content > div > div.normal.medium > *:nth-child(2), /* wind direction selector */ .currentweather > .module-content > div > div.normal.medium > *:nth-child(3), /* sunset/sunrise time selector */ .currentweather > .module-content > div > div.normal.medium > *:nth-child(6){ color: white; } #module_4_currentweather header { color: #FFFFFF; border-bottom: 1px solid #FFFFFF; } #module_4_currentweather .wi-sunrise { color: #fff; }
-
RE: Can someone do the coding for me? $$
/*****************************************************
- 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;
}}
-
RE: Can someone do the coding for me? $$
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() },
})
-
RE: Can someone do the coding for me? $$
Module.register(“OfficeHours”,{
// Default module config. defaults: { text: "" }, getTemplate: function () { return "OfficeHours.njk" }, getTemplateData: function () { return this.config }
});
-
RE: Can someone do the coding for me? $$
/* 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 = " "; } 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); }
});
-
RE: Can someone do the coding for me? $$
@BD0G Ill give that a shot. Thanks for the suggestion!
-
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!