www: Force readonly on colorpicker fields

[ros_wild_thumper.git] / www / index.html

diff --git a/www/index.html b/www/index.html
index 87da1eaf2281a5f03543f67c4ef218d8af046f82..a3b7c4229a49d1146c9f8f879bc83728d202e431 100644 (file)
--- a/www/index.html
+++ b/www/index.html
@@ -121,7 +121,7 @@
                        });
 
                        // Initialize the teleop.
-                       var teleop = new KEYBOARDTELEOP.Teleop({
+                       teleop = new KEYBOARDTELEOP.Teleop({
                                ros : ros,
                                topic : '/cmd_vel'
                        });
@@ -129,20 +129,21 @@
                        // Create a UI slider using JQuery UI.
                        $('#speed-slider').slider({
                                range : 'min',
-                               min : 0,
-                               max : 100,
-                               value : 50,
+                               min : 0.10,
+                               max : 1.0,
+                               step : 0.05,
+                               value : 0.5,
                                slide : function(event, ui) {
                                        // Change the speed label.
-                                       $('#speed-label').html('Speed: ' + ui.value + '%');
+                                       $('#speed-label').html('Speed: ' + ui.value + ' m/s');
                                        // Scale the speed.
-                                       teleop.scale = (ui.value / 100.0);
+                                       teleop.scale = (ui.value * 2);
                                }
                        });
 
                        // Set the initial speed.
-                       $('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + '%');
-                       teleop.scale = ($('#speed-slider').slider('value') / 100.0);
+                       $('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + ' m/s');
+                       teleop.scale = ($('#speed-slider').slider('value') * 2);
 
                        $('.led_color').minicolors({
                                control: 'wheel',
@@ -253,67 +254,67 @@
                                        <div class="row">
                                                <div class="col-md-2 offset-md-1" >
                                                        <div class="d-flex justify-content-center">
-                                                               <input class="led_color" type="hidden" name="[0]"/>
-                                                               <input class="led_color" type="hidden" name="[1]"/>
-                                                               <input class="led_color" type="hidden" name="[2]"/>
-                                                               <input class="led_color" type="hidden" name="[3]"/>
+                                                               <input class="led_color" type="hidden" name="[0]" readonly="true"/>
+                                                               <input class="led_color" type="hidden" name="[1]" readonly="true"/>
+                                                               <input class="led_color" type="hidden" name="[2]" readonly="true"/>
+                                                               <input class="led_color" type="hidden" name="[3]" readonly="true"/>
                                                        </div>
                                                        <div>
                                                                <div class="row wt-icon">
                                                                        <div class="col-md-2 align-self-center bottom-leds">
-                                                                               <input class="led_color" type="hidden" name="[14]"/>
-                                                                               <input class="led_color" type="hidden" name="[15]"/>
+                                                                               <input class="led_color" type="hidden" name="[14]" readonly="true"/>
+                                                                               <input class="led_color" type="hidden" name="[15]" readonly="true"/>
                                                                        </div>
                                                                        <div class="col-md-8">
                                                                                <div class="d-flex justify-content-center top-leds">
-                                                                                       <input class="led_color" type="hidden" name="[7]"/>
-                                                                                       <input class="led_color" type="hidden" name="[6]"/>
-                                                                                       <input class="led_color" type="hidden" name="[5]"/>
-                                                                                       <input class="led_color" type="hidden" name="[4]"/>
+                                                                                       <input class="led_color" type="hidden" name="[7]" readonly="true"/>
+                                                                                       <input class="led_color" type="hidden" name="[6]" readonly="true"/>
+                                                                                       <input class="led_color" type="hidden" name="[5]" readonly="true"/>
+                                                                                       <input class="led_color" type="hidden" name="[4]" readonly="true"/>
                                                                                </div>
                                                                        </div>
                                                                        <div class="col-md-2 align-self-center bottom-leds">
-                                                                               <input class="led_color" type="hidden" name="[13]"/>
-                                                                               <input class="led_color" type="hidden" name="[12]"/>
+                                                                               <input class="led_color" type="hidden" name="[13]" readonly="true"/>
+                                                                               <input class="led_color" type="hidden" name="[12]" readonly="true"/>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                        <div class="d-flex justify-content-center">
-                                                               <input class="led_color" type="hidden" name="[8]"/>
-                                                               <input class="led_color" type="hidden" name="[9]"/>
-                                                               <input class="led_color" type="hidden" name="[10]"/>
-                                                               <input class="led_color" type="hidden" name="[11]"/>
+                                                               <input class="led_color" type="hidden" name="[8]" readonly="true"/>
+                                                               <input class="led_color" type="hidden" name="[9]" readonly="true"/>
+                                                               <input class="led_color" type="hidden" name="[10]" readonly="true"/>
+                                                               <input class="led_color" type="hidden" name="[11]" readonly="true"/>
                                                        </div>
                                                </div>
                                                <div class="col-md-3 offset-md-1">
                                                        <div class="form-group row">
                                                                <label class="col-sm-2 col-form-label">Alle</label>
                                                                <div class="col-sm-10">
-                                                                       <input class="led_color" type="text" name="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" class="form-control"/>
+                                                                       <input class="led_color" type="text" name="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" class="form-control" readonly="true"/>
                                                                </div>
                                                        </div>
                                                        <div class="form-group row">
                                                                <label class="col-sm-2 col-form-label">Front</label>
                                                                <div class="col-sm-10">
-                                                                       <input class="led_color" type="text" name="[0, 1, 2, 3]" class="form-control"/>
+                                                                       <input class="led_color" type="text" name="[0, 1, 2, 3]" class="form-control" readonly="true"/>
                                                                </div>
                                                        </div>
                                                        <div class="form-group row">
                                                                <label class="col-sm-2 col-form-label">Aft</label>
                                                                <div class="col-sm-10">
-                                                                       <input class="led_color" type="text" name="[8, 9, 10, 11]" class="form-control"/>
+                                                                       <input class="led_color" type="text" name="[8, 9, 10, 11]" class="form-control readonly="true""/>
                                                                </div>
                                                        </div>
                                                        <div class="form-group row">
                                                                <label class="col-sm-2 col-form-label">Top</label>
                                                                <div class="col-sm-10">
-                                                                       <input class="led_color" type="text" name="[4, 5, 6, 7]" class="form-control"/>
+                                                                       <input class="led_color" type="text" name="[4, 5, 6, 7]" class="form-control" readonly="true"/>
                                                                </div>
                                                        </div>
                                                        <div class="form-group row">
                                                                <label class="col-sm-2 col-form-label">Bottom</label>
                                                                <div class="col-sm-10">
-                                                                       <input class="led_color" type="text" name="[12, 13, 14, 15]" class="form-control"/>
+                                                                       <input class="led_color" type="text" name="[12, 13, 14, 15]" class="form-control" readonly="true"/>
                                                                </div>
                                                        </div>
                                                </div>