A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
  • My Magic "Mirror" Desk Display

    18
    12
    7 Votes
    18 Posts
    10k Views
    BerkSmash1984B
    @Egnos Bullseye Release 11
  • Re: Matuki's MMM-IT8951 module for WaveShare e-ink displays

    8
    0 Votes
    8 Posts
    3k Views
    M
    Damn, it’s even worse than that. WaveShare has abandoned the idea of having a single it-8951 demo that works across all of their dislpays. Instead, they have a separate demo for each - down to differences in revision, screen size, etc… Each demo hard-codes screen size, VCOM, and various other settings. And of course, there’s no reference to documentation (they use raw hex commands with barely documented parameters). The protocol for driving the e-Paper HAT has changed dramatically and the node-it8951 module basically needs to be rewritten. WaveShare seems to have diverged from the it-8951 datasheet quite a bit. e.g. they now have a DC pin for switching between Data mode and Command mode (instead of sending a 4-byte preamble). Rather than try and update node-it8951 to work with all display, I’m going to fork node-it8951 as node-it8951-7in5V2 and only support the display I have. But I’ll keep it as close to the e-Paper demo as possible, so anyone else with programming skills can adapt it for another model by referencing the demo code. thanks for your help, even if it was only as a rubber duck :-)
  • Weatherstation using MagicMirror+Rasp3b+7inch touchscreen

    13
    3
    4 Votes
    13 Posts
    3k Views
    C
    @extec said in Weatherstation using MagicMirror+Rasp3b+7inch touchscreen: Hello Mr. cgillinger, first of all thank you very much for posting. I just got myself into RPis and would’ve loved to have a Weatherstation just like yours. My Display is 5", 800x480. More than enough for the beginning. Now Maybe you are able to help me out. I have a fresh install of RPi OS with NodeJS 20.11 and Magic Mirror installed. I was able to modify some modules and change the color of the restart buttons. However I was not able to integrate the Weather Icons or change the color of them. Also how did you manage to resize the “Forecast” module? Any help would be appreciated. Many greetings, extec attachment: this is what it looks like now. [image: 1706998425553-img_4358.jpeg] I just entered the colors in the “custom.css” file, located in the MagicMirror/css folder. And if I remember correctly it was a bit sensitive to location. Let me just paste my entire custom.css, and see if that works on your PI: /* MagicMirror² Custom CSS Sample * * Change color and fonts here. * * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;' * * MIT Licensed. */ /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */ :root { --color-text: #EEEEEE; --color-text-dimmed: #666; --color-text-bright: #fff; --color-background: black; --font-primary: "Roboto Condensed"; --font-secondary: "Roboto"; --font-size: 20px; --font-size-small: 0.75rem; --gap-body-top: 60px; --gap-body-right: 60px; --gap-body-bottom: 60px; --gap-body-left: 60px; --gap-modules: 30px; } #module_4_weather header { font-size: 30px !important; /* Forces the font size, overriding other rules */ } /* Weather Icon Size */ .weather .weather-icon .wi { font-size: 50x; /* Adjust as needed */ } .wi-cloudy { color: #ADD8E6; /* Light blue color */ } /* Add more rules for each icon */ .wi-day-sunny { color: #FFD700; } /* Bright Yellow */ .wi-night-clear { color: #FFD27F; } /* Moon Yellow */ .wi-day-cloudy { color: #87CEEB; } /* Sky Blue */ .wi-night-alt-cloudy { color: #1E90FF; } /* Dark Blue */ .wi-day-cloudy-gusts { color: #A9BACD; } /* Gray Blue */ .wi-night-alt-cloudy-gusts { color: #4169E1; } /* Twilight Blue */ .wi-day-cloudy-windy { color: #ADD8E6; } /* Light Blue */ .wi-night-alt-cloudy-windy { color: #191970; } /* Midnight Blue */ .wi-day-fog { color: #D3D3D3; } /* Light Gray */ .wi-night-fog { color: #C0C0C0; } /* Silver */ .wi-day-hail { color: #ACE5EE; } /* Ice Blue */ .wi-night-hail { color: #4682B4; } /* Steel Blue */ .wi-day-lightning { color: #FFA500; } /* Bright Orange */ .wi-night-alt-lightning { color: #FFD700; } /* Gold */ .wi-day-rain { color: #0000FF; } /* Blue */ .wi-night-alt-rain { color: #483D8B; } /* Dark Slate Blue */ .wi-day-rain-mix { color: #6495ED; } /* Cornflower Blue */ .wi-night-alt-rain-mix { color: #4169E1; } /* Royal Blue */ .wi-day-rain-wind { color: #1E90FF; } /* Dodger Blue */ .wi-night-alt-rain-wind { color: #0000CD; } /* Medium Blue */ .wi-day-showers { color: #00BFFF; } /* Deep Sky Blue */ .wi-night-alt-showers { color: #6A5ACD; } /* Slate Blue */ .wi-day-sleet { color: #778899; } /* Light Slate Gray */ .wi-night-alt-sleet { color: #A9A9A9; } /* Dark Gray */ .wi-day-snow { color: #FFFFFF; } /* White */ .wi-night-alt-snow { color: #DCDCDC; } /* Gainsboro */ .wi-day-sprinkle { color: #B0C4DE; } /* Light Steel Blue */ .wi-night-alt-sprinkle { color: #ADD8E6; } /* Light Blue */ .wi-day-storm-showers { color: #FF8C00; } /* Dark Orange */ .wi-night-alt-storm-showers { color: #B8860B; } /* Dark Goldenrod */ .wi-day-sunny-overcast { color: #EEE8AA; } /* Pale Goldenrod */ .wi-night-alt-cloudy-high { color: #87CEFA; } /* Light Sky Blue */ .wi-day-light-wind { color: #B0E0E6; } /* Powder Blue */ .wi-night-alt-partly-cloudy { color: #00CED1; } /* Dark Turquoise */ .wi-cloudy { color: #ADD8E6; /* Light blue color */ } .wi-cloud { color: #D3D3D3; } /* Light Gray */ .wi-cloudy { color: #A9BACD; } /* Gray Blue */ .wi-cloudy-gusts { color: #4682B4; } /* Steel Blue */ .wi-cloudy-windy { color: #87CEEB; } /* Sky Blue */ .wi-fog { color: #C0C0C0; } /* Silver */ .wi-hail { color: #ACE5EE; } /* Ice Blue */ .wi-rain { color: #0000FF; } /* Blue */ .wi-rain-mix { color: #6495ED; } /* Cornflower Blue */ .wi-rain-wind { color: #1E90FF; } /* Dodger Blue */ .wi-showers { color: #00BFFF; } /* Deep Sky Blue */ .wi-sleet { color: #778899; } /* Light Slate Gray */ .wi-snow { color: #FFFFFF; } /* White */ .wi-sprinkle { color: #B0C4DE; } /* Light Steel Blue */ .wi-storm-showers { color: #FF8C00; } /* Dark Orange */ .wi-thunderstorm { color: #FFD700; } /* Gold */ .wi-snow-wind { color: #DCDCDC; } /* Gainsboro */ .wi-smog { color: #FFFFE0; } /* Light Yellow */ .wi-smoke { color: #BC8F8F; } /* Rosy Brown */ .wi-lightning { color: #FFA500; } /* Bright Orange */ .wi-raindrops { color: #5F9EA0; } /* Cadet Blue */ .wi-raindrop { color: #ADD8E6; } /* Light Blue */ .wi-dust { color: #F0E68C; } /* Khaki */ .wi-snowflake-cold { color: #F0FFFF; } /* Azure */ .wi-windy { color: #F08080; } /* Light Coral */ .wi-strong-wind { color: #00008B; } /* DarkBlue */ .wi-sunrise { color: #FFD700; } /* Bright Yellow */ .wi-sunset { color: #FF8C00; } /* Sunset Orange */ /* Weather Icon Size */ #module_4_weather .weather-icon .wi { font-size: 40px; /* Adjust the icon size as needed */ } /* Temperature Text Size */ .weather .align-right.bright { font-size: 26px; } .weather .day { font-size: 26px !important; /* Forces the font size, overriding other rules */ } Getting the size of the weather icons right was a lot of fiddling to find out the name of the class. Now, I use the standard Weather module, but for my location I use swedish SMHI as provider: { module: "weather", position: "bottom_left", //initialLoadDelay: "500", config: { weatherProvider: "smhi", type: "current", location:"Stockholm", lat: "XXXXXXXX", lon: "XXXXXXX", windUnits: "metric", degreeLabel: "true", howPrecipitationAmount: "true", showPrecipitationProbability: "true", colored: "True", } }, And for forecast I use Norweigan, Yr: { module: "weather", position: "top_right", header: "Väderprognos", config: { weatherProvider: "yr", initialLoadDelay: "500", type: "hourly", location:"Stockholm", lat: "XXXXXXXX", lon: "XXXXXXXX", maxEntries: "9", fade: "false", fadePoint: "1", colored: "true", degreeLabel: "true", //showPrecipitationAmount: "true", //showPrecipitationProbability: "true", //maxNumberOfDays: "10", } }, Hope this helps, otherwise I’ll have to dig deeper.
  • Mirror for a Charity Auction

    13
    1
    6 Votes
    13 Posts
    4k Views
    S
    and there are lots of cool docker containers to use dozzle will tell you about the status of all the containers [image: 1705537102672-screenshot-at-2024-01-17-18-13-45-resized.png] uptime-kuma can let you check and report on the status of different ‘apps’ web urls, connections… and send alerts [image: 1705537153911-screenshot-at-2024-01-17-18-17-23-resized.png] watchtower will watch all the versions of the docker containers and auto upgrade them as they change… my son and I have realized that if we lose our home network, there is no way for all this to tell us… so we are going to add uptime-kuma monitors of things running in the others house and then alert them if there is a lost connection.
  • MM digital display hung like a picture

    24
    1
    10 Votes
    24 Posts
    8k Views
    R
    @jbat66, that’s fantastic. I’ll experiment with that when I do a refresh of the whole deal. Thank you!
  • My Family Display Board

    4
    4
    7 Votes
    4 Posts
    4k Views
    bheplerB
    Looks great. I love the transparent calendar effect.
  • My SmartDisplay

    12
    2
    5 Votes
    12 Posts
    6k Views
    B
    @sdetweil Thank you Sam for the assitance once again! You are correct there was an error. I tried to copy the sample config and replaced my API Key from Openweather and entered in my lat and long. { module: "MMM-OpenWeatherMapForecast", header: "Weather", position: "top_right", classes: "default everyone", disabled: false, config: { apikey: "SUPER SECRET!!!", latitude: "51.506130", longitude: "-0.090270", iconset: "4c", concise: false, forecastLayout: "table" } }, The error Im getting is saying Verify styleshhet URLs, Affected Resource Localhost/:0 The weird thing I can use the API key for the default weather map no problem. Maybe I’m entering it in in the wrong format. Your help is much appreciated!
  • 4k Dashboard

    21
    2
    7 Votes
    21 Posts
    11k Views
    C
    Didd the CSS ever get shared?
  • -1 Votes
    1 Posts
    1k Views
    M
    Re: 75" (180x60cm) Standing Mirror with dual screens
  • My Bathroom Mirror

    16
    17
    8 Votes
    16 Posts
    7k Views
    O
    @lavolp3 Youre right!
  • Magic Touch Display

    15
    3
    5 Votes
    15 Posts
    5k Views
    S
    @Manino look at the source for https://github.com/Jopyth/MMM-Buttons his doc says that this module can send notifications to two other modules
  • Magic Dashboard & Whiteboard

    10
    4
    6 Votes
    10 Posts
    4k Views
    T
    @sum2023 Do you mind sharing your CSS code or config? I’m looking to do somethign similar but a newbie here
  • Vertical Magic Mirror with wooden Frame

    13
    9
    3 Votes
    13 Posts
    6k Views
    V
    Hi I really like your mirror and especially the Qashqai part. I see you use MMM-EmbedURL but what page are you showing there? How does that work? I would like to do something similar with my Volvo XC60. Thanks
  • 0 Votes
    4 Posts
    7k Views
    K
    @darksword23 Hi there, could you please share where did you get that kind of film? I tried to search on amazon.ca but could not find any. Thanks.
  • Config of MMM-CalendarEXT3

    1
    0 Votes
    1 Posts
    1k Views
    T
    Re: My family dashboard can you share the part of your config file for the module MMM-CalendarEXT3?
  • 0 Votes
    1 Posts
    2k Views
    C
    Re: My SmartDisplay
  • Kitchen Mirror / Whole Home Display

    12
    13
    4 Votes
    12 Posts
    7k Views
    M
    I don’t want to paint the cabinets but if that’s the cheapest option, I may consider it. How much would it cost to stain the cabinets? Any other ideas to upgrade the cabinets? What about ideas for upgrading the kitchen? I am on a very tight budget (<$1000)
  • My family dashboard

    7
    7
    3 Votes
    7 Posts
    6k Views
    F
    @blouzbee Looks amazing, How did you get the themed holiday frames on the calendar? such a great touch. Thanks
  • Kitchen Dashboard

    8
    5
    9 Votes
    8 Posts
    3k Views
    O
    Great Work!
  • MM as Desktop background (for MacOS / Linux)

    7
    3
    1 Votes
    7 Posts
    3k Views
    ankonaskiff17A
    @MMRIZE I think he sees icons in front of the weather module, doesn’t realize MM is the desktop