Wysyłanie danych z ESP do strony internetowej -

Bez kategorii Maciej 26 grudnia 2018

Wysyłanie danych z ESP do strony internetowej

W tym kursie krótko jak wysłać i wyświetlić dane z ESP ( użyłem WEMOS w wersji D1 pro, jednak identycznie będzie dla innych płytek prototypowych) na stronie internetowej. W przykładzie wykorzystałem ultradźwiękowy czujnik odległości i pomiar z niego będziemy wyświetlać na stronie internetowej.

Wideo

całość kursu krok po kroku jest zamieszczona w wideo:

Założenia

wykorzystamy mechanizm zmiennych “Variables”
zmienna typu integer będzie ustawiana przez ESP
ta sama zmienna będzie wyświetlana na stronie internetowej w formie “zegara”
stronę możemy wyświetlić na stronie internetowej otwartej na przeglądarce mobilnej przez zeskanowanie kodu QR

Podłączenia

VCC – 5v
GND – GND
Trig -poprzez konwerter stanow, albo przez rezystorowy dzielnik napiec- D3
Echo -poprzez konwerter stanow,, albo przez rezystorowy dzielnik napięć- D2

Strona internetowa

Potrzebne będzie konto na remoteMe.org tworzymy tutaj: https://app.remoteme.org w zakładce Sign up.

Po utworzeniu konta przechodzimy do zakładki Variables i po prawej stronie na górze “Add” wypełniamy:

Pola opisane tutaj

Po tym kroku mamy w systemie naszą zmienną, która będzie zapisywana przez ESP i wyświetlana na stronie internetowej.

Żeby dodać stronę internetową.

Przechodzimy do zakładki “Devices”, “New Device” a następnie “New Web Page”:

Pola opisane tutaj

Teraz dodamy komponent do wyświetlania zmiennej. Otwieramy belkę strony internetowej, klikamy na index.html, następnie “Edit With wizard”, i “Insert Component”:

Wybierając lupke “1” wybieramy naszą zmienna “distance” – bo chcemy żeby właśnie stan tej zmiennej wyświetlał nasz komponent.

Więcej o generowaniu kodu tutaj

Po kliknięciu “Insert”, możemy otworzyć naszą stronę internetową w nowej zakładce (index.html open in new tab) otrzymamy:

Oczywiście “zegar” pokazuje 0 – domyślną wartość zmiennej. Żeby “zegar” się ruszał musimy zmienić naszą zmienna przez kod ESP.

Kod ESP

Przed wgraniem sketcha upewnij się, że zainstalowałeś potrzebne biblioteki https://remoteme.org/network-devices/

Na początek musimy dodać nasze urządzenie w RemoteMe:

Przechodzimy do zakładki “Devices”, “New Device” a następnie “New Network device” .

Uzupełniamy:

Pola opisane tutaj

Pora wygenerować kod do arduino, klikamy “burger menu” i “Code generator wizard”:

W pierwszym kroku zaznaczamy naszą zmienną, w drugim parametry naszej sieci Wifi, w kolejnych krokach nic nie zmieniamy. W kroku ostatnim klikamy “View” żeby wyświetlić nasz kod, który przeklejamy do Arduino IDE

#define WIFI_NAME "ania24"
#define WIFI_PASSWORD "xxxxxx"
#define DEVICE_ID 11
#define DEVICE_NAME "esp"
#define TOKEN "~155_D49LDj@aBFhdffK."


#include <RemoteMe.h>
#include <RemoteMeSocketConnector.h>
#include <ESP8266WiFi.h>

#define TRIGGER D3
#define ECHO    D2

RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);

//*************** CODE FOR CONFORTABLE VARIABLE SET *********************

inline void setDistance(int32_t i) {remoteMe.getVariables()->setInteger("distance", i); }

//*************** IMPLEMENT FUNCTIONS BELOW *********************






void setup() {

    WiFi.begin(WIFI_NAME, WIFI_PASSWORD);

    while (WiFi.status() != WL_CONNECTED) {
        delay(100);
    }
    
    remoteMe.setConnector(new RemoteMeSocketConnector());
    remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);
    pinMode(TRIGGER, OUTPUT);
    pinMode(ECHO, INPUT);
}


void loop() {
    remoteMe.loop();
    static long time=millis();
    if (time+700<millis()){//cannot send more frwquent since it will be block
      time=millis();
      setDistance(getDistance());
    }
 
}

int32_t getDistance(){
  digitalWrite(TRIGGER, LOW);  
  delayMicroseconds(2); 
  
  digitalWrite(TRIGGER, HIGH);
  delayMicroseconds(10); 
  
  digitalWrite(TRIGGER, LOW);
  long duration = pulseIn(ECHO, HIGH);
  return (duration/2) / 29.09;
  
  
}

#define WIFI_NAME "ania24"

#define WIFI_PASSWORD "xxxxxx"

#define DEVICE_ID 11

#define DEVICE_NAME "esp"

#define TOKEN "~155_D49LDj@aBFhdffK."

#include <RemoteMe.h>

#include <RemoteMeSocketConnector.h>

#include <ESP8266WiFi.h>

#define TRIGGER D3

#define ECHO D2

RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);

//*************** CODE FOR CONFORTABLE VARIABLE SET *********************

inline void setDistance(int32_t i) {remoteMe.getVariables()->setInteger("distance", i); }

//*************** IMPLEMENT FUNCTIONS BELOW *********************

void setup() {

WiFi.begin(WIFI_NAME, WIFI_PASSWORD);

while (WiFi.status() != WL_CONNECTED) {

delay(100);

}

remoteMe.setConnector(new RemoteMeSocketConnector());

remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);

pinMode(TRIGGER, OUTPUT);

pinMode(ECHO, INPUT);

}

void loop() {

remoteMe.loop();

static long time=millis();

if (time+700<millis()){//cannot send more frwquent since it will be block

time=millis();

setDistance(getDistance());

}

int32_t getDistance(){

digitalWrite(TRIGGER, LOW);

delayMicroseconds(2);

digitalWrite(TRIGGER, HIGH);

delayMicroseconds(10);

digitalWrite(TRIGGER, LOW);

long duration = pulseIn(ECHO, HIGH);

return (duration/2) / 29.09;

}

Dodane linie kodu zaznaczone na żółto:

#define TRIGGER D3
#define ECHO    D2

1 2	#define TRIGGER D3 #define ECHO D2

Definiujemy podłączenie pinów, żeby kod był czytelniejszy.

pinMode(TRIGGER, OUTPUT);
pinMode(ECHO, INPUT);

1 2	pinMode(TRIGGER, OUTPUT); pinMode(ECHO, INPUT);

Tryb pracy pinów

 static long time=millis();
    if (time+700<millis()){//cannot send more frwquent since it will be block
      time=millis();
      setDistance(getDistance());
    }

static long time=millis();

if (time+700<millis()){//cannot send more frwquent since it will be block

time=millis();

setDistance(getDistance());

}

Wysyłanie odległości do systemu remoteMe wykorzystaliśmy wygenerowaną przez “wizarda” funkcję setDistance

Blok kodu również pilnuję, żeby nie wysyłać pomiaru częściej niz 700ms, ponieważ RemoteMe nie pozwoli na przekazanie więcej wysłanych wiadomości w ciągu minuty niż 110.

Sama funkcja pomiaru wygląda następująco:

int32_t getDistance(){
  digitalWrite(TRIGGER, LOW);  
  delayMicroseconds(2); 
  
  digitalWrite(TRIGGER, HIGH);
  delayMicroseconds(10); 
  
  digitalWrite(TRIGGER, LOW);
  long duration = pulseIn(ECHO, HIGH);
  return (duration/2) / 29.09;
}

int32_t getDistance(){

digitalWrite(TRIGGER, LOW);

delayMicroseconds(2);

digitalWrite(TRIGGER, HIGH);

delayMicroseconds(10);

digitalWrite(TRIGGER, LOW);

long duration = pulseIn(ECHO, HIGH);

return (duration/2) / 29.09;

}

Działanie sensora, jak i kodu w tym artykule

Po wgraniu programu do ESP, przy otwartej stronie internetowej zobaczymy, że nasz “zegar” pokazuje zmierzone odległości.

Smartphone

Żeby otworzyć stronę internetową najlepiej zeskanować kod QR dostępny po kliknięciu index.html -> get anymous link -> “zielona ikona kodu QR”. Pozwoli nam to na otworzenie i automatyczne zalogowanie się do naszego konta 🙂 więcej tutaj

Podsumowanie

W tym artykule pokazałem najprostszy sposób na wyświetlenie pomiaru na stronie internetowej, oczywiście zmiennych może być więcej i możemy je wyświetlać na różnych komponentach, a nawet dodać własne.

Zachęcam do zapoznania się z artykułami odnośnie wykorzystanych technik, których linki umieszczałem w artykule.

Artykuły