HTML-RGB reglaget för Arduino via följetong (4 / 5 steg)
Steg 4: Visa färg
Jag vill ha min app att visa den valda färgen, eftersom... Varför inte? :) För att göra detta lagt jag html div med klass "display-färg".
< p >< div class = "display-färg" >< / div >< /p >
Lägga till grundläggande CSS-egenskaper i core/framework.css fil eller Lägg till en egen fil index.html rubrikavsnittet.
< p > .display-färg {< br > bakgrund: rgb(0,0,0);
bredd: 100px;
höjd: 100px;
} < /p >
Värdena för involt som går till Arduino på användarhändelser gränssnitt är i involtPin [] matris (och involtString för stränger inte numeriska värden). Samma värden är i involtPin [] array i Arduino skiss. JQuery använder jag endast den .css() metoden för bakgrundsfärg när värdet för rangeslider har ändrats. Du måste lägga till detta skript i en egen fil och inkludera detta i HTML-huvudet avsnittet.
< p > $(document).ready(function() {< /p >< p > $(".slider").on ({
bild: function() {
Det är knepiga sättet att uppdatera rgb-värdet av bakgrund
var bakgrunden = involtPin [11] + "," + involtPin [10] + "," + involtPin [9].
$(".display-color").css ("bakgrund", "rgb('+background+')');
}
()}); < /p >< p >}); < /p >
Öppna programmet igen och se resultatet. Jag gjorde små synförändringar till layout. De slutliga projektfilerna är i sista steget.