MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    Dom Update refresh take to long

    Development
    4
    5
    1501
    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
      marc.malus last edited by marc.malus

      Hello everybody!

      I have written my own module to get infos from an xml-api for my homematic home.

      The modules works fine. I want to refresh the info every 3 seconds. I have some static info and the answer from xml. Now by the updatedom the static content should stay on the mirror and only the xml-response should reload / replaced.

      How can i optimized this script to get its better working:

      /* Magic Mirror
       * Module: homematic
       *
       * By Marc Thomas marc.malus@gmail.com
       * MIT Licensed.
       */
      
      Module.register("homematic",{
      
              defaults: {
      			text: "Homematic Modul"
              },
      
              getDom: function() {
      
      			function get_status(id, typ) {
      				var xml_abruf = new XMLHttpRequest();
      				xml_abruf.open("GET", "http://homematic/config/xmlapi/state.cgi?datapoint_id=" + id, true);
      				xml_abruf.send();
      					xml_abruf.onreadystatechange = function() {
      						if (this.readyState == 4 && this.status == 200) {
      						xml_auswerten(this, id, typ);
      						}
      					}
      			}
      
      			function xml_auswerten(xml, id, typ) {
      				var xmlDoc = xml.responseXML;
      				var x = xmlDoc.getElementsByTagName('datapoint')[0];
      				var y = x.getAttributeNode("value");
      				var status = '';
      
      				switch (typ)
      				{
      				case 'schalter':
      					if (y.nodeValue == 'true')
      						status = "<img src="\&quot;./modules/homematic/bulb_on.png\&quot;" />";
      					else
      						status = "<img src="\&quot;./modules/homematic/bulb_off.png\&quot;" />";
      					break;
      				case 'dimmer':
      					if ((y.nodeValue * 1) > 0)
      						status = "<img src="\&quot;./modules/homematic/bulb_on.png\&quot;" />";
      					else
      						status = "<img src="\&quot;./modules/homematic/bulb_off.png\&quot;" />";
      					break;
      				case 'steckdose':
      					if (y.nodeValue == 'true')
      						status = "<img src="\&quot;./modules/homematic/switch_on.png\&quot;" />";
      					else
      						status = "<img src="\&quot;./modules/homematic/switch_off.png\&quot;" />";
      					break;
      				case 'tuer':
      					if (y.nodeValue == 'true')
      						status = "offen";
      					else
      						status = "zu";
      					break;
      				case 'heizungsgruppe':
      					status = y.nodeValue * 1
      					break;
      				}
      
      
      				switch (id)
      				{
      				case 10380:
      					document.getElementById("wohnzimmer_licht_bezeichner").innerHTML = "Wohnzimmer Licht:";
      					document.getElementById("wohnzimmer_licht_bezeichner").style.float = "left";
      					document.getElementById("wohnzimmer_licht_bezeichner").style.width = "94%";
      					document.getElementById("wohnzimmer_licht").innerHTML = status;
      					document.getElementById("wohnzimmer_licht").style.float = "left";
      					document.getElementById("wohnzimmer_licht").style.width = "6%";
      					document.getElementById("wohnzimmer_licht").style.textAlign = "center";
      					break;
      				case 3786:
      					document.getElementById("schlafzimmer_licht_bezeichner").innerHTML = "Schlafzimmer Licht:";
      					document.getElementById("schlafzimmer_licht_bezeichner").style.float = "left";
      					document.getElementById("schlafzimmer_licht_bezeichner").style.width = "94%";
      					document.getElementById("schlafzimmer_licht").innerHTML = status;
      					document.getElementById("schlafzimmer_licht").style.float = "left";
      					document.getElementById("schlafzimmer_licht").style.width = "6%";
      					break;
      				case 4375:
      					document.getElementById("schlafzimmer_heizungsgruppe_bezeichner").innerHTML = "Schlafzimmer:";
      					document.getElementById("schlafzimmer_heizungsgruppe_bezeichner").style.float = "left";
      					document.getElementById("schlafzimmer_heizungsgruppe_bezeichner").style.width = "94%";
      					document.getElementById("schlafzimmer_heizungsgruppe").innerHTML = status.toFixed(1) + "°C";
      					document.getElementById("schlafzimmer_heizungsgruppe").style.float = "left";
      					document.getElementById("schlafzimmer_heizungsgruppe").style.width = "6%";
      					break;
      				case 4217:
      					document.getElementById("wohnzimmer_heizungsgruppe_bezeichner").innerHTML = "Wohnzimmer:";
      					document.getElementById("wohnzimmer_heizungsgruppe_bezeichner").style.float = "left";
      					document.getElementById("wohnzimmer_heizungsgruppe_bezeichner").style.width = "94%";
      					document.getElementById("wohnzimmer_heizungsgruppe").innerHTML = status.toFixed(1) + "°C";
      					document.getElementById("wohnzimmer_heizungsgruppe").style.float = "left";
      					document.getElementById("wohnzimmer_heizungsgruppe").style.width = "6%";
      					break;
      				case 8604:
      					document.getElementById("kueche_kaffeemaschine_bezeichner").innerHTML = "Kaffeemaschine:";
      					document.getElementById("kueche_kaffeemaschine_bezeichner").style.float = "left";
      					document.getElementById("kueche_kaffeemaschine_bezeichner").style.width = "94%";
      					document.getElementById("kueche_kaffeemaschine").innerHTML = status;
      					document.getElementById("kueche_kaffeemaschine").style.float = "left";
      					document.getElementById("kueche_kaffeemaschine").style.width = "6%";
      					break;
      				case 1783:
      					document.getElementById("wohnzimmer_beamermodus_bezeichner").innerHTML = "Beamermodus:";
      					document.getElementById("wohnzimmer_beamermodus_bezeichner").style.float = "left";
      					document.getElementById("wohnzimmer_beamermodus_bezeichner").style.width = "94%";
      					document.getElementById("wohnzimmer_beamermodus").innerHTML = status;
      					document.getElementById("wohnzimmer_beamermodus").style.float = "left";
      					document.getElementById("wohnzimmer_beamermodus").style.width = "6%";
      					break;
      				case 3031:
      					document.getElementById("wohnungstuer_bezeichner").innerHTML = "Wohnungstür:";
      					document.getElementById("wohnungstuer_bezeichner").style.float = "left";
      					document.getElementById("wohnungstuer_bezeichner").style.width = "94%";
      					document.getElementById("wohnungstuer").innerHTML = status;
      					document.getElementById("wohnungstuer").style.float = "left";
      					document.getElementById("wohnungstuer").style.width = "6%";
      					break;
      				}
      			}
      
      			
      			
      			var wrapper = document.createElement("div");
      			
      			var wohnzimmer_licht_bezeichner = document.createElement("div");
                  wohnzimmer_licht_bezeichner.setAttribute('id', 'wohnzimmer_licht_bezeichner');
                  wrapper.appendChild(wohnzimmer_licht_bezeichner);
      			
                  var wohnzimmer_licht = document.createElement("div");
                  wohnzimmer_licht.setAttribute('id', 'wohnzimmer_licht');
                  wrapper.appendChild(wohnzimmer_licht);
      
      			
                  var wohnzimmer_heizungsgruppe_bezeichner = document.createElement("div");
                  wohnzimmer_heizungsgruppe_bezeichner.setAttribute('id', 'wohnzimmer_heizungsgruppe_bezeichner');
                  wrapper.appendChild(wohnzimmer_heizungsgruppe_bezeichner);
      			
                  var wohnzimmer_heizungsgruppe = document.createElement("div");
                  wohnzimmer_heizungsgruppe.setAttribute('id', 'wohnzimmer_heizungsgruppe');
                  wrapper.appendChild(wohnzimmer_heizungsgruppe);
      
      			
      			var schlafzimmer_licht_bezeichner = document.createElement("div");
      			schlafzimmer_licht_bezeichner.setAttribute('id', 'schlafzimmer_licht_bezeichner');
      			wrapper.appendChild(schlafzimmer_licht_bezeichner);
      
      			var schlafzimmer_licht = document.createElement("div");
      			schlafzimmer_licht.setAttribute('id', 'schlafzimmer_licht');
      			wrapper.appendChild(schlafzimmer_licht);
      
      			
                  var schlafzimmer_heizungsgruppe_bezeichner = document.createElement("div");
                  schlafzimmer_heizungsgruppe_bezeichner.setAttribute('id', 'schlafzimmer_heizungsgruppe_bezeichner');
                  wrapper.appendChild(schlafzimmer_heizungsgruppe_bezeichner);
      			
                  var schlafzimmer_heizungsgruppe = document.createElement("div");
                  schlafzimmer_heizungsgruppe.setAttribute('id', 'schlafzimmer_heizungsgruppe');
                  wrapper.appendChild(schlafzimmer_heizungsgruppe);
      
      			
                  var kueche_kaffeemaschine_bezeichner = document.createElement("div");
                  kueche_kaffeemaschine_bezeichner.setAttribute('id', 'kueche_kaffeemaschine_bezeichner');
                  wrapper.appendChild(kueche_kaffeemaschine_bezeichner);
      
                  var kueche_kaffeemaschine = document.createElement("div");
                  kueche_kaffeemaschine.setAttribute('id', 'kueche_kaffeemaschine');
                  wrapper.appendChild(kueche_kaffeemaschine);
      
      
      			var wohnzimmer_beamermodus_bezeichner = document.createElement("div");
      			wohnzimmer_beamermodus_bezeichner.setAttribute('id', 'wohnzimmer_beamermodus_bezeichner');
      			wrapper.appendChild(wohnzimmer_beamermodus_bezeichner);
      			
      			var wohnzimmer_beamermodus = document.createElement("div");
      			wohnzimmer_beamermodus.setAttribute('id', 'wohnzimmer_beamermodus');
      			wrapper.appendChild(wohnzimmer_beamermodus);
      			
      			
      			var wohnungstuer_bezeichner = document.createElement("div");
      			wohnungstuer_bezeichner.setAttribute('id', 'wohnungstuer_bezeichner');
      			wrapper.appendChild(wohnungstuer_bezeichner);
      			
      			var wohnungstuer = document.createElement("div");
      			wohnungstuer.setAttribute('id', 'wohnungstuer');
      			wrapper.appendChild(wohnungstuer);
      			
      			get_status(10380, 'schalter'); //wohnzimmer_licht
      			get_status(3786, 'dimmer'); //schlafzimmer_dimmer
      			get_status(4375, 'heizungsgruppe'); //schlafzimmer_heizungsgruppe
      			get_status(4217, 'heizungsgruppe'); //wohnzimmer_heizungsgruppe
      			get_status(8604, 'steckdose'); //kueche_kaffeemaschine
      			get_status(1783, 'steckdose'); //wohnzimmer_beamermodus
      			get_status(3031,'tuer'); //wohnungstuer
      
      			setInterval(function() {
      				get_status(3786, 'dimmer');
      			}, 100); //1000 Millisekunden = 1 Sekunde
      			*/
      
                              return wrapper;
      
              },
      
      	start: function() {
      		var self = this;
      		setInterval(function() {
      			self.updateDom();
      			}, 3 * 1000); //1000 Millisekunden = 1 Sekunde
      	}
      });
      
      
      1 Reply Last reply Reply Quote 0
      • F
        falke69 last edited by

        Hi, the module would like to test. Could you maybe provide it? How is it installed and what setting would I have to set in the config?

        Thank you

        1 Reply Last reply Reply Quote 0
        • A
          AxLed Module Developer last edited by

          @marc-malus
          There is Not always the need to use update dom, you can manipulate the content afterwards. See Internet for Dom.
          AxLED

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

            1. do NOT do XML requests IN the getDom function… do them outside (timer) and call updateDom to signal changes to be presented. getDom() should ONLY set info for presentation… nothing else.
              preparation should be done somewhere else… (timer, event handler, …)

            2. don’t replace the entire wrapper div each time, like ripping the heart out

            var wrapper = document.createElement("div");
            
            1. don’t look up (getElementbyId) over and over… get it, use it multiple times
              6 lookups here, need only 2… note that you are searching the ENTIRE web page (document.), not YOUR modules content (wrapper .div), and from the very top… so as the page gets fuller and fuller, the search has more things to look thru…
            case 1783:
            	document.getElementById("wohnzimmer_beamermodus_bezeichner").innerHTML = "Beamermodus:";
            	document.getElementById("wohnzimmer_beamermodus_bezeichner").style.float = "left";
            	document.getElementById("wohnzimmer_beamermodus_bezeichner").style.width = "94%";
            	document.getElementById("wohnzimmer_beamermodus").innerHTML = status;
            	document.getElementById("wohnzimmer_beamermodus").style.float = "left";
            	document.getElementById("wohnzimmer_beamermodus").style.width = "6%";
            
            1. don’t update stuff that didn’t change
              here u create these elements without consideration if they already exist…
            var schlafzimmer_heizungsgruppe_bezeichner = document.createElement("div");
            
            1. don’t create lots of new content… (createElement) if you don’t need to.
              here u create these elements without consideration if they already exist…

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • A
              AxLed Module Developer last edited by

              This post is deleted!
              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy