UpdateDom not working

sharmmoh1983

Hi
I am trying to show module content on voice command so during start up I am calling
this.hide(0) and in getDOM method checking this.hidden parameter so getDOM does not return anything during startup

start: function() {
Log.info("Starting module: " + this.name);

    requiresVersion: "2.1.0",

    // Set locale.
    this.url = this.getEventsUrl();
    this.event = {};
    this.activeItem = 0;
    this.rotateInterval = null;
    this.hide(0);
   // this.scheduleUpdate();
},

getDom: function() {
Log.log("In getDom events", this.hidden);
   if (!this.hidden) {
    var wrapper = document.createElement("div");
    wrapper.className = "wrapper";
    wrapper.style.maxWidth = this.config.maxWidth;

    if (!this.loaded) {......

And when I get voice command I am calling updateDOM but I always get :

socketNotificationReceived EVENTS_RESULT1
MMM-Events.js:46 In getDom events true
main.js:162 Uncaught TypeError: Cannot read property ‘getElementsByClassName’ of null
at updateModuleContent (main.js:162)
at updateDom (main.js:120)
at Object.updateDom (main.js:471)
at Class.updateDom (module.js:295)
at Class.socketNotificationReceived (MMM-Events.js:202)
at module.js:183
at r. (socketclient.js:25)
at r.emit (index.js:133)
at r.onevent (socket.js:270)
at r.MMSocket.self.socket.onevent (socketclient.js:19)

I am not able to figure out the issue

A Former User

@sharmmoh1983
If you have not drawn any DOM in .getDom(), that error message will be emitted when you call .updateDom()

sharmmoh1983

@Sean I have drawn DOM in getDOM() by doing this:

this.show(0);
this.updateDom();
updateDom() will call get DOM() first and in that hidden will be false and hence will get executed

There seems to be issue in conflict in positions defined in config… like top_left and top_center as I removed one of the entries which were common same issue does not appear

This is my config file:
modules: [
{
module: “alert”,
},
{
module: “updatenotification”,
position: “top_bar”
},

{
	module: "compliments",
	position: "top_third"
},


{
	module: "newsfeed",
	position: "bottom_bar",
	config: {
		feeds: [
			{
				title: "New York Times",
				url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
			}
		],
		showSourceTitle: true,
		showPublishDate: true
	}
},

{
module: ‘MMM-Voice-Control-Sonus’,
config: {
projectId: ‘aimevoice2017’,
keyFilename: ‘/resources/AimeVoice-91efae41b5b4-1.json’,
hotWord : ‘aime’,
hotWordFile : ‘/resources/aime.pmdl’

    }
},

{
module: ‘MMM-googlemaps’,
position: ‘top_center’,
config: {
apikey: ‘AIzaSg5aknOUo5shOQ’,
origin: ‘-31.952326,115.857847’,
destination: ‘-32.00469,115.89405’,
width: “600px”, // Optional. Default: 100%
height: “300px” //Optional. Default: 100px
}
},

/{
module: “MMM-EmbedYoutube”, // Path to youtube module from modules folder Exmaple: MagicMirror/modules/custom/youtube/ so it’s custom/youtube
position: “bottom_left”, // This can be any of the regions.
config: {
// See ‘Configuration options’ for more information.
watch: “w3jLJU7DT5E”
}
},/
{
module: ‘MMM-Events’,
position: ‘top_left’,
config: {
city: “Bangalore”, // Your City
eventType: “sports”, // Choose from Events List below
when: “This Week”, // “All”, “Future”, “Past”, “Today”, “Last Week”, “This Week”, “Next week”, and months by name, e.g. “October”
mode: “noFrame”, // “Frame” or “noFrame” (around picture)
apikey: “8V8gdwJ8WcHQnLJB”,
rotateInterval: 5 * 60 * 1000, // New Event Appears every 5 minutes
useHeader: false, // Set to true if you want a header
header: “”,
animationSpeed: 3000, // Event fades in and out
picture: true, // true, false = no image
}
},

When I comment out MMM-googlemaps in above config then there is no issue . IS it related to position values??

A Former User

@sharmmoh1983
Yes. If you have not declared position, it will cause error when you call updateDom
you can check ‘this.postion’. I use like these;

      if(this.data.position) {
        this.updateDom()
      } else {
        //nothing to do
      }

sharmmoh1983

But in my case I have declared positions in my config . But my issue is if positions of module somehow overlaps or matches top or bottom (like in my case top_left and top_center ) is causing the issue

sharmmoh1983

Kindly assist me in getting this resolved as I am stuck .

I am planning to hide modules upfront and the enable through voice as in when required

j.e.f.f

@sharmmoh1983 I’m not sure if the positions of the modules have anything to do with your problem, but I did struggle with a similar problem in one of my modules. Basically you can’t do ANYTHING with the Dom until MM has finished creating all the Dom objects. This will happen well after your module’s start() function is called.

Basically you need to wait for the notification DOM_OBJECTS_CREATED before you can do things like hide or show the module. Here’s an example:

  notificationReceived: function(notification, payload, sender) {
    if ( notification == 'DOM_OBJECTS_CREATED') {
      //now the Dom is ready; you can call hide() or show().
      this.hide(0, {lockString: this.identifier});
    }
  }

I hope this helps!

sharmmoh1983

But in that case all my modules will be appearing on screen which I don’t want and should only appear at voice command

j.e.f.f

@sharmmoh1983 Not the case, especially if you call hide(0). This all happens before a single screen refresh, so you won’t see the module on-screen for a split second before it hides.

sharmmoh1983

@j-e-f-f
I want all modules to hide during start