First MagicMirror

sdetweil

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;
	},

delightedCrow

@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 :)

PaulB

@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?! :)

PaulB

@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 :)

PaulB

@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 :)

flodus

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;
}

bhepler

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

flodus

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

delightedCrow

@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!

WILLIAM_WANDIE

This is really nice…