Merge WebUI buttons changes

- merged from #1026
- provided 5 programmable buttons in the webui.

donkeycar/memory.py

@@ -14,13 +14,14 @@ def __init__(self, *args, **kw):
         self.d = {}
 
     def __setitem__(self, key, value):
-        if type(key) is not tuple:
-            print('tuples')
-            key = (key,)
-            value=(value,)
-
-        for i, k in enumerate(key):
-            self.d[k] = value[i]
+        if type(key) is str:
+            self.d[key] = value
+        else:
+            if type(key) is not tuple:
+                key = tuple(key)
+                value = tuple(key)
+            for i, k in enumerate(key):
+                self.d[k] = value[i]
 
     def __getitem__(self, key):
         if type(key) is tuple:

donkeycar/parts/explode.py

@@ -0,0 +1,22 @@
+#
+# part that executes a no-arg method when a button is clicked
+#
+
+
+class ExplodeDict:
+    def __init__(self, memory, output_prefix = ""):
+        """
+        Break a map into key/value pairs and write
+        them to the output memory, optionally
+        prefixing the key on output.
+        Basically, take a dictionary and write
+        it to the output.
+        """
+        self.memory = memory
+        self.prefix = output_prefix
+
+    def run(self, key_values):
+        if type(key_values) is dict:
+            for key in key_values:
+                self.memory[self.prefix + key] = key_values[key]
+        return None

donkeycar/parts/web_controller/templates/base.html

@@ -32,12 +32,6 @@
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
       <a class="navbar-brand" href="/">Donkey</a>
     </div>
 

donkeycar/parts/web_controller/templates/static/main.js

@@ -1,26 +1,34 @@
 var driveHandler = new function() {
     //functions used to drive the vehicle. 
 
-    var state = {'tele': {
-                          "user": {
-                                  'angle': 0,
-                                  'throttle': 0,
-                                  },
-                          "pilot": {
-                                  'angle': 0,
-                                  'throttle': 0,
-                                  }
-                          },
-                  'brakeOn': true,
-                  'recording': false,
-                  'driveMode': "user",
-                  'pilot': 'None',
-                  'session': 'None',
-                  'lag': 0,
-                  'controlMode': 'joystick',
-                  'maxThrottle' : 1,
-                  'throttleMode' : 'user',
-                  }
+    var state = {
+        'tele': {
+            "user": {
+                'angle': 0,
+                'throttle': 0,
+            },
+            "pilot": {
+                'angle': 0,
+                'throttle': 0,
+            }
+        },
+        'brakeOn': true,
+        'recording': false,
+        'driveMode': "user",
+        'pilot': 'None',
+        'session': 'None',
+        'lag': 0,
+        'controlMode': 'joystick',
+        'maxThrottle' : 1,
+        'throttleMode' : 'user',
+        'buttons': {
+            "w1": false,  // boolean; true is 'down' or pushed, false is 'up' or not pushed
+            "w2": false,
+            "w3": false,
+            "w4": false,
+            "w5": false,
+        }
+    }
 
     var joystick_options = {}
     var joystickLoopRunning=false;
@@ -40,10 +48,14 @@ var driveHandler = new function() {
 
       setBindings()
 
+      joystick_element = document.getElementById('joystick_container');
       joystick_options = {
-        zone: document.getElementById('joystick_container'),  // active zone
+        zone: joystick_element,  // active zone
+        mode: 'dynamic',
+        size: 200,
         color: '#668AED',
-        size: 350,
+        dynamicPage: true,
+        follow: true,
       };
 
       var manager = nipplejs.create(joystick_options);
@@ -148,19 +160,34 @@ var driveHandler = new function() {
           joystickLoopRunning = true;
           console.log('joystick mode');
           joystickLoop();
-        } else if (this.value == 'tilt' && deviceHasOrientation) {
+        } else {
           joystickLoopRunning = false;
+        }
+
+        if (deviceHasOrientation && this.value == 'tilt') {
           state.controlMode = "tilt";
           console.log('tilt mode')
-        } else if (this.value == 'gamepad' && hasGamepad) {
-          joystickLoopRunning = false;
+        }
+
+        if (hasGamepad && this.value == 'gamepad') {
           state.controlMode = "gamepad";
           console.log('gamepad mode')
           gamePadLoop();
         }
         updateUI();
       });
 
+      // programmable buttons
+      $('#button_bar > button').mousedown(function() {
+        console.log(`${$(this).attr('id')} mousedown`);
+        state.buttons[$(this).attr('id')] = true;
+        postDrive(["buttons"]); // write it back to the server
+      });
+      $('#button_bar > button').mouseup(function() {
+        console.log(`${$(this).attr('id')} mouseup`);
+        state.buttons[$(this).attr('id')] = false;
+        postDrive(["buttons"]); // write it back to the server
+      });
     };
 
 
@@ -272,23 +299,27 @@ var driveHandler = new function() {
       }
 
       if (state.controlMode == "joystick") {
-        $('#joystick-column').show();
-        $('#tilt-toggle').removeClass("active");
+        $('#joystick_outer').show();
         $('#joystick-toggle').addClass("active");
         $('#joystick').attr("checked", "checked")
-        $('#tilt').removeAttr("checked")
-      } else if (state.controlMode == "tilt") {
-        $('#joystick-column').hide();
+      } else {
+        $('#joystick_outer').hide();
         $('#joystick-toggle').removeClass("active");
-        $('#tilt-toggle').addClass("active");
         $('#joystick').removeAttr("checked");
+      }
+
+      if (state.controlMode == "tilt") {
+        $('#tilt-toggle').addClass("active");
         $('#tilt').attr("checked", "checked");
+      } else {
+        $('#tilt-toggle').removeClass("active");
+        $('#tilt').removeAttr("checked")
       }
 
       //drawLine(state.tele.user.angle, state.tele.user.throttle)
     };
 
-    const ALL_POST_FIELDS = ['angle', 'throttle', 'drive_mode', 'recording'];
+    const ALL_POST_FIELDS = ['angle', 'throttle', 'drive_mode', 'recording', 'buttons'];
 
     //
     // Set any changed properties to the server
@@ -307,12 +338,14 @@ var driveHandler = new function() {
                 case 'throttle': data['throttle'] = state.tele.user.throttle; break;
                 case 'drive_mode': data['drive_mode'] = state.driveMode; break;
                 case 'recording': data['recording'] = state.recording; break;
+                case 'buttons': data['buttons'] = state.buttons; break;
                 default: console.log(`Unexpected post field: '${field}'`); break;
             }
         });
         if(data) {
-            console.log(`Posting ${data}`);
-            socket.send(JSON.stringify(data))
+            let json_data = JSON.stringify(data);
+            console.log(`Posting ${json_data}`);
+            socket.send(json_data)
             updateUI()
         }
     };

donkeycar/parts/web_controller/templates/static/style.css

@@ -5,7 +5,7 @@
 		bottom:100; 
 		right:0;*/
 		width:100%; 
-		height:40%;
+		height:0;
 
 	}
 
@@ -14,23 +14,44 @@
 	}
 }
 
+/* override bootstrap */
+form {
+    margin-bottom: 0.5em;
+}
+.form-control {
+    display: inline;
+    width: auto;
+    padding: 0.25em 0.25em
+}
+
+#button_bar button {
+    display: inline-block;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+}
+
 #controls-column {
 	margin-top:10px;
 }
 #control-bars {
 	margin-top:10px;
 }
 .group-label {
-	width:100%;
+	width:auto;
+}
+
+#control-bars > div {
+    display: inline;
 }
 
 /* this setting is too large on iPhone5s */
 #control-bars .progress {
-	width: 40%;
+	width: 15%;
 }
 
 #control-bars .glyphicon {
-	margin-right: 3px;
+    margin-left: 1.5em;
+	margin-right: 0.5em;
 }
 
 #control-bars .progress.negative {
@@ -40,6 +61,7 @@
 }
 
 #control-bars .progress.positive {
+	float: left;
 	border-top-left-radius: 0px;
 	border-bottom-left-radius: 0px;
 }
@@ -54,8 +76,9 @@
 
 #joystick_container {
 	text-align: center;
-	height: 335px;
-	padding-top: 155px;
+	width: 100%;
+	height: 17em;
+	padding-top: 8em;
 	border-color: #bce8f1;
 	background-color: #d9edf7;
 }