Dom Update refresh take to long

marc.malus · Sep 29, 2017, 6:24 AM

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
	}
});

falke69 · Dec 23, 2018, 3:25 PM

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

AxLed · Jan 13, 2019, 4:04 PM

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

sdetweil · Jan 13, 2019, 4:53 PM

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, …)
don’t replace the entire wrapper div each time, like ripping the heart out

var wrapper = document.createElement("div");

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%";

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");

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…

AxLed · Jan 13, 2019, 4:43 PM

This post is deleted!