A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
  • First MM project - family dashboard

    3
    +8
    2 Votes
    3 Posts
    402 Views
    R
    @cpcode How did you modify the MMM-page-indicator It has been al long time since i tried MagicMirror and i`m no software expert either I would like to change pages with some physical buttons since i don`t have a touch monitor yet
  • New Mirror

    9
    +0
    4 Votes
    9 Posts
    1k Views
    R
    Hi Mirror Enthusiasts, Status update: I’ve decided NOT to use a mirror. As some others here I will implement this as a signage monitor and mount this in our living room at a convenient wall. Reason for this: Our mirrors are mounted in our hallways - where we are present really seldom… And the “mirror” is a really beauty and in addition all of the showed information is that useful that we “need” this more frequently. So I’ve ordered a 32’’ display today and will mount this in a wooden (may baroque’esce) frame with a passepartout. Will keep you posted. Warmest regards, Ralf
  • Touchscreen Family Dashboard

    41
    5 Votes
    41 Posts
    19k Views
    S
    @elwood1982uk did you see https://forum.magicmirror.builders/topic/12526/mmm-keyboard-a-virtual-touch-keyboard
  • My Goodness, My Mirror

    2
    +0
    3 Votes
    2 Posts
    457 Views
    S
    @cyclonej Congratulations!!
  • Mirror Redesign and update

    7
    +5
    4 Votes
    7 Posts
    767 Views
    W
    Challenged by my son to add “swipe” Adding MMM-Touch to the configuration. /* Config.js.template * Date Version Initials Comments * --------- --------- ---------- ------------------------------------------------------------------- * 09JAN25 0.9 WKS Updated file to a template format and config.env file created * 09JAN25 0.9a WKS Tested with Millbury location - passes check * 09JAN25 1.0 WKS Tested with Davenport location - passes check * * * For more information on how you can configure this file * see https://docs.magicmirror.builders/configuration/introduction.html * and https://docs.magicmirror.builders/modules/configuration.html * * You can use environment variables using a `config.js.template` file instead of `config.js` * which will be converted to `config.js` while starting. For more information * see https://docs.magicmirror.builders/configuration/introduction.html#enviromnent-variables */ let config = { address: "${CONFIG_ADDRESS}", // Address to listen on, can be: // - "localhost", "127.0.0.1", "::1" to listen on loopback interface // - another specific IPv4/6 to listen on a specific interface // - "0.0.0.0", "::" to listen on any interface // Default, when address config is left out or empty, is "localhost" port: ${CONFIG_PORT}, basePath: "/", // The URL path where MagicMirror² is hosted. If you are using a Reverse proxy // you must set the sub path here. basePath must end with a / ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.1/120"], // or add a specific IPv4 of 192.168.1.5 : // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"], // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format : // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"], useHttps: ${USEHTTPS}, // Support HTTPS or not, default "false" will use HTTP httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true language: "en", locale: "en-US", logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging timeFormat: 12, units: "${STANDARD_UNITS}", modules: [ //********************************************* // Setup the pages and sequences for display // Location: https://github.com/edward-shen/MMM-pages //*********************************************/ { module: "MMM-pages", config: { modules: [ ['calendar', "clock", "currentweather", "MMM-EyeCandy", 'MMM-Jast'], // Page 1: Dashboard display ["MMM-CalendarExt3", 'MMM-Multimonth'], // Page 2: Calendar displays ["currentweather", "weather", "MMM-EyeCandy", "MMM-WeatherGraph"], // Page 3: Weather page ["newsfeed", 'MMM-MyScoreboard', "MMM-MktIndex", 'MMM-FoxNews', 'MMM-AVStock', 'MMM-EarthquakeMonitor'], // Page 4: News and Information ["MMM-Tools", "MMM-TigoEnergySolar", 'MMM-Fuel', 'MMM-JsonTable', 'MMM-SmartOil'], // Page 5: Tools and other data ["MMM-Flights"] // Page 6: Flight data ], fixed: ["MMM-TouchButton", "MMM-Wallpaper", "MMM-page-indicator", 'MMM-Touch'], // Fixed modules on all pages animationTime: 1000, // Transition time in milliseconds rotationHomePage: 20000, rotationDelay: 10000, homePage: 0, } }, { module: 'MMM-SmartOil', position: 'top_left', config: { } }, // ---------- // Base home page modules on page 1 // ---------- //********************************************* // Display clock module // Pages: 1 // Location: Magic Mirror module //*********************************************/ { module: "clock", position: "top_left", config: { clockBold: true, timeZone: "${TIMEZONE}", showSunTimes: true, showMoonTimes: true, lat: ${LATTITUDE}, lon: ${LONGITUDE}, displayType: "digital" } }, //********************************************* // Stock listings // Pages: 1 // Location: https://github.com/jalibu/MMM-Jast //*********************************************/ { module: 'MMM-Jast', position: 'upper_third', config: { currencyStyle: "symbol", // One of ["code", "symbol", "name"] fadeSpeedInSeconds: 3.5, lastUpdateFormat: "HH:mm", maxChangeAge: 1 * 24 * 60 * 60 * 1000, maxWidth: "100%", numberDecimalsPercentages: 1, numberDecimalsValues: 2, displayMode: "static", // One of ["none", "vertical", "horizontal", "table"] showColors: true, showCurrency: true, showChangePercent: true, showChangeValue: true, showChangeValueCurrency: false, showHiddenStocks: false, showLastUpdate: false, showPortfolioValue: false, showPortfolioGrowthPercent: false, showPortfolioGrowth: false, showPortfolioPerformanceValue: false, showPortfolioPerformancePercent: false, showStockPerformanceValue: false, showStockPerformanceValueSum: false, showStockPerformancePercent: false, stocksPerPage: 3, // Only relevant for display mode "table" updateIntervalInSeconds: 300, useGrouping: false, virtualHorizontalMultiplier: 2, stocks: [ { name: 'APPLE', symbol: 'AAPL'}, { name: 'Dell', symbol: 'DELL'}, { name: 'Google', symbol: 'GOOGL'}, ] } }, // -------- // News modules on page 3 // -------- //********************************************* // MMM-MyScoreBoard to display sports scores for major leagues // Pages: 4 - News // Location: https://github.com/jclarke0000/MMM-MyScoreboard //*********************************************/ { module: "MMM-MyScoreboard", position: "bottom_right", classes: "default everyone", header: "My Scoreboard", config: { showLeagueSeparators: true, colored: true, viewStyle: "mediumLogos", sports: [ { league: "NHL", teams: ["BOS"], teams: ["Atlantic"], }, { league: "NBA", teams: ["BOS"], groups: ["East"], }, { league: "MLB", teams: ["BOS"] }, { league: "NFL", teams: ["NE"] }, ], } }, //********************************************* // MMM-EarthquakeMonitor // Pages: 4 - News // Location: https://github.com/rcollie/MMM-EarthquakeMonitor //*********************************************/ { module: "MMM-EarthquakeMonitor", position: "bottom_left", config: { updateInterval: 600000, maxNumberOfQuakes: 5, apiUrl: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson" } }, //********************************************* // My FoxNews module to display the FoxNews headlines with URL // Pages: 4 // Location: TBD - Still in development //*********************************************/ { module: 'MMM-FoxNews', position: 'upper_third', header: 'FoxNews Headlines', config: { updateInterval: 600000, // Update every 10 minutes maxItems: 3, // Show top 3 stories debugFlag: false, // Development flag } }, //********************************************* // Stock listings // Pages: 4 // Location: https://github.com/lavolp3/MMM-AVStock //*********************************************/ { module: 'MMM-AVStock', position: 'upper_third', header: "Market", config: { symbols : ['AAPL', 'DELL', 'GOOGL'], alias: ['Apple', 'Dell', 'Google'], } }, //********************************************* // Display market indexes on the news page // Pages: 4 // Location: https://github.com/thess/MMM-MktIndex //*********************************************/ { module: "MMM-MktIndex", position: "bottom_right", config:{ timeFormat: "YYYY-MM-DD HH:mm:ss", updateInterval: 180, } }, //********************************************* // Display newsfeed - default module // Pages: 4 // Location: MagicMirror //*********************************************/ { module: "newsfeed", position: "bottom_bar", config: { feeds: [ { title: "New York Times", url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml" } ], showSourceTitle: true, showPublishDate: true } }, //------------------- // Flights page 6 // ------------------ //********************************************* // Show local flights on the map // Pages: 6 // Location: https://gitlab.com/khassel/MMM-Flights //*********************************************/ { module: 'MMM-Flights', position: 'upper_third', provider: "${FLIGHT_PROVIDER}", config: { laMin: ${FLIGHT_LAMIN}, laMax: ${FLIGHT_LAMAX}, loMax: ${FLIGHT_LOMIN}, loMin: ${FLIGHT_LOMAX}, showGrounded: false, showMap: 'ifTraffic', mapHeight: "400px", mapFixedArea: false, mapFont: '900 12px "Font Awesome 6 Free"', mapGetPlaneText(flight) { let txt = flight.flight; if (!txt) txt = flight.radar; txt = txt + "\n" + flight.altitude; if (flight.rateOfClimb < 0) { txt = txt + " \uf5af"; } else if (flight.rateOfClimb > 0) { txt = txt + " \uf5b0"; } return txt; }, }, }, //--------------------- // Tools & Settings page 5 // -------------------- //********************************************* // Tools display for settings // Pages: 5 // Location: https://github.com/eouia/MMM-Tools //*********************************************/ { module: 'MMM-Tools', position: 'top_right', header: "System Statistics", config: { refresh: 500 * 5, containerSize: null, itemSize: null } }, //********************************************* // My module created for FL Solar - Tigo Energy API // Pages: 5 // Location: TBD in development //*********************************************/ { module: "MMM-TigoEnergySolar", position: "bottom_left", // The position where you want to display the module header: "Tigo Energy Solar Dashboard", config: { apiUrl: "${TIGOENERGY_API}", username: "${TIGOENERGY_USERNAME}", password: "${TIGOENERGY_PASSWORD}", systemId: "${TIGOENERGY_SYSTEMID}", debugFlag: false, } }, //********************************************* // Fuel prices module // Pages: 5 // Location: https://github.com/fewieden/MMM-Fuel //*********************************************/ { module: "MMM-Fuel", position: "bottom_bar", config: { provider: "${MMM_FUEL_PROVIDER}", zip: "${ZIP_CODE}", types: ["regular", "midgrade", "premium"], open: true, showDistance: false, showBrand: true, } }, //********************************************* // JSON Table - used to display SmartOil output // Pages: 5 // Location: https://github.com/timdows/MMM-JsonTable //*********************************************/ { module: 'MMM-JsonTable', position: 'top_left', header: '${LOCATION_NAME} Smart Oil Sensor', config: { url: '${SMARTOIL_URL}', arrayName: '${SMARTOIL_ARRAYNAME}', } }, //********************************************* // Background wallpaper from bing // Pages: All // Location: https://github.com/kolbyjack/MMM-Wallpaper //*********************************************/ { module: "MMM-Wallpaper", position: "fullscreen_below", config: { source: "bing", slideInterval: 60 * 1000, // Change slides every minute crossfade: true, fadeEdges: true, filter: "brightness(0.2)", maximumEntries: 25, caption: true, } }, //********************************************* // Weather Graph // Pages: 3 // Location: https://github.com/FlatPepsi17/MMM-WeatherGraph //*********************************************/ { module: 'MMM-WeatherGraph', header: '${LOCATION_FULL_NAME}', position: 'top_right', // This can be any of the regions. config: { apiKey: "${OPENWEATHER_APIKEY}", showForecast: true, // 7 day forecast list showForecastPrecip: true, // show precip totals in 7 day list showGraph: true, // enable all graphing of weather precipitationGraphWidth: 400, // width in pixels. Default=400 precipitationGraphHeight: 150, // height in pixels. 0=auto-scales graphHourRange: 48, // how many hours in the graph? Max 48 showWind: true, // current wind speed at top showGraphPrecip: true, // on graph, show rain and snowfall showGraphTemp: true, // on graph, show temp graphTempColor: 'white', // on graph, color of temp line showGraphWind: true, // on graph, show wind graphWindColor: 'grey', // on graph, color of temp line showGraphHumid: true, // on graph, show humidity humidWindColor: '#88CC88', // on graph, color of humid line showGraphCloud: true, // on graph, show cloud cover % graphCloudColor: '#dedb49', // on graph, color of cloud line showSunrise: true, // next sunrise or sunset at top showSummary: true, // text of next hour's conditions showHotColdLines: true, // blue line at freezing, red line at 80 F showGraphLegend: true, // legend on bottom right of graph language: 'en', units: '${STANDARD_UNITS}', // or 'metric' time24hr: false, // false for 12hr times, true for 24hr times updateInterval: 1900000, // 15 minutes ( 15 * 60 * 1000 ) animationSpeed: 2000, // 2 seconds (2*1000) initialLoadDelay: 0, // 0 seconds (0*1000) retryDelay: 2500, // 2.5 seconds (2*1000) latitude: ${LATTITUDE}, longitude: ${LONGITUDE} } }, //********************************************* // EyeCandy used to display the local radar images // Pages: 3 // Location: https://github.com/mykle1/MMM-EyeCandy //*********************************************/ { module: "MMM-EyeCandy", header: "${LOCATION_NAME} Radar", position: "bottom_center", config: { maxWidth: "100%", // Sizes the images. Retains aspect ratio. style: '1', // Style number or use ownImagePath to override style ownImagePath: "${EYECANDY_RADAR_URL}", } }, //********************************************* // Display Weather Module // Pages: 1, 3 // Locations: Standard MagicMirror module //*********************************************/ { module: "weather", position: "bottom_center", classes: "currentweather", config: { weatherProvider: "${WEATHER_PROVIDER}", units: "${STANDARD_UNITS}", tempUnits: "${STANDARD_UNITS}", roundTemp: true, type: "current", lat: ${LATTITUDE}, lon: ${LONGITUDE} } }, //********************************************* // Display Weather Module // Pages: 3 // Locations: Standard MagicMirror module //*********************************************/ { module: "weather", position: "top_left", header: "${OPPOSITE_LOCATION} Weather", config: { weatherProvider: "${WEATHER_PROVIDER}", units: "${STANDARD_UNITS}", tempUnits: "${STANDARD_UNITS}", roundTemp: true, type: "forecast", tableClass: 'medium', lat: ${OPPOSITE_LATTITUDE}, lon: ${OPPOSITE_LONGITUDE} } }, //********************************************* // Display multi-month calendar // Pages: 2 // Locations: https://github.com/BKeyport/MMM-Multimonth //*********************************************/ { module: "MMM-Multimonth", position: "bottom_bar", config: { bigCalendar: false, monthCount: 2, monthsVertical: false, startMonth: 0, } }, //********************************************* // Calendar module for the list of calendars // Pages: // Locations: MagicMirror default module //*********************************************/ { module: "calendar", header: "Family Events", position: "top_right", hiddenOnStartup: true, config: { broadcastPastEvents: true, calendars: [ { symbol: "calendar-check", name: "family_events", color: "blue", url: "${FAMILYEVENTS_CALENDAR_URL}", }, { symbol: "calendar-check", name: "wind_mill", color: "red", url: "${WINDMILLVILLAGE_CALENDAR_URL}", }, { symbol: "calendar-check", name: "dates_to_remember", color: "gray", url: "${DATESTOREMEMBER_CALENDAR_URL}", }, { symbol: "calendar-check", name: "us_holidays", color: "red", url: "${HOLIDAY_CALENDAR_URL}" } ] } }, //********************************************* // Display the big ole calendar // Pages: 2 // Locations: https://github.com/MMRIZE/MMM-CalendarExt3 //*********************************************/ { module: "MMM-CalendarExt3", position: "middle_center", title: "", config: { mode: "week", instanceId: "basicCalendar", locale: 'en-US', weeksInView: 4, maxEventLines: 5, firstDayOfWeek: 0, calendarSet: ['family_events', "us_holidays", "wind_mill" , "dates_to_remember"], } }, //********************************************* // Touch buttons on the top of the screen // Pages: All // Locations: https://github.com/Tom-Hirschberger/MMM-TouchButton //*********************************************/ { module: "MMM-TouchButton", position: "top_bar", config: { buttons: [ { label: "Page1", // Label for Page 1 button imgIcon: "${BUTTON1_IMAGE}", action: "notification", // Trigger notification action notification: "PAGE_CHANGED", // Predefined notification in MMM-Pages payload: 0 // Page index (starts at 0) }, { label: "Page2", // Label for Page 2 button action: "notification", imgIcon: "${BUTTON2_IMAGE}", notification: "PAGE_CHANGED", payload: 1 // Page index for Page 2 }, { label: "Page3", // Label for Page 3 button imgIcon: "${BUTTON3_IMAGE}", action: "notification", notification: "PAGE_CHANGED", payload: 2 // Page index for Page 3 }, { label: "Page4", // Label for Page 4 button imgIcon: "${BUTTON4_IMAGE}", action: "notification", notification: "PAGE_CHANGED", payload: 3 // Page index for Page 4 }, { label: "Page5", // Label for Page 5 button imgIcon: "${BUTTON5_IMAGE}", action: "notification", notification: "PAGE_CHANGED", payload: 4 // Page index for Page 5 }, { label: "Page6", // Label for Page 5 button imgIcon: "${BUTTON6_IMAGE}", action: "notification", notification: "PAGE_CHANGED", payload: 5 // Page index for Page 5 } ], buttonStyle: { color: "#ffffff", backgroundColor: "#0000ff" }, panelStyle: { borderRadius: "10px", padding: "10px" } } }, //********************************************* // Page indicators on the bottom of the screen // Pages: All // Locations: https://github.com/edward-shen/MMM-page-indicator //*********************************************/ { module: "MMM-page-indicator", position: 'bottom_bar', config: { pages: 6, }, }, //********************************************* // Enable gesture commands on the mirror // Pages: All // Locations: https://github.com/gfischershaw/MMM-Touch //*********************************************/ { module: "MMM-Touch", position: "bottom_bar", disabled: false, config: { debug: false, useDisplay: false, autoMode: false, defaultMode: "default", gestureCommands: { "default":{ "TAP_1": (commander) => {commander.sendNotification("USER_PRESENCE", true);}, "SWIPE_LEFT_1": (commander) => {commander.sendNotification("PAGE_INCREMENT", null);}, "SWIPE_RIGHT_1": (commander) => {commander.sendNotification("PAGE_DECREMENT", null);}, }, }, }, }, ] }; if (typeof module !== "undefined") {module.exports = config;}
  • Help with calendar

    27
    0 Votes
    27 Posts
    741 Views
    S
    @gerbenz said in Help with calendar: i have in the calendar conifg: useSymbol: false, butt then i gett a dott at the beginning of the event. is it possible to remove it? yes, some css setting and i have six calendars with different collors and that works. but hole day events don’t color. css setting They have black text with white border around it. i want the color that is corrosponding with the right calendar. css setting I don’t know all the possible css settings for this module. the author has made it quite flexible via css… but like all decent manuals/readme, he provides a reference (this module has these things) , “application” of the things takes critical thinking and exploration. one thing to help learn/make progress is to use the browser developer window, elements tab to userstand/test css changes on the live page see the second link in my signature below
  • Kitchen Family Dashboard/Hub

    8
    +3
    4 Votes
    8 Posts
    1k Views
    M
    @sdetweil right!? my mom actually ordered a tv [unbeknownst to me] and sent it to my house and my front door camera notified me and i was like…i have no memory of ordering a new display…😂
  • Magic(Dashboard)Mirror

    50
    +1
    12 Votes
    50 Posts
    24k Views
    G
    @MZ-BER Van u share the config file? I’m new and try to learn.
  • Kitchen Touchscreen Dashboard

    3
    +5
    1 Votes
    3 Posts
    1k Views
    N
    @sdetweil Thank you. I didn’t know this. I will have a look later…
  • My First Kitchen Mirror

    4
    +0
    4 Votes
    4 Posts
    3k Views
    S
    @svenpisa Min Sven, ich habe mir dieses Thema “MagicMirror” zum neuen Projekt gemacht, daher vielen Dank für deine Vorlagen, die sind echt MEGA! Leider funktionieren die Wettermodule nicht. Hast du mittlerweile schon eine neue config.js, die du mir zur Verfügung stellen kannst, damit ich darauf aufbauen kann? Viele Grüße von der Ostsee Marc moderator english translation Min Sven, I have made this topic “MagicMirror” my new project, so thank you very much for your templates, they are really MEGA! Unfortunately the weather modules don’t work. Do you already have a new config.js that you can provide to me so that I can build on it? Many greetings from the Baltic Sea
  • My Fallout (PipBoy) inspired MagicMirror

    5
    +0
    5 Votes
    5 Posts
    3k Views
    D
    I have been wanting to get started on a magic mirror setup for a few years now, I think this might be the inspiration I needed to create my own. Awesome job.
  • 27" Kitchen Dashboard

    15
    +4
    16 Votes
    15 Posts
    6k Views
    J
    @r3zi3lr If there is something specific you are looking for please let me know. I have added more features and the config is large
  • Frameless Magic Mirror

    6
    +0
    10 Votes
    6 Posts
    2k Views
    J
    @sheptastic Thanks! Here you go https://github.com/yawnsde/MMM-WorldTides
  • MagicMirror With Face Recognition

    22
    +3
    10 Votes
    22 Posts
    3k Views
    C
    Which weather module do you use? Could it be used for Germany?
  • Kitchen Magic²

    8
    +7
    6 Votes
    8 Posts
    3k Views
    D
    @missnerdtou It’s a Microsoft Surface Pro 3
  • Under US$100 Magic Dashboard (Rpi + Tablet + WallPanel)

    2
    +0
    4 Votes
    2 Posts
    2k Views
    K
    [image: 1727479840941-2.jpg] I just add world clock (MMM-Worldclock) on the top of the screen
  • 24" Kitchen Infoboard with FireTV Stick

    7
    +4
    3 Votes
    7 Posts
    4k Views
    A
    I was curious - is MM being driven from something like a RP behind the screen, or are you using a browser / casting?
  • My kitchen dashboard (incomplete)

    11
    1 Votes
    11 Posts
    2k Views
    A
    Your family kitchen dashboard looks fantastic! The use of modules like MMM-MyCalendar and MMM-MyWastePickup is really practical. Moving to a UWQHD screen should enhance the display even further. I’m interested in how the page transition will work—sounds like a great idea to keep the interface clean. Looking forward to seeing the final setup!
  • Acoustic panel frame with mirror effect

    10
    +4
    7 Votes
    10 Posts
    3k Views
    htilburgsH
    @tuansacto Take a look at https://www.brigla-shop.de/mm-genau/mirropane-chrome-spy-6-mm/smart-mirror-spiegel-260?c=6 I just ordered a new mirror 42x72 for under €100 including transport to holland.
  • My Bedroom MagicMirror

    5
    +0
    15 Votes
    5 Posts
    3k Views
    B
    @james1787 Awesome job !! Is your mirror touch capacitive, or do you do all your updating from your phone/pc etc ?