• 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.

Head first developing MM module for extreme beginners

Scheduled Pinned Locked Moved Development
27 Posts 9 Posters 19.5k Views 12 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.
  • N Offline
    nrayever
    last edited by Jan 17, 2021, 6:46 PM

    Shame, code is really messed up. Not helpful to use it as a guide to start developing modules.

    S 1 Reply Last reply Jan 17, 2021, 6:59 PM Reply Quote 0
    • S Offline
      sdetweil @nrayever
      last edited by Jan 17, 2021, 6:59 PM

      @nrayever see my sample module,
      https://github.com/sdetweil/SampleModule

      and follow the module developers doc

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      N 1 Reply Last reply Jan 18, 2021, 9:41 PM Reply Quote 2
      • N Offline
        nrayever @sdetweil
        last edited by nrayever Jan 18, 2021, 9:42 PM Jan 18, 2021, 9:41 PM

        @sdetweil will try it. I don’t have JS experience that is why I have found it difficult to start.

        S 1 Reply Last reply Jan 18, 2021, 11:35 PM Reply Quote 0
        • S Offline
          sdetweil @nrayever
          last edited by sdetweil Jan 18, 2021, 11:35 PM Jan 18, 2021, 11:35 PM

          @nrayever sorry cant help develop module if u dont know programming and dont want to learn

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          N 1 Reply Last reply Feb 4, 2021, 5:27 PM Reply Quote 1
          • C Offline
            cowboysdude Module Developer @StuGrunt
            last edited by Jan 20, 2021, 1:53 PM

            @StuGrunt said in Head first developing MM module for extreme beginners:

            It is because there is an error (at least I think so - I am new too) and no instructions on where to put the function.

            1. change the Module.register(“MMM-Timetable”) to Module.register(“MMM-Test”)

            2. The article does not tell you where to put the getDom function when it is first introduced. Replace the getDom: function() {}. with the code shown. In other words, don’t just add it to the file. This article would have benefited from a final section that gave the entire code.

            I think the original author at least expected us to be very familiar with Node.js (fair enough), but alas, I am not so it took a bit of work to figure it out. :-)

            Here it is, for the first part:

            Module.register(“MMM-Test”, {
            defaults: {},
            start: function () {},

            getDom: function() {
            var element = document.createElement(“div”)
            element.className = “myContent”
            element.innerHTML = “Hello, World!”
            return element
            },
            notificationReceived: function() {},
            socketNotificationReceived: function() {},
            })
            _

            Both of those functions go outside the getDom function pretty much anywhere you want to put them.

            The socketNotificationReceived function [example below, can be used in either node_helper OR your main.js file. The example below is in my node_helper] :

            socketNotificationReceived: function(notification, payload) {
            		if (notification === 'CONFIG') {
                        this.config = payload; 
                    }
                    if (notification === 'GET_CURRENT') {
                        this.getCurrent(payload);
                    }
                    if (notification === 'GET_FORECAST') {
                        if (this.forecast.timestamp === this.getDate() && this.forecast.data !== null) {
                            this.sendSocketNotification('FORECAST_RESULT', this.forecast.data); 
                            console.log("Using data we already have");
                        } else { 
                            this.getForecast();
            				console.log("Getting new data");
                        }
                    }
            		
                }
            

            Here is the corresponding one in the main.js

            socketNotificationReceived: function(notification, payload) {
                    if (notification === "CURRENT_RESULT") {
                        this.processCurrent(payload);
                    }
                    if (notification === "FORECAST_RESULT") {
                        this.processForecasts(payload);
                    }
            		this.updateDom(this.config.initialLoadDelay);
                },
            

            You can use notificationReceived to receive info from other modules like this:

            Here are examples of that:

            notificationReceived: function (notification, payload){ 
                    if (notification === 'CURRENT_RESULT') {
            			this.processCurrent(payload); 
                    }
            	},
            
            this.sendNotification('CURRENT_RESULT', payload);
            

            This is how I send and receive my ‘payload’ from one module to another.
            The first example is getting my ‘CURRENT_RESULT’ [getting info for a Forecast module from the Current weather module] from the bottom example that is
            sending out ‘CURRENT_RESULT’…

            The bottom example will ‘broadcast’ and in reality ANY module can get the data it’s sending out.

            Hope this helps. It’s a really simple process.

            1 Reply Last reply Reply Quote 1
            • S Offline
              Schmaniel
              last edited by Schmaniel Jan 21, 2021, 3:10 PM Jan 21, 2021, 2:31 PM

              How can I test the getDom() html output?
              I don’t want to restart MM every time when I change something just to look if it worked.

              S 1 Reply Last reply Jan 21, 2021, 3:12 PM Reply Quote 0
              • S Offline
                sdetweil @Schmaniel
                last edited by Jan 21, 2021, 3:12 PM

                @Schmaniel ctrl-r to reload the screen

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 2
                • N Offline
                  nrayever @sdetweil
                  last edited by Feb 4, 2021, 5:27 PM

                  @sdetweil … ok.

                  D 1 Reply Last reply Mar 6, 2021, 5:28 PM Reply Quote 0
                  • D Offline
                    Dobi @nrayever
                    last edited by Dobi Mar 6, 2021, 5:29 PM Mar 6, 2021, 5:28 PM

                    Hey guys,

                    I’m quite new in developing an own module. I was able to change exiting modules on my magic mirror but now I wanted to create my own module, but I’m not able to get socket communication between my “main” module an the “helper-function”

                    I uploaded my module here:
                    https://github.com/Dobherrmann/MMM_Testmodul.git
                    my Module looks like this on my magic mirror:
                    8f60324c-9269-4d1c-b5ae-0e337b316361-grafik.png
                    maybe someone can find my mistake(s).

                    BR

                    S 1 Reply Last reply Mar 6, 2021, 5:49 PM Reply Quote 0
                    • S Offline
                      sdetweil @Dobi
                      last edited by sdetweil Mar 7, 2021, 3:36 PM Mar 6, 2021, 5:49 PM

                      @dobi two things

                      when the DomObject Created method is called, its POSSIBLE that the elements are not yet accessible… so your code fails as the document.getElementbyID returns null…

                      second, do you have a position: set in the module def in config.js?

                      third and MOST important

                      the module NAME must match the folder name AND the filename and the register in the file…

                      so, the filename is MMM-cookbook.js
                      therefore ALL the things must be called MMM-cookbook

                      git clone will name the folder the name of the github repo
                      (unless u add an extra part to git clone repo_url output_folder_name)

                      I fixed all those and the module displays the countdown/up each second

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      D 1 Reply Last reply Mar 7, 2021, 3:16 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 1 / 3
                      • 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