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

[A Former User]

@sharmmoh1983 instead of hide, how about using display:none in css?

[A Former User]

Now i understand whats going on. You had tried to hide modules before dom created.
My suggetion is;

1. use css for making modules invisible with display:none on startup.(or cover all modules with temp div which has black background on top level)
2. after Dom_object_created message received, hide all module with .hide().
3. then change css again for displaying, or remove the covered div.
4. then you can use your command.

[sharmmoh1983]

@Sean

I will look into the approach but I don’t want every module to be off , some commanded by voice so can’t make use of css

[sharmmoh1983]

@Sean Also updateDOM is also creating DOM first so there should be no issue of DOM getting created or not

[sharmmoh1983]

@Sean @j-e-f-f Thanks for your support… i will try the discussed approach also and come back with my findings

[j.e.f.f]

@sharmmoh1983 said in UpdateDom not working:

I want all modules to hide during star

Yep you can do it. the MM object has a method called getModules() which will give you all the loaded modules. Example:

var modules = MM.getModules();
modules.enumerate(function(module) {
    module.hide(0, {lockString: "yourLockString"});
});

[sharmmoh1983]

@j-e-f-f But where it call this as all modules will be loaded simultaneously

[sharmmoh1983]

@j.e.f.f But where to call mentioned code as all modules will be loaded simultaneously

[j.e.f.f]

@sharmmoh1983 call it in your routine that responds to the DOM_OBJECTS_CREATED notification.

You can’t hide a module before its Dom exists. When this notification is dispatched it means all modules have started AND their Dom objects have been created for the first time. It’s the earliest opportunity you have to hide any modules.

[sharmmoh1983]

@j.e.f.f I am not generating DOM while start of the module but at voice command and this approach is working individually for the modules but not if all are coupled together So how come it is happening for individual modules