UI improvements:

* Improved pilot screen popup screens and layout dynamic under resizing.
* Improved LabelBar layout with rounded rectangle grey label backgrounds.

Author: DocGarbanzo

donkeycar/management/ui/common.kv

@@ -125,6 +125,7 @@
             radius: [10,]
     color: font_color
 
+
 <MySpinner>:
     text_size: self.size
     halign: 'center'
@@ -146,7 +147,6 @@
     size_hint: 1.0, 1.0
     auto_dismiss: False
     pos_hint: {'center_x': .5, 'center_y': .5}
-
     BoxLayout:
         orientation: "vertical"
         FileChooser:
@@ -161,10 +161,10 @@
             size_hint: (1, 0.1)
             pos_hint: {'center_x': .5, 'center_y': .5}
             spacing: 20
-            Button:
+            RoundedButton:
                 text: "Cancel"
                 on_release: root.dismiss()
-            Button:
+            RoundedButton:
                 text: "Load"
                 on_release: root.load(file_chooser.selection)
                 disabled: file_chooser.selection==[]
@@ -173,44 +173,38 @@
 <LabelBar>:
     orientation: 'horizontal'
     spacing: 4
-    Label:
+    MyLabel:
         id: field_label
         text_size: self.size
         halign: 'left'
         valign: 'middle'
-        font_size: '14sp'
+        font_size: '12sp'
         canvas.before:
             Color:
-                rgba: 0.17, 0.18, 0.25, 1
-            Rectangle:
+                rgba: 0.13, 0.14, 0.15, 1
+            RoundedRectangle:
                 pos: self.pos
                 size: self.size
-    Label:
+                radius: [5,]
+    MyLabel:
         id: value_label
         text_size: self.size
         halign: 'right'
         valign: 'middle'
-        font_size: '14sp'
+        font_size: '12sp'
         size_hint_x: 0.8
         padding_x: 10
         canvas.before:
             Color:
-                rgba: 0.14, 0.15, 0.22, 1
-            Rectangle:
+                rgba: 0.13, 0.14, 0.15, 1
+            RoundedRectangle:
                 pos: self.pos
                 size: self.size
+                radius: [5,]
     ProgressBar:
         id: bar
-        canvas.before:
-            Color:
-                rgba: 0.12, 0.13, 0.20, 1
-            Rectangle:
-                pos: self.pos
-                size: self.size
 
 <-FullImage>:
-#    size_hint_x: 1.2
-#    size_hint_y: 1.2
     canvas:
         Color:
             rgb: (1, 1, 1)
@@ -222,16 +216,17 @@
 
 <DataPanel>
     orientation: 'vertical'
+    spacing: 2
     GridLayout:
         cols: 2
         MyLabel:
             text: 'Record field'
             size_hint_y: None
-            height: common_height
+            height: 20
         MySpinner:
             id: data_spinner
             size_hint_y: None
-            height: common_height
+            height: 20
             text: root.auto_text if root.link else 'Add/remove'
             on_text: root.add_remove()
             on_values: root.clear()

donkeycar/management/ui/layout_screen.kv

@@ -22,9 +22,9 @@
 
 
 <TransformationPopup>:
-    size_hint: 1.0, 1.0
+    size_hint: 0.5, 1.0
     auto_dismiss: False
-    pos_hint: {'center_x': .5, 'center_y': .5}
+    pos_hint: {'center_x': .25 if self.right else 0.75, 'center_y': .5}
 
     BoxLayout:
         orientation: "horizontal"
@@ -37,6 +37,7 @@
             orientation: 'vertical'
             spacing: 20
             BoxLayout:
+                spacing: 10
                 orientation: 'vertical'
                 id: trafo_list
             RoundedButton:
@@ -52,13 +53,13 @@
         padding: 10
         spacing: 10
         BackgroundBoxLayout:
-            size_hint_y: 0.25
+            size_hint_y: None
+            height: self.minimum_height + layout_height
             Header:
-                title: 'Pilot Loader'
+                title: 'Multi Pilot Loader'
                 description:
                     'Load pilots from the Trainer screen and compare the model '\
-                    'inferencing with the recorded user data.'
-
+                    'inference with the recorded user data.'
         BoxLayout:
             orientation: 'horizontal'
             size_hint_y: 1.5
@@ -76,6 +77,8 @@
                     throttle_field: data_in.throttle_field
                     is_left: True
                 DataPanel:
+                    size_hint_y: None
+                    height: self.minimum_height + 60
                     id: data_panel_1
                     screen: root
                     record: img_1.pilot_record
@@ -95,6 +98,8 @@
                     throttle_field: data_in.throttle_field
                     is_left: False
                 DataPanel:
+                    size_hint_y: None
+                    height: self.minimum_height + 60
                     id: data_panel_2
                     screen: root
                     record: img_1.pilot_record
@@ -104,7 +109,8 @@
 
         BackgroundBoxLayout:
             orientation: 'vertical'
-            size_hint_y: 0.5
+            size_hint_y: None
+            height: self.minimum_height + common_height
             Header:
                 title: 'Augmentations and Transformations'
                 description:
@@ -160,7 +166,8 @@
 
         BackgroundBoxLayout:
             orientation: 'vertical'
-            size_hint_y: 0.75
+            size_hint_y: None
+            height: self.minimum_height + 90
             Slider:
                 size_hint_y: None
                 height: common_height

donkeycar/management/ui/layout_screen.py

@@ -145,6 +145,7 @@ class TransformationPopup(Popup):
          "GRAY2BGR", "CANNY", "BLUR", "RESIZE", "SCALE", "GAMMANORM"]
     transformations_obj = ObjectProperty()
     selected = ListProperty()
+    right = BooleanProperty()
 
     def __init__(self, selected, **kwargs):
         super().__init__(**kwargs)
@@ -178,7 +179,7 @@ class Transformations(RoundedButton):
 
     def open_popup(self):
         popup = TransformationPopup(title=self.title, transformations_obj=self,
-                                    selected=self.selected)
+                                    selected=self.selected, right=self.is_post)
         popup.open()
 
     def on_selected(self, obj, select):