Configureerbare Word Clock Simulator: 3 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

Dit is niet bepaald een Instructable. Ik ben mijn eigen Word Clock aan het ontwerpen en besloot eerst een webapp-simulator te bouwen, zodat ik het raster kon opmaken en testen hoe het er op verschillende tijdstippen van de dag uitziet. Toen realiseerde ik me dat dit nuttig zou kunnen zijn voor andere mensen die aan woordklokken werken, en besloot het te delen.

De app is een enkel kort HTML-bestand. Als u het opslaat en erop dubbelklikt, wordt het geopend in uw browser en wordt de huidige tijd weergegeven. Vervolgens wordt het display elke 10 seconden bijgewerkt als de tijd is gewijzigd.

Er is ook een tekstveld waar u een specifiek tijdstip kunt typen en kunt zien hoe het eruit zal zien in uw project.

Het ontwerp van de wordclock van iedereen is anders, dus ik heb geprobeerd de code gemakkelijk te configureren. Zie de volgende paar stappen voor tips over hoe u dat kunt doen.

Ik hoop dat je dit nuttig vindt! Het is geweldig om te kunnen experimenteren met lay-outs en bewoordingen voordat u zich tot hardware stort!

Stap 1: Download het HTML-bestand

De simulator is een web-app met één bestand. Het is iets minder dan 200 regels. Je kunt het hier downloaden.

(Er is niet echt een knop om het bestand op Github te downloaden. Maar je kunt gewoon de inhoud van het bestand selecteren, kopiëren en plakken in een nieuw tekstbestand op je computer. Zorg ervoor dat je het bestand iets.html noemt.)

Nadat u het hebt gedownload, dubbelklikt u op het bestand en het wordt in een tabblad in uw browser geladen. U zou de huidige tijd in een woordraster moeten zien.

Opmerking: ik heb de app alleen getest met Chrome op Windows.

Stap 2: Bewerk het raster

U kunt verschillende woordlay-outs uitproberen door het stukje Javascript te bewerken dat er als volgt uitziet:

var row_strs = [" HET IS ", "EEN TWEE DRIE", " VIER VIJF ZES ", " ZEVEN ACHT ", " NEGEN TIEN ", " ELF TWAALF", " OH VIJF TIEN ", " VIJFTIEN TWINTIG ", " UUR DERTIG ", "VERENIGVIJFTIG", "IN DE MIDDAG", "IN DE NACHTOchtend",];

Als u rijen toevoegt/verwijdert en de pagina opnieuw laadt, wordt uw raster groter of kleiner.

En als u meer letters aan elke rij toevoegt, wordt uw raster breder. Zorg ervoor dat alle rijen hetzelfde aantal letters hebben.

U zult merken dat de tekenreeksen in de bovenstaande code spaties hebben, maar die worden omgezet in willekeurige tekens in het raster. U kunt de reeks tekens kiezen die willekeurig worden gebruikt om die spaties te vullen door de regel te bewerken die er als volgt uitziet:

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

Stap 3: Wijzig de formulering

U moet weten hoe u code moet schrijven als u andere frasering wilt gebruiken. De logica die een datum neemt en deze in woorden omzet, zit in de functie genaamd dateToSentence().