MagicMirror Forum

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

    oscarb

    @oscarb

    2
    Reputation
    192
    Profile views
    5
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Website www.oscarb.se/ Location Stockholm, Sweden

    oscarb Unfollow Follow

    Best posts made by oscarb

    • Show date below time and date info on several lines

      Hi!

      Just thought I would share how I put the date below the time for the default Clock module using only CSS - no need to modify or create your own clock module!

      0_1564610343042_Screenshot 2019-07-31 at 23.56.53.png

      custom.css

      /* 
          CLOCK
      */
      
      #module_2_clock > div > div {
          display: flex;
          flex-direction: column;
      }
      
      /* Date */
      #module_2_clock > div > div > div.date {
          order: 2;
      }
      
      /* Time */
      #module_2_clock > div > div > div.time {
          order: 1;
      
          font-family: Roboto, sans-serif;
          font-weight: 300;
          font-size: 80px;
          line-height: 75px;
          letter-spacing: -3px;
          color: #fff;    
      }
      
      

      Also, to show the week on a separate line and make it a little bit smaller, use HTML tags within brackets when setting the date format, like this:

      config.js

      {
        module: "clock",
        position: "top_right",
        config: {
          displaySeconds: false,
          dateFormat: "dddd D MMMM[< br/ >< small >vecka] W[< /small >]",
        }
      },
      

      NOTE: Since the forum is sanitising HTML, remove all the spaces from the tags above in < small >, < /small > and < br/ > to make it work.

      Hope this can inspire and help someone! 🙂

      posted in Showcase
      oscarb
      oscarb

    Latest posts made by oscarb

    • RE: Synology Docker Tutorial?

      @kusselin said in Synology Docker Tutorial?:

      Error: Cannot find module ‘/opt/magic_mirror/js/…/modules/default/defaultmodules.js’

      Maybe this will help someone else running into the same issue. I was unable to start Magic Mirror in Docker on my Synology NAS (using the karsten13/magicmirror image because v.2.15.0 is not in the bastilimbach one) and I got the same error as above.

      Turned out to be some permission issue I was able to solve by adding two more environment variables to the docker container:

      USER_ID: 1024
      GROUP_ID: 100
      

      This will run the docker container as the admin user on your NAS. If you wish to run it as some other user (which is preferable) you need to find the right user/group id (SSH into the NAS and then sudo cat /etc/passwd I believe).

      posted in Troubleshooting
      oscarb
      oscarb
    • RE: How to keep secrets out of config.js (server only)

      @sdetweil I’m running Magic Mirror in server mode and I’ve tried what @joshwilsonvu suggested but can’t get that to work neither in Chrome latest version on my MacBook Pro or in Fully Kiosk Browser on my Android tablet behind my mirror as Chrome then complains require is not defined.

      Do you have any ideas on how to get that working when not running Magic Mirror as an electron app?

      posted in Tutorials
      oscarb
      oscarb
    • RE: How to keep secrets out of config.js (server only)

      @joshwilsonvu It would be awesome if it was that simple but I’ve tried and it doesn’t. I believe this is due to how the config file is loaded into the browser/client as a JavaScript include so then when the browser tries to require it’s not defined and the config breaks.

      But on the other hand, there seems to be someone who wants to improve on that and if that happens then your suggestion would likely work 🙂
      https://github.com/MichMich/MagicMirror/pull/1947

      posted in Tutorials
      oscarb
      oscarb
    • How to keep secrets out of config.js (server only)

      Hi!

      Ever since I first found out about this project I’ve wanted to version control my config.js so I can share it with others and easily make backups. I’ve looked but haven’t found any easy way to do this while still keeping all my API keys secret since I’m running Magic Mirror server only in a docker container (with an Android tablet with Fully Kiosk Browser as the client).

      However, I’ve found a way using the query parameters of the URL which works in my scenario, please let me know if you get it to work for you as well.

      In the top of your config.js, add:

      const urlParams = new URLSearchParams(location.search);
      const secrets = Object.fromEntries(urlParams);
      

      Then further down where the secret is to be used, just add:

      modules: [
        {
      	module: "currentweather",
      	position: "top_right",
      	config: {
      		location: "Amsterdam,Netherlands",
      		appid: secrets.weatherApiKey
      	}
         }
      ]
      

      Then, wherever you start your Magic Mirror, change the URL so it’s something like:
      http://192.168.1.10:8123/?weatherApiKey=abcdefg123456&otheKey=secretkey123

      Now if you only have a few secrets then managing the URL shouldn’t be that hard. However if you do have plenty of keys and if you are able to run PHP then try out this PHP script to make managing the keys more easily:

      < ?php // Remove space 
        $ip = '192.168.1.10';
        $port = 8123;
      
        $secrets = array(
          'weatherApiKey' => '123456',
          'calendarApiKey' => 'abcdefg'
          'metroApiKey' => 'abc123',
        );
      
        $url = "http://$ip:$port/?" . http_build_query($secrets);
        header("Location: $url");
        exit();
      ?>
      

      Don’t forget to point whatever client you’re using to this PHP script instead.

      Let me know what you think or if you have any suggestions on improvements! 🙂

      posted in Tutorials
      oscarb
      oscarb
    • Show date below time and date info on several lines

      Hi!

      Just thought I would share how I put the date below the time for the default Clock module using only CSS - no need to modify or create your own clock module!

      0_1564610343042_Screenshot 2019-07-31 at 23.56.53.png

      custom.css

      /* 
          CLOCK
      */
      
      #module_2_clock > div > div {
          display: flex;
          flex-direction: column;
      }
      
      /* Date */
      #module_2_clock > div > div > div.date {
          order: 2;
      }
      
      /* Time */
      #module_2_clock > div > div > div.time {
          order: 1;
      
          font-family: Roboto, sans-serif;
          font-weight: 300;
          font-size: 80px;
          line-height: 75px;
          letter-spacing: -3px;
          color: #fff;    
      }
      
      

      Also, to show the week on a separate line and make it a little bit smaller, use HTML tags within brackets when setting the date format, like this:

      config.js

      {
        module: "clock",
        position: "top_right",
        config: {
          displaySeconds: false,
          dateFormat: "dddd D MMMM[< br/ >< small >vecka] W[< /small >]",
        }
      },
      

      NOTE: Since the forum is sanitising HTML, remove all the spaces from the tags above in < small >, < /small > and < br/ > to make it work.

      Hope this can inspire and help someone! 🙂

      posted in Showcase
      oscarb
      oscarb