Mit dem Stopper-Widget können Sie ganz einfach Ihre verstrichene Zeit, Countdown / Countup, Trigger-Ereignis, wenn das Widget die angegebene Zeit erreicht, und vieles mehr messen.
Das Stopper-Widget finden Sie im Abschnitt Interaktionen.
Optionen
Ein Stopper-Widget hat immer einen Start von Zeit (0 Tage 0 Stunden 0 Minuten 0 Sekunden standardmäßig) und kann auch eine "Stopp bei" -Zeit haben. Es kann von einem negativen Wert ausgehen, zum Beispiel, wenn Sie einen Timer ein paar Sekunden früher starten möchten, so dass er -00:03 –00:02 –00:01 00:00 00:01 00:02 anzeigen würde... etc.
Es kann entweder "Count up" oder "Count down" von Anfang an vom Wert ausgehen. Es zählt unendlich oder bis es den Stopp beim Wert erreicht.
Es stehen mehrere Formatoptionen zur Verfügung. Wenn die vergangene Zeit 1 Stunde und 33 Minuten beträgt, das ausgewählte Format jedoch keine Stunden enthält, wird die Anzahl der Minute erhöht, z. B. würde in diesem Fall 93 Minuten angezeigt.
Anlassen
Ein Stopper-Widget kann auf verschiedene Arten gestartet werden. Am einfachsten ist es, die Option "Automatisch starten" im Eigenschaftenmenü zu aktivieren. Es beginnt mit dem Startwert bei jedem Seitenstart (oder wenn das Widget über eine Aktion sichtbar wird).
Aktionen
Wenn wir etwas Komplexeres brauchen, können wir Aktionen verwenden. Sie können z.B. an Sensorereignisse oder Touch-Ereignisse anhängen. Fügen Sie zu Testzwecken einfach einige Bild-Widgets hinzu und verwenden Sie Touch-Ereignisse. Klicken Sie auf der anderen Registerkarte des Bild-Widgets im Abschnitt Interaktionen auf die Schaltfläche Touch-Ereignisse bearbeiten (alternativ drücken Sie STRG+UMSCHALT+E, während das Bild-Widget ausgewählt ist).
Fügen Sie eine Aktion "Interact Widget" hinzu, die auf das Stopper-Widget abzielt. Es gibt mehrere stopperspezifische Aktionen:
- (Neu)starten: Startet das Stopper-Widget ab der "Start von"-Zeit
- Stop: Wird auf die "Start from"-Zeit zurückgesetzt und hört auf zu zählen.
- Pause: Hört auf zu zählen, wird aber nicht zurückgesetzt.
- Start/Fortsetzen: Wird nach einer Pause von der Stelle fortgesetzt, an der sie angehalten wurde. Wenn es noch nicht gestartet wurde, beginnt mit der "Start von" -Zeit.
- Umschalten: Wechselt zwischen den Aktionen "Pause" und "Start/Fortsetzen".
- Legen Sie start auf Folgendes fest: Überschreibt die "Start von"-Zeit. Wenn keine "Stop"- oder "(Re)Start"-Aktion ausgegeben wird und das Widget bereits gezählt hat, verhält es sich so, als ob die Zeitzählung von diesem Zeitpunkt an erfolgt wäre. Wenn wir einen Stopperstart ab 00:00 Uhr hatten und jetzt um 02:13 Uhr sind und wir den Start von bis 10:00 Uhr einstellen, wird er um 12:13 Uhr angezeigt.
- Stopp auf festlegen: Ändert den Wert stop at (stop at value). Aktiviert auch "hat stop at" (es sei denn, jeder Wert wird leer gelassen, in diesem Fall wird er ausgeschaltet!). Wenn der Stopper zählt und diese Zeit bereits überschritten hat, springt er auf diese Zeit und hört auf zu zählen.
- Aktuelle Uhrzeit einstellen: Ändern Sie die aktuell angezeigte Zeit auf diese hier eingestellte Zeit. Es ändert keine anderen Eigenschaften (z. B. Start von Aufenthalten gleich, etc.)
Ereignisse zu Endaktionen
- End (erreicht stop at): nur, wenn "stop at value" gesetzt ist und erreicht wird.
- Jedes Häkchen: nach jedem Wechsel (~einmal pro Sekunde), an der Haltestelle, in der Pause.
- Bei Pausenaktion: Wenn ein Ereignis mit der Pausenaktion darauf abzielte (oder es zum Umschalten angehalten hat).
- Beim Starten/Fortsetzen der Aktion: Wenn ein Ereignis es mit der Aktion "Fortsetzen" anvisiert hat (oder "Umschalten" es fortgesetzt hat).
- Bei (Neu-)Startaktion: Wenn ein Ereignis darauf abzielte, wurde es mit der Aktion re(start) oder auto start gestartet.
- Bei Stoppaktion: Wenn ein Ereignis mit Stoppaktion anvisiert wird.
- Bei Zustandsänderung (Aktionen): Wenn eine der Aktionen (Neu)starten, Stopp, Anhalten, Starten/Fortsetzen, Startzeit einstellen, Stoppzeit festlegen ausgeführt wird.
- Immer: eines der oben genannten.
- Empfangener Wert: aktuelle Zeit als Zeichenfolge (im Format des Widgets)
- Struktur für die Eigenschaft des empfangenen Wertes:
{
"config": "object used for syncing stopper widgets(more details below)",
"current": "current time as string in the widget’s format",
"details": {
"asObject": {
"hour": "number or null",
"min": "number or null",
"sec": "number or null",
"sign": "true when negative,false when positive"
},
"asSec": "current time converted to sec",
"asString": "current time as string in the widget’s format",
"digitalFormat": "‘hh: mm’ or ‘mm’ or ‘ss’,etc",
"direction": "‘countDown’ or ‘countUp’",
"paused": "true or false",
"running": "true or false"
}
}
Einige Anwendungsfälle
Stopper-Widget mit Anzeige als Fortschrittsbalken
Fügen Sie ein Stopper-Widget hinzu.
Damit dies sinnvoll ist, benötigen wir einen Timer, der eine Start- und eine Endzeit hat. Aktivieren Sie die Option "Stopp beim Wert" und legen Sie eine Endzeit fest. Sie können auch die Startzeit ändern. Für diese Demo aktivieren wir auch die Option "Automatisch starten".
Fügen Sie ein Meter-Widget hinzu, berechnen Sie die Differenz zwischen der Start- und Endzeit in Sekunden. In diesem Fall ist es (10-0) * 60 = 600. Legen Sie diese Zahl als Maximum des Zähler-Widgets fest. Sie können die Ausrichtung auf Horizontal setzen. Ändern Sie die Farben so, dass sie zu Ihren Inhalten passen. Sie können auch Rundungen oder eine Maske usw. hinzufügen, damit es besser aussieht.
Sie können die Anzeige hinter das Stopper-Widget im Menü "Ebenen" verschieben. (Tipp: Wenn Sie nicht möchten, dass der Text im Meter-Widget angezeigt wird, stellen Sie einfach die Schriftfarbe auf transparent ein.)
Wählen Sie nun das Stopper-Widget aus und suchen Sie auf der Registerkarte Andere die Schaltfläche "Stopper-Aktionen bearbeiten". Fügen Sie eine neue Aktion hinzu und wählen Sie "Jedes Häkchen" als Ereignistyp. Richten Sie dann die Aktion ein: Interaktions-Widget, richten Sie das Messgerät-Widget auf derselben Seite aus, der Wertursprung sollte Eigenschaft des empfangenen Werts sein und der Eigenschaftsname sollte auf "details.asSec" festgelegt werden. Möglicherweise müssen Sie "Vereinfachte Ansicht" in der unteren Ecke deaktivieren, damit alle Optionen angezeigt werden!
Jetzt können Sie es in der Vorschau testen.
Später:
Stopper-Widgets, die über eine interne Datenquelle synchronisiert werden
Fügen Sie ein Stopper-Widget hinzu und richten Sie seinen Stil ein, beginnen Sie von, Richtung, stoppen Sie bei (wenn Sie es brauchen) usw.
Wir werden auch irgendeine Art von Aktion brauchen, um damit zu interagieren. Diese könnten an Sensorereignisse usw. gebunden sein. In diesem Beispiel verwenden wir Touchereignisse.
Fügen Sie einige Schaltflächen hinzu, z. B. Bild-Widgets. Verwenden Sie die Registerkarte "Touch-Ereignisse bearbeiten" oder drücken Sie Strg + Umschalt + E, um den Dialog für Touch-Ereignisse zu öffnen. Fügen Sie jedem von ihnen die entsprechende Interaktions-Widget-Aktion hinzu und zielen Sie auf das Stopper-Widget mit "Start / Resume", "Pause" und "Stop" oder "(Re)Start" ab.
Testen Sie, ob all dies in der Vorschau funktioniert. Resume beginnt dort, wo es ist, stoppt an der Stelle, an der es sich befindet, Stop geht zurück zur Startzeit und (Re)start beginnt mit der Startzeit.
Klicken Sie nun auf der Registerkarte Andere des Stopper-Widgets auf die Registerkarte Edit stopper events.
Fügen Sie eine neue Aktion hinzu, und wählen Sie Datenquelle für Aktionstyp ändern aus. Wir können die interne Datenquelle direkt hier mit dem Plus-Button erstellen.
Jetzt müssen wir auf die Schaltflächen Webhook erstellen und API-Schlüssel erstellen klicken.
Wenn beides erfolgreich war, werden die Schaltflächen durch diesen Text ersetzt:
Setzen Sie nun Value origin auf Property of received value und geben Sie "config" als Eigenschaftsnamen ein. Das sollten Sie sehen:
Legen Sie außerdem den Ereignistyp auf "Bei Zustandsänderung (Aktionen)" fest. Es muss so eingestellt werden, dass alle zugehörigen Ereignisse erfasst, aber nicht zu viele unnötige Benachrichtigungen gesendet werden.
Öffnen Sie nun den Inhalt in der Vorschau und starten Sie den Stopper mindestens einmal. Es ist wichtig, die Datenquelle mit den Daten einzurichten.
Danach können wir jedes Stopper-Widget an diese Daten binden. Gehen Sie zur Registerkarte Andere und klicken Sie auf die Schaltfläche "Alles binden" oder verwenden Sie alternativ Strg + Umschalt + Doppelklick. Beginnen wir damit, dasselbe Stopper-Widget an diese Daten zu binden. Wählen Sie im Fenster "Alles binden" die Option "Konfigurationsobjekt (für die Synchronisierung)" aus.
Wir müssen nur die Datenquelle selbst auswählen. Wenn wir in der Aktion "Datenquelle ändern" anstelle von "überschreiben" verwenden würden, müssten wir diese Ebene auswählen. Sie wissen, dass Sie die richtige Stufe haben, wenn die Daten in der Auswahlvorschau in etwa wie folgt aussehen:
Wenn Sie dies nun in der Vorschau erneut öffnen, befindet es sich in dem Zustand, in dem Sie es zuletzt verlassen haben. Wenn es gezählt wurde, zeigt es die Zeit an, die seit dem letzten Start verbracht wurde. Wenn es angehalten wurde, wird es in derselben Sekunde angehalten usw. Für alle anderen Stopper, die Sie befolgen müssen, führen Sie nur den Schritt "Bind anything" aus.
Stellen Sie während der Verwendung sicher, dass Sie nur direkt mit einem der Widgets interagieren, um sicherzustellen, dass es wie beabsichtigt funktioniert. Am besten verwenden Sie einen anderen Inhalt für den "Master" -Stopper und die "folgenden" Stopper.
Alternativ können Sie Ihre eigene externe Anwendung erstellen, die das Konfigurationsobjekt in eine interne Datenquelle schreibt (über einen Webhook) und alle Ihre Stopper-Wigets dazu bringt, ihr zu folgen, binden Sie sie stattdessen einfach an diese Datenquelle.
Konfigurationsstruktur: Status kann sein:
'gestartet', 'gestoppt' oder 'angehalten'. MsFromPlayToPause wird nur benötigt, wenn "angehalten" wird. Stop at ist nur erforderlich, wenn 'hasStopAt' wahr ist. Die Richtung kann "CountDown" oder "CountUp" sein.
{
"direction": "countDown",
"hasStopAt": true,
"msFromPlayToPause": 0,
"startFrom": {
"hour": 0,
"min": 13,
"sec": 0
},
"startTimestamp": 1622706857667,
"state": "started",
"stopAt": {
"hour": 0,
"min": 0,
"sec": 0
}
}