• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 258 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 Mar 25, 2024, 10:04 PM

    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 Mar 25, 2024, 10:39 PM Reply Quote 0
    • S Offline
      sdetweil @Illimar
      last edited by Mar 25, 2024, 10:39 PM

      @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 Mar 25, 2024, 10:42 PM

        @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 Mar 26, 2024, 7:43 AM

          @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
          1 / 1
          • First post
            4/4
            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