MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    1. Home
    2. jamaces
    J
    • Profile
    • Following 0
    • Followers 0
    • Topics 7
    • Posts 17
    • Best 1
    • Controversial 0
    • Groups 0

    jamaces

    @jamaces

    6
    Reputation
    3
    Profile views
    17
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    jamaces Unfollow Follow

    Best posts made by jamaces

    • Kitchen Magic Mirror Minus the Mirror - First RPi Project

      Screen Shot 2021-03-06 at 8.09.41 PM.jpg ![0_1615079390308_Screen Shot 2021-03-06 at 8.09.41 PM.png](Uploading 100%)
      I have dreamed of building a digital calendar since I first saw a project a couple of years back. The only thing I don’t always want to see my ugly mug and I’d rather see pictures and use it as a display to replace a calendar.

      I started toying with a “free” laptop screen. $60 later in drivers that never worked I gave up and went with an open box monitor from bestbuy for $100. I started putting together how much I would be spending to build the additional hardware and then having to mount. When really I could buy a monitor and wall mount and it would be all set.

      Everything else came together really well. The biggest downfall just mounting a monitor to the wall is where do you hide the cords. I found they make VESA mounts to attach micro computers to which wouldn’t be possible without. But it is also my biggest pet peeve of things not being clean.

      Back.jpg

      Hardware list with links:

      • Raspberry Pi 3B+
      • LG-22MN430H-B https://www.bestbuy.ca/en-ca/product/lg-21-5-fhd-75hz-5ms-gtg-ips-led-freesync-gaming-monitor-22mn430h-b-black/14420211?cmp=knc-s-71700000055264709&gclid=Cj0KCQiA7YyCBhD_ARIsALkj54okJp2X4QYY6xbwWsdXBt_vXmeMJ2ID8zZ8DP-R8Nj4Gid3wW9BfmkaAiS7EALw_wcB&gclsrc=aw.ds
      • 19v Power adapter for LG Monitor (the one that comes with the monitor is too big to fit behind. https://www.amazon.ca/gp/product/B07CNJYXPX/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1
      • 5v genuine apple iPad charger (the official raspberry pi adapter again is too big. I know what I should use but I couldn’t get it to fit and I have had no power warnings or issues for a week of it running)
      • 3 plug flush mount, fabric wrapped extension cord. https://www.amazon.ca/dp/B07PQYN4K4/ref=cm_sw_r_cp_api_i_MJ0PW2DJ9J72KEY50F5D?_encoding=UTF8&psc=1
      • Amazon tilting monitor wall mount. https://www.amazon.ca/gp/product/B01KBEO54Q/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
      • Micro Computer Vesa Mount (use to mount everything on it) https://www.amazon.ca/gp/product/B07KB4YWQS/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
      • 90degree HDMI cable https://www.amazon.ca/gp/product/B079JPH1B4/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1
      • White zip ties

      The modules that I am using

      Default

      • clock
      • calendar
      • weather
      • weather (copied and running twice for CSS)
      • newsFeed

      Modules

      • MMM-NowPlayingOnSpotify
      • MMM-MLB
      • MMM-MLB (copied and running twice for CSS)
        *MMM-BackgroundSlideshow

      CSS was my biggest obstacle but I was able to slowly figure my way around. For the weather and the MLB I had to run two instances so the background would work properly without a gap between the two modules. I had a hard time getting the bottom CSS to work with margins and eventually it just worked.

      Everything has been running for a week before I mounted it and it seems to go great. I need to fix the CSS on the MLB scoreboard for the colour, and I noticed that my one calendar isn’t showing the symbol and the date is off for it.

      Thank you to everyone on the forum who helped me on my way. I started with knowing hardly anything about a raspberry pi, css, or even really building using script. I still know there is a ton to learn and I look forward to my next project.

      posted in Show your Mirror
      J
      jamaces

    Latest posts made by jamaces

    • RE: Make two modules overlap.

      @sdetweil

      MMM-ImagesPhotos
      config: {
           opacity: 100,
           updateInterval: 999,
           maxWidth:  “75%”,
           maxHeight: “75%”,
           }
      
      MMM-doomsDay
      config:{
           toWhat:” “,
           doomsDay: “2021-12-25 24:00:00”,
           Present: “Merry Christmas”,
           timesUp: “ “,
           singular: “ “,
           plural: “ “,
           }
      

      B25CE87D-9FB8-46DF-B847-A6EE53A914F1.jpeg

      posted in Troubleshooting
      J
      jamaces
    • RE: Make two modules overlap.

      @sdetweil

      bottom_right

      I have the photo sitting above doomsday

      posted in Troubleshooting
      J
      jamaces
    • Make two modules overlap.

      I am trying to make a Christmas Countdown.
      Currently I have a .png working with MMM-ImagesPhotos and MMM-doomsDay. Currently the image sits above the doomsday. It looks ok but not 100%.

      Is it possible to overlap doomsDay with ImagesPhotos so that the number will sit in the space beside the tree. I have uploaded the png I am using below.

      Any help is greatly appreciated. Thank you!

      Screen Shot 2021-11-24 at 6.16.47 PM.png

      posted in Troubleshooting
      J
      jamaces
    • Kitchen Magic Mirror Minus the Mirror - First RPi Project

      Screen Shot 2021-03-06 at 8.09.41 PM.jpg ![0_1615079390308_Screen Shot 2021-03-06 at 8.09.41 PM.png](Uploading 100%)
      I have dreamed of building a digital calendar since I first saw a project a couple of years back. The only thing I don’t always want to see my ugly mug and I’d rather see pictures and use it as a display to replace a calendar.

      I started toying with a “free” laptop screen. $60 later in drivers that never worked I gave up and went with an open box monitor from bestbuy for $100. I started putting together how much I would be spending to build the additional hardware and then having to mount. When really I could buy a monitor and wall mount and it would be all set.

      Everything else came together really well. The biggest downfall just mounting a monitor to the wall is where do you hide the cords. I found they make VESA mounts to attach micro computers to which wouldn’t be possible without. But it is also my biggest pet peeve of things not being clean.

      Back.jpg

      Hardware list with links:

      • Raspberry Pi 3B+
      • LG-22MN430H-B https://www.bestbuy.ca/en-ca/product/lg-21-5-fhd-75hz-5ms-gtg-ips-led-freesync-gaming-monitor-22mn430h-b-black/14420211?cmp=knc-s-71700000055264709&gclid=Cj0KCQiA7YyCBhD_ARIsALkj54okJp2X4QYY6xbwWsdXBt_vXmeMJ2ID8zZ8DP-R8Nj4Gid3wW9BfmkaAiS7EALw_wcB&gclsrc=aw.ds
      • 19v Power adapter for LG Monitor (the one that comes with the monitor is too big to fit behind. https://www.amazon.ca/gp/product/B07CNJYXPX/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1
      • 5v genuine apple iPad charger (the official raspberry pi adapter again is too big. I know what I should use but I couldn’t get it to fit and I have had no power warnings or issues for a week of it running)
      • 3 plug flush mount, fabric wrapped extension cord. https://www.amazon.ca/dp/B07PQYN4K4/ref=cm_sw_r_cp_api_i_MJ0PW2DJ9J72KEY50F5D?_encoding=UTF8&psc=1
      • Amazon tilting monitor wall mount. https://www.amazon.ca/gp/product/B01KBEO54Q/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
      • Micro Computer Vesa Mount (use to mount everything on it) https://www.amazon.ca/gp/product/B07KB4YWQS/ref=ppx_yo_dt_b_asin_title_o02_s02?ie=UTF8&psc=1
      • 90degree HDMI cable https://www.amazon.ca/gp/product/B079JPH1B4/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1
      • White zip ties

      The modules that I am using

      Default

      • clock
      • calendar
      • weather
      • weather (copied and running twice for CSS)
      • newsFeed

      Modules

      • MMM-NowPlayingOnSpotify
      • MMM-MLB
      • MMM-MLB (copied and running twice for CSS)
        *MMM-BackgroundSlideshow

      CSS was my biggest obstacle but I was able to slowly figure my way around. For the weather and the MLB I had to run two instances so the background would work properly without a gap between the two modules. I had a hard time getting the bottom CSS to work with margins and eventually it just worked.

      Everything has been running for a week before I mounted it and it seems to go great. I need to fix the CSS on the MLB scoreboard for the colour, and I noticed that my one calendar isn’t showing the symbol and the date is off for it.

      Thank you to everyone on the forum who helped me on my way. I started with knowing hardly anything about a raspberry pi, css, or even really building using script. I still know there is a ton to learn and I look forward to my next project.

      posted in Show your Mirror
      J
      jamaces
    • RE: Remove space between two modules. Custom CSS code and pictures.

      @jamaces

      For future knowledge

      within the Main.css there is

      .region.bottom .module {
           margin-top: 30px;
           margin-bottom: 0px;
      }
      

      adding to custom.css

      .region.bottom .module{
           margin-top: 0px;
      }
      

      Will fix the issue.

      However if you have a bottom_bar module it removes the gap between bottom_bar and anything in bottom_left/center/right

      posted in Custom CSS
      J
      jamaces
    • RE: Remove space between two modules. Custom CSS code and pictures.

      @bkeyport I flipped the weather to bottom_right and MMM-MLB to top_right

      MMM-MLB is now perfect.

      Weather is now showing a gap between bottom_right. So it must be within magicmirror and not module based.

      As an “easy” fix I tried bottom_left and its the same thing there is a gap between the two modules.

      I don’t really know what i’m going to poke around at but I will give it a go. See what I can find.

      posted in Custom CSS
      J
      jamaces
    • RE: Remove space between two modules. Custom CSS code and pictures.

      @bkeyport

      I did change the padding of the module and it didn’t change the distance.

      I have since tried doing .region and again it was a no go. Just moved both modules all around without changing the distance between the two.

      I don’t understand how the weather module worked no concern.

      Maybe I will try changing the location of the mlb module to the top where weather is and see if it’s location based or module based.

      posted in Custom CSS
      J
      jamaces
    • Remove space between two modules. Custom CSS code and pictures.

      I was able to achieve this with the default weather module.
      I duplicated the module so I could remove the space between current and forecast.

      Using custom CSS I was able to do the following

      .module.weather {
           background-color:rgba(0,0,0,0.1);
           border-radius:10px 10px 0px;
           padding:4px;
           margin-bottom:0px;
      }
      .module.weather2 {
           background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
           border-radius:0px 0px 10px;
           padding:4px;
      }
      

      which it now looks like this

      I am trying to do the same for MMM-MLB.

      I duplicated the module so I could have one with scores and the other with standings.

      My custom css looks the exact same other than no gradient.

      .module.MMM-MLB {
           background-color:rgba(0,0,0,0.3);
           border-radius:10px 10px 0px;
           padding:4px;
           margin-bottom:0px;
      }
      .module.MMM-MLB2 {
           background-colour:rgba(0,0,0,0.3));
           border-radius:0px 0px 10px;
           padding:4px;
      }
      

      IT STILL HAS THE GAP!!

      I have tried margin-top, and margin-bottom on both with 0px, 0%, 0, I have tried -500px and nothing will change the distance.

      If anyone has a suggestion its appreciated.

      Thank you.

      posted in Custom CSS
      J
      jamaces
    • RE: Add fade to transparent background on module.

      @bkeyport Thank you! I realized after I made the post it is called gradient.

      For future knowledge

      change background-color to background-image and add linear-gradient with another RGBA value.

      Thank you for your help.

      Is there a way to have CSS go gradient to the left and to the right?

      I have the news module at the bottom and I really just want it to be dark in the centre where the headlines are.

      I have tried to right and to left, I have tried radial and nothing seems to work.

      posted in Custom CSS
      J
      jamaces
    • RE: Can I setup and install magic mirror on a 3B+ and have it boot on a ZeroW?

      @sdetweil this forum is amazing. Thank you.

      posted in Hardware
      J
      jamaces