• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

First MagicMirror

Scheduled Pinned Locked Moved Show your Mirror
28 Posts 13 Posters 28.2k Views 14 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    sdetweil
    last edited by sdetweil Dec 5, 2018, 10:16 PM Dec 5, 2018, 10:13 PM

    for the random, this routine from the MMM-ImagesPhotos module is an example
    the images are in an array. the WallberryTheme gets one pic at a time from the server side…

    randomIndex: function(photos) {
    		if (photos.length === 1) {
    			return 0;
    		}
    
    		var generate = function() {
    			return Math.floor(Math.random() * photos.length);
    		};
    
    		var photoIndex = generate();
    		this.lastPhotoIndex = photoIndex;
    
    		return photoIndex;
    	},
    

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    1 Reply Last reply Reply Quote 0
    • D Offline
      delightedCrow Project Sponsor Module Developer @PaulB
      last edited by Dec 6, 2018, 12:41 AM

      @paulb Thanks for the kind comments!
      As for your question, there are two different ways I can think of to solve your question using the WallberryTheme:

      Method 1:

      Create your own Unsplash collection and add all of the pictures of your village that you want displayed to this collection. Then all you have to do is add this Unsplash collection ID to the module config section for the WallberryTheme (see the module docs here for an example of how to set up the config file with collections).

      Doing it this way means you’d have to curate your own photos instead of doing a keyword search, but you wouldn’t have to edit the WallberryTheme module code.

      Method 2:

      Edit the WallberryTheme module code so that when it sends a photo request to Unsplash it uses the query parameter to filter random photos by your search term. So at about the line of code here you’d probably want to change it to something like: "&query=mysearchkeyword" .

      I haven’t tested this method and the Unsplash docs are light on details, so you’d probably have to do some tinkering to figure out if it’ll work the way you want.

      Hope one of these helps :)

      1 Reply Last reply Reply Quote 0
      • P Offline
        PaulB
        last edited by Dec 6, 2018, 9:52 AM

        @delightedCrow Thank you for your fast response. :)
        I will try Method 1 as suggested.

        Seriously, this module enables you to have your own art gallery at home. How awesome is that?! :)

        1 Reply Last reply Reply Quote 0
        • P Offline
          PaulB
          last edited by Dec 6, 2018, 9:04 PM

          @delightedCrow seriously… this is the most awesome module I 've come across until now.

          I installed it this morning and it brings me so much joy.

          delightedCrow thank you very much for sharing this. It’s super cool :)

          1 Reply Last reply Reply Quote 1
          • P Offline
            PaulB
            last edited by Dec 6, 2018, 9:09 PM

            @community I would like to recommend black&white pictures or slidly darker pictures. Otherwise you will have some difficulties with the original font. The standard MM font throws shadows on light wallpapers.

            Kind regards from hamburg :)

            1 Reply Last reply Reply Quote 1
            • F Offline
              flodus
              last edited by flodus Apr 23, 2019, 9:16 AM Apr 22, 2019, 2:52 PM

              Hello !
              Your theme is so beautiful and minimalistic, i love that !
              I want to know how can I change css files to have colored icons for the current weather and forecast weather ?

              I use this custom.css code with the weather an forecast modules

              .currentweather .wi-sunrise {
              color: #ffd700;
              }
              .currentweather .wi-sunset {
              color: #ffa500;
              }
              .currentweather .wi-day-sunny {
              color: #ffff00;
              }
              .currentweather .wi-night-showers {
              color: #55acee;
              }
              .currentweather .wi-degrees {
              color: #415;
              }
              .currentweather .wi-rain {
              color: #55acee;
              }
              .currentweather .wi-showers {
              color: #55acee;
              }
              .currentweather .wi-night-showers {
              color: #55acee;
              }
              .currentweather .wi-night-alt-cloudy-windy {
              color: #aaa;
              }
              .currentweather .wi-night-cloudy {
              color: #aaa;
              }
              .currentweather .wi-cloudy {
              color: #aaa;
              }
              .currentweather .wi-day-cloudy {
              color: #aaa;
              }
              .currentweather .wi-cloudy {
              color: #aaa;
              }
              .currentweather .wi-cloudy-windy {
              color: #aaa;
              }
              .currentweather .wi-showers {
              color: #55acee;
              }
              .currentweather .wi-thunderstorm {
              color: #ff00ff;
              }
              .currentweather .wi-snow {
              color: #fff;
              }
              .currentweather .wi-fog {
              color: #999;
              }
              .currentweather .wi-night-clear {
              color: #fff;
              }
              .currentweather .wi-night-rain {
              color: #55acee;
              }
              .currentweather .wi-night-thunderstorm {
              color: #ff00ff;
              }
              .currentweather .wi-night-snow {
              color: #fff;
              }
              
               
              .weatherforecast .wi-sunrise {
              color: #ffd700;
              }
              .weatherforecast .wi-sunset {
              color: #ffa500;
              }
              .weatherforecast .wi-day-sunny {
              color: #ffff00;
              }
              .weatherforecast .wi-night-showers {
              color: #55acee;
              }
              .weatherforecast .wi-degrees {
              color: #415;
              }
              .weatherforecast .wi-rain {
              color: #55acee;
              }
              .weatherforecast .wi-showers {
              color: #55acee;
              }
              .weatherforecast .wi-night-showers {
              color: #55acee;
              }
              .weatherforecast .wi-night-alt-cloudy-windy {
              color: #aaa;
              }
              .weatherforecast .wi-night-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-day-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-cloudy {
              color: #aaa;
              }
              .weatherforecast .wi-cloudy-windy {
              color: #aaa;
              }
              .weatherforecast .wi-showers {
              color: #55acee;
              }
              .weatherforecast .wi-thunderstorm {
              color: #ff00ff;
              }
              .weatherforecast .wi-snow {
              color: #fff;
              }
              .weatherforecast .wi-fog {
              color: #999;
              }
              .weatherforecast .wi-night-clear {
              color: #fff;
              }
              .weatherforecast .wi-night-rain {
              color: #55acee;
              }
              .weatherforecast .wi-night-thunderstorm {
              color: #ff00ff;
              }
              
              D 1 Reply Last reply May 8, 2019, 1:52 AM Reply Quote 1
              • bheplerB Offline
                bhepler Module Developer
                last edited by Apr 23, 2019, 1:47 AM

                Please use the markdown features of the board when posting code.

                F 1 Reply Last reply Apr 23, 2019, 9:17 AM Reply Quote 0
                • F Offline
                  flodus @bhepler
                  last edited by Apr 23, 2019, 9:17 AM

                  @bhepler
                  thank you for this reminder :smiling_face_with_open_mouth_cold_sweat:
                  i’ve edited my post !

                  1 Reply Last reply Reply Quote 0
                  • D Offline
                    delightedCrow Project Sponsor Module Developer @flodus
                    last edited by May 8, 2019, 1:52 AM

                    @flodus thanks for the comments, sorry for the wait in reply :)

                    I’m using the Weather Icons class names for the DarkSky API (formerly Forecast.io), so you can add a CSS color rule for each of these icon classes (this listed taken from the API here):

                    wi-forecast-io-clear-day: day-sunny
                    wi-forecast-io-clear-night: night-clear
                    wi-forecast-io-rain: rain
                    wi-forecast-io-snow: snow
                    wi-forecast-io-sleet: sleet
                    wi-forecast-io-wind: strong-wind
                    wi-forecast-io-fog: fog
                    wi-forecast-io-cloudy: cloudy
                    wi-forecast-io-partly-cloudy-day: day-cloudy
                    wi-forecast-io-partly-cloudy-night: night-cloudy
                    wi-forecast-io-hail: hail
                    wi-forecast-io-thunderstorm: thunderstorm
                    wi-forecast-io-tornado: tornado
                    

                    So for example, if you wanted to change the sunny day icon color you would add the following rule to your custom.css file:

                    .wi-forecast-io-clear-day {
                      color: #ffff00;
                    }
                    

                    If you want to target the forecast sunny day icon specifically you would add .forecast before the icon class name like this:

                    .forecast .wi-forecast-io-clear-day {
                      color: #ffff00;
                    }
                    

                    And if you want to target the current day’s sunny day icon specifically you would add .current__temperature before the icon class name like this:

                    .current__temperature .wi-forecast-io-clear-day {
                      color: #ffff00;
                    }
                    

                    Hope this helps!

                    1 Reply Last reply Reply Quote 0
                    • WILLIAM_WANDIEW Offline
                      WILLIAM_WANDIE
                      last edited by May 9, 2019, 7:44 AM

                      This is really nice…

                      D 1 Reply Last reply May 9, 2019, 9:39 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy