A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
  • 0 Votes
    1 Posts
    322 Views
    S
    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
  • 0 Votes
    5 Posts
    1k Views
    S
    actually this is because you have fired a timer on the slide update showSlides2: function () { if (!this.slideIndex) { this.slideIndex = 0; } var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { console.log(slides[i]); slides[i].style.display = "none"; } this.slideIndex++; slides[this.slideIndex - 1].style.display = "block"; if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 } setInterval(this.showSlides2, 2000); //< ------- here restarts the function, BUT inside the function 'this'; becomes the context of the timer routine and not the module.. this.updateDom(1000); // or whatever transition time u want. }, to fix it you need an arrow function to keep context right see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions but net showSlides2: function () { if (!this.slideIndex) { this.slideIndex = 0; } var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { console.log(slides[i]); slides[i].style.display = "none"; } this.slideIndex++; slides[this.slideIndex - 1].style.display = "block"; if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 } setInterval( () => { this.showSlides2()} , 2000); // < --- was a typo here.. need () => { stuff } this.updateDom(1000); // or whatever transition time u want. },
  • 0 Votes
    27 Posts
    10k Views
    S
    @banbutcher so, there were two problems 0 cycle time and carouselId I had my brain screwed on crooked for carouselId. suppose you had multiple instances of the same module name in config.js, showing different things on different slides. when u define the slides, u use the module ‘name’, but in this case, name is not enough. so, in the module definitions themselves u add another unique identifier, carouselId: somestring. the value can be anything. in their config:{} section, that is where carousel module will look for ‘carouselId’ in the slide definition, when u come to that module to be displayed, instead of putting the name in quotes, you need a little structure { name: "module name", carouselId:"samevalue_added_to_module_config" } , that way the carousel module can tell which module instance should be shown