-->

ESP8266 Community Forum

Open Community Forum for ESP8266, Come share Arduino and IoT (Internet of Things)
https://www.esp8266.com/

How do I add my webcam image to my Robot Control Webpage?

https://www.esp8266.com/viewtopic.php?f=160&t=17498

Page 1 of 1

How do I add my webcam image to my Robot Control Webpage?

PostPosted: Sun Apr 15, 2018 8:28 am
by kaxx1975
I am working on a wifi controlled tank/robot with camera. The camera is running motioneyeos. I would like to integrate its output to the same webpage as my controls.

As it sits right now, I have a 2nd ESP-01 that is putting up a single webpage for both the camera and the robot remote control using iframe in a similar websocket sketch, just to test. I would like to get rid of the 2nd ESP-01 and just have the single robot ESP-01 also put up the webcam webpage.

However, whenever I attach an iframe link to the sketch running the robot, I get an error stating certain variables were not declared in this scope. I don't understand how inserting an iframe makes a scope change that way, so I don't know where to attach:

<iframe src="http://192.168.1.6" width="340" height="250" frameborder="1"></iframe>

I've tried inserting all throughout lines 49 to 143 and I get the same errors: all of the "writeMotor****" variables become undeclared.

My hardware is an ESP-01 module controlling an Adafruit V2.3 motor controller and battery pack, sending signals via I2C. The webcam is setting atop a Raspberry Pi with a 5V battery bank, mounted to the tank chassis to put video on IP: 192.168.1.6.

This is the sketch for the Robot, its just a modified Websocket example I have been working on

Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <WebSocketsServer.h>
#include <Hash.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <Adafruit_MotorShield.h>
#include <Wire.h>

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

int sda = 0;  //to pin A4
int scl = 2;  //to pin A5

bool FFwdStatus12;
bool LeftStatus13;
bool RightStatus14;
bool ForwardStatus15;
bool ReverseStatus16;
const char Left1[] = "Left1";
const char Forward1[] = "Forward1";
const char FFwd1[] = "FFwd1";
const char Right1[] = "Right1";
const char Stop1[] = "Stop1";
const char Reverse1[] = "Reverse1";
static void writeLED(bool);


Adafruit_MotorShield AFMS = Adafruit_MotorShield();




Adafruit_DCMotor *Motor1 = AFMS.getMotor(1);
Adafruit_DCMotor *Motor2 = AFMS.getMotor(4);

ESP8266WiFiMulti WiFiMulti;

ESP8266WebServer server(80);                                                  ////////////82 works online and in LAN//////////////////////////////////////////////
WebSocketsServer webSocket = WebSocketsServer(81);                            ////////////83 works online and in LAN//////////////////////////////////////////////
                                                                              ///////Open Both of the above ports in the router port Forwarding///////////////////
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>RoboSock</title>

<style>
</style>
 
<script>
var websock;

function start() {
  websock = new WebSocket('ws://' + window.location.hostname + ':81/');       ////////////83 works online and in LAN//////////////////////////////////////////////
  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('FFwdStatus12');
    if (evt.data === 'FFwd1') {
      e.style.color = 'red';
    }
    else if (evt.data === 'FFwd1') {
      e.style.color = 'black';
    }
   
    var e = document.getElementById('LeftStatus13');
    if (evt.data === 'Left1') {
      e.style.color = 'red';
    }
    else if (evt.data === 'Left1') {
      e.style.color = 'black';
    }

    var e = document.getElementById('RightStatus14');
    if (evt.data === 'Right1') {
      e.style.color = 'red';
    }
    else if (evt.data === 'Right1') {
      e.style.color = 'black';
    }
   
    var e = document.getElementById('ForwardStatus15');
    if (evt.data === 'Forward1') {
      e.style.color = 'red';
    }
    else if (evt.data === 'Forward1') {
      e.style.color = 'black';
    }

    var e = document.getElementById('ReverseStatus16');
        if (evt.data === 'Reverse1') {
      e.style.color = 'red';
    }
    else if (evt.data === 'Reverse1') {
      e.style.color = 'black';
    }
   
    else {
      console.log('unknown event');
    }
  };
}
function buttonclick(e) {
  websock.send(e.id);
}
</script>
</head>
<body onload="javascript:start();">

<center>

<h1></h1>

<p style= "background-color:azure;  width:36 0px;  border:2px solid black; padding:0px; margin:0px; font-size:24px; color:Green;">

</b>

<button id="FFwd1" type="button" onclick="buttonclick(this);" style="width:150px; height: 50px; font-size: 30px; margin: 10px;">FFwd</button>
<br>
<button id="Forward1" type="button" onclick="buttonclick(this);" style="width:150px; height: 50px; font-size: 30px; margin: 20px;">Forward</button>
<br>
<button id="Left1"  type="button" onclick="buttonclick(this);" style="width:85px; height: 70px; font-size: 30px; margin: 18px;">L</button>
<button id="Stop1"  type="button" onclick="buttonclick(this);" style="width:85px; height: 70px; font-size: 25px; color: margin: 20px; color: red;">Stop</button>
<button id="Right1" type="button" onclick="buttonclick(this);" style="width:85px; height: 70px; font-size: 30px; margin: 18px;">R</button>
<br>
<button id="Reverse1"  type="button" onclick="buttonclick(this);" style="width:150px; height: 50px; font-size: 30px; margin: 20px;">Reverse</button>

</p>

</center>
</body>
</html>
)rawliteral";

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length)
{
  Serial.printf("webSocketEvent(%d, %d, ...)\r\n", num, type);
  switch(type) {
    case WStype_DISCONNECTED:
      Serial.printf("[%u] Disconnected!\r\n", num);
      break;
    case WStype_CONNECTED:
      {
        IPAddress ip = webSocket.remoteIP(num);
        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 FFwd status
        if (FFwdStatus12) {
          webSocket.sendTXT(num, FFwd1, strlen(FFwd1));
        }
        else {
          webSocket.sendTXT(num, Stop1, strlen(Stop1));
        }
        // Send the current Left status
        if (LeftStatus13) {
          webSocket.sendTXT(num, Left1, strlen(Left1));
        }
        else {
          webSocket.sendTXT(num, Stop1, strlen(Stop1));
        }
        // Send the current Right status
        if (RightStatus14) {
          webSocket.sendTXT(num, Right1, strlen(Right1));
        }
        else {
          webSocket.sendTXT(num, Stop1, strlen(Stop1));
        }
        // Send the current Forward status
        if (ForwardStatus15) {
          webSocket.sendTXT(num, Forward1, strlen(Forward1));
        }
        else {
          webSocket.sendTXT(num, Stop1, strlen(Stop1));
        }
        // Send the current Reverse status
        if (ReverseStatus16) {
          webSocket.sendTXT(num, Reverse1, strlen(Reverse1));
        }
        else {
          webSocket.sendTXT(num, Stop1, strlen(Stop1));
        }
      }
      break;
    case WStype_TEXT:
      Serial.printf("[%u] get Text: %s\r\n", num, payload);

      if (strcmp(FFwd1, (const char *)payload) == 0)
      {
        writeMotorFFwd(true);
      }

      else if (strcmp(Left1, (const char *)payload) == 0)
      {
        writeMotorLeft(true);
      }
      else if (strcmp(Right1, (const char *)payload) == 0)
      {
        writeMotorRight(true);
      }
      else if (strcmp(Forward1, (const char *)payload) == 0)
      {
        writeMotorForward(true);
      }
      else if (strcmp(Reverse1, (const char *)payload) == 0)
      {
        writeMotorReverse(true);
      }

      else if (strcmp(Stop1, (const char *)payload) == 0)
      {
        writeMotorFFwd(false);
        writeMotorLeft(false);
        writeMotorRight(false);
        writeMotorForward(false);
        writeMotorReverse(false);
      }

     else {
        Serial.println("Unknown command");
      }
     
      // send data to all connected clients
      webSocket.broadcastTXT(payload, length);
      break;
    case WStype_BIN:
      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:
      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 writeMotorFFwd(bool FFwd1)
  {
    FFwdStatus12 = FFwd1;
   
      if (FFwd1)
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        delay (250);
        Motor1->run(FORWARD);
        Motor2->run(FORWARD);
        Motor1->setSpeed(250);
        Motor2->setSpeed(250);
        Serial.println("FFwd");
        }       
      else
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        Serial.println("Stop");               
        }
  }

static void writeMotorLeft(bool Left1)
  {
    LeftStatus13 = Left1;
   
      if (Left1)
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        delay (250);
        Motor1->run(FORWARD);
        Motor2->run(BACKWARD);
        Motor1->setSpeed(150);
        Motor2->setSpeed(150);
        Serial.println("Left");
        }       
      else
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        Serial.println("Stop");               
        }
  }
 

static void writeMotorRight(bool Right1)
  {
    RightStatus14 = Right1;
   
      if (Right1)
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        delay (250);
        Motor1->run(BACKWARD);
        Motor2->run(FORWARD);
        Motor1->setSpeed(150);
        Motor2->setSpeed(150);
        Serial.println("Right");
        }       
      else
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        Serial.println("Stop");               
        }
  }
 

static void writeMotorForward(bool Forward1)
  {
    ForwardStatus15 = Forward1;
   
      if (Forward1)
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        delay (250);
        Motor1->run(FORWARD);
        Motor2->run(FORWARD);
        Motor1->setSpeed(150);
        Motor2->setSpeed(150);
        Serial.println("Forward");
        }       
      else
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        Serial.println("Stop");               
        }
  }

static void writeMotorReverse(bool Reverse1)
  {
    ReverseStatus16 = Reverse1;
 
      if (Reverse1)
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        delay (250);
        Motor1->run(BACKWARD);
        Motor2->run(BACKWARD);
        Motor1->setSpeed(150);
        Motor2->setSpeed(150);
        Serial.println("Reverse");
        }
      else
        {
        Motor1->run(RELEASE);
        Motor2->run(RELEASE);
        Serial.println("Stop");
        }
  }

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

void setup()
{
  Serial.begin(9600);
  Serial.println();
  Serial.println();
  Serial.println("Websocket Motor Shield");
  Wire.begin(sda,scl);
 
///////////initial settings of the pins on bootup go here//////////////////

  AFMS.begin();  // default frequency 1.6KHz
  Motor1->run(RELEASE);
  Motor2->run(RELEASE);
 
  //Serial.setDebugOutput(true);

  Serial.println();
  Serial.println();
  Serial.println();

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

  WiFiMulti.addAP(ssid, password);

  while(WiFiMulti.run() != WL_CONNECTED) {
    Serial.print(".");
    delay(100);
  }

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

  if (mdns.begin("espWebSock", WiFi.localIP())) {
    Serial.println("MDNS responder started");
    mdns.addService("http", "tcp", 80);                                                       ////////////82 works online and in LAN//////////////////////////////////////////////
    mdns.addService("ws", "tcp", 81);                                                         ////////////83 works online and in LAN//////////////////////////////////////////////
  }
  else {
    Serial.println("MDNS.begin failed");
  }
  Serial.print("Connect to http://espWebSock.local or http://");
  Serial.println(WiFi.localIP());

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

  server.begin();

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

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

Re: How do I add my webcam image to my Robot Control Webpage

PostPosted: Tue Apr 17, 2018 8:51 am
by kaxx1975
There is something about the http reference that is conflicting with the writeMotorForward, writemotorleft, etc. variables. If I take out the word "http" in the iframe reference, there is no longer a conflict and the sketch uploads fine but then I lose my button outputs. I'm really trying to figure this out, does anyone have any recommendations?
All times are UTC - 5 hours
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/