<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Problems with MMM-DVD (Beginner)]]></title><description><![CDATA[<p dir="auto">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!</p>
<p dir="auto">For the time being, I will attach the code that I have below:</p>
<pre><code>"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 &gt;= width) {
                    xspeed = -xspeed;
                    x = width - dvd.width;
                    pickColor();
                } else if(x &lt;= 0) {
                    xspeed = -xspeed;
                    x = 0;
                    pickColor();
                }
                
                if(y + dvd.height &gt;= height) {
                    yspeed = -yspeed;
                    y = height - dvd.height;
                    pickColor();
                } else if(y &lt;= 0) {
                    yspeed = -yspeed;
                    y = 0;
                    pickColor();
                }
            }

            function pickColor() {
                r = pFive.random(100, 256);
                g = pFive.random(100, 256);
                b = pFive.random(100, 256)
            }
        }
    }

});
</code></pre>
<p dir="auto"><img src="/assets/uploads/files/1614360524787-dvd_trans.png" alt="DVD_Trans.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">This is the PNG I use.</p>
]]></description><link>https://forum.magicmirror.builders/topic/14706/problems-with-mmm-dvd-beginner</link><generator>RSS for Node</generator><lastBuildDate>Sun, 12 Apr 2026 23:35:54 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/14706.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 26 Feb 2021 17:29:11 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Problems with MMM-DVD (Beginner) on Fri, 26 Feb 2021 18:26:05 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/ckneeland" aria-label="Profile: CKneeland">@<bdi>CKneeland</bdi></a>  note that currently every time getDom() is called, u make a NEW DvDWrapper element…</p>
<p dir="auto">you don’t HAVE to do that … you could SAVE wrapper, and return that over and over…</p>
<p dir="auto">this would make your ui more stable and the underlying code not have to work so hard recreating everything every time…</p>
<p dir="auto">just check the value of this.wrapper , if null, create one, save this.wrapper= document.createElement(‘div’)</p>
<p dir="auto">then return this.wrapper</p>
]]></description><link>https://forum.magicmirror.builders/post/88901</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/88901</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Fri, 26 Feb 2021 18:26:05 GMT</pubDate></item><item><title><![CDATA[Reply to Problems with MMM-DVD (Beginner) on Fri, 26 Feb 2021 18:14:34 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/ckneeland" aria-label="Profile: ckneeland">@<bdi>ckneeland</bdi></a> said in <a href="/post/88898">Problems with MMM-DVD (Beginner)</a>:</p>
<blockquote>
<pre><code>       dvd = pFive.loadImage("/modules/MMM-DVD/DVD_Trans.png");
</code></pre>
</blockquote>
<p dir="auto">what does this expect as the path ??</p>
<p dir="auto">/modules is the root</p>
<p dir="auto">modules/  will be MagicMirror/modules</p>
]]></description><link>https://forum.magicmirror.builders/post/88900</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/88900</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Fri, 26 Feb 2021 18:14:34 GMT</pubDate></item></channel></rss>