Stap 3: Involt HTML rangesliders
Nu is het tijd voor het HTML-gedeelte dat zo simpel als de vorige stap is. Involt vertaalt CSS-klassen voor elk element van de UI te laten communiceren met hardware. Moet u definiëren welke UI-element communiceert met welke pin (of welke variabele te sturen) en fundamentele parameters als waarde of hun bereik. Voor RGB-schuifregelaar moeten we drie rangesliders toevoegen in index.html die CSS klassen zal er zo uitzien:
<p><div class="ard rangeslider P9"></div></p><p><div class="ard rangeslider P10"></div></p><p><div class="ard rangeslider P11"></div></p>
De P9, P10, P11 nummers staan voor het doel pwm pin. De rangeslider hebben standaard waarde 0 en bereik 0-255 start, zodat u niet hoeft te nemen aanvullende parameters in dit voorbeeld. Als u wilt instellen van aangepaste eigenschappen voegt u deze net als een andere CSS-klasse.
<p><div class="ard rangeslider P9 value-50 range-0-100"></div></p>
Om te begrijpen hoe Involt selectievakje werkt slag het aan de pagina.
Nu de app opent, selecteer uw arduino poort en controleer de resultaten. U zou iets moet zien dezelfde naar de bijgevoegde foto's. Voor basisgebruik is dit het einde van deze tutorial. Volgende stap is over het toevoegen van dat jQuery gebaseerd kleurendisplay die is niet vereist om te werken.
