Étape 6: Entrée HTML
Syntaxe
Involt est vraiment rapide en prototypage HTML et il ne nécessite aucune connaissance en programmation. Il existe une syntaxe CSS qui traduit l’élément d’interface utilisateur pour la communication avec l’Arduino - chaque classes d’éléments de l’interface utilisateur ressemble à ceci :
<div class="ard [element] [pin] [value] [parameters]"></div>
Vous pouvez en savoir plus sur la syntaxe ou vérifier Quels éléments d’interface utilisateur sont inclus dans le cadre.
D’entrée de texte LCD
Pour créer HTML input il suffit d’écrire dans index.html cette seule ligne de code :
<input class="ard input-write S0" placeholder="Type something">
Les données seront envoyées sur unclicking ou frapper entrez. Le [pin] S0 définit où la chaîne ira à l’intérieur de l’esquisse de l’arduino. La valeur S0 est la même que receivedString0] dans sketch arduino. Ce n’est par exemple P6 valeur est stockée dans involtDigital [6].
Pour créer des Submit bouton semblable au bouton de formulaire HTML écrire ce code. Nous allons créer deux entrées pour afficher le prénom et le nom d’utilisateur :
<form> <p style="margin:20px">Please introduce yourself: </p> <input class="ard input-write S0" placeholder="Name"> <input class="ard input-write S1" placeholder="Surename"> <button type="button" class="ard submit-button">Submit</button> </form>
Si vous avez le temps, vous pouvez jouer avec les styles CSS dans core/framework.css. Vous pouvez télécharger les fichiers de projet sur l’étape suivante.