FlashReader
Lettore che mostra un file di testo una parola alla volta al ritmo impostato e ricorda dove ci si è fermati.
- Rilasciato
- Dati raccolti
- Nessuno
- Prezzo
- Gratuito
Chi sono
FlashReader apre un file .txt locale e lo mostra una parola alla volta al centro dello schermo, ogni 500 ms per impostazione predefinita. Il lettore imposta l'intervallo, la dimensione delle lettere, il colore delle lettere e il colore dello sfondo. L'intero testo e la posizione della parola restano sul dispositivo, quindi dopo un riavvio lo stesso file si riapre sulla stessa parola.
Questa pagina descrive la versione web su flashreader.fun: una pagina HTML con JavaScript inline. Lo script non effettua richieste di rete e non ha analitica. L'app Android su Google Play è una build separata, il cui sorgente non è trattato qui.
L'ingegneria è piccola e specifica: un timer che può cambiare ritmo senza perdere la parola, un archivio che sopravvive a un riavvio e impostazioni che vengono applicate e salvate nel momento in cui cambiano.
FlashReader · lettura concentrata
cosa è stato risolto
Ciclo delle parole
nel prodottoCosa offreL'utente sceglie un file di testo e lo legge parola per parola a un ritmo regolare, e può cambiare la velocità a metà testo senza perdere il punto.
- Problema
- Le parole devono cambiare a un intervallo regolare impostato dall'utente, e l'intervallo deve essere modificabile a metà di un testo senza perdere la parola corrente.
- Soluzione
Un unico timer a intervalli fa avanzare un indice in un array di parole. Un cambio di velocità ferma quel timer e ne avvia uno nuovo dallo stesso indice.
- Stack
Trasformare un file di testo scelto in una sequenza di paroleLeggere il file come UTF-8 con FileReader e dividerlo sugli spazi in un array
Il file arriva da un normale input di file limitato a .txt, quindi la pagina non ha bisogno di accesso al file system. action_load_file() lo legge con readAsText(file, 'UTF-8') e divide il risultato sui singoli spazi; la punteggiatura resta attaccata alla sua parola. Il testo grezzo viene inoltre passato a saveFileContent() per la sessione successiva.
Mostrare una parola per tick e non eseguire mai due timer contemporaneamenteread() esce se un timer è già in esecuzione; a ogni tick mostra una parola e salva l'indice successivo
read() rifiuta di partire senza un testo caricato ('Load text file to read!') e ritorna subito quando is_going è impostato, quindi premere play due volte non può avviare un secondo intervallo. Ogni tick scrive text[position] in #text-zone e salva position + 1. togglePlayPause() passa da read() a pause() e aggiorna il pulsante di riproduzione.
Un cambio di velocità a metà lettura deve applicarsi subitoFermare e riavviare l'intervallo con il nuovo periodo, mantenendo l'indice della parola
setInterval non può cambiare il proprio periodo. updateReadingSpeed() e il gestore del cambio del campo velocità chiamano pause() e poi read() quando la lettura è attiva. L'indice vive nell'oggetto lettore, quindi il timer riavviato continua con la parola successiva. Un valore digitato inferiore a 1 viene riportato al valore predefinito di 500 ms.
Fine del testo: fermarsi in modo pulito o ricominciareAlla fine o ci si ferma con 'THE END!' e si torna alla parola 0, oppure si riparte dalla parola 0
Il tick controlla se alla posizione corrente c'è una parola non definita. Con Loop disattivato cancella il timer, mostra 'THE END!', salva la posizione 0 e riporta il pulsante di riproduzione allo stato iniziale. Con Loop attivo imposta l'indice a 0 e prosegue. La scelta di Loop viene salvata come le altre impostazioni.
Ripresa dopo il riavvio
nel prodottoCosa offreSi chiude l'app e si torna più tardi: lo stesso testo si apre sulla stessa parola, con la stessa dimensione delle lettere e la stessa velocità, il tutto conservato sul dispositivo.
- Problema
- L'intero testo, la posizione della parola e le impostazioni di visualizzazione devono sopravvivere alla chiusura della pagina o dell'app, senza server.
- Soluzione
Il testo va in IndexedDB, la posizione e le impostazioni in localStorage, ed entrambi vengono riletti all'avvio.
- Stack
Un intero libro non va messo in localStorageSalvare il testo grezzo in IndexedDB con un'unica chiave fissa; tenere i valori piccoli in localStorage
saveFileContent() inserisce il testo nello store 'files' del database 'flashreader' (versione 2) con id 'flashreader_last_text', quindi un nuovo file sostituisce il vecchio. onupgradeneeded crea lo store solo se manca, quindi l'apertura su una versione precedente non fallisce.
Posizione, colori, dimensione, velocità, loop e nome del file restano in localStorage, dove le letture all'avvio sono sincrone.
Riaprire l'ultimo file sulla parola in cui la lettura si era fermataSalvare l'indice a ogni parola mostrata; all'avvio ricaricare il testo e quell'indice
set_position() scrive l'indice in localStorage (fr_position) a ogni tick, quindi un'app chiusa o terminata forzatamente perde al massimo una parola. Il costruttore legge prima l'indice; su DOMContentLoaded getFileContent() carica il testo da IndexedDB, lo divide di nuovo e mostra 'The last file, <name>, has been loaded' con l'invito a premere play.
I valori memorizzati possono mancare o essere corrottiRipristinare ogni valore separatamente con valori di ripiego: posizione 0, dimensione 48 px, velocità 500 ms
Ogni chiave viene letta e applicata separatamente, quindi un valore errato non blocca gli altri. Una posizione non numerica diventa 0, una dimensione del carattere che dà 0 al parsing ripiega su 48 px, una velocità che dà 0 al parsing ripiega su 500 ms. I colori vengono salvati senza '#' e ripristinati con esso, poi applicati al testo e allo sfondo della pagina.
Visualizzazione e controlli
nel prodottoCosa offreDimensione delle lettere e colori cambiano durante la lettura, le scorciatoie da tastiera controllano la riproduzione in un browser, e il lettore può tornare indietro di dieci parole o saltare a una parola qualsiasi.
- Problema
- La dimensione delle lettere e i colori devono cambiare durante la lettura e, in un browser desktop, la riproduzione deve essere controllabile da tastiera.
- Soluzione
I campi della barra degli strumenti applicano e salvano subito ogni modifica; nel browser le scorciatoie da tastiera chiamano gli stessi metodi del lettore.
- Stack
Dimensione delle lettere e colori devono applicarsi subito e persistereI gestori di modifica impostano direttamente lo stile e salvano il valore; una dimensione inferiore a 8 px diventa 8
Il gestore del colore del carattere imposta il colore del testo di #text-zone, quello dello sfondo imposta lo sfondo del body e quello della dimensione imposta font-size in px con un minimo di 8. Ogni gestore scrive il proprio valore in localStorage nello stesso passaggio, quindi non esiste un'azione di salvataggio separata.
Nel browser il controllo da tastiera non deve far scorrere la pagina durante la letturaSpazio, F, Su e Giù chiamano le azioni del lettore e annullano il comportamento predefinito del browser
Nella versione per browser, Spazio alterna riproduzione e pausa, F alterna lo schermo intero, Su rende le parole più veloci di 10 ms con un minimo di 50 ms, Giù più lente di 10 ms. preventDefault() impedisce al browser di scorrere o di premere un controllo con il focus. I cambi di velocità passano da updateReadingSpeed(), quindi un timer in esecuzione riparte al nuovo ritmo.
Il lettore ha perso alcune parole e vuole tornare indietroLa freccia sinistra (browser) torna indietro di 10 parole, con limite a 0; il campo della posizione salta a una parola qualsiasi
skipBackwards() sposta l'indice indietro di 10, mai sotto 0, mostra subito quella parola e salva la posizione. Il campo della posizione nella barra degli strumenti accetta qualsiasi numero di parola; i valori negativi diventano 0.
Lo schermo intero funziona in modo diverso tra browser e shell di appProvare le Fullscreen API standard e con prefisso, poi un plugin Cordova Fullscreen se la pagina ne trova uno
enterFullscreen() ed exitFullscreen() passano in rassegna le varianti standard, moz, webkit e ms. Quando esiste un oggetto globale Fullscreen, come con un plugin Cordova per lo schermo intero, viene chiamato anche Fullscreen.show(). Il pulsante e il tasto F condividono lo stesso controllo di tutte e quattro le varianti di fullscreenElement.
Numeri
dal prodotto- Ritmo predefinito 500 ms per parola 120 parole al minuto.
- Ritmo massimo 50 ms per parola Fino a 1,200 parole al minuto da tastiera.
- Passo di velocità 10 ms Tasti freccia Su e Giù.