Stap 4: HTML en gebruikersinterface.
Gebruikersinterface
Zoals ik alvorens vermeldde - is het creëren van App met Involt smiliar om te werken met andere HTML-kaders. De parameters van elke UI-element wordt gedefinieerd met CSS klassen. Voor het aanpassen van de interface die u kunt toevoegen of bewerken van de CSS-bestand.
Twee lijnen van code toevoegen aan uw lichaam sectie in index.html. De eerste regel is verantwoordelijk voor het weergeven van pin A0 waarde en de tweede lijn is die schakelaar digitale pin-waarde tussen de 0/1 (de 0 is de beginwaarde op App lancering) knop.
Involt basissyntaxis:
ARD [functie] [pin] [value] [yourclass]
Om te zien wat kunt je doen met Involt check de pagina met Naslaginformatie
<body> <div class="ard show A0"></div> <div class="ard toggle P3 value-0"></div> </body>
Meer functies
U kunt ook verzenden PWM waarde. De wisselknop omzetten in twee knoppen met PWM-waarden (of knevel-pwm-knop). Hier is een voorbeeld van knop die waarde 255 aan op pin 3 stuurt:
<div class="ard button P3 value-255">Click me</div>
Om aangepaste interface of meer geavanceerde interacties te maken kunt u het gebruik van JQuery. Bijvoorbeeld - verzenden waarde 123 aan pin 5 ziet er als volgt:
$(this).pinDefine("P5").sendValue(123);
Omdat dit elementaire tutorial is gebruikte ik alleen elementaire functies. Houd enkel in mening dat er vele manieren zijn om het zelfde ding doen.
Test
Kies uw apparaat om te controleren de resultaten App opent, poort en u iets moet zien gelijkend op de bijgevoegde foto.
Controleer andere tutorials op Involt pagina voor bestanden en meer voorbeelden.