Wow that looks amazing! Great work!

@sdetweil In the MMM-EasyPix.js

How can I send notifications with the MMM-EasyPix module?
I tried

image.onerror = this.sendNotification('Pic is not exisiting');

but nothing happened.
If I do

image.onerror = console.log('Pic is not exisiting');

it logs ‘Pic is not existing’ in the console.

Any Ideas?

@sdetweil Thank you that helped me a little bit.
Do you know how I can send notifications to other modules with the MMM-EasyPix module?
I tried

image.onerror = this.sendNotification('Pic is not exisiting');

but it didnt send a notification.

@sdetweil do you have any Idea how I could detect the loading error?

Does nobody have an idea?

I have different images that are displayed. Each of them has an MMM-EasyPix entry in the config. The images are switched through with MMM pages. Is there a way to jump directly to the next page if an image doesn’t exist in the pix folder?

Hello,
I want to display a picture which is bigger than the screen. The height of the pic is bigger than the height of the screen, so I used the backgroundAnimationEnabled Option of the MMM-BackgroundSlideshow module. Now the picture scrolls either from top to bottom, or from bottom to top. But I want that it only scrolls from top to bottom. Is there any option to set that?

Here is my config entry of the module:

{
    module: 'MMM-BackgroundSlideshow',
    position: 'fullscreen_below',
    config: {
      imagePaths: ['modules/MMM-BackgroundSlideshow/bt-background/'],
	  slideshowSpeed: 86400,
      transitionImages: true,
      randomizeImageOrder: true,
	  transitionSpeed: '0s',
	  backgroundAnimationEnabled: true,
	  backgroundPosition: 'top',
	  backgroundSize: 'cover',
	  animations: ['slide'],
	  backgroundAnimationLoopCount: '1',
	  backgroundAnimationDuration: '5s',
    },
  },

Thanks for any help

@j-lewis You are welcome

I’m not a css expert either, but I hope I can explain it to you in an understandable way.

1. Why do you think this worked? (and/or why did it not work before)

The .MMM-EveryNews is the selector, so for example

.MMM-EveryNews .header {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

wanted to select the header from MMM-EveryNews and set the color to cyan and the the text-align to center.

You renamed the modules to MMM-EveryNews2 and MMM-EveryNews3 but didn’t change the selector in the css file.
So for example in your MMM-EveryNews2 module the css file still wanted to change the header from MMM-EveryNews. But there was nothing with the name MMM-EveryNews, because you changed the Name to MMM-EveryNews2.

I hope this was understandable :grinning_face_with_sweat:

2. Is there another way to do this as it would be a pain to do with every update of the module

You could copy and paste the css entrys of each module in the custom.css file. (/MagicMirror/css/custom.css). I think that should work.

But I also think adding three different modules is not the best solution. It should somehow be possible to do this by adding the same module three times, but I haven’t been able to figure out how until now. Maybe someone else has an idea, I am also a just MM beginner.
But as long as this works for you, this solution is fine for now.

I am glad I was able to help you. :)

If you want to do that with the three different Modules you have to do a little change in the MMM-EveryNews.css file of each module:

.MMM-EveryNews .header {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

.MMM-EveryNews .source {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

.MMM-EveryNews .title {
  color: cyan;             /* Color the title text. Default is white. */
  text-align: center;           /* Align the title text. (left, center, right) */
  /*  display: none; */         /* Uncomment if you don't want title text */
}

.MMM-EveryNews .photo {
    width: 350px;             /* Maximum width of image */
    height: 350px
    padding: 0px;             /* Nudge image */
    float: left;              /* Align the picture. (left, center, right) */
}

.MMM-EveryNews .description {
  color: cyan;             /* Color the information. Default is white. */
  text-align: center;           /* Align the information. (left, center, right) */
  font-size: 18px;
/*  display: none; */         /* Uncomment if you don't want descriptive information */
}

For the Module MMM-EveryNews2 you have to chnage .MMM-EveryNews to .MMM-EveryNews2
The same with MMM-EveryNews3 and so on.
I think the modules should have all the same size then.

@j-lewis can you show me your config file when you try to add the same module 3 times?

Why don’t you jsut call the same module 3 times?

The deafualt module “helloworld” can do this :)

@Pielo Kannst du mir mal die css des Wettermoduls zeigen?
Davon abgesehen solltest du Änderungen in css lieber in der custom css machen und die css-Dateien der Module nicht verändern.

Ich bin zwar kein JavaScript Profi, aber ich versuche mal zu helfen.
Bei der slice Funktion muss, soweit ich weiß, als Startwert ein Integer und als Endwert ein Integer angegeben werden. “this.config.shortenText” ist aber ein boolean, oder? Meine Vermutung ist, dass das der Fehler ist.
Aber wie gesagt, ich bin kompletter Anfänger was JavaScript angeht, kann auch sein, dass ich hier völligen Blödsinn erzähle.

@Pielo Kannst du mir vielleicht noch deine custom.css zeigen? Vielleicht kann ich da etwas finden.

@Pielo Hmmm… Für mich sieht es so aus als sei die Schrift nur in der Tabelle zentriert und nicht im ganzen Modul. Die Überschrift vom Modul ist ja linksbündig. Versuch mal folgendes:

.MMM-Fuel .table {
    border-spacing: 10px 0;
    border-collapse: separate;
    text-align: left;
}

Füge mal in der custom.css folgenden Eintrag hinzu:

MMM-Fuel{
text-align: left;
}

Vielleicht löst das dein Problem.

@cowboysdude alright thank you :)

@cowboysdude Is it possible to put the date, author and so on under the picture? I think it would look better there :)