Monatsrückblick Januar/Februar 2026 ist online!

[Hausbaer]

Hallo,

ich hab das Problem, dass der Aufbau der Vis und auch zum vis edit bzw. zur admin Seite immer länger dauert.

Folgende Komponenten.
iobroker läuft auf raspberry pi4 8gb unter raspbian
per lan ans Netzwerk angebunden.
Vis läuft auf einem Xoro MegaPad 1564V4, eingebunden ins Netzwerk via Wi-Fi.

Folgende Adapter:

pi@raspberrypi:/opt/iobroker $ iobroker update
Used repository: stable
hash changed or no sources cached => force download of new sources
update done
Adapter    "admin"         : 5.1.25   , installed 5.1.25
Adapter    "backitup"      : 2.1.17   , installed 2.1.17
Adapter    "daswetter"     : 3.0.7    , installed 3.0.7
Adapter    "discovery"     : 2.7.0    , installed 2.7.0
Adapter    "dwd"           : 2.7.7    , installed 2.7.7
Adapter    "feiertage"     : 1.0.17   , installed 1.0.17
Adapter    "fritzbox"      : 0.2.1    , installed 0.2.1
Adapter    "heatingcontrol": 2.6.2    , installed 2.6.2
Adapter    "history"       : 1.9.13   , installed 1.9.13
Adapter    "hm-rega"       : 3.0.31   , installed 3.0.31
Adapter    "hm-rpc"        : 1.14.45  , installed 1.14.45
Adapter    "hs100"         : 2.0.6    , installed 2.0.6
Adapter    "ical"          : 1.11.4   , installed 1.11.4
Adapter    "icons-addictive-flavour-png": 0.1.0   , installed 0.1.0
Adapter    "icons-fatcow-hosting": 0.1.0   , installed 0.1.0
Adapter    "icons-icons8"  : 0.0.1    , installed 0.0.1
Adapter    "icons-material-png": 0.1.0   , installed 0.1.0
Adapter    "icons-material-svg": 0.1.0   , installed 0.1.0
Adapter    "icons-mfd-png" : 1.0.2    , installed 1.0.2
Adapter    "icons-mfd-svg" : 1.0.2    , installed 1.0.2
Adapter    "icons-open-icon-library-png": 0.1.2   , installed 0.1.2
Adapter    "icons-ultimate-png": 1.0.1   , installed 1.0.1
Adapter    "info"          : 1.9.8    , installed 1.9.8
Adapter    "javascript"    : 5.2.8    , installed 5.2.8
Controller "js-controller" : 3.3.18   , installed 3.3.18
Adapter    "netatmo"       : 1.4.4    , installed 1.4.4
Adapter    "netatmo-crawler": 0.5.1   , installed 0.5.1
Adapter    "openweathermap": 0.1.0    , installed 0.1.0
Adapter    "ping"          : 1.5.0    , installed 1.5.0
Adapter    "pollenflug"    : 1.0.6    , installed 1.0.6
Adapter    "rpi2"          : 1.3.1    , installed 1.3.1
Adapter    "shelly"        : 4.0.7    , installed 4.0.7
Adapter    "simple-api"    : 2.6.1    , installed 2.6.1
Adapter    "snmp"          : 0.5.0    , installed 0.5.0
Adapter    "socketio"      : 3.1.4    , installed 3.1.5
Adapter    "sql"           : 1.15.7   , installed 1.15.7
Adapter    "tankerkoenig"  : 2.1.1    , installed 2.1.1
Adapter    "telegram"      : 1.10.0   , installed 1.10.0
Adapter    "tr-064"        : 4.2.14   , installed 4.2.14
Adapter    "trashschedule" : 1.2.0    , installed 1.2.0
Adapter    "upnp"          : 1.0.19   , installed 1.0.19
Adapter    "vis"           : 1.4.4    , installed 1.4.4
Adapter    "vis-bars"      : 0.1.4    , installed 0.1.4
Adapter    "vis-canvas-gauges": 0.1.5   , installed 0.1.5
Adapter    "vis-fancyswitch": 1.1.0   , installed 1.1.0
Adapter    "vis-google-fonts": 0.1.0   , installed 0.1.0
Adapter    "vis-history"   : 1.0.0    , installed 1.0.0
Adapter    "vis-hqwidgets" : 1.1.7    , installed 1.1.7
Adapter    "vis-icontwo"   : 0.80.0   , installed 0.80.0
Adapter    "vis-inventwo"  : 3.2.0    , installed 3.2.0
Adapter    "vis-jqui-mfd"  : 1.0.12   , installed 1.0.12
Adapter    "vis-justgage"  : 1.0.2    , installed 1.0.2
Adapter    "vis-lcars"     : 1.0.4    , installed 1.0.4
Adapter    "vis-material-advanced": 1.7.0   , installed 1.7.0
Adapter    "vis-metro"     : 1.1.2    , installed 1.1.2
Adapter    "vis-players"   : 0.1.6    , installed 0.1.6
Adapter    "vis-plumb"     : 1.0.2    , installed 1.0.2
Adapter    "vis-rgraph"    : 0.0.2    , installed 0.0.2
Adapter    "weatherunderground": 3.3.1   , installed 3.3.1
Adapter    "web"           : 3.4.9    , installed 3.4.9
Adapter    "worx"          : 1.5.5    , installed 1.5.5
pi@raspberrypi:/opt/iobroker $ 

pi@raspberrypi:~ $ node -v
v12.22.7
pi@raspberrypi:~ $ nodejs -v
v12.22.7
pi@raspberrypi:~ $ npm -v
6.14.15

htop gibt - und das ist glaub ich ziemlich übel - folgendes aus:

Teilweise gehen die CPU Werte deutlich über 90%

Mein Projekt hat eine Größe von 42,3MB.
Beinhaltet u.a. die Steuerung für meinen worx-Mährobbi und mehrere Scripte zur Heizungssteuerung.

Ist das zuviel?
Bringt das was, das auf mehrere raspis (multi-host) zu verteilen?
Oder liegt das Problem wo anders?

[paul53]

@hausbaer sagte: Oder liegt das Problem wo anders?

Vermutlich ja. Stoppe mal die Instanz javascript.0, warte eine Weile ab und schaue dann noch mal mit htop nach.

[Hausbaer]

Ja, sieht viel besser aus. Max. Werte allesamt unter 30%.

GIbts nen Tipp, was die Ursache ist? Schon klar, der Aufbau der Scripte vermutlich. Aber was speziell?

[paul53]

@hausbaer sagte: Tipp, was die Ursache ist?

Vermutlich ein Skript, das eine (Trigger-)Endlosschleife erzeugt. Skripte nacheinander aktivieren mit Pause zum Beobachten.

[Hausbaer]

@paul53 Genau das wars! Dankeschön!

[Hausbaer]

@hausbaer sagte in Aufbau vis seeeeehr langsam:

@paul53 Genau das wars! Dankeschön!

Jetzt hab ich dazu doch noch ne Frage. Ich lass mir (unter anderem) die Stunden und Minuten (einzeln!) in einen DP schreiben und bastel mir eine Uhr (ungefähr so):

Auch dieses Skript ist mit am Problem schuld. Wie kann ich in einem HTML Widget mit Bindings die Stunden und Minuten anzeigen lassen?

[liv-in-sky]

@hausbaer

direkt alles in einem html widget - ohne dp

die sekunden würde ich noch raus - bei mir "ruckelt" das etwas - die vis ist ziemlich groß und braucht viel performance

als widget importieren

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<style>\n    div#uhr_std {\ncolor:lightgreen;\nfont-size:180px;\nwidth: 80%;\npadding: 50px;\nbox-sizing: border-box;\nposition: absolute;\nz-index: 1;\n}\n\ndiv#uhr_min {\n\nwidth: 80%;\ncolor:lightblue;\nfont-size:180px;\npadding: 50px;\nbox-sizing: border-box;\nposition: absolute;\nz-index: 2;\nmargin: 100px 0 0 30px;\n}\n    \ndiv#uhr_sek {\n\nwidth: 80%;\ncolor:lightblue;\nfont-size:50px;\npadding: 50px;\nbox-sizing: border-box;\nposition: absolute;\nz-index: 2;\nmargin: 20px 0 0 200px;\n}    \n    \n</style>\n<script>\n  function uhrzeit() {\n    var jetzt = new Date(),\n        h = jetzt.getHours(),\n        m = jetzt.getMinutes(),\n        s = jetzt.getSeconds();\n    m = fuehrendeNull(m);\n    s = fuehrendeNull(s);\n    document.getElementById('uhr_std').innerHTML = h;\n    document.getElementById('uhr_min').innerHTML = m;\n    document.getElementById('uhr_sek').innerHTML = s;\n    setTimeout(uhrzeit, 500);\n  }\n  \n  function fuehrendeNull(zahl) {\n    zahl = (zahl < 10 ? '0' : '' )+ zahl;  \n    return zahl;\n\n  }\n\n    uhrzeit();\n  </script>\n   <div id=\"uhr_parent\">\n  <div id=\"uhr_std\"></div>\n  <div id=\"uhr_min\"></div>\n  <div id=\"uhr_sek\"></div>\n  </div>\n"},"style":{"left":"80px","top":"719px","color":"#f1e4e4","width":"535px","height":"537px","font-family":"Ubuntu-Medium"},"widgetSet":"basic"}]

[Hausbaer]

@liv-in-sky

....und ich dachte, ich wär der einzige, der sowas haben will

Danke, funktioniert!

[liv-in-sky]

@hausbaer

wie du die sache einstellen kannst ist bekannt ?

[Hausbaer]

@liv-in-sky

??

[liv-in-sky]

@hausbaer

die farben und die positionen - und das abschalten der sekunden, falls erwünscht

[Hausbaer]

@liv-in-sky na die Farben, Größen und Positionen innerhalb des Widgets. Wohl auch die Sekunden, da probier ich noch.

[liv-in-sky]

@hausbaer

ich habe die sekunden entfernt und den timeout vergrößert auf eine sekunde (1000) zeile 49

dieser wert ist für die genauigkeit der minuten umschaltung veranrwortlich - es ist besser das größer zu haben, aber dann schalten die min verspätet - z.b 5000 dann kann es sein, das die min schlimmsten falls um 5 sekunden verspätet geschalten werden

<style>
    div#uhr_std {
color:lightgreen;
font-size:180px;
width: 80%;
padding: 50px;
box-sizing: border-box;
position: absolute;
z-index: 1;
}

div#uhr_min {

width: 80%;
color:lightblue;
font-size:180px;
padding: 50px;
box-sizing: border-box;
position: absolute;
z-index: 2;
margin: 100px 0 0 30px;
}
    
div#uhr_sek {

width: 80%;
color:lightblue;
font-size:50px;
padding: 50px;
box-sizing: border-box;
position: absolute;
z-index: 2;
margin: 20px 0 0 200px;
}    
    
</style>
<script>
  function uhrzeit() {
    var jetzt = new Date(),
        h = jetzt.getHours(),
        m = jetzt.getMinutes(),
   /*     s = jetzt.getSeconds();*/
    m = fuehrendeNull(m);
  /*  s = fuehrendeNull(s);*/
    h = fuehrendeNull(h);
    document.getElementById('uhr_std').innerHTML = h;
    document.getElementById('uhr_min').innerHTML = m;
 /*   document.getElementById('uhr_sek').innerHTML = s;*/
    setTimeout(uhrzeit, 1000);
  }
  
  function fuehrendeNull(zahl) {
    zahl = (zahl < 10 ? '0' : '' )+ zahl;  
    return zahl;

  }

    uhrzeit();
  </script>
   <div id="uhr_parent">
  <div id="uhr_std"></div>
  <div id="uhr_min"></div>
  <div id="uhr_sek"></div>
  </div>

die abstände werden hier gesetzt zeile 21
margin: 20px 0 0 200px;

[Hausbaer]

Ich hab mir gedacht, für das Datum (also z.B. 25. November) wäre das analog.

<style>

    div#dat_jahr {

color:{0_userdata.0.einstellung_farben_schriftarten.farbe-2};

font-size:80px;

width: 80%;

padding: 50px;

box-sizing: border-box;

position: absolute;

z-index: 1;

}

 div#dat_mon {

 

width: 80%;

color:{0_userdata.0.einstellung_farben_schriftarten.farbe-1};

font-size:80px;

padding: 50px;

box-sizing: border-box;

position: absolute;

z-index: 2;

margin: 30px 0 0 20px;

}
 
div#dat_tag {

 

width: 80%;

color:{0_userdata.0.einstellung_farben_schriftarten.farbe-7};

font-size:30px;

padding: 50px;

box-sizing: border-box;

position: absolute;

z-index: 2;

margin: 10px 0 0 60px;

}

    

</style>

<script>

  function datum() {

    var jetzt = new Date(),

        jjjj = jetzt.getYear(),

        mm = jetzt.getMonth(),

   /*     dd = jetzt.getDay();*/

    j = fuehrendeNull(j);

  /*  m = fuehrendeNull(m);*/

    d = fuehrendeNull(d);

    document.getElementById('dat_jah').innerHTML = j;

    document.getElementById('dat_mon').innerHTML = m;

 /*   document.getElementById('dat_tag').innerHTML = d;*/

    setTimeout(uhrzeit, 1000);

  }

  

  function fuehrendeNull(zahl) {

    zahl = (zahl < 10 ? '0' : '' )+ zahl;  

    return zahl;

 

  }

 

    datum();

  </script>

   <div id="datum_parent">

  <div id="dat_jahr"></div>

  <div id="dat_mon"></div>

  <div id="dat_tag"></div>

  </div>

Naja, wär ja auch zu einfach gewesen. Wie muss das richtig sein?