Konfigurierbarer Wordclock-Simulator - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Dies ist nicht gerade ein Instructable. Ich entwerfe meine eigene Word Clock und habe beschlossen, zuerst einen Web-App-Simulator zu bauen, damit ich das Raster auslegen und testen kann, wie es zu verschiedenen Tageszeiten aussieht. Dann wurde mir klar, dass dies für andere Leute, die an Wordclocks arbeiten, nützlich sein könnte, und beschloss, es zu teilen.

Die App ist eine einzelne kurze HTML-Datei. Wenn Sie es speichern und darauf doppelklicken, wird es in Ihrem Browser geöffnet und zeigt die aktuelle Uhrzeit an. Dann wird die Anzeige alle 10 Sekunden aktualisiert, wenn sich die Zeit geändert hat.

Es gibt auch ein Textfeld, in das Sie eine bestimmte Zeit eingeben und sehen können, wie sie in Ihrem Projekt aussehen wird.

Das Wordclock-Design ist bei jedem anders, daher habe ich versucht, den Code einfach zu konfigurieren. In den nächsten Schritten finden Sie Hinweise dazu.

Ich hoffe, Sie finden das hilfreich! Es ist großartig, mit Layouts und Formulierungen experimentieren zu können, bevor Sie sich auf Hardware festlegen!

Schritt 1: Laden Sie die HTML-Datei herunter

Der Simulator ist eine Single-File-Web-App. Es sind knapp 200 Zeilen. Sie können es hier herunterladen.

(Es gibt nicht wirklich eine Schaltfläche zum Herunterladen der Datei auf Github. Sie können jedoch einfach den Dateiinhalt auswählen, kopieren und in eine neue Textdatei auf Ihrem Computer einfügen. Achten Sie darauf, die Datei etwas.html zu nennen.)

Nachdem Sie es heruntergeladen haben, doppelklicken Sie auf die Datei und sie wird in einem Tab Ihres Browsers geladen. Die aktuelle Uhrzeit sollte in einem Wortraster angezeigt werden.

Hinweis: Ich habe die App nur mit Chrome unter Windows getestet.

Schritt 2: Bearbeiten Sie das Raster

Sie können verschiedene Wort-Layouts ausprobieren, indem Sie den Javascript-Teil bearbeiten, der so aussieht:

var row_strs = [„ES IST“, „EINS ZWEI DREI“, „FOUR FIVE SIX“, „SEVEN EIGHT“, „NINE ZEHN“, „ELEVEN TWELVE“, „OH FIVE TEN“, „FIFTEEN TWENTY“, „O'CLOCK DIRTY“, "FIFTY FIFTY FORTY", "AM NACHMITTAG", " AM NACHT MORGEN",];

Wenn Sie Zeilen hinzufügen/löschen und die Seite neu laden, wird Ihr Raster größer oder kleiner.

Und wenn Sie jeder Reihe mehr Buchstaben hinzufügen, wird Ihr Raster breiter. Stellen Sie nur sicher, dass alle Zeilen die gleiche Anzahl von Buchstaben haben.

Sie werden feststellen, dass die Strings im obigen Code Leerzeichen enthalten, aber diese werden im Raster in zufällige Zeichen umgewandelt. Sie können den Satz von Zeichen auswählen, der zufällig verwendet wird, um diese Leerzeichen zu füllen, indem Sie die Zeile bearbeiten, die wie folgt aussieht:

var RANDCHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%&";

Schritt 3: Ändern Sie den Wortlaut

Sie müssen wissen, wie Sie Code schreiben, wenn Sie andere Formulierungen verwenden möchten. Die Logik, die ein Datum in Worte umwandelt, ist in der Funktion dateToSentence() enthalten.