Ενώ τα προγράμματα περιήγησης κινούνται προς υποστήριξη της αναγνώρισης ομιλίας και πιο φουτουριστικών δυνατοτήτων, οι προγραμματιστές εφαρμογών ιστού συνήθως περιορίζονται στο πληκτρολόγιο και το ποντίκι. Τι γίνεται όμως αν μπορούσαμε να αυξήσουμε τις αλληλεπιδράσεις πληκτρολογίου και ποντικιού με άλλους τρόπους αλληλεπίδρασης, όπως φωνητικές εντολές ή θέσεις χεριών;
Σε αυτήν τη σειρά αναρτήσεων, θα δημιουργήσουμε έναν βασικό εξερευνητή χαρτών με πολυτροπικές αλληλεπιδράσεις. Πρώτα επάνω είναι φωνητικές εντολές. Ωστόσο, θα πρέπει πρώτα να παρουσιάσουμε τη δομή της εφαρμογής μας προτού μπορέσουμε να ενσωματώσουμε τυχόν εντολές.
Η εφαρμογή μας, ξεκίνησε με δημιουργία-αντίδραση-εφαρμογή, θα είναι ένας χάρτης πλήρους οθόνης που τροφοδοτείται από τα στοιχεία του React για το Leaflet.js. Μετά την εκτέλεση δημιουργία-αντίδραση-εφαρμογή, νήματα προσθέστε φυλλάδιο, και νήματα προσθέστε αντίδραση-φυλλάδιο, θα ανοίξουμε το δικό μας Εφαρμογή συστατικό και ορίστε μας Χάρτης συστατικό:
εισαγωγή React, {Component} από το 'react';εισαγωγή {Map, TileLayer} από το "react-leaflet"
εισαγωγή './App.css';
Η εφαρμογή class επεκτείνει το στοιχείο {
κατάσταση = {
κέντρο: [41.878099, -87.648116],
ζουμ: 12,
};
updateViewport = (viewport) => {
this.setState ({
κέντρο: viewport.center,
ζουμ: viewport.zoom,
});
};
απόδοση () {
σταθερός {
κέντρο,
ανίπταμαι διαγωνίως,
} = this.state;
ΕΠΙΣΤΡΟΦΗ (
style = {{ύψος: '100%', πλάτος: '100%'}}
κέντρο = {κέντρο}
ζουμ = {ζουμ}
onViewportChange = {this.updateViewport}>
url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"
Attribution = "© συνεργάτες του OpenStreetMap"
/>
)
}
}
εξαγωγή προεπιλεγμένης εφαρμογής;
ο Εφαρμογή Το στοιχείο είναι ένα συστατικό στοιχείο που παρακολουθεί τις ιδιότητες του κέντρου και του ζουμ, μεταφέροντάς τα στο Χάρτης συστατικό. Όταν ο χρήστης αλληλεπιδρά με τους χάρτες μέσω των ενσωματωμένων αλληλεπιδράσεων ποντικιού και πληκτρολογίου, ειδοποιούμε να ενημερώσουμε την κατάστασή μας με το νέο επίπεδο κέντρου και ζουμ.
Με καθορισμένο στοιχείο πλήρους οθόνης, η εφαρμογή μας μοιάζει με την ακόλουθη:
Εκτός αυτού, έχουμε τους τυπικούς τρόπους αλληλεπίδρασης, όπως ποντίκι, πληκτρολόγιο και άγγιγμα σε συσκευές που τις υποστηρίζουν. Με τις βασικές αλληλεπιδράσεις και τη διεπαφή χρήστη που ορίζονται, ας προσθέσουμε φωνητικές εντολές για μεγέθυνση και σμίκρυνση.
Υπάρχουν πολλές βιβλιοθήκες διαθέσιμες για εκτέλεση αναγνώρισης ομιλίας στο πρόγραμμα περιήγησης. Υπάρχει ακόμη και ένα βασικό API SpeechDetection που υποστηρίζεται από το Chrome. Θα χρησιμοποιήσουμε το annyang, μια δημοφιλή και απλή βιβλιοθήκη εντοπισμού κειμένου JavaScript. Με το annyang, ορίζετε εντολές και τους χειριστές τους σε ένα αντικείμενο JavaScript, όπως:
const εντολές = { 'in': () => console.log ('στην εντολή που ελήφθη'),
'out': () => console.log ('λαμβάνεται η εντολή out'),
};
Στη συνέχεια, το μόνο που έχετε να κάνετε είναι να περάσετε αυτό το αντικείμενο σε μια μέθοδο στο annyang αντικείμενο και κλήση αρχή() σε αυτό το αντικείμενο. Ένα πλήρες παράδειγμα μοιάζει με αυτό:
εισαγωγή annyang από το «annyang» ·const εντολές = {
'in': () => console.log ('στην εντολή που ελήφθη'),
'out': () => console.log ('λαμβάνεται η εντολή out'),
};
annyang.addCommands (εντολές);
annyang.start ();
Αυτό είναι εξαιρετικά απλό, αλλά εκτός πλαισίου δεν έχει πολύ νόημα, οπότε ας το ενσωματώσουμε στο στοιχείο React. Μέσα στο componentDidMount ναι, θα προσθέσουμε τις εντολές μας και θα αρχίσουμε να ακούμε, αλλά αντί να συνδεθούμε στην κονσόλα, θα καλέσουμε δύο μεθόδους που θα ενημερώσουν το επίπεδο ζουμ στην πολιτεία μας:
zoomIn = () => { this.setState ({
ζουμ: this.state.zoom + 1
});
};
zoomOut = (... args) => {
this.setState ({
ζουμ: this.state.zoom - 1
});
};
componentDidMount () {
annyang.addCommands ({
"σε": this.zoomIn,
«έξω»: this.zoomOut,
});
annyang.start ();
}
Όταν ανανεώνεται η σελίδα μας, το πρόγραμμα περιήγησης μας ζητά άδεια να χρησιμοποιήσουμε το μικρόφωνο. Αν πείτε ναι, θα μπορείτε πλέον να χρησιμοποιείτε τις φωνητικές εντολές "in" και "out" για μεγέθυνση και σμίκρυνση. Θέλουν περισσότερα? Η βιβλιοθήκη annyang υποστηρίζει επίσης σύμβολα κράτησης θέσης και κανονικές εκφράσεις. Για να υποστηρίξουμε το ζουμ απευθείας σε ένα συγκεκριμένο επίπεδο, μπορούμε να ορίσουμε μια εντολή όπως αυτή:
annyang.addCommands ({ / * υπάρχουσες εντολές * /
«επίπεδο ζουμ: επίπεδο»: {regexp: / ^ επίπεδο ζουμ (\ d +) /, επιστροφή κλήσης: this.zoomTo},
});
ο :επίπεδο αυτό είναι ένα μέρος του κλειδιού είναι ο τυπικός τρόπος καθορισμού ενός κράτησης θέσης με μία λέξη. (Αν θέλαμε ένα placeholder πολλαπλών κόσμων, θα μπορούσαμε να το χρησιμοποιήσουμε *επίπεδο Από προεπιλογή, από προεπιλογή, η λέξη που καταγράφεται από το σύμβολο κράτησης θέσης μεταδίδεται ως όρισμα συμβολοσειράς στη λειτουργία χειριστή. Αλλά αν ορίσουμε τον χειριστή ως αντικείμενο με regex και επανάκληση κλειδιά, μπορούμε να περιορίσουμε περαιτέρω το σύμβολο κράτησης θέσης. Σε αυτήν την περίπτωση, περιορίζουμε το σύμβολο κράτησης θέσης σε μόνο ψηφία. Αυτό το σύμβολο κράτησης θέσης θα παραδοθεί ως συμβολοσειρά, οπότε θα πρέπει να τον εξαναγκάσουμε σε έναν αριθμό όταν ορίζουμε το επίπεδο ζουμ:
zoomTo = (zoomLevel) => { this.setState ({
ζουμ: + ζουμ Επίπεδο,
});
}
Και αυτό είναι! Μπορούμε τώρα να κάνουμε μεγέθυνση ή σμίκρυνση ένα επίπεδο κάθε φορά, ή μπορούμε να μεταβούμε απευθείας σε ένα επίπεδο λέγοντας τον αριθμό του. Αν παίζετε με αυτό στο σπίτι, θα παρατηρήσετε ότι χρειάζονται λίγα δευτερόλεπτα για την εγγραφή της εντολής από τον annyang και μερικές φορές οι εντολές δεν καταγράφονται. Η αναγνώριση ομιλίας δεν είναι τέλεια. Εάν ενσωματώνετε την αναγνώριση ομιλίας σε ένα σύστημα παραγωγής, θα θελήσετε να ενσωματώσετε μηχανισμούς ανατροφοδότησης σε πραγματικό χρόνο για σφάλματα ή να προσδιορίσετε πότε ακούγεται ενεργά η βιβλιοθήκη.
Εάν θέλετε να παίξετε με τον κωδικό, μπορείτε να τον βρείτε στο GitHub. Μη διστάσετε να επικοινωνήσετε με το Twitter για να μοιραστείτε τις δικές σας πολυτροπικές διεπαφές: @freethejazz.
