www: speed control

[ros_wild_thumper.git] / www / assets / javascripts / application.js

diff --git a/www/assets/javascripts/application.js b/www/assets/javascripts/application.js
index eed4a38f4a565d1d3a121920a3bd1d5254751ef5..2fc417603ea6f876252041e5240209263a38e466 100644 (file)
--- 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) {
@@ -114,6 +121,16 @@ function init() {
        // Set the initial speed.
        teleop.scale = ($('#speed-slider').slider('value') * 2);
 
+       new Vue({
+               el: '#lights',
+               data: {
+                       front_row: ["[0]", "[1]", "[2]", "[3]"],
+                       top_row: ["[7]", "[6]", "[5]", "[4]"],
+                       aft_row: ["[8]", "[9]", "[10]", "[11]"],
+                       bottom_left_row: ["[14]", "[15]"],
+                       bottom_right_row: ["[13]", "[12]"],
+               }
+       })
        $('.led_color').minicolors({
                control: 'wheel',
                format: 'rgb',
@@ -172,12 +189,12 @@ function init() {
                                Y = e.pageY;
                        }
                        // relative click position
-                       var Xrel = X - this.offsetLeft - $(this).width()/2; 
-                       var Yrel = Y - this.offsetTop - $(this).height()/2; 
+                       var Xrel = X - this.getBoundingClientRect().left - $(this).width()/2;
+                       var Yrel = Y - this.getBoundingClientRect().top - $(this).height()/2;
                        // scale to -1..+1
                        var trans = -Yrel / ($(this).height()/2);
                        var rot = -Xrel / ($(this).width()/2);
-                       setSpeed(trans, rot*3);
+                       setSpeed(trans*$("#scale_trans").val(), rot*$("#scale_rot").val());
                }
        });
 
@@ -216,4 +233,21 @@ function init() {
                        speed: $('#speed-slider').slider('value'),
                }
        })
+
+       $(".imagelink").on('click',function(){
+               // reload
+               $("img").attr("src", $("img").attr("src"))
+       });
+
+       $("input[type='number']").spinner();
 }
+
+Vue.component('input-value', {
+       template: '#input-value-template',
+       props: ['value', 'label', 'unit']
+})
+
+Vue.component('input-led', {
+       template: '#input-led-template',
+       props: ['name', 'label']
+})