Simulatore di word clock configurabile: 3 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:00

Questo non è esattamente un Instructable. Sto progettando il mio Word Clock e ho deciso di creare prima un simulatore di app Web in modo da poter disporre la griglia e testare come appare alle varie ore del giorno. Poi ho capito che questo poteva essere utile per altre persone che lavorano sui word clock e ho deciso di condividerlo.

L'app è un singolo file HTML breve. Se lo salvi e fai doppio clic su di esso, si aprirà nel tuo browser e inizierà a visualizzare l'ora corrente. Quindi aggiornerà il display ogni 10 secondi se l'ora è cambiata.

C'è anche un campo di testo in cui puoi digitare in qualsiasi momento specifico e vedere come apparirà nel tuo progetto.

Il design del word clock di ognuno è diverso, quindi ho cercato di configurare facilmente il codice. Vedere i prossimi passaggi per suggerimenti su come farlo.

Spero che tu lo trovi utile! È fantastico poter sperimentare layout e parole prima di dedicarsi all'hardware!

Passaggio 1: scarica il file HTML

Il simulatore è un'app Web a file singolo. Sono poco meno di 200 righe. Potete scaricarlo qui.

(Non c'è davvero un pulsante per scaricare il file su Github. Ma puoi semplicemente selezionare il contenuto del file, copiarlo e incollarlo in un nuovo file di testo sul tuo computer. Assicurati di nominare il file qualcosa.html.)

Dopo averlo scaricato, fai doppio clic sul file e verrà caricato in una scheda del browser. Dovresti vedere l'ora corrente visualizzata in una griglia di parole.

Nota: ho testato l'app solo utilizzando Chrome su Windows.

Passaggio 2: modifica la griglia

Puoi provare diversi layout di parole modificando il pezzo di Javascript che assomiglia a questo:

var righe_strs = [" È ", "UN DUE TRE ", " QUATTRO CINQUE SEI ", " SETTE OTTO ", " NOVE DIECI ", " UNDICI DODICI", " OH CINQUE DIECI ", " QUINDICI E VENTI ", " ORE TRENTA ", "QUARANTA CINQUE CINQUE", "NEL POMERIGGIO", "NELLA NOTTE DEL MATTINO",];

Se aggiungi/elimini righe e ricarichi la pagina, la griglia sarà più grande o più piccola.

E se aggiungi più lettere a ogni riga, la tua griglia si allargherà. Assicurati solo che tutte le righe abbiano lo stesso numero di lettere.

Noterai che le stringhe nel codice sopra hanno spazi, ma quelle vengono trasformate in caratteri casuali nella griglia. Puoi scegliere il set di caratteri che verrà utilizzato casualmente per riempire quegli spazi modificando la linea che assomiglia a questa:

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

Passaggio 3: modifica la formulazione

Avrai bisogno di sapere come scrivere il codice se vuoi usare un fraseggio diverso. La logica che prende una data e la trasforma in parole è nella funzione chiamata dateToSentence().