From a627d4b5aa12d4ea4a72b2dd966237084c64d1e4 Mon Sep 17 00:00:00 2001
From: Erik Andresen <erik@vontaene.de>
Date: Fri, 28 Dec 2018 11:50:14 +0100
Subject: [PATCH] www: reconnect after error

---
 www/assets/javascripts/application.js | 13 ++++++++++++-
 www/index.html                        |  6 ++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/www/assets/javascripts/application.js b/www/assets/javascripts/application.js
index 3f85f00..a7b4785 100644
--- a/www/assets/javascripts/application.js
+++ b/www/assets/javascripts/application.js
@@ -1,8 +1,12 @@
 function init() {
 	var ros = new ROSLIB.Ros();
-	ros.connect('ws://wildthumper:9090');
+	connect();
 	var isDragging = false;
 
+	function connect() {
+		ros.connect('ws://wildthumper:9090');
+	}
+
 	ros.on('connection', function() {
 		information.alerts.push({message: "Connected to websocket server.", success: true});
 	});
@@ -13,6 +17,9 @@ function init() {
 
 	ros.on('close', function() {
 		information.alerts.push({message: "Connection to websocket server closed.", info: true});
+		setTimeout(function() {
+			connect();
+		}, 2000);
 	});
 
 	//tfClient.subscribe('base_link', function(tf) {
@@ -227,6 +234,10 @@ function init() {
 		}
 	})
 
+	$(".imagelink").on('click',function(){
+		// reload
+		$("img").attr("src", $("img").attr("src"))
+	});
 }
 
 Vue.component('input-value', {
diff --git a/www/index.html b/www/index.html
index 8376405..7a86765 100644
--- a/www/index.html
+++ b/www/index.html
@@ -47,6 +47,9 @@
 					<li class="nav-item">
 						<a class="nav-link" href="#drive" data-toggle="tab" role="tab">Drive</a>
 					</li>
+					<li class="nav-item">
+						<a class="nav-link imagelink" href="#image" data-toggle="tab" role="tab">Image</a>
+					</li>
 				</ul>
 			</nav>
 
@@ -111,6 +114,9 @@
 				<div id="drive" class="tab-pane" role="tabpanel">
 					<div class="cmd_vel_circle"></div>
 				</div>
+				<div id="image" class="tab-pane" role="tabpanel">
+					<img id="usb_cam" src="http://wildthumper:8080/stream?topic=/usb_cam/image_raw" style="transform:rotate(-90deg); transform-origin: 60% 60%;"></img>
+				</div>
 			</div>
 		</div>
 	</body>
-- 
2.39.5