Arduino

Bediening van NodeMCU met thingspeak

Laatst bijgewerkt: 11/08/2020

We gaan een NodeMCU en de daarop aangesloten leds bedienen met behulp van een HTML webpagina en Thingspeak.

We kunnen de leds besturen als de NodeMCU en de laptop met elkaar zijn verbonden via hetzelfde netwerk. In de module ESP8266 Webserver die je hier kan vinden, kan je meer uitleg hier over terug vinden.

In deze tutorial gaan we een NodeMCU bedienen via het internet en met de hulp van Thingspeak deze toegankelijk maken van overal waar internet beschikbaar is.

Aansluitschema

  1. Verbind de eerste led met Pin D1 van de NodeMCU, zo dat de positieve pin is verbonden met D1 en de negatieve pin van de led is verbonden met GND.
  2. Verbind nu de 2de led met Pin D2 van de NodeMCU, zodat de positieve pin is verbonden met D2 en de negatieve pin van de led is verbonden met GND.
  3. Sluit op dezelfde manier de 3de led aan op Pin D3 van de NodeMCU zodat de positieve pin is verbonden met D3 en de negatieve pin van de led is verbonden met GND.

Controle van de NodeMCU via Thingspeak

Om met behulp van een webpagina de leds van overal in de wereld te kunnen bedienen gebruiken we Thingspeak.

Installeer de Thingspeak bibliotheek in uw arduino IDE:

Hier kan je de korte tutorial vinden om het kanaal op thingspeak te maken en om je NodeMCU te installeren.

Hier is de code voor je arduino. Kopieer en programmeer je NodeMCU ermee:

#include <ThingSpeak.h>
#include <ESP8266WiFi.h>
//Vervang hier je wifi inloggegevens
const char* ssid     = "uw ssid";
const char* password = "us wifi paswoord";
unsigned  long channel = 306327; // verander hier je kanaalnummer
//1,2 en 3 zijn kanaal velden. U hoeft niet te veranderen als u deze tutorial volgt. U kunt het echter aanpassen aan uw toepassing
unsigned int led1 = 1;
unsigned int led2 = 2;
unsigned int led3 = 3;
WiFiClient client;
void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(D1,  OUTPUT);
  pinMode(D2,  OUTPUT);
  pinMode(D3,  OUTPUT);
  digitalWrite(D1,LOW);
  digitalWrite(D2,LOW);
  digitalWrite(D3,LOW);
  Serial.println();
  Serial.println();
  Serial.print("Connecting to : "); 
  Serial.println(ssid);
  WiFi.begin(ssid,  password);	  // We beginnen met het verbinden met een wifi-netwerk
  while (WiFi.status()!= WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println(" ");
  Serial.println("WiFi connected ");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  Serial.print("Netmask: ");
  Serial.println(WiFi.subnetMask());
  Serial.print("Gateway: ");
  Serial.println(WiFi.gatewayIP());
  ThingSpeak.begin(client);
}
void  loop() {
  //get the last data of the fields
  int led_1 = ThingSpeak.readFloatField(channel, led1);
  int led_2 = ThingSpeak.readFloatField(channel, led2);
  int led_3 = ThingSpeak.readFloatField(channel, led3);
  if (led_1 == 1) {
    digitalWrite(D1, 1);
    Serial.println(" D1 is On..!");
  }
  else if (led_1 == 0) {
    digitalWrite(D1, 0);
    Serial.println(" D1 is Off..!");
  }
  if (led_2 == 1) {
    digitalWrite(D2, 1);
    Serial.println(" D2 is On..!");
  }
  else if (led_2 == 0) {
    digitalWrite(D2, 0);
    Serial.println(" D2 is Off..!");
  }
  if (led_3 == 1) {
    digitalWrite(D3, 1);
    Serial.println(" D3 is On..!");
  }
  else if (led_3 == 0) {
    digitalWrite(D3, 0);
    Serial.println(" D3 is Off..!");
  }
  Serial.println(led_1);
  Serial.println(led_2);
  Serial.println(led_3);
  delay(5000);
}

Bedien je NodeMCU via thingspeak met behulp van de webpagina.

Deze webpagina wordt gemaakt in html. En we zullen jQuery gebruiken om de gegevens op de thingspeak server te posten vanaf onze HTML webpagina.

Open Notepad++ en kopieer de volgende code:

  1. We zullen eerst de head code schrijven waar we scripts en titel zullen definiëren:
  2. <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="Access-Control-Allow-Origin" content="*">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
     <title>NodeMCU Web Control</title>
    </head>
  3. Nu zullen we de body creëren.

    We hebben een tekstvak nodig dat gebruikt zal worden door de gebruiker om de API van het thingspeak kanaal in te vullen.
    2 knoppen voor het besturen van elke led. Een voor aan en de andere voor uit. Dus we hebben in totaal zes knoppen nodig.
    En tot slot nog een tekstvak dat zal worden gebruikt om de activiteit per gebruiker weer te geven. Zoals lichten ingeschakeld, en uit enz.

  4. <body bgcolor="#607D8B">
    <center>
    <h1 style="font-family: Helvetica; color: white;">NodeMCU via thingspeak</h1>
    </center>
    <div class="center">
     <div align="center" class="form">
     <form action="" method="get">
      <input type="text" id="ip" class="ip" placeholder="Thingspeak Write API Key"></input>
      <br>
      <button type="button" id="D1-on" class="button button1" >D1 ON</button>
      <button type="button" id="D1-off" class="button button3" >D1 OFF</button>
      <br>
      <button type="button" id="D2-on" class="button button1" >D2 ON</button>
      <button type="button" id="D2-off" class="button button3" >D2 OFF</button>
      <br>
      <button type="button" id="D3-on" class="button button1" >D3 ON</button>
      <button type="button" id="D3-off" class="button button3" >D3 OFF</button>
      <br>
      <textarea id="logger" class="ip" placeholder="LOGS" readonly></textarea>
     </form>
     </div>
    </div>
    </body>
  5. Plaats tenslotte het script dat thingspeak rest api zal oproepen om de kanaalfeed te updaten voor het besturen van de ESP12E.
  6. <script>
    	document.getElementById('D1-on').addEventListener('click', function() {
    		var ip = document.getElementById('ip').value;
    		var url = "http://api.thingspeak.com/update?api_key="+ ip + "&field1=1"
    		$.getJSON(url, function(data) {
    			console.log(data);
    		});
    	});
    	document.getElementById('D1-off').addEventListener('click', function() {
    		var ip = document.getElementById('ip').value;
    		var url = "http://api.thingspeak.com/update?api_key="+ ip + "&field1=0"
    		$.getJSON(url, function(data) {
    			console.log(data);
    		});
    	});
    	document.getElementById('D2-on').addEventListener('click', function() {
    		var ip = document.getElementById('ip').value;
    		var url = "http://api.thingspeak.com/update?api_key="+ ip + "&field2=1"
    		$.getJSON(url, function(data) {
    			console.log(data);
    		});
    	});
    	document.getElementById('D2-off').addEventListener('click', function() {
    		var ip = document.getElementById('ip').value;
    		var url = "http://api.thingspeak.com/update?api_key="+ ip + "&field2=0"
    		$.getJSON(url, function(data) {
    			console.log(data);
    		});
    	});
    	document.getElementById('D3-on').addEventListener('click', function() {
    		var ip = document.getElementById('ip').value;
    		var url = "http://api.thingspeak.com/update?api_key="+ ip + "&field3=1"
    		$.getJSON(url, function(data) {
    			console.log(data);
    		});
    	});
    	document.getElementById('D3-off').addEventListener('click', function() {
    		var ip = document.getElementById('ip').value;
    		var url = "http://api.thingspeak.com/update?api_key="+ ip + "&field3=0"
    		$.getJSON(url, function(data) {
    			console.log(data);
    		});
    	});
    </script>
    </html>
  7. Sla het bestand op als index.html en plaats het online.

    Een voorbeeld van deze pagina kan je Hier bekijken

Nu hebt u met succes de NodeMCU geconfigureerd die verbonden is met drie LED's en een webpagina voor de bediening met Thingspeak als server voorzien.