Monatsrückblick Januar/Februar 2026 ist online!

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