Étape 2: HTML application
Il est bon de savoir que app HTML basé peut communiquer directement avec le matériel en sachant seulement l’ajout de classes CSS à chaque élément d’interface utilisateur, bien sûr sans aucune IoT base du service. Cette nouvelle méthode est selon moi l’innovant et a un potentiel énorme pour devenir outil de prototypage grand.
Pour un élément d’interface utilisateur vous devez ajouter une seule ligne de code dans index.html et l’autre dans sketch Arduino (décrit à l’étape suivante).
Techniquement les classes et leur syntaxe ressemble à ceci, vous pouvez également ajouter votre propre classe après qu’elles aient plus de contrôle sur votre mise en page. Chaque élément de Involt exige la classe ard, le nom de l’élément pour définir ce qu’il va être, ses broches cible ou valeur à envoyer des paramètres supplémentaires.
ard [elementName] [pin] [value] [parameters]
Pour la partie HTML, ajoutez ces deux lignes de code pour lire les données et la LED de contrôle :
<div class="ard show A0"></div> <div class="ard rangeslider P6 value-0 range-0-255 step-1"></div>
L’élément de spectacle affichera la valeur et rangeslider permet de modifier la luminosité des LED.
Il y a beaucoup plus d’éléments interface utilisateur sur la page de référence.