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});
});
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) {
}
})
+ $(".imagelink").on('click',function(){
+ // reload
+ $("img").attr("src", $("img").attr("src"))
+ });
}
Vue.component('input-value', {
<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>
<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>