Merge pull request #81 from DIT112-V21/rover-camera-feed

Implement live feed
DIT112-V21 · May 1, 2021 · f1dc708 · f1dc708
2 parents 3bfa71d + 83996e2
commit f1dc708
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 21 deletions.
diff --git a/arduino/smartcar/secrets.hpp b/arduino/smartcar/secrets.hpp
@@ -1,5 +1,5 @@
 #pragma once
-const char host[] = "aerostun.dev";
+const char host[] = "localhost";
 const int port = 1883;
 const char clientId[] = "clientId_Hes24TQfz";
 const char username[] = "group09";

diff --git a/arduino/smartcar/smartcar.ino b/arduino/smartcar/smartcar.ino
@@ -99,7 +99,7 @@ void setup()
 
   // Start the camera and connect to MQTT broker
   #ifdef __SMCE__
-    Camera.begin(QVGA, RGB888, 15);
+    Camera.begin(VGA, RGB888, 30);
     frameBuffer.resize(Camera.width() * Camera.height() * Camera.bytesPerPixel());
     mqtt.setKeepAlive(30);
     mqtt.begin(host, port, WiFi);

diff --git a/frontendApp/assets/js/communication.js b/frontendApp/assets/js/communication.js
@@ -96,24 +96,27 @@ function onConnect () {
 				  console.log("Camera")
 				  canvas = document.getElementById('cameraCanvas');
 				  ctx = canvas.getContext('2d');
+
+				  const width = 640;
+				  const height = 480;
+
+				  const arrayBuffer = new ArrayBuffer(width * height * 4);
+				  const pixels = new Uint8ClampedArray(arrayBuffer);
+				  var n = 0;	
+
+				  for (var i = 0; i < message.length; i += 3)
+					{
+						n += 4;
+						pixels[n] = message[i];
+						pixels[n + 1] = message[i + 1];
+						pixels[n + 2] = message[i + 2];
+						pixels[n + 3] = 255;
 
-				  const width = 320;
-				  const height = 240;
-
-				  const imageData = ctx.getImageData(0, 0, width, height);
-				  const data = message;
-				  for (var x = 0; x < width; x++) {
-						for (var y = 0; y < height; y++) {
-							var i = (x + y * width) * 3;
-							var r = message[i + 0];
-							var g = message[i + 1];
-							var b = message[i + 2];
-
-							ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
-							ctx.fillRect(x, y, 1, 1);
-						}
-				  } 
-
+					}
+
+				  const imageData = new ImageData(pixels, width, height);
+				  ctx.putImageData(imageData, 0, 0);
+
 			  } else {
 				const msg = `${message.toString()}\nOn topic: ${topic}`
 

diff --git a/frontendApp/manual.html b/frontendApp/manual.html
@@ -40,8 +40,7 @@ <h3 class="panel-title">Live Stream</h3>
 					<div id="nasaStream" class="nasa-stream panel-body"><iframe style="display: block; margin: 0 auto;" width="480" height="302" align="middle" src="http://ustream.tv/embed/6540154?forced-quality=high&html5ui=1" scrolling="no" allowfullscreen webkitallowfullscreen frameborder="0" style="border: 0 none transparent;"></iframe>
 					</div>
 					<div id="roverStream" class="camera-stream panel-body">
-						<canvas id="cameraCanvas" width="320" height="240">
-						</canvas>
+						<canvas id="cameraCanvas" width="640" height="480"></canvas>
 					</div>
 				</div>
 			</div>