I2C per WLAN ( WiFi )mit Webinterface steuern. ESP8266 Webserver über Netzwerk

Die Grundidee

Die Grundidee ist das, man über GET Anfrage über den Browser beliebigen I2C- Adressen angesprochen werden können.

Einfachste steuermöglichkeit ist über Adressleiste des Webbrowsers eine URL-Zeile mit GET Metod die Daten zu senden.
Beispiel: schreiben auf I2C-Adresse 64 ein Byte 129 (dezimal) „http://_IP-Adresse_/I2C.php?Adress=64&Daten=129; „
Lesen auf I2C-Adresse 65 ein Byte „ http://_IP-Adresse_/I2C.php?Adress=65&Bytes=1 „I2C-Server antwortet mit einer Webseite in text/plain Format mit einer Zahl. Wenn mehreren Bytes gelesen werden, sind die Zahlen mit Semikolon getrennt.
Get -Parameter „Daten“ kann mehrere Bytes beinhalten „Daten=0;15;37;“ Hier werden 3 Bytes übertragen.
Beim Lesen der Get –Parameter „Bytes“ gibt an wie viel Bytes vom I2C-Slave gelesen werden soll.
Bit 0 in der I2C-Adresse entscheidet ob geschrieben oder gelesen wird. Gerade Zahlen-Schreiben, ungerade Zahlen- Lesen.
Um es schön darzustellen und die empfangene und zu sendende Daten aufzubereiten, kann JavaScript verwendet werden. Ein Beispiel und Quellcode der HTLM-Webseite mit dem JavaScript kann hier heruntergeladen werden.

Schaltplan

Schaltplan I2C über WiFi Netzwerk

Download

Download BIN -Laden der Firmware mit einem Tool über serielle Schnittstelle.
(Kompiliert mit Arduino ver. 1.6.9, ESP8266 Bibliothek ver. 2.2.0)
Download Projekt -Sketch für Arduino, es wird Bibliothek Core for ESP8266 WiFi chip benötigt

Technische Daten

Stromaufnahme 80..200mA, kurzzeitig Max. 500mA Serverantwort an Browser nach der Anfrage 64ms-200ms im lokalem Netzwerk. I2C-Frequenz 1KHz

Befehle:

/I2C.php – Schreiben oder lesen einzelne I2C Adresse
Lesen am Adresse 65 ein Byte /I2C.php?Adress=65&Bytes=1
Schreiben am Adresse 64 Dezimalwert 129 /I2C.php?Adress=64&Daten=129;

/Durchsuchen.php - Zeigt Adressen allen angeschlossenen I2C-Geräts.

/GetI2C.xml -Liest mehrere I2C-Slave Geräte aus und Bildet als Antwort ein XML-Dokument.
Get-Parametrname ist zu lesende I2C-Adresse Get-Parametrwert ist Anzahl zu lesenden Bytes. „/GetI2C.xml?65=1&167=3“ - Bedeutet lese 1 Byte von Adresse 65 und lese 3 Bytes von Adresse 167.

/SetI2C.php –Schreiben auf mehreren I2C-Adressen
/SetI2C.php?64=1;2;3;4;&166=0;20;30;40;50;&100=1;“ Schreibe auf Adresse 64 4 Bytes mit dem dezimalen Wert 1,2,3,4 und Schreibe auf Adresse 166 5 Bytes mit dem dezimalen Wert 0,20,30,40,50 und Schreibe auf Adresse 100 1 Byte mit dem dezimalen Wert 1.

/ADC.php - (Nur mei dem ESP-07 Module) List Spannungswert am Pin ADC mit dem internem ADC-Wandler. Messbereich 0..1V, Auflösung 10Bit (Zahlenwert 0…1023)

Bildung der I2C-Adressen
Zum schreiben(7-Bitadresse)*2
bei PCF8574 A0...A2 auf GND: Adresse binär"0100 000" dezimal 32, 32*2=64 dezimal
Zum Lesen(7-Bitadresse)*2+1
bei PCF8574 A0...A2 auf GND: Adresse binär"0100 000" dezimal 32, 32*2+1=65 dezimal

Passwortschutz für Schreiben

Das Schreiben auf dem I2C-Buss kann mit einem Passwort geschützt werden.
Wenn im Setupmodus ein Passwort angegeben wurde dann wird das Schereiben nur dann ausgeführt, wenn Get-Parameter „Passwort“ mit richtigem Passwort übertragen wurde.
Beispiel „http://_IP-Adresse_/I2C.php?Adress=64&Daten=129;&Passwort=598gfdhghgfd85„

IP

Damit das Gerät immer gleiche IP-Adresse bekommt muss der Router so eingestellt werden, dass er zum MAC Adresse des ESP8266 Moduls immer gleiche IP Adresse vergibt. Diese Funktion beim Router heißt DHCP Reservation.
Um von außen auf den I2C-Server Zugang zu bekommen wird Weiterleitung des Ports im Router eingestellt.

Um I2C-Server nicht per IP sondern per Domen anzusprechen, kann ein Dyndns Dienst verwendet werden.

I2C-Server einstellen

Um SSID und Haus Wlan –Passwort einzugeben wird so vorgegangen:
RX/TX mit einem Jumper Brücken. Stromversorgung anlegen.
I2C-Server startet im Access Point Modus.
Mit einem WLAN flächigem Gerät das WLAN Netzwerk „I2C-Server“ auswählen und mit dem Passwort „tiramisu“ anmelden.
Dann starten Sie ein Internetbrowser und geben in Adressleiste 192.168.178.1
Wenn die Quellcode mit der Option #define DNS kompiliert wurde, dann wird beliebige Domen zum Setupseite führen.
Es öffnet sich ein Formular mit Eingabefeldern für SSID, WLAN–Passwort, Passwortschutz für Schaltvorgänge.
Nach dem Absenden des Formulars erhalten Sie Meldung „Gespeichert“. Beim erneuten Aufruf vom 192.168.178.1, werden eingestellten Daten angezeigt. WLAN-Passwort wird dabei mit Sternchen ersetzt. (Sicherheitsmaßname damit bei Übergabe des I2C-Servers an Dritten Ihr WLAN–Passwort nicht preisgegeben wird).

Nach dem konfigurieren des I2C-Servers wird RX/TX-Brücke entfernt und Stromversorgung unterbrochen.
Beim erneuten Anlegen der Stromversorgung meldet sich I2C-Server in ihrem Hausnetz.
Während des Verbindungsaufbaus blinkt Blaue LED am ESP-Modul. (wenn das blinken nicht aufhört, dann sind SSID oder Passwort falsch).
Ihr Router vergibt dem I2C-Server eine IP-Adresse. Welche IP-Adresse vergeben wurde kann man auf der Router Webseite herausfinden oder, wenn I2C-Server an USB-TTL serieller Adapter angeschlossen ist, im Terminalprogramm ablesen.
Wenn man jetzt IP-Adresse des I2C-Servers im Browser aufruft, erhält man Text mit Auflistung möglicher Befehle.

Web Interface

LM75 I2C Temperatursensor HTML Anzeige(Gauge)wlan ESP8266

Das Empfangen der Daten und das Senden der Befehle in regelmäßigen Abständen mittels HTML-Webseite möglich, ohne die Webseite neu zu laden.
Dies ermöglicht das Ajax-Objekt im JavaScript.
Einfachste Variante ist, das geladene Webseite in sekundentakt eine Anfrage zu den I2C-Server macht und das empfangene Daten anzeigt.

Rechts sehen Sie das Screenshot des Webinterface für LM75 (TCN75). Hier wurde als Anzeigeelement das HTML Canvas Gauges verwendet.
Bei Verwendung von mehreren Temperatursensoren kann man die Anzeigen kleiner darstellen lassen.
Download als ZIP ( HTML-Webseite und JavaScript-Datei).
Weiter folgen die einfachen Beispiele der Verarbeitung der Daten mit AJAX und JavaScript. Alle Beispiele sind mit Kommentaren in Quelltext versehen.

Beispiel1
Nach dem Öffnen der Webseite wird Funktion start () ausgeführt. Die sendet eine Anfrage an I2C-Server. Dabei wird LM75 angesprochen unter Adresse 145 und es werden 2 Bytes gelesen.
Wenn Antwort des I2C-Servers angekommen ist, wird Funktion LesenAjax() ausgeführt. Da drin werden empfangene Daten im Form “25;1;“ bearbeitet. In einzelne Zahlen geschnitten und in Integer umgewandelt und angezeigt.
Zum ausprobieren nicht vergessen Variable "Url" anzupassen, Beziehungsweise Adresse des Temperatursensors.

Beispiel2
Das gleiche wie oben, jedoch Anfrage an I2C-Server wird in Sekundentakt ausgeführt und die Temperaturwerte neu angezeigt.
Das Befehl „setInterval(aktualisieren,1000);“ veranlasst das die Funktion „aktualisieren()“ jede Sekunde ausgeführt wird.

Beispiel3
Lesen und Schreiben einer PCF8574 IO Erweiterung mit I2C-Adresse 64 (A0, A1, A2 auf GND).
Zum ausprobieren nicht vergessen Variable Url anzupassen.
Im Funktion „Start()“ wird AJAX-Objekt gebildet.
Funktion „Schreiben()“ wird beim Click auf einer der Checkboxen ausgeführt.
In der For-Schleife werden alle 8 Checkboxen überprüft und ein Byte gebildet wobei checked=1 und unchecked=0 ist.
Danach wird dieses Byte durch den I2C-Server an PCF8574 gesendet.
Gerade I2C-Adresse heißt Schreiben Url+"I2C.php?Adress=64&Daten="+num+";" GET-Argument „Daten“ soll nach dem Zahl immer ein Semikolon haben. Der Semikolon dient als Trennzeichen wenn mehrere Bytes gesendet werden.
Funktion „Lesen()“ wird beim Click auf das Link „Lesen“ ausgeführt. Es wird Serveranfrage gebildet.
Ungerade I2C-Adresse heißt I2C-Lesen. Url+"I2C.php?Adress=65&Bytes=1 GET-Argument „Bytes“ gibt an wie viel Bytes gelesen werden.
Funktion LesenAjax() wird automatisch ausgeführt wenn eine Antwort vom Server kommt. Da wird empfangene Nachricht als Text in der Webseite als Serverantwort angezeigt.

Beispiel4
Lesen und Anzeigen von Spannungswerten vom „I2C - ANALOG-INPUT 5 Kanal 0-10V 10Bit“
I2C-Adresse 17 (alle Jumpern unten). Es werden 11 Bytes in Sekundentackt abgefragt, Integer-Variable gebildet, Spannungswert berechnet und angezeigt.

Codeschnipsel

Serverantwort aufbereiten:
Ein String ( Z.B.„1;45;5;“) zerschneiden: var StingArr=datenstr.split(";"); Damit erhalten wir Array aus Strings. StingArr[0], StingArr[1], StingArr[2] die beinhalten „1;“, „45;“, „5;“
Integer Wert aus dem String bilden: U1=parseInt(StingArr[1]); jetzt U1 hat Wert 45.

HTML-Elemente Ansprechen und ändern
document.getElementById('TemperaturAnzeige').innerHTML=“BlaBla“; Element mit ID „TemperaturAnzeige“ bekommt als Text „BlaBla“.
document.getElementsByTagName("input")[1].value=3; Erste Element „Input“ bekommt das Eigenschaft „value“ auf Wert 3 Gesetzt.
k=document.getElementsByTagName("input")[2].value; . Value Wert des zweiten Elements "input" wird in Variable „k“ gespeichert.

LM75 / TCN75 Webinterface mit Aktivität Anzeige, variable I2C-Adresse und IP Eingabe Möglichkeit

Nach dem betätigen den Batten „Übernehmen“, werden die Daten in Cookie gespeichert. Beim nächsten Aufruf der Webseite werden die Eingabefelder automatisch ausgefühlt.
Das Webinterface kann lokal oder auf beliebigem Server gespeichert sein.
Vor URL Eingabefeld befindet sich ein Kreis. Wenn das Webinterface eine Anfrage an I2C-Webserwer sendet, wird der Kreis rot. Wenn eine Antwort vom I2C-Webserwer empfangen wurde wird der Kreis wieder grau. Blinken des Kreises in sekundentackt zeigt normale Kommunikation mit dem ESP8266. Wenn der Kreis rot bleibt, dann bedeutet das, dass I2C-Server antwortet nicht.

LM75 Temperatursensor per Wlan im Browser mit canv- gauge anzeigen

Download ZIP Webseite ist geteilt in: HTML, CSS-Datei mit Styles, JS-Datei mit JavaScript und JavaScript der Anzeige bildet.

Webinterface für I2C-Server Vorführung video

Nach oben

I2C-Server Universelle I2C- Steuerung mittels TCP/IP und Webinterface