Étape 3: Involt HTML rangesliders
Il est maintenant temps pour la partie HTML qui est aussi simple que l’étape précédente. Involt se traduit par des classes CSS pour chaque élément d’interface utilisateur pour les faire communiquer avec le matériel. Vous devez définir quel élément d’interface utilisateur communique avec quel code pin (ou quelle variable à envoyer) et paramètres de base comme valeur ou leur aire de répartition. Pour slider RVB, il faut ajouter trois rangesliders index.html qui classes CSS ressemblera à ceci :
<p><div class="ard rangeslider P9"></div></p><p><div class="ard rangeslider P10"></div></p><p><div class="ard rangeslider P11"></div></p>
Le P9, P10, P11 chiffres représentent la goupille pwm de cible. Le rangeslider ont par défaut démarrer valeur 0 et la plage 0-255, donc vous n’avez pas à inclure des paramètres supplémentaires dans cet exemple. Pour définir des propriétés personnalisées vous les ajouter juste comme une autre classe CSS.
<p><div class="ard rangeslider P9 value-50 range-0-100"></div></p>
Pour comprendre le fonctionnement Involt et de vérifier la prise en main page.
Maintenant, ouvrez l’application, sélectionnez votre port d’arduino et vérifier les résultats. Vous devriez voir quelque chose même pour les photos ci-joint. Pour une utilisation basique, il s’agit de la fin de ce tutoriel. Prochaine étape est sur l’ajout de que jQuery base écran couleur qui n’est pas tenu de travailler.