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.

    Need help with modules not displaying

    Scheduled Pinned Locked Moved Development
    4 Posts 3 Posters 237 Views 3 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.
    • I Offline
      Illimar
      last edited by

      Hi, I’m new at programming and made these two modules for a school project, but neither of them

      The first one is a days-left module that calculates how many days are to or from a given date:

      Module.register("days-left", {
        // config
        defaults: {
          textColor: "white",
          dates: [
            // format 'dd/MM/yyyy'
            { name: "2025", date: "01/01/2025" },
            { name: "2026", date: "01/01/2026" },
          ],
        },
        
        start: function () {
          var self = this;
          setInterval(function () {
            self.updateDom(); // updates instantly.
          }, 1000); //perform every 1000 milliseconds.
        },
      
        getDaysLeft: function (i) {
          const date = Date.now();
          
          const formattedDate = dateFormat(this.config.dates[i].date);
          const targetDate = new Date(formattedDate);
          
          const difference = targetDate - date;
          
          return Math.floor(difference / (1000 * 60 * 60 * 24));
        },
      
      
        dateFormat: function (date) {
          const dd = date.split("/")[0];
          const mm = date.split("/")[1];
          const yyyy = date.split("/")[2];
      
          const formattedDate = mm + "/" + dd + "/" + yyyy;
          return formattedDate;
        },
      
      
        getDom: function () {
          var wrapper = document.createElement("div");
          wrapper.style.color = this.config.textColor;
      
          for (let i in this.config.dates) {
            var days = getDaysLeft(i);
            var text = document.createTextNode(
              this.config.dates[i].name + ": " + days + " päeva pärast"
            );
      
            wrapper.appendChild(text);
      
            wrapper.appendChild(document.createElement("br"));
          }
          return wrapper;
        },
      });
      
      

      I have my suspection on the indexing of ‘this.config.dates[i].name’ but I’m not sure.

      And the other module is one that reads temp and humidity from the DHT11 sensor:

      Module.register("temperatuur", {
      
          // config
          defaults: {
              textColor: "white",
            },
          
          start: function () {
      
          },
      
          notificationReceived: function(notification) {
            switch(notification) {
              case "DOM_OBJECTS_CREATED":
      
                setInterval(()=>{
                  this.updateDom(500);
                }, 1000);
                break;
            }
          },
          
          getDom: function () {
            var wrapper = document.createElement("div");
            wrapper.style.color = this.config.textColor;
      
            this.sendSocketNotification("READ_FROM_SENSOR");
            var element = document.createElement("p");
            element.id = "text";
      
            wrapper.appendChild(element);
            
            return wrapper;
          },
      
          socketNotificationReceived: function(notification, payload) {
            switch(notification) {
              case "READ":
                var p = document.getElementById("text");
                p.innerHTML = payload;
                break
            }
          },
      });
        
      

      With this one I also used a node_helper.js file:

      var NodeHelper = require("node_helper")
      
      module.exports = NodeHelper.create({
      
        start: function() {
          this.temperature = '';
          this.humidity = '';
        },
      
        readFromSensor: function () {
          var sensor = require("node-dht-sensor")    
          sensor.read(11, 4, function(err, temperature, humidity) {
            if (!err) {
              return {temperature: temperature, 
                      humidity: humidity,
              };
            }
          });
        },
      
        getTemperature: function () {
          return this.readFromSensor().temperature;
        },
      
        getHumidity: function () {
          return this.readFromSensor().humidity;
        },
      
      
        socketNotificationReceived: function(notification) {
          switch(notification) {
            case "READ_FROM_SENSOR":
              var payload = (this.getTemperature() + "°C" + " - " + this.getHumidity() + "%");
              this.sendSocketNotification("READ", payload);
              break;
          }
        },
      })
      

      With the last one I have tested the read function and it works when run from a separate .js file. I’ve also tested that both modules can display simple string text.

      S M 3 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @Illimar
        last edited by

        @Illimar the module name, folder, modulename.js AND the value in the module.register

        Module.register("days-left"
        

        MUST match exactly.

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @Illimar open the developers window, ctrl-shift-i

          select the sources tab, and send the left navigation to you module name

          the console tab could show errors too.

          put a unique part of the module name I the filter field

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • M Offline
            MMRIZE @Illimar
            last edited by

            @Illimar said in Need help with modules not displaying:

            getDaysLeft() and dateFormat() are defined as member methods of the module, but you are using them as general functions.

            var days = getDaysLeft(i);
            

            It should be;

            var days = this.getDaysLeft(i);
            

            Or, even better is; to define getDaysLeft as a general function inside of getDom(), because only there the function is used once and nowhere else. It doesn’t need to be defined as a member of the module.

            getDom: function() {
              const getDaysLeft = (i, config) => {
                const date = Date.now();
                ...
              }
              let wrapper = document.createElement('div');
              wrapper.style.color = this.config.textColor;
              for (let i in this.config.dates) {
                let days = getDaysLeft(i, this.config);
              ...
            
            
            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