• Witaj na Forum Arduino Polska! Zapraszamy do rejestracji!
  • Znajdziesz tutaj wiele informacji na temat hardware / software.
Witaj! Logowanie Rejestracja


Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
ESP8266 i WebSocketSeerver wyświetlenie zmiennej na stronie www live
#1
Cześć

Czy orientujecie się czy można jakimś sposobem dodać do strony www ( webServer) napis " Licznik " i obok żeby wyświetlała się wartośc licznika ze zmiennej zapisanej w ESP8266 np byte licznikA:

Coś w stylu jak na czujnik oświetlenia pada światło i odrazu na stronie www zmienia się wartośc czujnika od np 0 do 100. 
Tutaj fajnie kręci się potencjometrem i na www odrazu jest efekt :
https://youtu.be/jFhkxL-Fyv8?t=32s

Ten kod mi działa i jest stosunkowo prosty. Szkoda by było z niego rezygnować a może jest na to jakiś sposób. Dla lepszego odczytu GIHUB: https://gist.github.com/bbx10/667e3d4f5f2c0831d00b

Gdyby się udało była by fajna informacja dla innych szukających Smile

gdzie tu w kodzie ESP8266 dać zmienną ( po innerHTML ) "wynik1" żeby to działało gdy zmienna w kodzie się zmienia Smile


zaraz po onload www dodałem 
Kod:
document.getElementById("mojlicznik").innerHTML = wynik1;


W sekcji <body> dodałem 
Kod:
<div id="cos" class="niecos">
<span id="mojlicznik"></span> </div>
 


Kod:
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <WebSocketsServer.h>
#include <Hash.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

#define USE_SERIAL Serial

static const char ssid[] = "tunc5555";
static const char password[] = "123456789";
MDNSResponder mdns;

static void writeLED(bool);

ESP8266WiFiMulti WiFiMulti;

ESP8266WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);

static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=0">
<title>ESP8266 WebSocket Demo</title>
<style>
"body { background-color: #808080; font-family: Arial, Helvetica, Sans-Serif; Color: #000000; }"
</style>
<script>
var websock;
function start() {
 websock = new WebSocket('ws://' + window.location.hostname + ':81/');
 websock.onopen = function(evt) { console.log('websock open'); };
 websock.onclose = function(evt) { console.log('websock close'); };
 websock.onerror = function(evt) { console.log(evt); };
 websock.onmessage = function(evt) {
   console.log(evt);
   var e = document.getElementById('ledstatus');
   if (evt.data === 'ledon') {
     e.style.color = 'red';
   }
   else if (evt.data === 'ledoff') {
     e.style.color = 'black';
   }
   else {
     console.log('unknown event');
   }
 };
}
function buttonclick(e) {
 websock.send(e.id);
}
</script>
</head>
<body onload="javascript:start();">
<h1>ESP8266 WebSocket Demo</h1>
<div id="ledstatus"><b>LED</b></div>
<button id="ledon"  type="button" onclick="buttonclick(this);">On</button>
<button id="ledoff" type="button" onclick="buttonclick(this);">Off</button>
</body>
</html>
)rawliteral";

// GPIO#0 is for Adafruit ESP8266 HUZZAH board. Your board LED might be on 13.
const int LEDPIN = 4;
// Current LED status
bool LEDStatus;

// Commands sent through Web Socket
const char LEDON[] = "ledon";
const char LEDOFF[] = "ledoff";

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length)
{
    USE_SERIAL.printf("webSocketEvent(%d, %d, ...)\r\n", num, type);
    switch (type) {
    case WStype_DISCONNECTED:
        USE_SERIAL.printf("[%u] Disconnected!\r\n", num);
        break;
    case WStype_CONNECTED:
    {
                             IPAddress ip = webSocket.remoteIP(num);
                             USE_SERIAL.printf("[%u] Connected from %d.%d.%d.%d url: %s\r\n", num, ip[0], ip[1], ip[2], ip[3], payload);
                             // Send the current LED status
                             if (LEDStatus) {
                                 webSocket.sendTXT(num, LEDON, strlen(LEDON));
                             }
                             else {
                                 webSocket.sendTXT(num, LEDOFF, strlen(LEDOFF));
                             }
    }
        break;
    case WStype_TEXT:
        USE_SERIAL.printf("[%u] get Text: %s\r\n", num, payload);

        if (strcmp(LEDON, (const char *)payload) == 0) {
            writeLED(true);
        }
        else if (strcmp(LEDOFF, (const char *)payload) == 0) {
            writeLED(false);
        }
        else {
            USE_SERIAL.println("Unknown command");
        }
        // send data to all connected clients
        webSocket.broadcastTXT(payload, length);
        break;
    case WStype_BIN:
        USE_SERIAL.printf("[%u] get binary length: %u\r\n", num, length);
        hexdump(payload, length);

        // echo data back to browser
        webSocket.sendBIN(num, payload, length);
        break;
    default:
        USE_SERIAL.printf("Invalid WStype [%d]\r\n", type);
        break;
    }
}

void handleRoot()
{
    server.send_P(200, "text/html", INDEX_HTML);
}

void handleNotFound()
{
    String message = "File Not Found\n\n";
    message += "URI: ";
    message += server.uri();
    message += "\nMethod: ";
    message += (server.method() == HTTP_GET) ? "GET" : "POST";
    message += "\nArguments: ";
    message += server.args();
    message += "\n";
    for (uint8_t i = 0; i<server.args(); i++){
        message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
    }
    server.send(404, "text/plain", message);
}

static void writeLED(bool LEDon)
{
    LEDStatus = LEDon;
    // Note inverted logic for Adafruit HUZZAH board
    if (LEDon) {
        digitalWrite(LEDPIN, 0);
    }
    else {
        digitalWrite(LEDPIN, 1);
    }
}

void setup()
{
    pinMode(LEDPIN, OUTPUT);
    writeLED(false);

    USE_SERIAL.begin(115200);

    //Serial.setDebugOutput(true);

    USE_SERIAL.println();
    USE_SERIAL.println();
    USE_SERIAL.println();

    for (uint8_t t = 4; t > 0; t--) {
        USE_SERIAL.printf("[SETUP] BOOT WAIT %d...\r\n", t);
        USE_SERIAL.flush();
        delay(1000);
    }

//    WiFiMulti.addAP(ssid, password);
//
//    while (WiFiMulti.run() != WL_CONNECTED) {
//        Serial.print(".");
//        delay(100);
//    }

    WiFi.softAP(ssid, password);
    IPAddress myIP = WiFi.softAPIP();
    USE_SERIAL.print("AP IP address: ");
    USE_SERIAL.println(myIP);

    USE_SERIAL.println("");
    USE_SERIAL.print("Connected to ");
    USE_SERIAL.println(ssid);
    USE_SERIAL.print("IP address: ");
    USE_SERIAL.println(WiFi.localIP());

    if (mdns.begin("espWebSock", WiFi.localIP())) {
        USE_SERIAL.println("MDNS responder started");
        mdns.addService("http", "tcp", 80);
        mdns.addService("ws", "tcp", 81);
    }
    else {
        USE_SERIAL.println("MDNS.begin failed");
    }
    USE_SERIAL.print("Connect to http://espWebSock.local or http://");
    USE_SERIAL.println(WiFi.localIP());

    server.on("/", handleRoot);
    server.onNotFound(handleNotFound);

    server.begin();

    webSocket.begin();
    webSocket.onEvent(webSocketEvent);
}

void loop()
{
    webSocket.loop();
    server.handleClient();
}
 
Odpowiedź
#2
Tak w ciemno niewiele zrobisz. Wejdź na kurs na Youtube Mirosław Zelent Pasja Informatyki, zobacz odcinki C++, C++ obiektowy, HTML, CSS i JavaScript. Potem zobacz to, starałem się komentować co się da: https://github.com/kaczakat/ESP8266 . Generalnie zmienne są wysyłane do serwera tu:
Kod:
 // send data to all connected clients
       webSocket.broadcastTXT(payload, length);
Ty decydujesz czy wysłać je okresowo czy po jakimś zdarzeniu. Ja to w przykładzie w linku zrobiłem bardzo prostacko, a potrzebowałem to bo zwykły serwer ESP wieszał mi się losowo po paru minutach/godzinach, a ten działa po kilka miesięcy OK.
Miło być decenianym https://buycoffee.to/kaczakat
 
Odpowiedź
#3
Tak masz rację, najlepiej przewalić trochę kursów i wtedy jest to wszystko jaśniejsze ale nie mam czasu trochę na to Tongue
Doszedłem jak odebrać coś z ESP8266 które wysyła broadcastTXT
Wszystko co leci z ESP8266 jest w evt.data
Jak ma się to pokazywać jako licznik w moim przypadku muszę jeszcze przerobić ale teraz wiemy co gdzie jest Smile


Dziękuje Ci za szybką i wartościową pomoc Smile

Pozdrawiam
 
Odpowiedź
  


Skocz do:


Przeglądający: 1 gości