Seriell kommunikation mellan Arduino, HTML & Chrome (4 / 5 steg)
Steg 4: HTML och användargränssnitt.
Användargränssnitt
Som jag nämnde tidigare - är App med Involt smiliar att arbeta med andra HTML-ramar. Parametrarna för varje UI element definieras med CSS-klasser. Om du vill anpassa gränssnittet kan du lägga till eller redigera CSS-filen.
Lägga till två rader kod i din kropp avsnitt i index.html. Den första raden är ansvarig för att Visa pin A0-värde och den andra raden är knapp switch digital pin värdet mellan 0/1 (0 är början värdet på App lanseringen).
Involt grundläggande syntax:
ARD [funktion] [pin] [värde] [yourclass]
För att se vad kan du göra med Involt check sidan referens
< body >
< div class = "ard Visa A0" >< / div >
< div class = "ard växla P3 värde-0" >< / div >
< / body >
Fler funktioner
Du kan också skicka PWM-värde. Ändra knappen till två knappar med PWM värden (eller växla-pwm-knappen). Här är exempel på knappen som skickar värdet 255 till stift 3:
< div class = "ard knappen P3 värde-255" > klicka mig < / div >
Du kan använda JQuery för att skapa anpassade gränssnitt eller mer avancerade interaktioner. Till exempel - skicka värdet 123 till stift 5 ser ut så här:
$(this).pinDefine("P5").sendValue(123);
Eftersom detta är grundläggande handledning använde jag endast grundläggande funktioner. Tänk bara på att det finns många sätt att göra samma sak.
Test
För att kontrollera resultaten öppnar App, Välj din enhet port och du borde se något liknande på den bifogade bilden.
För filer och fler exempel kolla andra tutorials på Involt sida.