Kamēr pārlūkprogrammas virzās uz runas atpazīšanas un futūristiskāku iespēju atbalstīšanu, tīmekļa lietojumprogrammu izstrādātājiem parasti ir tikai tastatūra un pele. Bet kā būtu, ja mēs varētu uzlabot tastatūras un peles mijiedarbību ar citiem mijiedarbības veidiem, piemēram, balss komandām vai roku pozīcijām?
Šajā ziņu sērijā mēs izveidosim pamata karšu izpēti ar multimodālu mijiedarbību. Vispirms ir balss komandas. Tomēr vispirms mums būs jāizklāsta mūsu lietotnes struktūra, pirms varam iekļaut kādas komandas.
Mūsu lietotne ir iespiesta ar izveidot-reaģēt-lietotni, būs pilnekrāna karte, ko darbina Leaflet.js React komponenti. Pēc skriešanas izveidot-reaģēt-lietotni, dzijai pievienojiet brošūru, un dzijai pievienojiet lietošanas instrukciju, mēs atvērsim savu App sastāvdaļa un definējiet mūsu Karte komponents:
importēt React, {Component} no 'reaģēt';importēt {Map, TileLayer} no “react-leaflet”
importēt “./App.css”;
klases lietotne paplašina komponentu {
statuss = {
centrs: [41.878099, -87.648116],
tālummaiņa: 12,
};
updateViewport = (viewport) => {
this.setState ({
centrs: viewport.center,
tālummaiņa: viewport.zoom,
});
};
renderēt () {
const {
centrs,
tuvināt,
} = šī.valsts;
atgriešanās (
style = {{augstums: '100%', platums: '100%'}}
centrs = {centrs}
zoom = {zoom}
onViewportChange = {this.updateViewport}>
url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"
attribution = "© OpenStreetMap līdzautori"
/>
)
}
}
eksportēt noklusējuma lietotni;
The App komponents ir statuss, kas seko centra un tālummaiņas īpašībām, tos nododot Karte komponents. Kad lietotājs mijiedarbojas ar kartēm, izmantojot iebūvēto peles un tastatūras mijiedarbību, mums tiek paziņots, ka jāatjaunina mūsu stāvoklis ar jauno centra un tālummaiņas līmeni.
Izmantojot pilnekrāna komponentu, mūsu lietotne izskatās šādi:
No kastes mēs iegūstam tipiskos mijiedarbības veidus, tostarp peli, tastatūru un pieskārienu ierīcēm, kas tos atbalsta. Ņemot vērā pamata mijiedarbību un lietotāja saskarni, pievienosim balss komandas, lai tuvinātu un tālinātu.
Runas atpazīšanai pārlūkprogrammā ir pieejamas daudzas bibliotēkas. Ir pat bāzes atbalstīta SpeechDetection API, ko atbalsta Chrome. Mēs izmantosim annyang, populāru un vienkāršu JavaScript teksta noteikšanas bibliotēku. Izmantojot annyang, jūs definējat komandas un to apstrādātājus JavaScript objektā, piemēram:
const komandas = { 'in': () => console.log ('komandā saņemts'),
'out': () => console.log ('out komanda saņemta'),
};
Tad viss, kas jums jādara, ir nodot šo objektu metodei annyang objekts un zvans sākt() uz šī objekta. Pilns piemērs izskatās šādi:
importēt annyang no 'annyang';const komandas = {
'in': () => console.log ('komandā saņemts'),
'out': () => console.log ('out komanda saņemta'),
};
annyang.addCommands (komandas);
annyang.start ();
Tas ir ļoti vienkārši, taču ārpus konteksta nav lielas jēgas, tāpēc iekļausim to mūsu React komponentā. Ietvaros componentDidMount āķis, mēs pievienosim komandas un sāksim klausīties, bet tā vietā, lai pieteiktos konsolē, mēs izsauksim divas metodes, kas atjaunina tālummaiņas līmeni mūsu valstī:
zoomIn = () => { this.setState ({
tālummaiņa: šī.valsts.zoom + 1
});
};
zoomOut = (... argumenti) => {
this.setState ({
tālummaiņa: šī.valsts.zoom - 1
});
};
componentDidMount () {
annyang.addCommands ({
'in': this.zoomIn,
'out': this.zoomOut,
});
annyang.start ();
}
Kad mūsu lapa tiek atsvaidzināta, pārlūkprogramma lūdz mums atļauju izmantot mikrofonu. Ja jūs sakāt jā, tagad varēsiet izmantot balss komandas “iekšā” un “tālināt”, lai tuvinātu un tālinātu. Vēlas vairāk? Arī annyang bibliotēka atbalsta vietturus un regulāras izteiksmes. Lai atbalstītu tālummaiņu tieši līdz noteiktam līmenim, mēs varam definēt komandu šādi:
annyang.addCommands ({ / * esošās komandas * /
'tālummaiņas līmenis: līmenis': {regexp: / ^ tālummaiņas līmenis (\ d +) /, atzvanīšana: this.zoomTo},
});
The : līmenis tā ir daļa no atslēgas ir standarta veids, kā definēt viena vārda vietturi. (Ja mēs gribētu vairāku pasaules vietturi, mēs varētu to izmantot * līmenis Tā vietā.) Pēc noklusējuma viettura notvertais vārds tiek nodots kā virknes arguments apstrādātāja funkcijai. Bet, ja mēs apstrādātāju definējam kā objektu ar regex un atzvani taustiņus, mēs varam vēl vairāk ierobežot to, kas var būt vietturis. Šajā gadījumā mēs ierobežojam vietturi tikai cipariem. Šis vietturis joprojām tiks ievadīts kā virkne, tāpēc, iestatot tālummaiņas līmeni, mums tas būs jāpiespiež uz numuru:
zoomTo = (zoomLevel) => { this.setState ({
zoom: + zoomLevel,
});
}
Un viss! Tagad mēs varam tuvināt vai tālināt vienu līmeni vienlaikus, vai arī mēs varam tieši pāriet uz līmeni, sakot tā numuru. Ja jūs spēlējat to mājās, pamanīsit, ka, lai reģistrētu komandu Anangang, nepieciešamas dažas sekundes, un dažreiz komandas netiek reģistrētas. Runas atpazīšana nav ideāla. Ja iebūvējat runas atpazīšanu ražošanas sistēmā, ieteicams reāllaika atgriezeniskās saites mehānismus par kļūdām noteikt vai noteikt, kad bibliotēka aktīvi klausās.
Ja vēlaties spēlēt ar kodu, to varat atrast vietnē GitHub. Jūtieties brīvi sazināties ar čivināt, lai kopīgotu savas multimodālās saskarnes: @freethejazz.
