Ethernet Switching - mit Arduino

5 Schritt:Schritt 1: Ethernet Switching - mit Arduino - Beschreibung Schritt 2: Ethernet Switching - mit Arduino - Programm Schritt 3: Ethernet-Switching-Version 4.06 Schritt 4: Bilder von der Hardware von anderen Schritt 5: Andere Versionen von Nutzern

Ethernet Switching - mit Arduino
Ziel:

Schaltrelais aus dem Ethernet oder Internet, mit Ihrem Handy, Tablet oder Computer mit einem schönen grafischen Benutzeroberfläche.

Update V4.06
Bitte lesen Sie die unten aufgeführten Schritte zu Schritt 2, wenn Sie sehen gerade diesen Artikel zum ersten Mal.
Bitte gehen Sie auf die neueste Version, die V4.06 ist mit Schritt 3
Ein Benutzer modifizierte Version mit Logon-Option in Schritt 5 zum einfachen Download gestellt.

Material:

* Arduino MEGA 2560
* Arduino Ethernet-Schild
* Relaiskarte
* RJ45-Kabel

Werkzeuge:

* Arduino Software Version 1.0.1 (Download von Arduino Website)
* A / B-USB-Kabel

Infrastruktur:

* Internet-Zugang mit fester IP für Arduino
* Der Zugang zu Ihrem Router, um den Port für den Internetzugang zu teilen
* Prüfgeräte - Ihrem PC, Handy etc.

Disclaimer:

* Dieses Projekt wurde mit iPhone 3GS, iPad 2 und MacBook Pro mit Safari getestet und PC mit Safari, Firefox, Opera und Internet Explorer.
* Dieses Projekt wurde im Oktober 2012 mit dem genannten Material erstellt.
* Binary Skizze Größe: 22.322 Bytes (eines 258.048 Bytes maximal).
* Diese Skizze nicht bieten jede Art von Authentifizierung, also, wenn erforderlich, um von außerhalb des Netzwerks oder aus dem Internet verwendet werden, schlage ich vor, um Ihr Netzwerk zu konfigurieren, um Trog VPN zu verbinden. Heutzutage sind viele Router und Smartphones unterstützt VPN.

Schritt 1: Ethernet Switching - mit Arduino - Beschreibung

  1. Ethernet Switching - mit Arduino

    Ethernet Switching - mit Arduino

    Ethernet Switching - mit Arduino

    Ethernet Switching - mit Arduino

    Beschreibung:

    * Mit diesem Projekt hatte ich nicht enthalten keine Bilder oder Links zu Bildern aus dem Internet. Es nur nutzen, CSS3 und HTML5.
    * Die simulierten LEDs sind aus CSS3-Code erstellt.
    * Einige Browser nicht in vollem Umfang nutzen CSS3 und HTML5. Daher schlage ich vor, mit Safari.

Schritt 2: Ethernet Switching - mit Arduino - Programm

  1. Ethernet Switching - mit Arduino
    // Ethernet Switch
    //
    // Intro:
    // Das wird swich und Ausschalten Ausgänge Trog Ihrem mobilen Gerät.
    // Keine Bilder oder Links zu Bildern. CSS3 und HTML5 Einsatz.
    // Obwohl es mit anderen Web-Browser zu arbeiten, empfehlen wir Safari für die besten experiance.
    //
    // Version: Web Server Ethernet-Switching-Version 3.05
    // Autor: Claudio Vella - Malta
    // Anfangscode aus: http://bildr.org/2011/06/arduino-ethernet-pin-control/
    // Hergestellt Menge Kommentare für Anfänger.

    // ARDUINO 1.0+ ONLY

    #include <Ethernet.h>
    #include <SPI.h>

    ////////////////////////////////////////////////// //////////////////////
    // CONFIGURE
    ////////////////////////////////////////////////// //////////////////////

    // IP manuelle Einstellungen
    Byte-ip [] = {192, 168, 1, 177}; Nur // Manuelle Einrichtung
    Byte-Gateway [] = {192, 168, 1, 254}; Nur // Manuelle Einrichtung
    Byte Subnetz [] = {255, 255, 255, 0}; Nur // Manuelle Einrichtung

    // Wenn Notwendigkeit die MAC-Adresse zu ändern, (sehr selten)
    Byte-mac [] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};

    // Ethernet-Anschluss
    EthernetServer server = EthernetServer (80); // Standard-HTML-Port 80

    // Die Anzahl der Ausgänge werde umgeschaltet werden.
    int outputQuantity = 8; // Wann outputLowest hinzugefügt Ergebnis sollte 10 nicht überschreiten

    // Die niedrigste Ausgangsstift wir ab
    int outputLowest = 2; // Sollte zwischen 2 bis 9
    ////////////////////////////////////////////////// //////////////////////

    // Variablendeklaration
    int outp = 0;
    boolean printLastCommandOnce = false;
    boolean printButtonMenuOnce = false;
    boolean initialPrint = true;
    Allon String = "";
    String AllOff = "";
    boolean Lese = false;
    boolean readInput [10]; // Ein boolean-Array für die maximale ammount.

    // Anfang des Programms
    Leere setup () {
    Serial.begin (9600);

    // Pins 10,11,12 und 13 werden von der Ethernet-Schild verwendet
    // Set Pins als Ausgänge
    for (int var = outputLowest; var <outputLowest + outputQuantity; var ++) {
    pinMode (var, OUTPUT);
    }

    // Einrichten der IP-Adresse. Kommentieren Sie die, die Sie nicht brauchen.
    //Ethernet.begin(mac); // Für DHCP-Adresse. (Adresse wird an den seriellen gedruckt werden.)
    Ethernet.begin (mac, ip, Gateway, Subnet); // Für die manuelle Konfiguration. (Address ist die oben konfiguriert.)

    server.begin ();
    Serial.println (Ethernet.localIP ());
    }

    Leere Schleife () {

    // Hört für eingehende Kunden und Prozessanforderungen.
    checkForClient ();
    }

    Leere checkForClient () {

    EthernetClient client = server.available ();

    if (Client) {

    // Eine HTTP-Anforderung endet mit einer Leerzeile
    boolean currentLineIsBlank = true;
    boolean sentHeader = false;

    while (client.connected ()) {
    if (client.available ()) {

    if (! sentHeader) {
    // Einen Standard http-Antwort-Header senden
    client.println ("HTTP / 1.1 200 OK");
    client.println ("Content-Type: text / html");
    client.println ("Connnection: close");
    client.println ();
    client.println ("<! DOCTYPE HTML>");
    client.println ("<head>");

    // ADD Seitentitel
    client.println ("<title> Ethernet Switching </ title>");
    client.println ("<meta name = \" Beschreibung \ "content = \" Ethernet Switching \ "/>");

    // Fügen Sie ein Meta-Refresh-Tag, so dass der Browser zieht wieder alle 5 Sekunden:
    client.println ("<meta http-equiv = \" refresh \ "content = \" 10; url = / \ ">");

    // Fügen anderen Browserkonfiguration
    client.println ("<meta name = \" apple-mobile-web-app-fähige \ "content = \" Ja \ ">");
    client.println ("<meta name = \" apple-mobile-web-app-status-bar-style \ "content = \" default \ ">");
    client.println ("<meta name = \" Viewport \ "content = \" width = Gerätebreite, benutzerspezifisch skalierbar = no \ "/>");

    // Einfügen der Arten Daten, in der Regel in CSS-Dateien gefunden.
    client.println ("<style type = \" text / css \ ">");
    client.println ("");

    // Das wird festgelegt, wie die Seite grafisch aussehen
    client.println ("html {height: 100%;}");

    client.println ("body {");
    client.println ("height: 100%;");
    client.println ("margin: 0;");
    client.println ("font-family: Helvetica, sans-serif;");
    client.println ("-webkit-text-size-adjust: none;");
    client.println ("}");
    client.println ("");
    client.println ("body {");
    client.println ("-webkit-background-size: 100% 21px;");
    client.println ("background-color: # c5ccd3;");
    client.println ("background-image:");
    client.println ("-webkit-Gradienten (linear, links oben, rechts oben,");
    client.println ("color-stop (0,75, transparent)");
    client.println ("color-stop (0,75, RGBA (255,255,255, 0,1)));");
    client.println ("-webkit-background-size: 7px;");
    client.println ("}");
    client.println ("");
    ("view {".) client.println;
    client.println ("min-height: 100%;");
    client.println ("overflow: auto;");
    client.println ("}");
    client.println ("");
    client.println (". header-Wrapper {");
    client.println ("height: 44px;");
    client.println ("font-weight: bold;");
    client.println ("text-shadow: RGBA (0,0,0,0.7) 0 -1px 0;");
    client.println ("border-top: solid 1px rgba (255,255,255,0.6);");
    client.println ("border-bottom: solid 1px rgba (0,0,0,0.6);");
    client.println ("color: # fff;");
    client.println ("background-color: # 8195af;");
    client.println ("background-image:");
    client.println ("-webkit-Gradienten (linear, links oben, links unten,");
    client.println ("aus (RGBA (255,255,255, 0,4))");
    client.println ("zu (RGBA (255.255.255, 05)))");
    client.println ("-webkit-Gradienten (linear, links oben, links unten,");
    client.println ("aus (transparent)");
    client.println ("zu (RGBA (0,0,64, 0,1)));");
    client.println ("background-repeat: no-repeat;");
    client.println ("background-position: oben links, unten links;");
    client.println ("-webkit-background-size: 100% 21px, 100% 22px;");
    client.println ("-webkit-box-Sizing: border-box;");
    client.println ("}");
    client.println ("");
    client.println (". header-Wrapper h1 {");
    client.println ("text-align: center;");
    client.println ("font-size: 20px;");
    client.println ("line-height: 44px;");
    client.println ("margin: 0;");
    client.println ("}");
    client.println ("");
    client.println ("group-wrapper {.");
    client.println ("margin: 9px;");
    client.println ("}");
    client.println ("");
    client.println (". Gruppe-Wrapper h2 {");
    client.println ("color: # 4c566c;");
    client.println ("font-size: 17px;");
    client.println ("line-height: 0.8;");
    client.println ("font-weight: bold;");
    client.println ("text-shadow: 1px #fff 0 0;");
    client.println ("margin: 20px 10px 12px;");
    client.println ("}");
    client.println ("");
    client.println (". Gruppe-Wrapper h3 {");
    client.println ("color: # 4c566c;");
    client.println ("font-size: 12px;");
    client.println ("line-height: 1;");
    client.println ("font-weight: bold;");
    client.println ("text-shadow: 1px #fff 0 0;");
    client.println ("margin: 20px 10px 12px;");
    client.println ("}");
    client.println ("");
    client.println (". Gruppe-Wrapper table {");
    client.println ("background-color: # fff;");
    client.println ("-webkit-border-radius: 10px;");

    client.println ("-moz-border-radius: 10px;");
    client.println ("-khtml-border-radius: 10px;");
    client.println ("border-radius: 10px;");

    client.println ("font-size: 17px;");
    client.println ("line-height: 20px;");
    client.println ("margin: 0 9px 20px;");
    client.println ("border: solid 1px # a9abae;");
    client.println ("padding: 11px 12px 3px 3px;");
    client.println ("margin-left: auto;");
    client.println ("margin-right: auto;");

    client.println ("-moz-transform: Skala (1);"); // Code den Mozilla Firefox
    client.println ("-moz-transform-origin: 0 0;");

    client.println ("}");
    client.println ("");

    // Wie die grüne (ON) LED aussehen
    client.println ("green-Kreis {.");
    client.println ("display: block;");
    client.println ("height: 23px;");
    client.println ("width: 23px;");
    client.println ("background-color: # 0F0;");
    //client.println ("background-color: RGBA (60, 132, 198, 0,8);");
    client.println ("-moz-border-radius: 11px;");
    client.println ("-webkit-border-radius: 11px;");
    client.println ("-khtml-border-radius: 11px;");
    client.println ("border-radius: 11px;");
    client.println ("margin-left: 1px;");

    client.println ("background-image: -webkit-Gradienten (linear, 0% 0% 0% 90% aus (RGBA (46, 184, 0, 0,8)), um (RGBA (148, 255, 112, 0,9))); @ ");
    client.println ("border: 2px Fest #ccc;");
    client.println ("-webkit-box-shadow: RGBA (11, 140, 27, 0.5) 0px 10px 16px;");
    client.println ("-moz-box-shadow: RGBA (11, 140, 27, 0.5) 0px 10px 16px; / * FF 3.5+ * /");
    client.println ("box-shadow: RGBA (11, 140, 27, 0.5) 0px 10px 16px; / * FF 3.5+ * /");

    client.println ("}");
    client.println ("");

    // Wie die schwarz (aus) LED aussehen
    client.println ("black-Kreis {.");
    client.println ("display: block;");
    client.println ("height: 23px;");
    client.println ("width: 23px;");
    client.println ("background-color: # 040;");
    client.println ("-moz-border-radius: 11px;");
    client.println ("-webkit-border-radius: 11px;");
    client.println ("-khtml-border-radius: 11px;");
    client.println ("border-radius: 11px;");
    client.println ("margin-left: 1px;");
    client.println ("-webkit-box-shadow: RGBA (11, 140, 27, 0.5) 0px 10px 16px;");
    client.println ("-moz-box-shadow: RGBA (11, 140, 27, 0.5) 0px 10px 16px; / * FF 3.5+ * /");
    client.println ("box-shadow: RGBA (11, 140, 27, 0.5) 0px 10px 16px; / * FF 3.5+ * /");
    client.println ("}");
    client.println ("");

    // Dies wird die Blendung zu beiden LEDs hinzufügen
    client.println (".glare {");
    client.println ("position: relative;");
    client.println ("top: 1;");
    client.println ("links: 5px;");
    client.println ("-webkit-border-radius: 10px;");
    client.println ("-moz-border-radius: 10px;");
    client.println ("-khtml-border-radius: 10px;");
    client.println ("border-radius: 10px;");
    client.println ("height: 1px;");
    client.println ("width: 13px;");
    client.println ("padding: 5px 0;");
    client.println ("background-color: RGBA (200, 200, 200, 0,25);");
    client.println ("background-image: -webkit-Gradienten (linear, 0% 0% 0% 95% aus (RGBA (255, 255, 255, 0,7)), um (RGBA (255, 255, 255, 0))); ");
    client.println ("}");
    client.println ("");

    // Und schließlich das ist das Ende der Style-Daten und Header-
    client.println ("</ style>");
    client.println ("</ head>");

    // Jetzt das Drucken der Seite selbst
    client.println ("<body>");
    client.println ("<div class = \" Ansicht \ ">");
    client.println ("<div class = \" header-Wrapper \ ">");
    client.println ("<h1> Ethernet Switching </ h1>");
    client.println ("</ div>");
    client.println ("<div class = \" Gruppe-Wrapper \ ">");
    client.println ("<h2> Schalten Sie die gewünschte Ausgabe </ h2>.");
    client.println ();

    // Dies ist für den Arduino, um die Seite on the fly zu konstruieren.
    sentHeader = true;
    }

    char c = client.read ();

    if (Lesen && c == '') {
    Lesen = false;
    }

    // Serial.print (c);

    if (c == '?') {
    Lesen = true; // Fand das?, Beginnt das Lesen der Informationen
    }

    if (Lesung) {
    if (c == 'H') {outp = 1;}
    if (c == 'L') {outp = 0;}
    Serial.print (c); // Druck den Wert von c, um die serielle Kommunikation
    //Serial.print(outp);
    //Serial.print('\n ');

    switch (c) {
    Bei "2":
    // Hier Code hinzufügen, um auf 2 auslösen
    triggerPin (2, Client, outp);
    brechen;
    Bei "3":
    // Hier Code hinzufügen, um auf 3 auslösen
    triggerPin (3, Kunden, outp);
    brechen;
    Bei "4":
    // Hier Code in den am 4. auslösen
    triggerPin (4, Client, outp);
    brechen;
    Fall "5":
    // Hier Code hinzufügen, um auf 5 auslösen
    triggerPin (5, Client, outp);
    // PrintHtml (Client);
    brechen;
    Fall '6':
    // Hier Code in den am 6. auslösen
    triggerPin (6, Client, outp);
    brechen;
    Bei "7":
    // Hier Code in den am 7. auslösen
    triggerPin (7, Kunden, outp);
    brechen;
    Bei "8":
    // Hier Code in den am 8. auslösen
    triggerPin (8, Client, outp);
    brechen;
    Bei "9":
    // Hier Code in den am 9. auslösen
    triggerPin (9, Client, outp);
    brechen;
    }

    }

    if (c == '\ n' && currentLineIsBlank) {
    printLastCommandOnce = true;
    printButtonMenuOnce = true;
    triggerPin (777, Client, outp); // Aufruf zur Eingabe und Druckmenü zu lesen. 777 wird verwendet, keine Ausgaben zu aktualisieren
    brechen;
    }
    }
    }

    // Set Variablen vor dem Beenden
    printLastCommandOnce = false;
    printButtonMenuOnce = false;

    Allon = "";
    AllOff = "";
    client.println ("\ n <h3 align = \" Mitte \ "> & copy; Autor - Claudio Vella <br> Malta - Oktober - 2012 </ h3>");
    client.println ("</ div> \ n </ div> \ n </ body> \ n </ html>");

    Verzögerung (1); // Den Webbrowser Zeit, um die Daten zu empfangen geben
    client.stop (); // Schließen Sie die Verbindung:

    }

    }

    Leere triggerPin (int pin, EthernetClient Client, int outp) {
    // Ein- oder Ausschalten Ausgänge, liest die Ausgänge und druckt die Tasten

    // Setzen von Ausgängen
    if (pin! = 777) {
    if (outp == 1) {
    digital (pin, HIGH);
    }
    if (outp == 0) {
    digital (pin, LOW);
    }
    }
    // Das Lesen der Ausgänge Aktualisieren
    readOutputStatuses ();

    // Gibt die Tasten
    if (printButtonMenuOnce == true) {
    printHtmlButtons (Client);
    printButtonMenuOnce = false;
    }

    }

    // Drucken Sie die html-Tasten zum Ein- / Aus-Kanäle
    Leere printHtmlButtons (EthernetClient Client) {

    // Start, um die HTML-Tabelle zu erstellen
    client.println ("");
    //client.println ("<p>");
    client.println ("<FORM>");
    client.println ("<table border = \" 0 \ "align = \" Mitte \ ">");

    // Start Drucken-Taste mit der Taste
    for (int var = outputLowest; var <outputLowest + outputQuantity; var ++) {

    // Set-Befehl für alle Ein / Aus-
    ALLON + = "H";
    Allon + = var;
    AllOff + = "L";
    AllOff + = var;

    // Print Anfang des Zeilen
    client.print ("<tr> \ n");

    // Gibt die Knöpfe
    client.print ("<td> <input type = \" Knopf \ "VALUE = \" Switch ON - Pin ");
    client.print (var);
    client.print ("\" onClick = \ "parent.location = '/ H?");
    client.print (var);
    client.print ("" \ "> </ td> \ n");

    // Gibt die AUS-Buttons
    client.print ("<td> <input type = \" Knopf \ "VALUE = \" ausschalten - Pin ");
    client.print (var);
    client.print ("\" onClick = \ "parent.location = '/ L?");
    client.print (var);
    client.print ("" \ "> </ td> \ n");

    // Drucken ersten Teil der Kreise oder der LEDs
    if (readInput [var] == true) {
    client.print ("<td> <div class =" green-Kreis "> <div class =" Blendung "> </ div> </ div> </ td> \ n");
    } Else
    {
    client.print ("<td> <div class =" black-Kreis "> <div class =" Blendung "> </ div> </ div> </ td> \ n");
    }

    // Print Ende der Reihe
    client.print ("</ tr> \ n");
    }

    // Gibt die auf allen Pins Knopf
    client.print ("<tr> \ n <td> <input type = \" Knopf \ "VALUE = \" Schalten Sie alle Pins ");
    client.print ("\" onClick = \ "parent.location =" /? ");
    client.print (Allon);
    client.print ("" \ "> </ td> \ n");

    // Gibt den Rabatt auf alle Pins Knopf
    client.print ("<td> <input type = \" Knopf \ "VALUE = \" Schalten Sie alle Pins ");
    client.print ("\" onClick = \ "parent.location =" /? ");
    client.print (AllOff);
    client.print ("'\"> </ td> \ n <td> </ td> \ n </ tr> \ n ");

    // Schließen der Tabelle und Form
    client.println ("</ table>");
    client.println ("</ form>");
    //client.println ("</ p>");

    }

    // Lesen der Ausgangszustände
    Leere readOutputStatuses () {
    for (int var = outputLowest; var <outputLowest + outputQuantity; var ++) {
    readInput [var] = digitalRead (var);
    //Serial.print(readInput[var]);
    }

    }

Schritt 3: Ethernet-Switching-Version 4.06

  1. Ethernet Switching - mit Arduino

    Update V4.06

    Die Ethernet-Switching wurde überarbeitet und aktualisiert, um noch mehr Features sind.
    Diese Version ist Version 4.06
    Es wurde von der ganzen Welt (Brasilien, Kroatien, USA, Großbritannien) ein Interesse, einige Kontaktieren Sie mich auf diesen Seiten und einige privat. Viele hatten Vorschläge, wie kann ich verbessern und ein paar mehr Features, wobei einige von ihnen habe ich getan.
    Ich möchte mich bei allen für die Kommentare und die Bewertungen dieser Artikel erhielt danken.
    Ich begrüße alle, für Kommentare und Anregungen für zukünftige Features und Optionen.
    Angezeigt werden die Funktionen, die ich aufgenommen habe.

    Eigenschaften

    1. Um die Ausgänge invertieren. - Auf V3.06 Fertig
    2. Eine Möglichkeit, um die Tasten umbenennen - Geschehen auf V4.06
    3. Um ein Passwort geschützt werden. - Noch nicht erledigt
    4. Aktualisieren Seite einstellbar. - Auf V3.06 Fertig
    5 Ein- und Ausschalten der Ausgänge beim Start - Geschehen auf V3.06
    6. Aktivieren / Deaktivieren des All Ein / Aus-Tasten - Geschehen auf V4.01
    7. Lesen Temperatur - auf V4.03 Fertig
    8. Speichern / Laden Zustände von eeprom auf aktuellen Stand zu halten, nachdem PowerCut - Geschehen auf V4.06
    9. Option zu wählen, welche Ausgabe, um den Wert nach Stromausfall erhalten. - Auf V4.06 Fertig

    Download-Link

    https://www.dropbox.com/s/19rrxua51v9hhrz/WebServerSwitchingV04_06.ino

Schritt 4: Bilder von der Hardware von anderen

  1. Ethernet Switching - mit Arduino

    Ethernet Switching - mit Arduino

    Ethernet Switching - mit Arduino

    Hier sind einige Bilder des Arduino-Hardware von instructable Benutzer sokre666 aus Kroatien.
    Vielen Dank an dieser Benutzer für die Bilder und den Anregungen die er gemacht hatte.

Schritt 5: Andere Versionen von Nutzern

  1. Benutzer drewpalmer04 hat die neueste Ethernet Switching-Programm aktualisiert und einige Temperatur
    Sensoren sowie die Benutzeranmeldung Option.
    Zu kompilieren müssen Sie einige Bibliotheken herunterladen.

    Unten ist ein Link zum einfachen Download der ino Datei.

    https://www.dropbox.com/s/sbu3s2qh6274ieq/RELAYCONTROLWITHAUTH.ino