Simulador de Word Clock configurável: 3 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:35

Este não é exatamente um Instructable. Estou projetando meu próprio Word Clock e decidi primeiro construir um simulador de aplicativo da web para que eu pudesse fazer o layout da grade e testar sua aparência em vários momentos do dia. Então percebi que isso poderia ser útil para outras pessoas que trabalham com relógios de palavras e decidi compartilhá-lo.

O aplicativo é um único arquivo HTML curto. Se você salvá-lo e clicar duas vezes nele, ele abrirá no seu navegador e começará a exibir a hora atual. Em seguida, ele atualizará a exibição a cada 10 segundos se a hora tiver mudado.

Há também um campo de texto onde você pode digitar qualquer hora específica e ver como ficará em seu projeto.

O design do word clock de cada pessoa é diferente, então tentei fazer a configuração do código facilmente. Veja as próximas etapas para dicas de como fazer isso.

Eu espero que você ache isto útil! É ótimo poder experimentar layouts e palavras antes de se comprometer com o hardware!

Etapa 1: Baixe o arquivo HTML

O simulador é um aplicativo da web de arquivo único. Tem pouco menos de 200 linhas. Você pode baixá-lo aqui.

(Não existe realmente um botão para baixar o arquivo no Github. Mas você pode apenas selecionar o conteúdo do arquivo, copiar e colar em um novo arquivo de texto no seu computador. Certifique-se de nomear o arquivo como algo.html.)

Depois de baixá-lo, clique duas vezes no arquivo e ele será carregado em uma guia do navegador. Você deve ver a hora atual exibida em uma grade de palavras.

Nota: Eu apenas testei o aplicativo usando o Chrome no Windows.

Etapa 2: Editar a grade

Você pode experimentar diferentes layouts de palavras editando a parte de Javascript que se parece com isto:

var row_strs = ["É", "UM DOIS TRÊS", "QUATRO CINCO SEIS", "SETE OITO", "NOVE DEZ", "ONZE DOZE", "OH CINCO DEZ", "QUINZE VINTE", "HORA TRINTA", "QUARENTA E CINCO CINCO", "À TARDE", "À NOITE",];

Se você adicionar / excluir linhas e recarregar a página, sua grade será maior ou menor.

E se você adicionar mais letras a cada linha, sua grade ficará mais larga. Apenas certifique-se de que todas as linhas tenham o mesmo número de letras.

Você notará que as strings no código acima têm espaços, mas eles se transformam em caracteres aleatórios na grade. Você pode escolher o conjunto de caracteres que serão usados aleatoriamente para preencher esses espaços, editando a linha que se parece com isto:

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

Etapa 3: alterar o texto

Você precisará saber como escrever código se quiser usar frases diferentes. A lógica que pega uma data e a transforma em palavras está na função chamada dateToSentence ().