M5Stack BugC #3: steuern per WiFi-Verbindung

Posted on by Stefan Draeger

In diesem Beitrag möchte ich dir nun zeigen, wie du den M5Stack BugC per WiFi Verbindung von einem Handy / Tablett oder Computer steuern kannst.

M5Stack BugC steuern per Webseite
M5Stack BugC steuern per Webseite

Im Beitrag M5Stack BugC #1 – Programmieren und erster Test habe ich dir bereits gezeigt, wie dieser in UI Flow programmiert werden kann.

In diesem Beitrag verwende ich die Arduino IDE zur Programmierung da die WiFi Verbindung speziell eingerichtet werden muss und dieses mit den Blöcken von UI Flow nicht möglich ist.

Benötigte Ressourcen für dieses Projekt

Für dieses Projekt benötigst du:

  • einen M5StickC,
  • ein USB Typ-C Datenkabel,
  • den M5Stack BugC

Du benötigst zusätzlich noch ein Handy, Tablett oder Computer mit Zugang zum WiFi Netzwerk.
Für dieses Projekt reicht ein altes, ausgedientes Handy wie zbsp. ein Samsung S3 völlig aus.

Wie soll die Steuerung des BugC per WiFi-Verbindung funktionieren?

Ich werde eine kleine Webseite programmieren, welche fünf Buttons / Schaltflächen enthält, welche für die Richtungen stehen, in welche der BugC fahren soll.

M5Stack BugC - WiFi Control via Website
Dieses Video auf YouTube ansehen.

Wenn die Schaltfläche mit dem Pfeil nach oben betätigt wird, soll der BugC sich im Uhrzeigersinn drehen und wenn die Schaltfläche nach rechts betätigt wird nach rechts fahren usw.

Aufbau der Webseite

Bauen wir zunächst die kleine Webseite in einem Editor auf. Da wir diese Webseite als Zeichenkette einbinden müssen, werden wir im Abschluss diese Seite über einen HTML Minifier komprimieren.

Webseite zum steuern des M5Stack BugC
Webseite zum steuern des M5Stack BugC

Die benötigten Ressourcen findest du auf meinem GitHub Repository unter StefanDraeger/m5Stack/bugc/wifi_controll/website/. Die JavaScript & CSS Dateien habe ich zusätzlich auf einer Subdomain gespeichert, so kann man recht einfach aus der HTML Datei darauf referenzieren und spart so noch etwas Speicherplatz auf dem Mikrocontroller.

  • jQuery – https://progs.draeger-it.blog/bugc/js/jquery.js
  • functions.js – https://progs.draeger-it.blog/bugc/js/function.js
  • styles.css – https://progs.draeger-it.blog/bugc/css/styles.css

Bei der Erstellung des HTML Codes muss darauf geachtet werden, keine doppelten Anführungszeichen zu verwenden, sondern einfache. Das liegt daran, dass wir ja diesen Text in eine String Variable auf Mikrocontroller speichern wollen.

Des Weiteren habe ich einen kleinen JavaScript Block implementiert, wo du deine IP-Adresse eintragen kannst, somit kannst du diesen Code aus dem Beitrag 1:1 auf deinen Mikrocontroller kopieren und musst hier lediglich die IP-Adresse anpassen.

<html>
   <head>
      <script src='https://progs.draeger-it.blog/bugc/js/jquery.js'></script>
      <script src='https://progs.draeger-it.blog/bugc/js/function.js'></script>
      <link rel='stylesheet' type='text/css' href='https://progs.draeger-it.blog/bugc/css/styles.css'/>
   </head>
   <script>
      var ipAdresse = '192.168.178.55';
   </script>
   <body>
      <h1 style='text-align:center;'>M5Stack BugC - WiFi Control</h1>
      <table style='width:400px; height: 400px;margin:0 auto;'>
         <tr>
            <td></td>
            <td><center><button type='button' id='topBtn'>&#8593;</button></center></td>
            <td></td>
         </tr>
         <tr>
            <td><center><button type='button' id='leftBtn'>&#8592;</button></center></td>
            <td><center><button type='button' id='stopBtn'>&#9723;</button></center></td>
            <td><center><button type='button' id='rightBtn'>&#8594;</button></center></td>
         </tr>
         <tr>
            <td></td>
            <td><center><button type='button' id='bottomBtn'>&#8595;</button></center></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

In der Datei „functions.js“ schreiben wir nun unsere Funktion für den Aufruf der Befehle auf dem Mikrocontroller. Wir müssen quasi für jeden Tastendruck einen HTTP Request starten.

$( document ).ready(function() {
	console.log("ready");
	$("button").click(function() {
		var direction = "";
		switch ($(this).attr("id")){
			case "topBtn": direction = "forward"; break;
			case "bottomBtn": direction = "backward"; break;
			case "leftBtn": direction = "left"; break;
			case "rightBtn": direction = "right"; break;
			case "stopBtn": direction = "stop"; break;
		}
		console.log("move BugC to: " + direction);
		moveBugC(direction);
	});
});

function moveBugC(direction){
	var url = "http://"+ipAdresse+"/move?direction=" + direction;
	console.log("call: " + url);
	$.get(url);
}

Arduino Sketch zum Steuern der Motoren

Hier nun der Arduino Sketch / das Programm, welches auf dem M5StickC gespielt werden muss. Du benötigst zusätzlich noch die Bibliothek zum Steuern des BugC welche du im offiziellen GitHub Repository m5stack/M5StickC/examples/Hat/BUGC/ findest.

Den Sketch sowie die benötigen Ressourcen findest du zum Download auf dem GitHub Repository StefanDraeger/m5Stack/bugc/wifi_controll/ArduinoCode/BugCWiFiControl/

#include <M5StickC.h>
#include <WiFi.h>
#include <WebServer.h>
#include "bugC.h"

#define debug

//SSID aus dem Router
const char* ssid = "";
//Passwort für den Zugang zum WLAN
const char* password = "";

//Port auf welchem der Server laufen soll.
WebServer server(80);
//Servlet welches aufgerufen werden muss
//um die Funktionen als GET-Parameter
//zu übergeben
const String SERVLET = "/move";

//Funktionen
const String FORWARD = "forward";
const String BACKWARD = "backward";
const String LEFT = "left";
const String RIGHT = "right";
const String STOPP = "stop";

BUGC BugC;
//Farben für die LEDs
uint32_t COLOR_RED = 0x100000;
uint32_t COLOR_BLACK = 0x000000;


void callHandleAction();
String getPage();

void setup() {
  M5.begin();
  M5.Lcd.setTextColor(TFT_GREEN);
  M5.Lcd.setRotation(1);

  BugC.Init();

  // if add battery, need increase charge current
  M5.Axp.SetChargeCurrent(CURRENT_360MA);

  Serial.begin(115200);

  WiFi.begin(ssid, password);

  // Warten auf die WiFi Verbindung
  while (WiFi.status() != WL_CONNECTED) {
    delay(250);
    Serial.print(".");
  }

  //Wenn erfolgreich verbunden
  //die Daten auf der seriellen Schnittstelle ausgeben
  Serial.println("");
  Serial.print("Erfolgreich verbunden zu ");
  Serial.println(ssid);
  Serial.print("IP Adresse: ");
  Serial.println(WiFi.localIP());

  //Ausgeben der Adresse auf dem Display
  M5.Lcd.setTextSize(1);
  M5.Lcd.drawCentreString(WiFi.localIP().toString() + SERVLET, 45, 30, 2);

  //Server starten und warten auf Verbindungen
  server.begin(); // Starten des Servers.
  server.on(SERVLET, callHandleAction);
}

void loop() {
  server.handleClient();
}

void callHandleAction() {
  //behandeln der GET-Parameter
  Serial.println("callHandleAction");
  for (int i = 0; i < server.args(); i++) {
    String parameterName = server.argName(i);
    String parameterValue = server.arg(i);

#ifdef debug
    Serial.print("paramName: ");
    Serial.print(parameterName);
    Serial.print(" paramValue:");
    Serial.println(parameterValue);
#endif
    //Funktion abhandlen
    if (parameterValue == FORWARD) {
      drawText("F");
      lightUpLeds(COLOR_RED, COLOR_RED);
      moveBugC(100, 100, 100, 100);
    } else if (parameterValue == BACKWARD) {
      drawText("B");
      lightUpLeds(COLOR_RED, COLOR_RED);
      moveBugC(-100, -100, -100, -100);
    } else if (parameterValue == LEFT) {
      drawText("L");
      lightUpLeds(COLOR_RED, COLOR_BLACK);
      moveBugC(100, -100, 100, -100);
    } else if (parameterValue == RIGHT) {
      drawText("R");
      lightUpLeds(COLOR_BLACK, COLOR_RED);
      moveBugC(-100, 100, -100, 100);
    } else if (parameterValue == STOPP) {
      drawText("S");
      lightUpLeds(COLOR_BLACK, COLOR_BLACK);
      moveBugC(0, 0, 0, 0);
    }
  }
  M5.update();
  //Zum Schluss noch die Seite ausliefern
  server.send(200, "text/html", getPage());
}

void drawText(String text) {
  M5.Lcd.setRotation(0);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setTextSize(3);
  M5.Lcd.drawCentreString(text, 45, 75, 2);
}

void lightUpLeds(uint32_t left, uint32_t right) {
  BugC.BugCSetColor(left, right);
}

void moveBugC(int speed0, int speed1, int speed2, int speed3) {
  BugC.BugCSetAllSpeed(speed0, speed1, speed2, speed3);
}

String getPage() {
  return "<html><head><script src='https://progs.draeger-it.blog/bugc/js/jquery.js'></script><script src='https://progs.draeger-it.blog/bugc/js/function.js'></script><link rel='stylesheet' type='text/css' href='https://progs.draeger-it.blog/bugc/css/styles.css'/></head><script>var ipAdresse='192.168.178.55';</script><body><h1 style='text-align:center;'>M5Stack BugC - WiFi Control</h1><table style='width:400px; height: 400px;margin:0 auto;'><tr><td></td><td><center><button type='button' id='topBtn'>&#8593;</button></center></td><td></td></tr><tr><td><center><button type='button' id='leftBtn'>&#8592;</button></center></td><td><center><button type='button' id='stopBtn'>&#9723;</button></center></td><td><center><button type='button' id='rightBtn'>&#8594;</button></center></td></tr><tr><td></td><td><center><button type='button' id='bottomBtn'>&#8595;</button></center></td><td></td></tr></table></body></html>";
}

Wenn nun das Programm gestartet wird, wird nach einer erfolgreichen Verbindung die Adresse auf dem Display angezeigt.

M5StickC mit Adresse für die WiFi Steuerung
M5StickC mit Adresse für die WiFi Steuerung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert