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.

    Problems with MMM-DVD (Beginner)

    Scheduled Pinned Locked Moved Troubleshooting
    3 Posts 2 Posters 427 Views 2 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.
    • C Offline
      CKneeland
      last edited by

      Hi all! I’m trying to create my first module using P5.JS to re-create the old-school DVD Logo animation (the one where everyone loves it to hit the corner). I have what I believe to be a working JS file, but when I run the module, nothing shows up! I don’t get any errors in my console related to the JS file, since I worked all of those out, but I do get errors relating to not being able to load specific CSS files. I just found this website 10 minutes ago, and am not familiar with how to share my code or the errors I’m facing. Any pointers on how to share my bugs and help fix them would be great!

      For the time being, I will attach the code that I have below:

      "use strict";
      
      Module.register("MMM-DVD", {
      
          //Default Module Config
          defaults: {
              name: "MMM-DVD",
      
              x: 0, 
              y: 0, 
              xspeed: 10,
              yspeed: 10,
              canvasWidth: 300,
              canvasHeight: 300
          },
      
          getDom: function() {
              let wrapper = document.createElement("canvas")
              wrapper.id = "DVDWrapper";
              return wrapper;
          },
      
          getScripts: function() {
              return [
                "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"
              ];
          },
      
          notificationReceived: function(notification, payload, sender) {
              if (notification === "DOM_OBJECTS_CREATED") {
                Log.info("DOM objects are created. Starting P5 …");
          
                let sketch = this.makeSketch(this.config);
                new p5(sketch, "DVDWrapper");
              }
          },
      
          makeSketch: function(conf) {
              return function(pFive) {
                  let x = conf.x;
                  let y = conf.y;
                  let xspeed = conf.xspeed;
                  let yspeed = conf.yspeed;
                  let canvasHeight = conf.canvasHeight;
                  let canvasWidth = conf.canvasWidth;
                  let r, g, b;
                  let dvd;
                  let width, height;
      
                  pFive.preload = function() {
                      dvd = pFive.loadImage("/modules/MMM-DVD/DVD_Trans.png");
                  }
      
                  pFive.setup = function() {
                      pFive.createCanvas(canvasWidth, canvasHeight);
      
                      var element = document.getElementById("DVDWrapper");
                      var positionInfo = element.getBoundingClientRect();
                      height = positionInfo.height;
                      width = positionInfo.width;
      
                      x = pFive.random(width - dvd.width);
                      y = pFive.random(height - dvd.height);
                      xspeed = 3;
                      yspeed = 3;
                      pickColor();
                  }
      
                  pFive.draw = function () {
                      pFive.background(0);
                      pFive.tint(r, g, b);
                      pFive.image(dvd, x, y);
      
                      x = x + xspeed;
                      y = y + yspeed;
                      
                      
                      if(x + dvd.width >= width) {
                          xspeed = -xspeed;
                          x = width - dvd.width;
                          pickColor();
                      } else if(x <= 0) {
                          xspeed = -xspeed;
                          x = 0;
                          pickColor();
                      }
                      
                      if(y + dvd.height >= height) {
                          yspeed = -yspeed;
                          y = height - dvd.height;
                          pickColor();
                      } else if(y <= 0) {
                          yspeed = -yspeed;
                          y = 0;
                          pickColor();
                      }
                  }
      
                  function pickColor() {
                      r = pFive.random(100, 256);
                      g = pFive.random(100, 256);
                      b = pFive.random(100, 256)
                  }
              }
          }
      
      });
      

      DVD_Trans.png

      This is the PNG I use.

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @CKneeland
        last edited by

        @ckneeland said in Problems with MMM-DVD (Beginner):

               dvd = pFive.loadImage("/modules/MMM-DVD/DVD_Trans.png");
        

        what does this expect as the path ??

        /modules is the root

        modules/ will be MagicMirror/modules

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @sdetweil
          last edited by sdetweil

          @CKneeland note that currently every time getDom() is called, u make a NEW DvDWrapper element…

          you don’t HAVE to do that … you could SAVE wrapper, and return that over and over…

          this would make your ui more stable and the underlying code not have to work so hard recreating everything every time…

          just check the value of this.wrapper , if null, create one, save this.wrapper= document.createElement(‘div’)

          then return this.wrapper

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • 1 / 1
          • 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