Add graph UI width settings, naming changes

pages/page_inverse.py

@@ -1,4 +1,9 @@
-from settings import RECOMPUTE_HEXAPOD, PRINT_POSE_IN_TERMINAL
+from settings import (
+    RECOMPUTE_HEXAPOD,
+    UI_CONTROLS_WIDTH,
+    UI_GRAPH_WIDTH,
+    UI_GRAPH_HEIGHT,
+)
 
 import dash_core_components as dcc
 import dash_html_components as html
@@ -33,11 +38,14 @@
 
 layout = html.Div(
     [
-        html.Div(SECTION_CONTROLS, style={"width": "40%"}),
-        dcc.Graph(id="graph-hexapod-2", style={"width": "60%"}),
+        html.Div(SECTION_CONTROLS, style={"width": UI_CONTROLS_WIDTH}),
+        dcc.Graph(
+            id="graph-hexapod-2",
+            style={"width": UI_GRAPH_WIDTH, "height": UI_GRAPH_HEIGHT},
+        ),
         HIDDEN_BODY_DIMENSIONS,
     ],
-    style={"display": "flex"},
+    style={"display": "flex",},
 )
 
 # *********************

pages/page_kinematics.py

@@ -1,4 +1,10 @@
-from settings import WHICH_POSE_CONTROL_UI, PRINT_POSE_IN_TERMINAL
+from settings import (
+    WHICH_POSE_CONTROL_UI,
+    PRINT_POSE_IN_TERMINAL,
+    UI_CONTROLS_WIDTH,
+    UI_GRAPH_WIDTH,
+    UI_GRAPH_HEIGHT,
+)
 
 if WHICH_POSE_CONTROL_UI == 1:
     from widgets.pose_control.generic_slider_ui import SECTION_POSE_CONTROL
@@ -30,8 +36,11 @@
 
 layout = html.Div(
     [
-        html.Div(SECTION_CONTROLS, style={"width": "45%"}),
-        dcc.Graph(id="graph-hexapod", style={"width": "55%"}),
+        html.Div(SECTION_CONTROLS, style={"width": UI_CONTROLS_WIDTH}),
+        dcc.Graph(
+            id="graph-hexapod",
+            style={"width": UI_GRAPH_WIDTH, "height": UI_GRAPH_HEIGHT},
+        ),
         HIDDEN_JOINT_POSES,
         HIDDEN_BODY_DIMENSIONS,
     ],

pages/page_patterns.py

@@ -1,11 +1,11 @@
-from settings import PRINT_POSE_IN_TERMINAL
+from settings import UI_CONTROLS_WIDTH, UI_GRAPH_WIDTH, UI_GRAPH_HEIGHT
 
 import dash_core_components as dcc
 import dash_html_components as html
 from dash.dependencies import Input, Output, State
 
 from widgets.dimensions_ui import SECTION_DIMENSION_CONTROL, DIMENSION_INPUTS
-from widgets.leg_patterns_ui import SECTION_SLIDERS_TEST, SLIDERS_TEST_INPUTS
+from widgets.leg_patterns_ui import SECTION_LEG_POSE_SLIDERS, LEG_SLIDERS_INPUTS
 from hexapod.models import VirtualHexapod
 from hexapod.const import BASE_PLOTTER, BASE_FIGURE, NAMES_LEG
 
@@ -20,12 +20,15 @@
 # *********************
 ID_POSES_DIV = "hexapod-poses-values-patterns"
 HIDDEN_JOINT_POSES = html.Div(id=ID_POSES_DIV, style={"display": "none"})
-SECTION_CONTROLS = [SECTION_DIMENSION_CONTROL, SECTION_SLIDERS_TEST]
+SECTION_CONTROLS = [SECTION_DIMENSION_CONTROL, SECTION_LEG_POSE_SLIDERS]
 
 layout = html.Div(
     [
-        html.Div(SECTION_CONTROLS, style={"width": "35%"}),
-        dcc.Graph(id="graph-hexapod-3", style={"width": "65%"}),
+        html.Div(SECTION_CONTROLS, style={"width": UI_CONTROLS_WIDTH}),
+        dcc.Graph(
+            id="graph-hexapod-3",
+            style={"width": UI_GRAPH_WIDTH, "height": UI_GRAPH_HEIGHT},
+        ),
         HIDDEN_JOINT_POSES,
         HIDDEN_BODY_DIMENSIONS,
     ],
@@ -57,7 +60,7 @@ def update_patterns_page(dimensions_json, poses_json, relayout_data, figure):
 
 
 OUTPUT = Output(ID_POSES_DIV, "children")
-INPUTS = SLIDERS_TEST_INPUTS
+INPUTS = LEG_SLIDERS_INPUTS
 
 
 @app.callback(OUTPUT, INPUTS)

settings.py

@@ -43,10 +43,12 @@
 # Useful for debugging
 RECOMPUTE_HEXAPOD = True
 
-# Pick a number between 0 and 3
-# 0 - Using the daq slider UI
 # 1 - Using the generic slider UI
 # 2 - Using the generic input UI
-# 3 - Using the knob UI
 # Anything else defaults to Using the daq slider UI
-WHICH_POSE_CONTROL_UI = 0
+WHICH_POSE_CONTROL_UI = 2
+
+
+UI_GRAPH_HEIGHT = "600px"
+UI_GRAPH_WIDTH = "63%"
+UI_CONTROLS_WIDTH = "37%"

widgets/leg_patterns_ui.py

@@ -7,8 +7,8 @@
 from settings import UPDATE_MODE
 from .sectioning import make_section_type3
 
-SLIDERS_TEST_IDs = ["slider-alpha", "slider-beta", "slider-gamma"]
-SLIDERS_TEST_INPUTS = [Input(i, "value") for i in SLIDERS_TEST_IDs]
+LEG_SLIDERS_IDs = ["slider-alpha", "slider-beta", "slider-gamma"]
+LEG_SLIDERS_INPUTS = [Input(i, "value") for i in LEG_SLIDERS_IDs]
 
 
 def make_slider(name, max_angle):
@@ -21,18 +21,15 @@ def make_slider(name, max_angle):
         value=1.5,
         size=300,
         step=1.5,
-        vertical=True,
         updatemode=UPDATE_MODE,
         handleLabel=handle_label_items,
     )
 
-    return html.Div(daq_slider, style={"padding": "0 0 0 3.5em"})
+    return html.Div(daq_slider, style={"padding": "2em"})
 
 
 SLIDER_ALPHA = make_slider("slider-alpha", ALPHA_MAX_ANGLE)
 SLIDER_BETA = make_slider("slider-beta", BETA_MAX_ANGLE)
 SLIDER_GAMMA = make_slider("slider-gamma", GAMMA_MAX_ANGLE)
 header = html.Label(dcc.Markdown("**LEG POSE CONTROL**"))
-SECTION_SLIDERS_TEST = html.Div(
-    [header, make_section_type3(SLIDER_ALPHA, SLIDER_BETA, SLIDER_GAMMA)]
-)
+SECTION_LEG_POSE_SLIDERS = html.Div([header, SLIDER_ALPHA, SLIDER_BETA, SLIDER_GAMMA])