4. UpdateDom not working

UpdateDom not working

  • S

    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

    0 1 Reply
  • Module Developer

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

    0
    S
     1 Reply
  • S

    @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??

    0 1 Reply
  • Module Developer

    @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
      }
    0
  • S

    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

    0
  • S

    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

    0
    J
     1 Reply
  • J
    Module Developer

    @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!

    0
  • S

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

    0
    J
     1 Reply
  • J
    Module Developer

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

    0
  • S

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

    0
    J
     2 Replies