Étape 4: Affichage de la couleur
Je veux mon app pour montrer la couleur sélectionnée, parce que... pourquoi pas ? :) Pour ce faire, j’ai ajouté html div avec la classe « affichage-color ».
<p><div class="display-color"></div></p>
Ajouter les propriétés CSS de base au fichier core/framework.css ou ajouter votre propre fichier à têtière index.html.
<p>.display-color{<br> background: rgb(0,0,0); width: 100px; height: 100px; }</p> Les valeurs pour involt qui va à l’Arduino sur les événements d’interface utilisateur sont dans tableau [] involtPin (et involtString pour les chaînes de valeurs non numériques). Mêmes valeurs sont en involtPin array dans sketch Arduino. Pour JQuery, je vais utiliser uniquement la méthode de .css() pour la couleur d’arrière-plan lorsque la valeur de rangeslider a changé. Vous devez ajouter ce script à vos propres fichiers et inclure ce point dans la section head de html.
<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> Rouvrez l’application et voir les résultats. J’ai fait des petites modifications visuelles de présentation. Les fichiers de projet définitif sont dans la dernière étape.
