Stap 4: De kleur weergeven
Ik wil mijn app om te laten zien van de geselecteerde kleur, omdat... waarom niet? :) Om dit te doen ik html div met de klasse "display-kleur" toegevoegd.
<p><div class="display-color"></div></p>
Eenvoudige CSS-eigenschappen toevoegen aan core/framework.css bestand of uw eigen bestand naar index.html hoofd sectie toevoegen.
<p>.display-color{<br> background: rgb(0,0,0); width: 100px; height: 100px; }</p>
De waarden voor involt die naar de Arduino op gebruikersgebeurtenissen interface gaat zijn in involtPin [] matrix (en involtString voor tekenreeksen, niet als numerieke waarden). Dezelfde waarden zijn in involtPin [] matrix in Arduino schets. Voor JQuery zal ik alleen de .css() methode voor achtergrondkleur gebruiken wanneer de waarde van rangeslider is veranderd. U moet dit script toevoegen aan uw eigen bestand en dit opnemen in de sectie html head.
<p>$(document).ready(function() {</p><p> $(".slider").on({ slide: function(){ //This is the tricky way to update the rgb value of background var background = involtPin[11]+","+involtPin[10]+","+involtPin[9]; $(".display-color").css('background', 'rgb('+background+')'); } });</p><p>});</p>
De app opnieuw te openen en de resultaten zien. Ik heb kleine visuele veranderingen in de lay-out. De laatste projectbestanden bevinden zich in de laatste stap.