Arduinolyzer.js: Förvandla din Arduino till en logik Analyzer (3 / 8 steg)

Steg 3: HTML5 och JavaScript

Index.html filen betjänas av node.js servern på http://localhost: 8080 visas en kontrollpanel. På panelen visas en konfigurationsmeny på den vänstra sidan, och skärmen duk på höger sida, med en Sammanfattning rad under konfigurationen. Den duk auto-passar till skärmen och +/-zoom-knapparna kan du spränga vågformen och bläddra igenom den. Sammanfattningsraden ger en kortfattad engelsk översättning av vad som händer när du trycker på starta. Konfigurationsmenyn är en 1:1 match Arduino skiss funktioner: varje kontroll motsvarar en TTY config kommandot som Arduino svarar. Vi pratar mer om kontrollerna senare under Arduino skiss. För nu är det bara viktigt att komma ihåg att de ingående kontrollerna konverteras till en kommandosträng och skickas till Arduino när du trycker på Start -knappen.

JavaScript i controls.js kommunicerar i fyra riktningar:

1. HTML5 att klienten/JS: klick på skärmen hanteras av flera jQuery .on('click') hanterare
2. Klienten/JS till HTML5: klient/JS uppdateras rutan Sammanfattning, status för knappen start/wait och duken
3. Klienten/JS till servern: klient/JS skickar AJAX -begäranden till servern för att initiera provtagning
4. Server till klient: servern skickar data till klienten/JS via socket.io asynkron push

Varje gång du trycker på en kontroll, bar statusuppdateringar med en beskrivning av vad kommer att hända, och om så är lämpligt, en tid uppskatta. Att trycka på starta orsakar JS att sammanställa de ingående kontrollerna i en kommandosträng och skicka det till servern, och ändras knappen börja vänta. (För närvarande finns det inget sätt att stoppa utförandet eftersom Arduino ignorerar den seriella porten medan provtagning.)

När provtagning är klar skickar servern data till klienten JS med hjälp av en socket.io asynch push. Det sista steget i push handler återger data till duken och växla den vänta knappen till starta.

En singleton JavaScript-objekt med namnet vyport hanterar duken och återger den kanalernas data. Under render()skalar vyport objektet data så att de passar skärmen, eftersom duken kan hantera subpixel koordinater fint. Detta innebär att om Arduino samlas fler prover än bredden på skärmen, vågformer kan visas som fasta block. För att lösa detta problem, La jag zoomknapparna för att expandera data.

Obs:

Jag ursprungligen hade kodat markörer och en tid axlar, men jag tog bort dem eftersom koden blåste. Jag ville ha koden för att vara så liten som möjligt. Jag lämnar det till läsaren att göra estetiska ändringar. Dock att ha en tidsaxel blir bättre användbarhet vid zoomning: du kommer inte förlora din plats så lätt. Istället la jag några enkla grå rektanglar som omger den kanal vågformer, vilket gör det enklare att identifiera höga och låga signaler som inte ändrar.