Change pose control layouts

mithi · Apr 9, 2020 · d1d1ae1 · d1d1ae1
1 parent 987ee92
commit d1d1ae1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 30 deletions.
diff --git a/widgets/pose_control/generic_daq_slider_ui.py b/widgets/pose_control/generic_daq_slider_ui.py
@@ -14,26 +14,40 @@
 JOINT_INPUTS = make_all_joint_inputs(joint_input_function=make_joint_daq_slider_input)
 
 
-def make_leg_sections():
-    sections = [html.Br(), html.Br()]
-
-    for leg in NAMES_LEG:
-        header = html.Label(dcc.Markdown(f"**`{leg.upper()}`**"))
-        coxia = JOINT_INPUTS[leg]["coxia"]
-        femur = JOINT_INPUTS[leg]["femur"]
-        tibia = JOINT_INPUTS[leg]["tibia"]
-        section = make_section_type4(header, coxia, femur, tibia)
-        sections.append(section)
-        sections.append(html.Br())
-
-    return html.Div(sections)
-
-
-# section displaying all legs
-SECTION_LEG_SLIDERS = make_leg_sections()
-
-SECTION_POSE_CONTROL = html.Div(
-    [html.Label(dcc.Markdown("**KINEMATICS CONTROL**")), SECTION_LEG_SLIDERS, html.Br()]
+def code(name):
+    return dcc.Markdown(f"`{name}`")
+
+
+def make_leg_section(name):
+    coxia = JOINT_INPUTS[name]["coxia"]
+    femur = JOINT_INPUTS[name]["femur"]
+    tibia = JOINT_INPUTS[name]["tibia"]
+
+    return html.Div(
+        [
+            make_section_type3(
+                coxia, femur, tibia, code("coxia"), code("femur"), code("tibia")
+            ),
+            html.Label(dcc.Markdown(f"**`{name.upper()}`**"), style={"padding": "1em"}),
+        ]
+    )
+
+
+lf = make_leg_section("left-front")
+rf = make_leg_section("right-front")
+lm = make_leg_section("left-middle")
+rm = make_leg_section("right-middle")
+lb = make_leg_section("left-back")
+rb = make_leg_section("right-back")
+
+header = html.Label(dcc.Markdown("**KINEMATICS CONTROL**"))
+sliders = html.Div(
+    [
+        make_section_type2(lf, rf),
+        make_section_type2(lm, rm),
+        make_section_type2(lb, rb),
+    ],
+    style={"padding": "0 0 0 3em"},
 )
 
-SECTION_POSE_CONTROL_DAQ = html.Div([SECTION_LEG_SLIDERS, html.Br()])
+SECTION_POSE_CONTROL = html.Div([header, sliders])
diff --git a/widgets/pose_control/generic_input_ui.py b/widgets/pose_control/generic_input_ui.py
@@ -14,7 +14,7 @@
 
 
 def code(name):
-    return dcc.Markdown("**`{}`**".format(name))
+    return dcc.Markdown(f"`{name}`")
 
 
 def make_leg_section(name):
@@ -24,10 +24,10 @@ def make_leg_section(name):
 
     return html.Div(
         [
-            html.H6(code("(" + name + ")")),
             make_section_type3(
                 coxia, femur, tibia, code("coxia"), code("femur"), code("tibia")
             ),
+            html.Label(name.upper(), style={"padding": "1em"}),
         ]
     )
 
@@ -39,6 +39,12 @@ def make_leg_section(name):
 lb = make_leg_section("left-back")
 rb = make_leg_section("right-back")
 
+header = html.Label(dcc.Markdown("**KINEMATICS CONTROL**"))
 SECTION_POSE_CONTROL = html.Div(
-    [make_section_type2(lf, rf), make_section_type2(lm, rm), make_section_type2(lb, rb)]
+    [
+        header,
+        make_section_type2(lf, rf),
+        make_section_type2(lm, rm),
+        make_section_type2(lb, rb),
+    ]
 )
diff --git a/widgets/pose_control/generic_slider_ui.py b/widgets/pose_control/generic_slider_ui.py
@@ -32,9 +32,7 @@ def make_leg_sections():
     return html.Div(sections)
 
 
-# section displaying all legs
+header = html.Label(dcc.Markdown("**KINEMATICS CONTROL**"))
 SECTION_LEG_SLIDERS = make_leg_sections()
 
-SECTION_POSE_CONTROL = html.Div(
-    [html.H4("Joint Angles (pose of each leg)"), SECTION_LEG_SLIDERS, html.Br()]
-)
+SECTION_POSE_CONTROL = html.Div([header, SECTION_LEG_SLIDERS])
diff --git a/widgets/pose_control/joint_input_maker.py b/widgets/pose_control/joint_input_maker.py
@@ -39,11 +39,12 @@ def make_joint_daq_slider_input(name, max_angle):
     _, _, _, angle = name.split("-")
     return dash_daq.Slider(  # pylint: disable=not-callable
         id=name,
+        vertical=True,
         min=-max_angle,
         max=max_angle,
         value=1.5,
         step=1.5,
-        size=150,
+        size=80,
         updatemode=UPDATE_MODE,
         handleLabel={"showCurrentValue": True, "label": angle},
     )
@@ -61,7 +62,6 @@ def make_joint_number_input(name, max_angle):
         id=name,
         type="number",
         value=0.0,
-        step=1.5,
         min=-max_angle,
         max=max_angle,
         style={"marginRight": "5%", "width": "95%", "marginBottom": "5%"},