Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[OliverIO]

@Ro75

Beschreibe den String mal genauer.
Der Aufbau könnte beliebig sein.
Intern arbeiten die Widgets immer nur mit timestamp,
Berechnen dann die Uhrzeit/Datum und ziehen dann bei Countdown eine Differenz, bevor es angezeigt wird.

Ja, Größenänderung geht bei flip nur mit transform. Das ist eine Beschränkung der zugrundeliegenden Bibliothek.

[Ro75]

@OliverIO sagte:

Beschreibe den String mal genauer.

00:00:03:38 (Tage:Stunden:Minuten:Sekunden) - meine ablaufende Zeit für einen Timer - die einfachste Version zur Darstellung - hier ist es nicht so einfach. Ich kann über die Alex den Timer verändern oder abbrechen - eine Berechnung ist da glaube ich nicht so cool

oder

11:05:46 (Stunden:Minuten:Sekunden) - Zeit - auch hier die einfachste Darstellung - mit Client/Server ist dieses Problem gelöst

Ro75.

[OliverIO]

@Ro75

Und der datenpunkt String zählt dann hoch/runter?

Lese dir mal diesen Abschnitt durch.
Damit kannst du die Endzeit setzen
Insbesondere die Zeile zu #!ISO-Date
Oder einfach auch nur
=!value

[Ro75]

korrekt.

Ro75.

[Ro75]

@OliverIO sagte:

Damit kannst du die Endzeit setzen

nur leider ist diese flexibel.

Ro75.

[OliverIO]

@Ro75

Dann den =!value Befehl
Eigentlich ist ja alles flexibel
Wenn sich die Ende Zeit ändert, dann ändert sich doch auch die Restlaufzeit

[Ro75]

Es tut mir leid, aber daraus werde ich gerade nicht schlau und die Readme ergibt sich mir nicht.

Ro75.

[OliverIO]

@Ro75

Du legst im Mytime Adapter ein Countdown Timer mit beliebigen Werten an.
Der legt dir eine datenpunkt Struktur an.
Du machst im JavaScript Adapter ein trigger auf deinen String datenpunkt der bspw 11:05:46 enthält.
Immer wenn sich dein datenpunkt tatsächlich ändert schreibst du in den cmd datenpunkt in den Mytime datenpunkten den folgenden Wert rein:
=!11:05:46

Das Format von value ist hier beschrieben
https://github.com/oweitman/ioBroker.mytime/blob/main/README.md#format-of-the-value-for-setting-the-countdown-timer

Jede Stelle, also sec,min,etc. zählt für sich und wird mit der jeweiligen Wertigkeit addiert, daher geht auch 1:120, was dann 3 Minuten ergibt. Aber das ist für dich eher nicht relevant.

Der unterschied mit und ohne ! Ist das die Änderung im timer sofort wirksam werden und nicht erst beim nächsten Start

[Ro75]

Probiere ich aus. Sage dir dann bescheid.

Ro75.

EDIT: Keine Ahnung. Ich bekomms nicht hin. Entweder zu komplex, ich verstehe es nicht oder bin zu blöd.

[OliverIO]

@Ro75

ok

1. countdowntimer anlegen
   

ich habe gerade festgestellt, das beim speichern bei mir die datenpunkte nicht angelegt werden. wenn das bei dir auch so ist, dann bitte noch setdp drücken.

2a)
für die simulation habe ich mir ein skript schreiben lassen, das sekündlich bei mir einen datenpunkt aktualisiert. das ist das was bei dir mit alexa oder so passiert.
das brauchst du eigentlich nicht, aber ich lege es bei, das du es selbst ausprobieren kannst, wie es bei mir funktioniert.

Spoiler

// ============================================================
// Skript 1: Countdown sekündlich aktualisieren
// Schreibt den Countdown nach:
// 0_userdata.0.alexatimer
// ============================================================

const countdownState = '0_userdata.0.alexatimer';

// Beispiel: 1 Stunde, 23 Minuten und 45 Sekunden
const countdownDurationSeconds =
   (1 * 60 * 60) +
   (23 * 60) +
   45;

let countdownInterval = null;
let countdownEndTime = null;


/**
* Wandelt Sekunden in Stunden:Minuten:Sekunden um.
*
* Beispiel:
* 5025 Sekunden -> 1:23:45
*/
function formatCountdown(totalSeconds) {
   const remainingSeconds = Math.max(
       0,
       Math.floor(totalSeconds)
   );

   const hours = Math.floor(remainingSeconds / 3600);

   const minutes = Math.floor(
       (remainingSeconds % 3600) / 60
   );

   const seconds = remainingSeconds % 60;

   return (
       hours +
       ':' +
       String(minutes).padStart(2, '0') +
       ':' +
       String(seconds).padStart(2, '0')
   );
}


/**
* Aktualisiert den Countdown-Datenpunkt.
*/
function updateCountdown() {
   const remainingSeconds = Math.max(
       0,
       Math.ceil(
           (countdownEndTime - Date.now()) / 1000
       )
   );

   const formattedCountdown =
       formatCountdown(remainingSeconds);

   setState(
       countdownState,
       formattedCountdown,
       true
   );

   if (remainingSeconds <= 0) {
       clearInterval(countdownInterval);
       countdownInterval = null;

       log('Countdown ist beendet.', 'info');
   }
}


/**
* Startet den Countdown.
*/
function startCountdown() {
   countdownEndTime =
       Date.now() + (countdownDurationSeconds * 1000);

   // Sofort ersten Wert schreiben
   updateCountdown();

   // Danach jede Sekunde aktualisieren
   countdownInterval = setInterval(
       updateCountdown,
       1000
   );
}


// Datenpunkt anlegen und Countdown starten
createState(
   countdownState,
   '0:00:00',
   {
       name: 'Alexa Timer Countdown',
       type: 'string',
       role: 'text',
       read: true,
       write: true
   },
   () => {
       startCountdown();
   }
);


// Timer beim Stoppen des Skripts beenden
onStop(
   () => {
       if (countdownInterval !== null) {
           clearInterval(countdownInterval);
           countdownInterval = null;
       }
   },
   1000
);

2b)
Hier das skript das auf deinen alexadatenpunkt horcht. Hier
0_userdata.0.alexatimer
und dann den mytimer datenpunkt beschreibt. hier
mytime.0.Countdowns.alexa.cmd
beides am anfang zum konfigurieren.
da ist jetzt viel kommentar und logging drin. das kann man noch entschlacken.

Spoiler

// ============================================================
// Skript 2: Countdown-Datenpunkt überwachen
//
// Liest Änderungen von:
// 0_userdata.0.alexatimer
//
// Schreibt den bereinigten Wert mit Präfix "=!" nach:
// mytime.0.Countdowns.alexa.cmd
// ============================================================

const countdownState = '0_userdata.0.alexatimer';
const commandState = 'mytime.0.Countdowns.alexa.cmd';


/**
* Bereinigt den Datenpunktinhalt.
*
* Entfernt:
* - Leerzeichen
* - Tabs
* - Zeilenumbrüche
* - ein bereits vorhandenes Präfix "=!"
*/
function cleanCountdownValue(value) {
   return String(value)
       .trim()
       .replace(/\s+/g, '')
       .replace(/^=!+/, '');
}


/**
* Reagiert nur auf tatsächliche Wertänderungen.
*/
on(
   {
       id: countdownState,
       change: 'ne'
   },
   (obj) => {
       if (
           !obj ||
           !obj.state ||
           obj.state.val === null ||
           obj.state.val === undefined
       ) {
           return;
       }

       const cleanedValue =
           cleanCountdownValue(obj.state.val);

       if (cleanedValue === '') {
           log(
               `Der Inhalt von ${countdownState} ist nach der Bereinigung leer.`,
               'warn'
           );

           return;
       }

       const commandValue =
           '=!' + cleanedValue;

       setState(
           commandState,
           commandValue,
           false,
           (error) => {
               if (error) {
                   log(
                       `Fehler beim Schreiben nach ${commandState}: ${error}`,
                       'error'
                   );

                   return;
               }

               log(
                   `${commandState} wurde auf "${commandValue}" gesetzt.`,
                   'debug'
               );
           }
       );
   }
);

3. in vis habe ich das widget mytime countdown flipclock genommen
   und dort den datenpunkt des mytime alexa countdown eingestellt.
   welchen unterdatenpunkt du nimmst ist egal. das widget sucht sich seine datenpunkte dann selbst zusammen.
   

Spoiler

[{"tpl":"tplMyTimeCountdownFlip","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"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","countdown_showsec":"true","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,"countdown_oid":"mytime.0.Countdowns.alexa.action","countdown_showmin":true,"countdown_showhrs":true},"style":{"left":"111px","top":"86px","width":"502px","height":"120px"},"widgetSet":"mytime"}]

Ergebnis sieht dann so aus:

5a267779-959f-4940-9d06-d4453debb3f1-20260721-1036-26.4326649.mp4

[Ro75]

Danke für das Beispiel. Der entscheidende Punkte war setState mit false. Jetzt geht es. Danke.

Ro75.

[OliverIO]

@Ro75 sagte:

setState mit false

ja, true bleibt bei gemanagten datenpunkten dem adapter vorbehalten, sonst würde der adapter endlos auf datenpunktänderungen reagieren.
das true/false betrifft den ack(nowledged)/bestätigt status des datenpunkts.
ein adapter reagiert auf ack=false und bestätigt dann den datenpunkt mit ack=true (auf diese änderung reagiert er dann nicht mehr)

[OliverIO]

Neue Version 2.5.0

• Die FlipClock widgets (countdown und clock) sind nun über die css-Einstellung des widgets über Schriftgroße/Font-Size einstellbar. Daher ist das transform nicht mehr notwendig.
• Es wurden die default-Einstellungen der widgets etwas optimiert, so das man immer eine Anzeige hat, auch wenn noch kein Datenpunkt ausgewählt wurde.

[Chaot]

Was mache ich verkehrt?

Version 2.5.0
Vorher hat das funktioniert

[OliverIO]

@Chaot

Genau das was in den anmerlungen oben steht.

• Die FlipClock widgets (countdown und clock) sind nun über die css-Einstellung des widgets über Schriftgroße/Font-Size einstellbar. Daher ist das transform nicht mehr notwendig.
• Es wurden die default-Einstellungen der widgets etwas optimiert, so das man immer eine Anzeige hat, auch wenn noch kein Datenpunkt ausgewählt wurde.

Der default ist eine für deine widgetglsse zu groß.
Du stellst in den widgeteinstelunh bei css Schrift eine kleinere Größe ein.
Bsp 50px oder 40px
Die einzelnen Ziffern brechen um

Falls das nicht hilft musst du mir beschreiben wie es vorher ausgesehen hat. Da reicht mein Vorstellungsvermögen nicht aus

[Chaot]

Der Effekt tritt nur bei der Flip Clock auf. die beiden anderen Uhren machen das nicht.
Mit Transform arbeite ich nicht.
Datenpunkt ist ausgewählt. Verhalten bei Server oder Client gleich

So sieht des im Editor aus wenn ich als Schriftgröße 10px eingebe und die Widgetbreite auf dem ursprünglichen Wert lasse(siehe Rahmen). Auch wenn ich das Widget ohne Schriftgrößenänderung grüßer ziehe bleiben die Ziffern untereinander.

[Eduard77]

@Chaot
kann ich bestätigen. Bei mir sieht genauso aus und ich schaffe es nicht in einer Linie anzeigen zu lassen.

[OliverIO]

@Eduard77
@chaot

Bitte ein Widget Export

[Eduard77]

@OliverIO

[
  {
    "tpl": "tplMyTimeClockFlip",
    "data": {
      "bindings": [],
      "clock_time_source": "client",
      "g_common": true,
      "clock_date_order": "DMY",
      "clock_showyear": "true",
      "clock_showmonth": "true",
      "clock_showday": "true",
      "clock_showhours": "true",
      "clock_showminutes": "true",
      "clock_showseconds": "true"
    },
    "style": {
      "bindings": [],
      "left": "291.234px",
      "top": "151.523px",
      "width": "931.992px",
      "height": "92.9961px"
    },
    "widgetSet": "mytime",
    "_id": "i000001"
  }
]

[OliverIO]

@Eduard77

bei mir wird das ordentlich angezeigt.
könntet ihr mal bitte prüfen, ob ihr noch extra css klassen definiert habt,
die mit

clock-flip

beginnen
oder wahrscheinlicher noch

play

wenn nicht, dann wird es etwas komplizierter, da ich bei euch so nicht reinschauen kann.

öffnet bitte im runtime mode die browser konsole mit F12
geht in den console tab
dort wo die meldungen stehen m ende ist ein eingabefeld.
dort bitte das folgende einfügen
aus dem #w000005 müsst ihr die widget id des betroffenen widgets machen.

var selector='#w000005 > div > span.clock-flip-unit.clock-day.flip-clock-wrapper > ul:nth-child(1)',el=document.querySelector(selector),out=[],scan=function(rules,source){Array.from(rules||[]).forEach(function(r){if(r.selectorText){try{if(el.matches(r.selectorText))out.push('/* '+source+' */\n'+r.selectorText+' {\n  '+r.style.cssText.replace(/;\s*/g,';\n  ').trim()+'\n}')}catch(e){console.warn('Selektor nicht prüfbar:',r.selectorText,e)}}else if(r.cssRules){scan(r.cssRules,source)}})};if(!el){console.error('Element nicht gefunden:',selector)}else{console.log('Element:',el,'Klassen:',Array.from(el.classList));Array.from(document.styleSheets).forEach(function(s){try{scan(s.cssRules,s.href||'<style>')}catch(e){console.warn('Stylesheet nicht lesbar:',s.href||'<style>',e.message)}});console.log(out.length?out.join('\n\n'):'Keine passenden CSS-Regeln gefunden.')}

die ausgabe dann bitte hier posten
bei mir sieht die so aus

/* http://192.168.1.81:8082/vis-2/widgets/mytime/css/flipclock.css */
.flip-clock-wrapper * {
  box-sizing: border-box;
  backface-visibility: hidden;
}

/* http://192.168.1.81:8082/vis-2/widgets/mytime/css/flipclock.css */
.flip-clock-wrapper ul {
  list-style: none;
  padding: 0px;
}

/* http://192.168.1.81:8082/vis-2/widgets/mytime/css/flipclock.css */
.flip-clock-wrapper ul {
  position: relative;
  float: left;
  margin: 0.0625em;
  width: 0.75em;
  height: 1.125em;
  font-size: inherit;
  font-weight: bold;
  line-height: 1.0875em;
  border-radius: 0.075em;
  background: rgb(0, 0, 0);
}

/* http://192.168.1.81:8082/vis-2/widgets/mytime/css/flipclock.css */
.flip-clock-wrapper .flip {
  box-shadow: rgba(0, 0, 0, 0.7) 0px 0.025em 0.0625em;
}

/* <style> */
.play {
  color: white;
}

das .play am ende ist ein test von mir.
wenn davon abgesehen noch andere dinge stehen, müssen wir uns auf die suche machen woher das kommt

hier noch ergänzend die große suche.
auch hier am Anfang die widget id anpassen. das # muss stehen bleiben
das sammelt alle css klassen aller darunterliegenden html elemente ein und gibt dann die definitionen aus.
aber als erstes das obige skript probieren

var selector='#w000005',root=document.querySelector(selector);if(!root){console.error('Element nicht gefunden:',selector)}else{var elements=[root].concat(Array.from(root.querySelectorAll('*'))),classes=Array.from(new Set(elements.reduce(function(a,e){return a.concat(Array.from(e.classList||[]))},[]))).sort(),esc=function(s){return window.CSS&&CSS.escape?CSS.escape(s):s.replace(/([^\w-])/g,'\\$1')},results=[],seen=new Set(),scan=function(rules,source,context){Array.from(rules||[]).forEach(function(r){if(r.selectorText&&r.style){var classRelated=classes.some(function(c){return new RegExp('(^|[^\\w-])\\.'+esc(c)+'(?![\\w-])').test(r.selectorText)}),matching=false;try{matching=elements.some(function(e){return e.matches(r.selectorText)})}catch(e){}if(classRelated||matching){var css=Array.from(r.style).sort().map(function(p){return p+': '+r.style.getPropertyValue(p).trim()+(r.style.getPropertyPriority(p)?' !important':'')+';'}).join('\n  '),key=r.selectorText+'|'+css+'|'+source+'|'+context;if(!seen.has(key)){seen.add(key);results.push({selector:r.selectorText,css:css,source:source,context:context,matching:matching})}}}else if(r.cssRules){var label=r.conditionText?'@'+(r.type===4?'media':r.type===12?'supports':'rule')+' '+r.conditionText:r.name?'@'+r.name:'@rule';scan(r.cssRules,source,context.concat(label))}})},sheets=Array.from(document.styleSheets);sheets.forEach(function(s,i){try{scan(s.cssRules,s.href||'<inline-style-'+i+'>',[])}catch(e){console.warn('Stylesheet nicht lesbar:',s.href||'<inline-style-'+i+'>',e.message)}});results.sort(function(a,b){return a.selector.localeCompare(b.selector)||a.source.localeCompare(b.source)||a.css.localeCompare(b.css)});console.log('SELEKTOR:\n'+selector+'\n\nKLASSEN ('+classes.length+'):\n'+classes.map(function(c){return'.'+c}).join('\n')+'\n\nCSS-REGELN ('+results.length+'):\n\n'+results.map(function(r){return'/* '+(r.matching?'AKTUELL WIRKSAM':'KLASSENBEZOGEN')+' | '+r.source+(r.context.length?' | '+r.context.join(' > '):'')+' */\n'+r.selector+' {\n  '+r.css+'\n}'}).join('\n\n'))}