Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry Pi | Raspberry Pi Pico

Menu
  • Smarthome
  • Arduino
  • ESP32 & Co.
  • Raspberry Pi & Pico
  • Solo Mining
  • Über mich
  • Deutsch
  • English
Menu

Arduino WEB Editor – Erster Sketch

Posted on 11. Mai 20172. Mai 2023 by Stefan Draeger

Wie man den Arduino WEB Editor installiert habe ich im gleichnamigen Tutorial beschrieben. Nun möchte ich einen ersten Sketch schreiben und auf den Arduino Leonardo hochladen.

  • Schritt 1 – Anmelden
  • Schritt 2 – Board wählen
  • Schritt 3 – Sketch schreiben
    • Das Menü des Arduino Web Editors
    • Überprüfen / Verifizieren des Sketch
    • Hochladen / Upload des Sketches
  • Serieller Monitor
    • Ausgabe in die Zwischenablage kopieren
  • Fazit

Schritt 1 – Anmelden

Als Erstes muss man sich natürlich anmelden (soweit nicht schon geschehen). Es wird dazu die Adresse https://create.arduino.cc geöffnet und dort wählt man die Kachel „Arduino Web Editor“.

Kachel Arduino Web Editor
Kachel Arduino Web Editor

Nach einer kurzen Ladezeit öffnet sich dann die Loginseite auf welcher man sein Benutzername & Passwort eingibt und dieses mit der Schaltfläche „LOGIN“ bestätigt. Es wird nun der Arduino Web Editor geöffnet.

Arduino Web Editor - Übersicht
Arduino Web Editor – Übersicht

In diesem nun geöffneten Fenster hat man alles im Blick. Aber zu den einzelnen Elementen gehe ich speziell ein.

Schritt 2 – Board wählen

Als Erstes wählen wir das Board aus, dazu wird aus der Dropdown Liste „Select Board or Port …“ das entsprechende Board ausgewählt (erkennbar am blauen Haken) und mit der Schaltfläche „OK“ die Auswahl bestätigt.

Arduino Web Editor - Select Board or Port
Arduino Web Editor – Select Board or Port

Da der Arduino Leonardo noch nicht angeschlossen war wird dieses durch ein rotes Kreuz in der Auswahlliste angezeigt.

Arduino Leonardo disconnected
Arduino Leonardo disconnected

Wenn ich nun den Arduino Leonardo mit dem Computer verbinde, wird dieses nach wenigen Sekunden erkannt und durch folgende Meldung quittiert.

Arduino Leonardo connected
Arduino Leonardo connected

Schritt 3 – Sketch schreiben

Als ersten Sketch möchte ich ein „Hallo Welt!“ auf der seriellen Schnittstelle ausgeben und mal schauen was passiert.

void setup() {
    Serial.begin(9600);
}

void loop() {
    Serial.println("Hallo Welt!");
    delay(5000);
}

Nachdem wir nun den ersten Sketch geschrieben haben wollen wir diesen Verifizieren und bei erfolg auf den Arduino hochladen.
Schauen wir uns also als Nächstes das Menü etwas genauer an.

Das Menü des Arduino Web Editors

Arduino Web Editor - Menü
Arduino Web Editor – Menü

Schauen wir uns die Elemente von links nach rechts genauer an:

  1. Schaltfläche zum Prüfen / Verifizieren des Sketches
  2. Schaltfläche zum Hochladen des Sketches auf den Arduino
  3. Auswahlliste zum Wählen eines Boards oder Ports
  4. Menü mit den Aktionen für den Sketch*
  5. Schaltfläche zum Erzeugen eines Links zum Teilen des Sketches
Arduino Web Editor - Menü mit aktionen für den Sketch
*Arduino Web Editor – Menü mit aktionen für den Sketch

Überprüfen / Verifizieren des Sketch

Um nicht immer den Sketch hochzuladen und dann festzustellen das der Compiler wegen eines Programmierfehlers meckert sollte man in gewissen Abständen (soweit man eine lauffähige Version hat oder es gedenkt zu haben) den Sketch verifizieren.

Klicken wir also nun auf die Schaltfläche und schauen was passiert.

Nach einem Klick wechselt die Schaltfläche von

auf

Diesen Vorgang der Überprüfung des Sketches kann man mit einem erneuten Klick auf die Schaltfläche  „Busy“ abbrechen. (Die Schaltfläche wechselt das Design beim Überfahren mit der Maus.)

Nach der Verifizierung des Sketches wird das Ergebnis in der Konsole angezeigt, aus dieser kann man folgende Wert entnehmen.

  • Größe des compilierten Sketches in Byte und
  • wie viel Prozent Speicher der Sketch belegt
Arduino Web Editor - Verify Result -OK
Arduino Web Editor – Verify Result -OK

Wenn ein Fehler auftritt, wird dieser in der Konsole ausgegeben und es wird im Editorfenster in die Zeile „gesprungen“ wo dieser Fehler aufgetreten ist.

Arduino Web Editor - Verify Result -FAIL
Arduino Web Editor – Verify Result -FAIL

Nachdem also der Fehler behoben wurde (das fehlende Anführungszeichen in Zeile 11) kann der Sketch hochgeladen werden.

Hochladen / Upload des Sketches

Wenn die Überprüfung des Sketches keine Fehler ergeben haben, können wir den Sketch nun auf den Arduino mit der Schaltfläche hochladen.

Während des Upload-Vorgangs wird die Schaltfläche wieder durch „Busy“ (blauer Kasten) ersetzt und auch dieser Vorgang lässt sich mit einem Klick darauf abbrechen. Des Weiteren wird der aktuelle Vorgang als Nachricht angezeigt (roter Kasten).

Arduino Web Editor - Uploadvorgang
Arduino Web Editor – Uploadvorgang

Nachdem erfolgreichen hochladen des Sketches wird in der Konsole das Ergebnis angezeigt.

arduino-builder/arduino-builder -compile -core-api-version 10611 -build-path /tmp/214971675 -hardware arduino-builder/hardware -hardware arduino-builder/packages/cores -tools arduino-builder/tools -tools arduino-builder/packages/tools -built-in-libraries arduino-builder/latest -libraries /tmp/097879468/pinned -libraries /tmp/097879468/custom -fqbn arduino:avr:leonardo -build-cache /tmp -verbose=false /tmp/097879468/sketch_may11a
Sketch uses 3778 bytes (13%) of program storage space. Maximum is 28672 bytes.
Global variables use 161 bytes (6%) of dynamic memory, leaving 2399 bytes for local variables. Maximum is 2560 bytes.
Restarting in bootloader mode
Get port list before reset
[COM11]
Touching port COM11 at 1200bps
Set DTR off
Flashing with command:C:/Users/stefa/.arduino-create/arduino/avrdude/6.3.0-arduino9/bin/avrdude.exe -CC:/Users/stefa/.arduino-create/arduino/avrdude/6.3.0-arduino9/etc/avrdude.conf -q -q -patmega32u4 -cavr109 -PCOM13 -b57600 -D -Uflash:w:C:/Users/stefa/AppData/Local/Temp/arduino-create-agent789211554/sketch_may11a.hex:i
Connecting to programmer: .
Found programmer: Id = "CATERIN"; type = S
Software Version = 1.0; No Hardware Version given.
Programmer supports auto addr increment.
Programmer supports buffered memory access with buffersize=128 bytes.
Programmer supports the following devices:
Device code: 0x44

Da der Sketch eine Ausgabe auf der seriellen Schnittstelle tätigt schauen wir uns diese als Nächstes an.

Serieller Monitor

Der serielle Monitor dient zum Anzeigen von Daten, welche mit dem Befehl „Serial.print“ bzw. „Serial.println“ ausgegeben werden. Dieses Fenster lässt sich durch einen klick auf den Menüpunkt „Serial Monitor“ (roter Kasten).

Arduino Web Editor - Menüpunkt Serial Monitor
Arduino Web Editor – Menüpunkt Serial Monitor

Nach einem Klick auf diesen Link wird der serielle Monitor geöffnet.

Arduino Web Editor - Serial Monitor
Arduino Web Editor – Serial Monitor

Bei mir kam es desöfteren vor das der Serielle Monitor keine Verbindung zum Arduino Leonardo herstellen konnte. Jedoch nach einem (oder zwei oder drei 🙁 ) klicks auf den Menüpunkt „Serial Monitor“ konnte dieser dann doch angezeigt werden.

Schauen wir uns den Aufbau des seriellen Monitors etwas genauer an:

Arduino Web Editor - SeriellerMonitor Aufbau
Arduino Web Editor – serieller Monitor Aufbau

schwarzer Kasten – Board & Port Information

blauer Kasten – verhalten der Konsole für Zeilenumbrüche

roter Kasten – Übertragungsgeschwindigkeit

gelber Kasten – Senden von Befehlen an den Arduino

grüner Kasten – Konsole für die Ausgabe von Daten

Ausgabe in die Zwischenablage kopieren

Die Ausgabe der Daten in dem seriellen Monitor & in der Konsole lässt sich durch die Schaltfläche  in die Zwischenablage kopieren.
Dieses wird durch die Nachrichten bestätigt.

Daten aus der Konsole in die Zwischenablage kopiert.
Daten aus der Konsole in die Zwischenablage kopiert.
Daten aus dem Seriellen Monitor in die Zwischenablage kopiert.
Daten aus dem seriellen Monitor in die Zwischenablage kopiert.

Diese Daten lassen sich nun in beliebigen Editoren (wie PSPad, NotePad++, MS Word usw.) mit der Tastenkombination Strg + V einfügen.

Fazit

Als ein Fazit ziehe ich aus den ersten Blicken das dieser Editor für den Arduino sehr gut gelungen. Im nächsten Schritt werde ich also nun ein komplexes Projekt mit dem Arduino Web Editor „lösen“ und dann mal prüfen wie dieser sich mit Bibliotheken schlägt.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden?
Support-Ticket erstellen

Newsletter abonnieren

Bleib auf dem Laufenden: Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32 und mehr – direkt in dein Postfach.

Jetzt Newsletter abonnieren

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee.
So hilfst du mit, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

draeger-it.blog auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kategorien

Tools

  • Unix-Zeitstempel-Rechner
  • ASCII Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner
  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator

Links

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com

Stefan Draeger
Königsberger Str. 13
38364 Schöningen

Tel.: 01778501273
E-Mail: info@draeger-it.blog

Folge mir auf

  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
©2025 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}