Étape 4: HTML et l’interface utilisateur.
Interface utilisateur
Comme je le disais avant - création App avec Involt est analogues à travailler avec d’autres cadres HTML. Les paramètres de chaque élément de l’interface utilisateur est défini avec les classes CSS. Pour personnaliser l’interface, vous pouvez ajouter ou modifier le fichier CSS.
Ajouter deux lignes de code à votre section de caisse index.html. La première ligne est chargée d’afficher la valeur A0 broche et la deuxième ligne est touche cet interrupteur broche numérique valeur comprise entre 0/1 (0 est la valeur de début sur le lancement de l’App).
Involt syntaxe de base :
ARD [fonction] [pin] [valeur] [yourclass]
Pour voir ce que vous pouvez faire avec Involt vérifier la page de référence
<body> <div class="ard show A0"></div> <div class="ard toggle P3 value-0"></div> </body>
Plus de fonctionnalités
Vous pouvez également envoyer valeur PWM. Changer le bouton bascule à deux boutons avec valeurs PWM (ou bouton bascule-pwm). Exemple de bouton qui envoie la valeur 255 à la broche 3 est :
<div class="ard button P3 value-255">Click me</div>
Pour créer l’interface personnalisée ou des interactions plus avancées, vous pouvez utiliser JQuery. Par exemple - l’envoi valeur 123 à la broche 5 ressemble à ceci :
$(this).pinDefine("P5").sendValue(123);
Parce qu’il s’agit de base tutoriel j’ai utilisé uniquement les caractéristiques fondamentales. Il suffit de garder à l’esprit qu’il y a plusieurs façons de faire la même chose.
Test
Pour vérifier les résultats ouvrent l’application, choisissez votre périphérique port et vous devriez voir quelque chose de semblable à la photo ci-jointe.
Pour les fichiers et exemples plus vérifier autres tutoriels sur la page Involt.