This forum was moved to another machine and updated to a recent version. If you are unable to login please delete your browser cookies and cache and restart your browser.A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
Read the statement by Michael Teeuw here.
My Fallout (PipBoy) inspired MagicMirror
-
Hey All,
inspired by the new amazon show Fallout I reactivated my old MM to change the style to more look like a …well MagicPip Mirror XD
It took me more than 4 days to set up the system, to “learn” and understand custom.css and to tinker around for the looks.
Have to put it back behind a mirror obviously but did not find the time yet (need a second person to remove the mirror).
modules: [ { module: "alert", }, { module: "updatenotification", position: "bottom_bar" }, { module: "helloworld", position: "top_bar", config: { text: "MagicPip 2000" } }, { module: "clock", position: "top_bar", config: { displaySeconds:false, } }, { module: "calendar", header: "Anstehende VAULT-TEC Events", position: "top_right", config: { fetchInterval: 6000, fade: false, maximumEntries: 10, maximumNumberOfDays: 3, flipDateHeaderTitle: true, hideDuplicates: true, coloredText: false, coloredBackground: false, coloredSymbol: true, customEvents: [{keyword: 'Leistungsturnen', symbol: 'medal', color: '#32cd32'},{keyword: 'Kosmetik', symbol: 'hand-holding-drop> calendars: [ { url: "xxx symbol: "calendar-plus", color: "#41FF00", }, { url: "xxx color: "#0a880c", symbol: "calendar-check", }, ], } }, { module: "weather", position: "top_left", config: { weatherProvider: "openweathermap", type: "current", location: "xxx", locationID: "xxx; unzip the gz file and find your city apiKey: "xxx", showUVIndex: true, } }, { module: "weather", position: "bottom_left", header: "Vorhersage", config: { weatherProvider: "openweathermap", type: "forecast", location: "xxx", locationID: "xxx; unzip the gz file and find your city apiKey: "3xxx", maxNumberOfDays: 3, colored: false, fade: false, } }, { module: "MMM-RAIN-MAP", position: "bottom_center", config: { animationSpeedMs: 4000, colorScheme: 8, colorizeTime: true, defaultZoomLevel: 15, displayTime: true, displayTimeline: true, displayClockSymbol: false, displayHoursBeforeRain: 0, extraDelayLastFrameMs: 4000, extraDelayCurrentFrameMs: 4000, markers: [ { xxxx}, ], mapPositions: [ { xxxx }, ], mapUrl: "https://a.tile.openstreetmap.de/{z}/{x}/{y}.png", mapHeight: "200px", // must be a pixel value (no percent) mapWidth: "200px", // must be a pixel value (no percent) maxHistoryFrames: 6, maxForecastFrames: -1, substitudeModules: [], updateIntervalInSeconds: 1800, } }, { }, { module: "MMM-ImagesPhotos", position: "middle_center", config: { opacity: 0.9, animationSpeed: 5000, updateInterval: 50000, maxHeight: "500px", maxWidth:"1000px", sequential: true // process the image list randomly } }, { module: "newsfeed", position: "lower_third", config: { feeds: [ { title: "PositiveNews", url: "https://www.positive.news/feed/", }, ], updateInterval: 15000, showDescription: true, showSourceTitle: true, showPublishDate: true, broadcastNewsFeeds: true, broadcastNewsUpdates: true, ignoreOldItems: true, ignoreOlderThan: 604800000, }, }, { module: "newsfeed", position: "lower_third", config: { feeds: [ { title: "GoodNewsMagazin", url: "https://goodnews-magazin.de/feed/", }, ], updateInterval: 20000, showDescription: true, showSourceTitle: true, showPublishDate: true, broadcastNewsFeeds: true, broadcastNewsUpdates: true, ignoreOldItems: true, ignoreOlderThan: 604800000, }, }, { module: 'MMM-Luftdaten', position: 'bottom_right', header: 'Aktuelle Sensordaten', config: { sensors: [xxx], fetchInterval: 5, timeOnly: true, displayTendency: true, withBorder: false, } }, { module: 'MMM-AirQuality', position: 'top_left', // you may choose any location config: { token: 'xxx', location: 'xxx/' // the location to check the index for } }, { module: "MMM-NINA", position: "bottom_bar", config: { ags: ["xxx"], // Liste der Gemeinden, die abgefragt werden sollen downgradeLhpSeverity: false, downgradeCancelSeverity: true, hideCancelledWarnings: true, excludeProviders: [], // Mögliche Werte ["MOWAS", "DWD", "BIWAPP", "LHP"] maxAgeInHours: 6, mergeAlertsById: true, mergeAlertsByTitle: true, orderBySeverity: true, showIcon: true, showDate: true, showCity: true, showNoWarning: false, theme: "top", // Erlaubte Werte: top, top-floating, side updateIntervalInSeconds: 300, } }, ] };
and ofc the custom.css code
@font-face { font-family: "BS"; font-style: normal; src: local("BS"), url("BSfont.otf") format("opentype"); } @font-face { font-family: "FS"; font-style: normal; src: local("FS"), url("FSfont.ttf") format("truetype"); } :root { --color-text: #0c8e0c; --color-text-dimmed: #087009; --color-text-bright: #41FF00; --font-primary: "FS"; --font-secondary: BS"; } .calendar { font-family: BS; } .weather { font-family: BS; } .region.lower.third { border: 1px dashed #087009; padding: 15px; border-bottom: hidden; border-top: hidden; } .region.top.right { border: 3px #087009; border-radius: 5px; padding: 15px; border-left: hidden; border-bottom: hidden; border-top: solid; border-right: dashed; } .region.bottom.right { border: 1px dashed #087009; border-radius: 5px; padding: 15px; border-left: hidden; border-bottom: hidden; border-top: hidden; } .region.bottom.left { border: 1px dashed #087009; padding: 15px; border-radius: 5px; border-bottom: hidden; border-right: hidden; border-top: hidden; } .region.top.bar { border: 2px dashed #087009; padding: 5px; border-left: hidden; border-right: hidden; border-bottom: hidden; } .clock { font-family: BS; } .weather .light { font-family: BS; } .clock .light { font-family: BS; } .newsfeed { text-transform: uppercase; } .helloworld { font-family: BS; text-shadow: 2px 2px 5px #087009; font-size: 65px; border: 2px solid #41FF00; padding: 5px; border-left: hidden; border-right: hidden; border-top: hidden; } .region.bottom.bar { border: 2px solid #41FF00; border-top: hidden; border-left: hidden; border-right:hidden; } header { text-align: center; } .MMM-Luftdaten { font-family: BS; } .MMM-Luftdaten .header { color: #41FF00; border-bottom: #087009; } .MMM-RAIN-MAP { border: 2px solid #087009; } .MMM-AirQuality { font-family: BS; }
“BS” and “FS” are the two fonts I’m using, both fonts are the “original” fonts used in the Fallout games for terminals and the so called PipBoy.
Feel free to share your thoughts I’m sure there are some ways to improve parts of the coding