Problems with MMM-DVD (Beginner)

[CKneeland]

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

});

This is the PNG I use.

[sdetweil]

@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

[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