HTML-RGB reglaget för Arduino via följetong (3 / 5 steg)
Steg 3: Involt HTML rangesliders
Nu är det dags för HTML-delen som är så enkelt som föregående steg. Involt översätter CSS-klasser för varje UI element att få dem att kommunicera med maskinvaran. Du behöver definiera vad UI element kommunicerar med vilken pin (eller vilken variabel att skicka) och grundläggande parametrar som värde eller deras sortiment. För RGB slider behöver vi lägga till tre rangesliders i index.html som CSS-klasser kommer att se ut så här:
< p >< div class = "ard rangeslider P9" >< / div >< /p >< p >< div class = "ard rangeslider P10" >< / div >< /p >< p >< div class = "ard rangeslider P11" >< / div >< /p >
Den P9, P10, P11 siffrorna representerar den mål pwm stiftet. Rangeslider ha standard börjar värdet 0 och intervallet 0-255 så du behöver inte inkludera ytterligare parametrar i det här exemplet. Ange anpassade egenskaper lägga du bara dem som en annan CSS-klass.
< p >< div class = "ard rangeslider P9 värde-50 rad-0-100" >< / div >< /p >
För att förstå hur Involt fungerar check igång den komma sida.
Nu öppnar app, Välj din arduino port och kontrollera resultaten. Du borde se något samma till de bifogade bilderna. För grundläggande användning är i slutet av denna handledning. Nästa steg handlar om att lägga till JQuery baserad färgskärm som inte är skyldig att arbeta.