Stap 3: HTML5 en JavaScript
Het index.html bestand dat door de server node.js op http://localhost: 8080 bediend wordt een bedieningspaneel weergegeven. In het deelvenster een configuratiemenu verschijnt op de linker kant, en het doek aan de rechterkant, met een samenvatting lijn onder de configuratie scherm. De doek auto-past op het scherm, en +/-zoom-knoppen kunnen u de golfvorm opblazen en blader door het. De samenvatting lijn biedt een korte Engelse vertaling van wat er gebeuren zal als u druk op Start. Het configuratiemenu past 1:1 van de Arduino schets functionaliteit: elk besturingselement komt overeen met een opdracht van de TTY-config waarop de Arduino reageert. We praten meer over de controles later tijdens de Arduino schets. Voor nu is het alleen belangrijk om te onthouden dat de input controles zijn omgezet in een opdrachtreeks en naar de Arduino verzonden wanneer u op de knop Start drukt.
De JavaScript gelegen in controls.js communiceert in vier richtingen:
- HTML5 te Client/JS: klikken op het scherm worden beheerd door verschillende jQuery .on('click')-handlers
- Client/JS naar HTML5: Client/JS bijgewerkt de summiere doos, de status van de knop start/wait, en het canvas
- Client/JS naar Server: Client/JS stuurt AJAX verzoeken naar de server te initiëren van bemonstering
- Server naar Client: verzendt de server gegevens terug naar de Client/JS via socket.io asynchrone push
Telkens als u op een besturingselement, de Statusbalkupdates met een beschrijving van wat zal gebeuren, en in voorkomend geval, een tijd schatten. Te drukken Start zorgt ervoor dat de JS om te compileren de input controles in een opdrachtreeks en het af te sturen naar de server, en verandert de knop Start te wachten. (Op dit moment is er geen manier om te stoppen met de uitvoering aangezien de Arduino negeert de seriële poort terwijl bemonstering.)
Wanneer de bemonstering is voltooid, verzendt de server de gegevens terug naar de client met behulp van een socket.io asynch push JS. De laatste stap in de push-handler maakt de gegevens naar het canvas en schakelt u de knop wachten terug naar Start.
Een singleton JavaScript-object met de naam viewport beheert het doek en maakt het kanaal gegevens. Tijdens render()schaalt de viewport object de gegevens aanpassen aan het scherm, aangezien het doek aankan subpixel coördinaten mooi. Dit betekent dat de Arduino verzamelde meer monsters dan de breedte van het scherm, de golfvormen mogelijk weergegeven als solide blokken. Ik heb toegevoegd om aan te pakken dit probleem, zoomknoppen om uit te breiden van de gegevens.
Opmerking:
Ik had oorspronkelijk gecodeerd markeringen en assen van een tijd, maar ik verwijderd omdat de code werd opgeblazen. Ik wilde de code zo klein mogelijk. Ik laat het aan de lezer esthetische wijzigingen aan te brengen. Echter, na een tijd-as verbetert bruikbaarheid bij inzoomen: u verliest geen uw plaats zo makkelijk. In plaats daarvan, ik heb toegevoegd sommige eenvoudige grijze rechthoeken rond het kanaal golfvormen, waardoor het makkelijker om te identificeren hoge en lage signalen die niet veranderen.
