First MagicMirror

PaulB

@delightedCrow I would really like to know how you got the API. The description is too hard to get for me… I guess.

@Community: Do you guys have any idea?

I am planning to show a collection of pictures from the keyword search of my village. Therefore I would really like to know how to implement the modules as well as configuring the module on how to show only images of a certain keyword.

Hopefully someone can help. :)

Kind regards from hamburg,

Paul

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…

delightedCrow

@WILLIAM_WANDIE Thanks a ton :D

pnobrega

Hi. Great look.
By any change you took pics while mounting?
Looking for ideias for the frame and how to put all together and secure…
thanks

delightedCrow

@pnobrega Thanks, I did a couple of blog posts about the monitor tear down and the framing process which show some pics.

This version of Wallberry is mostly a prototype held together with hope and electrical tape, so I don’t know how great a model it will be for you (others have done it much better with better tools), but it’s a fun example of doing a wall display with few resources.

HayyatAli

well done…liked your work…i m interested to build this mirror but really don’t know how to start???from where should i start???any help???

mumblebaj

@HayyatAli
In my opinion, get a Pi 3 B+, download the software and follow the instructions to install. Then play around with some of the modules and see how far you get. Took me only a few hours to get mine up an running and I explore different modules as often as I can.

delightedCrow

@HayyatAli thanks!

Breaking the project into small steps is a good idea and @mumblebaj has really good advice in starting with the raspberry pi. If you don’t already have one I recommend taking a look at Adafruit. Once you have your pi set up you can look at getting a monitor, then you can decide how you want to frame it.