ESP8266 + Websocket server RGB LED-controller (2 / 4 steg)

Steg 2: Webserver klienten

Web server klienten är den del som talar till webbservern. Det är också det gränssnitt som vi kommer att samverka. Du kan köra det på din dators webbläsare eller ladda upp den som en web app.

Hämta filen index.html från här[redigera här]

Jag skrev denna enkla HTML-fil i Intel XDK IDE. Det liknar telefon könen, där du kan designa app använder HTML5/Javascript för att göra hybrid apps ska köras på de flesta plattformar för smartphone. Men här jag inte bygga en fristående app. Mer information om XDK här. Det finns också en IOT smak, för er viljande till använda Node.JS etc.

Din önskade texteditor kan du redigera skriptet som html. Jag föredrar xdi eftersom jag är en nybörjare och det ger tips när du skriver koder.

OBS

Om du kör esp ansluten till ditt nätverk eller som en åtkomstpunkt, måste web server klienten köras på datorn/smartphone ansluten till samma nätverk som ESP.

Koden förklaras

Först måste vi infoga IP-adressen till webbservern i platshållaren mata in text. Undersökningsperioden kan erhållas från seriella monitor när esp kör kod från skiss eller du kan hitta den från routern. Om du kör esp8266 som åtkomstpunkt, är ip 192.168.4.1. När jag ansluter till mitt hemnätverk, är ip ESP 192.168.1.100. Så bör jag ingång:

WS://192.168.1.100:81/

eller om jag kör access punkt, ws://192.168.4.1:81/

81 är den port som servern lyssnar på.

Det finns två knappar: blinkar LED och återställa LED. Blink ledde skickar "LED" när tryckte och återställa ledde skickar RESET". Dessa strängar tolkas av kod som vi skrev i skiss och blinkar ledde 13 eller återställer alla LED pin värden därmed.

Det finns 3 reglagen, vardera med lägsta värdet 0 och max 255. Varje reglaget R, G, B respektive skickar värden x, y, z som mottas av esp webbserver och sedan blir röd, grön eller blå LED värde därför.

Om du använder klienten från en smartphone, kan du också försöka ändra värdet av PIN-kod med hjälp av telefonens accelerometer. Detta fungerar dock inte på alla smartphone webbläsare.

Jag med den här funktionen för att illustrera användningen av sensorer redan i smartphones.

I min tidigare projekt beskrivit jag redan användning av GPS för att skicka värdet från smartphone till esp. här

Sensorer

Du kan skriva din egen kod för att använda sensorer från smartphone.

Här använde jag DeviceOrientationEvent. Du kan använda navigator.geolocation för GPS värden.

För mer information läs här https://developer.mozilla.org/en-US/docs/Web/API/D...

Knapparna bredvid varje axel namn när du klickar på börjar lyssna om du vill ändra i enheten orientering.

Knappen bredvid det skickar värdet till esp8266.

Webapp

Du kan också ladda upp index html som en web app och tillgång till den från en smartphone ansluten till samma nätverk som esp8266.

Här är ett exempel. http://rahul2704.GitHub.IO

För instruktioner om hur man ställa in det, huvud upp här, mycket lätt