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.

    Connecting Modules to Each Other

    Scheduled Pinned Locked Moved Solved Troubleshooting
    16 Posts 3 Posters 5.3k 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.
    • M Offline
      MMRIZE @tonkxy
      last edited by MMRIZE

      @tonkxy
      Usually some module might spit out some notifications with various data those want to be consumed.
      With luck you can gather all data you need from the notifications.

      Some modules might provide public method functions to interact with other modules.

      Some modules might provide WebAPI url endpoints to communicate with world.

      Well, even if there exists nothing to use, you can inject or reassign(overwrite) MM module methods for your needs, because MM module is not encapsulated by default.

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

        @tonkxy
        And there be already similar modules. Look inside and study how they did.

        T 1 Reply Last reply Reply Quote 1
        • T Offline
          tonkxy @MMRIZE
          last edited by tonkxy

          @mmrize I took some time to try and figure this one out… sadly a lot of weather API’s are falling out, so some references use darkskies and that is out. I did write this up and so far the only issue I am having is at setImage the type variable is not being filled with a value.

          When i run npm start dev and I have the log return the value of type it does say info undefined… so it seems im not pulling off currentweather correctly with openweather as my api

          defaults: {
                  height: "600px",   // your display's resolution in pixels. Enter in config.js
                  width: "1024px",    // your display's resolution in pixels. Enter in config.js
                  updateInterval: 60 * 60 * 100,
              },
          //set current weather from moduel
          currentWeatherType: "weather, currentweather",
          //scripts
          getScripts: function(){
          	return ["moment.js" , "moment-timezone.js"];
          },
             
          	
          start: function () {
          	  this.timer = null
          	  this.url = null
          	  this.setImage()
          },
          
          getDom: function () {
          	  console.log(">", this.url)
          	  var dom = document.createElement('div')
          	  dom.style.backgroundImage = `url(${this.url})`
          	  dom.style.height = '100vh' // do in css
          	  dom.style.width = '100vw'
          	  dom.style.backgroundSize = 'cover'
          	  return dom
          },
          //From data currentweather set weather type
          	setCurrentWeatherType: function(type){
          	this.currentWeatherType = type;
          },
          
          notificationReceived: function (notification, payload, sender) {
          	  if (notification === 'DOM_OBJECTS_CREATED') {
          	    this.job()
          	  }
          //weather dom
          	if(notification === "CURRENTWEATHER_TYPE"){
          		this.setCurrentWeatherType(payload.type);
          	}
          },
          
          
          job: function () {
          	  clearTimeout(this.timer)
                	  this.updateDom()
               	  this.setImage()
            	  this.timer = setTimeout(() => {
              	  this.job()
            	}, this.config.updateInterval)
          },
          
          
          setImage: function () {
            let rand = Math.floor(Math.random() * 4)+1; //randomn number to pick gif
          	var day = new Date();
          	var hour = day.getHours();
          	var type = this.currentWeatherTemperature;
          //if criteria for folders
          //	if(hour >= 22 || hour <= 4){
          //	folder = "Night";
          //	}else
          //	if(hour <= 10){
          //	folder = "Morning";
          //	}else
          //	if(hour <= 17){
          //	folder = "Afternoon";
          
          	if(type = "rain"){ //testing weather to see if it passes if condition
          		folder = "Afternoon";
          	}else folder = "Morning";
          
          	this.url = "modules/MMM-MainScreen/images/" + folder +"/" + rand +".gif";
          	}
          
          });
          
          S M 2 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @tonkxy
            last edited by

            @tonkxy maybe the payload in the notification doesn’t have ‘type’

            u can debug the code in the developers window, ctrl-shift-i, select the source tab,
            and navigate to your module and select the js file

            then the source will appear on the right…

            to stop at an instruction

            click the line number in the left edge of the source display, it should turn blue

            then fresh the page (f5)

            and code will stop there, you can examine and change the variables/data and step thru the code (the dot with the curved arrow over it, is step one instruction at a time. )

            to resume, hit run (blue arrow) and if the debugger is still up, it will stop there again at the next time
            (if u stopped on a weather notification for example)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              @tonkxy
              Hmmmm… I cannot understand the setCurrentWeatherType.

              Anyway, I recommend you this module; https://github.com/BrianHepler/MMM-WeatherBackground
              You need to study how MM module works, at least to train how to use.

              You don’t need to pull weather info from an external weather API like Darksky. Already there are many modules showing weather info on MM screen and spitting that info out through notification.

              For example, default weather module also emit notifications of weather info periodically. All you need to do is catching that notification and consume them in your module.

              default weather module would emit CURRENTWEATHER_TYPE notification.
              You can catch that notification like this.

              
              notificationReceived: function (notification, payload, sender) {
                if (notification === 'CURRENTWEATHER_TYPE') {
                   console.log(payload) // manipulate payload then extract data what you need.
                   // do your job
                }
              }
              

              Anyway, Study the above module. That has almost all features you are trying. (except the image source)

              1 Reply Last reply Reply Quote 0
              • T Offline
                tonkxy @sdetweil
                last edited by

                @sdetweil great callout! I did not know I could debug. I do get a type back. I did the break trick on where its in an if statement and the type is still undefined in setImage

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

                  @tonkxy well

                  setImage: function () {
                    let rand = Math.floor(Math.random() * 4)+1; //randomn number to pick gif
                  	var day = new Date();
                  	var hour = day.getHours();
                  	var type = this.currentWeatherTemperature;   // < ----
                  

                  notification

                  //From data currentweather set weather type
                  	setCurrentWeatherType: function(type){
                  	this.currentWeatherType = type;    // < ----
                  },
                  
                  notificationReceived: function (notification, payload, sender) {
                  	  if (notification === 'DOM_OBJECTS_CREATED') {
                  	    this.job()
                  	  }
                  //weather dom
                  	if(notification === "CURRENTWEATHER_TYPE"){
                  		this.setCurrentWeatherType(payload.type);
                  	}
                  },
                  

                  this.currentWeatherTemperature is NOT this.currentWeatherType

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  T 1 Reply Last reply Reply Quote 1
                  • T Offline
                    tonkxy @sdetweil
                    last edited by

                    @sdetweil that definitely was part of it.

                    I am able to successfully see the payload in notifications. Just working a way to retain it and be able to use in setImage. Thank you!

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

                      @tonkxy should be able to save the payload pointer and then use that day later. I do it all the time

                      this.weatherInfo = payload

                      for example

                      remember your module could get called at getDom() long before the other module sends the notification, so u need to check if it has arrived yet.

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      T 1 Reply Last reply Reply Quote 0
                      • T Offline
                        tonkxy @sdetweil
                        last edited by

                        @sdetweil funny you say that. Ive been reading and you offered the solution on someone using compliments + weather. My issue is when i step through to set image, the type is back to undefined and not carried from the notification. Im wondering if its in my order as to why its going back to undefined

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

                          @tonkxy I would put a stop everywhere u set it.

                          make sure the this. pointer is pointing to the same place set vs use

                          Sam

                          How to add modules

                          learning how to use browser developers window for css changes

                          T 1 Reply Last reply Reply Quote 0
                          • T Offline
                            tonkxy @sdetweil
                            last edited by

                            @sdetweil when you say stop you mean in my debug to see where im losing the value?

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

                              @tonkxy correct

                              Sam

                              How to add modules

                              learning how to use browser developers window for css changes

                              T 1 Reply Last reply Reply Quote 1
                              • T Offline
                                tonkxy @sdetweil
                                last edited by

                                @sdetweil Great advice.

                                I stepped through and you were right on two things. When it starts, it defaults with the else case, because it hasn’t fetched the type yet. Once it does fetch the type I was resetting it in the myJob() function causing it to be undefined again.

                                I appreciate the break down on this. JS is definitely giving me a run for my money on learning it.

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

                                  @tonkxy glad you are making progress.

                                  not a JS problem. any language would have the same problem…

                                  Sam

                                  How to add modules

                                  learning how to use browser developers window for css changes

                                  1 Reply Last reply Reply Quote 0

                                  Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                  Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                  With your input, this post could be even better 💗

                                  Register Login
                                  • 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