Stap 6: HTML input
Syntaxis
Involt is echt snel in HTML-prototypen en het vereist geen programmering vaardigheden. Er is CSS-syntaxis die het UI-element voor communicatie met Arduino vertaalt-elke UI-elementklassen zal er zo uitzien:
<div class="ard [element] [pin] [value] [parameters]"></div>
U kunt Lees meer over syntaxis of controleren welke onderdelen van de Gebruikersinterface in kader zijn opgenomen.
Ingang voor LCD tekst
Als u wilt maken van HTML input gewoon schrijven in index.html deze enkele lijn van code:
<input class="ard input-write S0" placeholder="Type something">
De gegevens zullen worden verzonden op unclicking of raken voer. De [pin] S0 bepaalt waar de tekenreeks binnen arduino schets zal gaan. De S0-waarde is hetzelfde als receivedString0] in de arduino schets. Hetzelfde geldt bijvoorbeeld P6 waarde wordt opgeslagen in involtDigital [6].
Om maken Submit knop vergelijkbaar met HTML formulierknop schrijft deze code. Laten we maken twee ingangen als gebruikersnaam en surename wilt weergeven:
<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>
Als je tijd hebt kun je met CSS-stijlen in core/framework.css. U kunt projectbestanden op volgende stap.