UI improvements. Fixes #1274.

Copybara import of the project: -- a1297d9 by Emo Todorov <etodorov@gmail.com>: UI imrovements When OpenGL buffer size is too small to hold entire UI with all sections open, older sections (as determined by latest mouse click) are automatically closed as needed. To test this new functionality, uncomment the test near the top of mjui_resize(). UI items now have userid, which can be used for event handling. It is set through the (new) last field of mjuiDef, called otherint. Sections titles can now have a checkmark - in which case they are rendered differently. Set via mjuiDef.otherint: 0- none (as before), 1- rendering changed but box not shown, 2- box shown. This can be used to label sections of special interest to the application. -- b0405bf by Emo Todorov <etodorov@gmail.com>: more ui improvements Implemented mjPRESERVE state for adding sections and separators, so you don't have to keep track of old states. simulate.cc is now modified to use this new functionality. I also made the separators in the Physics section collapsible. If you don't like it, change them back to state 1. Also added functionality for handling section checkboxes. -- 10f4c49 by Emo Todorov <etodorov@gmail.com>: even more ui improvements Selection boxes that extend below the current UI height are finally rendered in full. Sections and collapsible separators now have rounded corners. The radius can be controlled from theme spacing. More theme color settings were added. In particular, color gradients can now be disabled (the two end colors are set independently). -- 96c2dc6 by Emo Todorov <etodorov@gmail.com>: final ui improvements Cleaned up the code a bit. Added more control for color gradients. -- c9eddb6 by Emo Todorov <etodorov@gmail.com>: bug fix Fixed some rendering bugs in the new functionality. COPYBARA_INTEGRATE_REVIEW=#1749 from emotodorov:ui_improve ddfc21d PiperOrigin-RevId: 646060325 Change-Id: Idb27aae7cd0311d00f26387bcadf5891175e867d
google-deepmind · Jun 24, 2024 · ee6a1db · ee6a1db
1 parent e66b9a3
commit ee6a1db
Show file tree

Hide file tree

Showing 10 changed files with 927 additions and 416 deletions.
diff --git a/doc/APIreference/APItypes.rst b/doc/APIreference/APItypes.rst
@@ -582,6 +582,18 @@ Item types used in the UI framework.
 
 .. mujoco-include:: mjtItem
 
+
+.. _mjtSection:
+
+mjtSection
+~~~~~~~~~~
+
+State of a UI section.
+
+.. mujoco-include:: mjtSection
+
+
+
 .. _tySpecEnums:
 
 Spec

diff --git a/doc/includes/references.h b/doc/includes/references.h
@@ -2286,6 +2286,11 @@ typedef enum mjtItem_ {           // UI item type
 
   mjNITEM                         // number of item types
 } mjtItem;
+typedef enum mjtSection_ {        // UI section state
+  mjSECT_CLOSED = 0,              // closed state (regular section)
+  mjSECT_OPEN,                    // open state (regular section)
+  mjSECT_FIXED                    // fixed section: always open, no title
+} mjtSection;
 struct mjuiState_ {               // mouse and keyboard state
   // constants set by user
   int nrect;                      // number of rectangles used
@@ -2333,6 +2338,8 @@ struct mjuiThemeSpacing_ {        // UI visualization theme spacing
   int scroll;                     // scrollbar width
   int label;                      // label width
   int section;                    // section gap
+  int cornersect;                 // corner radius for section
+  int cornersep;                  // corner radius for separator
   int itemside;                   // item side gap
   int itemmid;                    // item middle gap
   int itemver;                    // item vertical gap
@@ -2346,9 +2353,14 @@ struct mjuiThemeColor_ {          // UI visualization theme color
   float master[3];                // master background
   float thumb[3];                 // scrollbar thumb
   float secttitle[3];             // section title
+  float secttitle2[3];            // section title: bottom color
+  float secttitlecheck[3];        // section title with checkbox
+  float secttitlecheck2[3];       // section title with checkbox: bottom color
   float sectfont[3];              // section font
   float sectsymbol[3];            // section symbol
   float sectpane[3];              // section pane
+  float separator[3];             // separator title
+  float separator2[3];            // separator title: bottom color
   float shortcut[3];              // shortcut background
   float fontactive[3];            // font active
   float fontinactive[3];          // font inactive
@@ -2398,6 +2410,7 @@ struct mjuiItem_ {                // UI item
   void *pdata;                    // data pointer (type-specific)
   int sectionid;                  // id of section containing item
   int itemid;                     // id of item within section
+  int userid;                     // user-supplied id (for event handling)
 
   // type-specific properties
   union {
@@ -2409,20 +2422,23 @@ struct mjuiItem_ {                // UI item
 
   // internal
   mjrRect rect;                   // rectangle occupied by item
+  int skip;                       // item skipped due to closed separator
 };
 typedef struct mjuiItem_ mjuiItem;
 struct mjuiSection_ {             // UI section
   // properties
   char name[mjMAXUINAME];         // name
-  int state;                      // 0: closed, 1: open
+  int state;                      // section state (mjtSection)
   int modifier;                   // 0: none, 1: control, 2: shift; 4: alt
   int shortcut;                   // shortcut key; 0: undefined
+  int checkbox;                   // 0: none, 1: hidden, 2: unchecked, 2: checked
   int nitem;                      // number of items in use
   mjuiItem item[mjMAXUIITEM];     // preallocated array of items
 
   // internal
   mjrRect rtitle;                 // rectangle occupied by title
   mjrRect rcontent;               // rectangle occupied by content
+  int lastclick;                  // last mouse click over this section
 };
 typedef struct mjuiSection_ mjuiSection;
 struct mjUI_ {                    // entire UI
@@ -2441,10 +2457,12 @@ struct mjUI_ {                    // entire UI
   int maxheight;                  // height when all sections open
   int scroll;                     // scroll from top of UI
 
-  // mouse focus
+  // mouse focus and count
   int mousesect;                  // 0: none, -1: scroll, otherwise 1+section
   int mouseitem;                  // item within section
   int mousehelp;                  // help button down: print shortcuts
+  int mouseclicks;                // number of mouse clicks over UI
+  int mousesectcheck;             // 0: none, otherwise 1+section
 
   // keyboard focus and edit
   int editsect;                   // 0: none, otherwise 1+section
@@ -2465,6 +2483,7 @@ struct mjuiDef_ {                 // table passed to mjui_add()
   int state;                      // state
   void* pdata;                    // pointer to data
   char other[mjMAXUITEXT];        // string with type-specific properties
+  int otherint;                   // int with type-specific properties
 };
 typedef struct mjuiDef_ mjuiDef;
 typedef enum mjtCatBit_ {         // bitflags for mjvGeom category

diff --git a/include/mujoco/mjui.h b/include/mujoco/mjui.h
@@ -26,6 +26,7 @@
 #define mjMAXUIRECT     25      // maximum number of rectangles
 
 #define mjSEPCLOSED     1000    // closed state of adjustable separator
+#define mjPRESERVE      2000    // preserve section or separator state
 
 
 // key codes matching GLFW (user must remap for other frameworks)
@@ -106,6 +107,13 @@ typedef enum mjtItem_ {           // UI item type
 } mjtItem;
 
 
+typedef enum mjtSection_ {        // UI section state
+  mjSECT_CLOSED = 0,              // closed state (regular section)
+  mjSECT_OPEN,                    // open state (regular section)
+  mjSECT_FIXED                    // fixed section: always open, no title
+} mjtSection;
+
+
 // predicate function: set enable/disable based on item category
 typedef int (*mjfItemEnable)(int category, void* data);
 
@@ -163,6 +171,8 @@ struct mjuiThemeSpacing_ {        // UI visualization theme spacing
   int scroll;                     // scrollbar width
   int label;                      // label width
   int section;                    // section gap
+  int cornersect;                 // corner radius for section
+  int cornersep;                  // corner radius for separator
   int itemside;                   // item side gap
   int itemmid;                    // item middle gap
   int itemver;                    // item vertical gap
@@ -180,9 +190,14 @@ struct mjuiThemeColor_ {          // UI visualization theme color
   float master[3];                // master background
   float thumb[3];                 // scrollbar thumb
   float secttitle[3];             // section title
+  float secttitle2[3];            // section title: bottom color
+  float secttitlecheck[3];        // section title with checkbox
+  float secttitlecheck2[3];       // section title with checkbox: bottom color
   float sectfont[3];              // section font
   float sectsymbol[3];            // section symbol
   float sectpane[3];              // section pane
+  float separator[3];             // separator title
+  float separator2[3];            // separator title: bottom color
   float shortcut[3];              // shortcut background
   float fontactive[3];            // font active
   float fontinactive[3];          // font inactive
@@ -236,6 +251,7 @@ struct mjuiItem_ {                // UI item
   void *pdata;                    // data pointer (type-specific)
   int sectionid;                  // id of section containing item
   int itemid;                     // id of item within section
+  int userid;                     // user-supplied id (for event handling)
 
   // type-specific properties
   union {
@@ -247,6 +263,7 @@ struct mjuiItem_ {                // UI item
 
   // internal
   mjrRect rect;                   // rectangle occupied by item
+  int skip;                       // item skipped due to closed separator
 };
 typedef struct mjuiItem_ mjuiItem;
 
@@ -256,15 +273,17 @@ typedef struct mjuiItem_ mjuiItem;
 struct mjuiSection_ {             // UI section
   // properties
   char name[mjMAXUINAME];         // name
-  int state;                      // 0: closed, 1: open
+  int state;                      // section state (mjtSection)
   int modifier;                   // 0: none, 1: control, 2: shift; 4: alt
   int shortcut;                   // shortcut key; 0: undefined
+  int checkbox;                   // 0: none, 1: hidden, 2: unchecked, 2: checked
   int nitem;                      // number of items in use
   mjuiItem item[mjMAXUIITEM];     // preallocated array of items
 
   // internal
   mjrRect rtitle;                 // rectangle occupied by title
   mjrRect rcontent;               // rectangle occupied by content
+  int lastclick;                  // last mouse click over this section
 };
 typedef struct mjuiSection_ mjuiSection;
 
@@ -287,10 +306,12 @@ struct mjUI_ {                    // entire UI
   int maxheight;                  // height when all sections open
   int scroll;                     // scroll from top of UI
 
-  // mouse focus
+  // mouse focus and count
   int mousesect;                  // 0: none, -1: scroll, otherwise 1+section
   int mouseitem;                  // item within section
   int mousehelp;                  // help button down: print shortcuts
+  int mouseclicks;                // number of mouse clicks over UI
+  int mousesectcheck;             // 0: none, otherwise 1+section
 
   // keyboard focus and edit
   int editsect;                   // 0: none, otherwise 1+section
@@ -315,6 +336,7 @@ struct mjuiDef_ {                 // table passed to mjui_add()
   int state;                      // state
   void* pdata;                    // pointer to data
   char other[mjMAXUITEXT];        // string with type-specific properties
+  int otherint;                   // int with type-specific properties
 };
 typedef struct mjuiDef_ mjuiDef;
 

diff --git a/introspect/enums.py b/introspect/enums.py
@@ -800,4 +800,14 @@
              ('mjNITEM', 14),
          ]),
      )),
+    ('mjtSection',
+     EnumDecl(
+         name='mjtSection',
+         declname='enum mjtSection_',
+         values=dict([
+             ('mjSECT_CLOSED', 0),
+             ('mjSECT_OPEN', 1),
+             ('mjSECT_FIXED', 2),
+         ]),
+     )),
 ])
diff --git a/introspect/structs.py b/introspect/structs.py
@@ -11350,6 +11350,16 @@
                  type=ValueType(name='int'),
                  doc='section gap',
              ),
+             StructFieldDecl(
+                 name='cornersect',
+                 type=ValueType(name='int'),
+                 doc='corner radius for section',
+             ),
+             StructFieldDecl(
+                 name='cornersep',
+                 type=ValueType(name='int'),
+                 doc='corner radius for separator',
+             ),
              StructFieldDecl(
                  name='itemside',
                  type=ValueType(name='int'),
@@ -11416,6 +11426,30 @@
                  ),
                  doc='section title',
              ),
+             StructFieldDecl(
+                 name='secttitle2',
+                 type=ArrayType(
+                     inner_type=ValueType(name='float'),
+                     extents=(3,),
+                 ),
+                 doc='section title: bottom color',
+             ),
+             StructFieldDecl(
+                 name='secttitlecheck',
+                 type=ArrayType(
+                     inner_type=ValueType(name='float'),
+                     extents=(3,),
+                 ),
+                 doc='section title with checkbox',
+             ),
+             StructFieldDecl(
+                 name='secttitlecheck2',
+                 type=ArrayType(
+                     inner_type=ValueType(name='float'),
+                     extents=(3,),
+                 ),
+                 doc='section title with checkbox: bottom color',
+             ),
              StructFieldDecl(
                  name='sectfont',
                  type=ArrayType(
@@ -11440,6 +11474,22 @@
                  ),
                  doc='section pane',
              ),
+             StructFieldDecl(
+                 name='separator',
+                 type=ArrayType(
+                     inner_type=ValueType(name='float'),
+                     extents=(3,),
+                 ),
+                 doc='separator title',
+             ),
+             StructFieldDecl(
+                 name='separator2',
+                 type=ArrayType(
+                     inner_type=ValueType(name='float'),
+                     extents=(3,),
+                 ),
+                 doc='separator title: bottom color',
+             ),
              StructFieldDecl(
                  name='shortcut',
                  type=ArrayType(
@@ -11602,6 +11652,11 @@
                  type=ValueType(name='int'),
                  doc='id of item within section',
              ),
+             StructFieldDecl(
+                 name='userid',
+                 type=ValueType(name='int'),
+                 doc='user-supplied id (for event handling)',
+             ),
              AnonymousUnionDecl(
                  fields=(
                      StructFieldDecl(
@@ -11631,6 +11686,11 @@
                  type=ValueType(name='mjrRect'),
                  doc='rectangle occupied by item',
              ),
+             StructFieldDecl(
+                 name='skip',
+                 type=ValueType(name='int'),
+                 doc='item skipped due to closed separator',
+             ),
          ),
      )),
     ('mjuiSection',
@@ -11649,7 +11709,7 @@
              StructFieldDecl(
                  name='state',
                  type=ValueType(name='int'),
-                 doc='0: closed, 1: open',
+                 doc='section state (mjtSection)',
              ),
              StructFieldDecl(
                  name='modifier',
@@ -11661,6 +11721,11 @@
                  type=ValueType(name='int'),
                  doc='shortcut key; 0: undefined',
              ),
+             StructFieldDecl(
+                 name='checkbox',
+                 type=ValueType(name='int'),
+                 doc='0: none, 1: hidden, 2: unchecked, 2: checked',
+             ),
              StructFieldDecl(
                  name='nitem',
                  type=ValueType(name='int'),
@@ -11684,6 +11749,11 @@
                  type=ValueType(name='mjrRect'),
                  doc='rectangle occupied by content',
              ),
+             StructFieldDecl(
+                 name='lastclick',
+                 type=ValueType(name='int'),
+                 doc='last mouse click over this section',
+             ),
          ),
      )),
     ('mjUI',
@@ -11763,6 +11833,16 @@
                  type=ValueType(name='int'),
                  doc='help button down: print shortcuts',
              ),
+             StructFieldDecl(
+                 name='mouseclicks',
+                 type=ValueType(name='int'),
+                 doc='number of mouse clicks over UI',
+             ),
+             StructFieldDecl(
+                 name='mousesectcheck',
+                 type=ValueType(name='int'),
+                 doc='0: none, otherwise 1+section',
+             ),
              StructFieldDecl(
                  name='editsect',
                  type=ValueType(name='int'),
@@ -11851,6 +11931,11 @@
                  ),
                  doc='string with type-specific properties',
              ),
+             StructFieldDecl(
+                 name='otherint',
+                 type=ValueType(name='int'),
+                 doc='int with type-specific properties',
+             ),
          ),
      )),
 ])
diff --git a/mjx/requirements.txt b/mjx/requirements.txt
@@ -35,7 +35,8 @@ jaxlib==0.4.18; python_version >= '3.9' \
     --hash=sha256:9593ff69f424947567e206f3e356b2a2df55ca68e6d815d5adc6cae308e8f652 \
     --hash=sha256:2b17b3f05b3bbf8e0ddb85fba339525ac03bac21c9f26d0f83dcea1b1654353e \
     --hash=sha256:b35ec08984e2aa5e96ba3f3f8b88e90dee0283649e037f213dec8e85638fa17d \
-    --hash=sha256:0bcc4768d29be80d20fd542aafd3a02510a5b1e47c7953beef8b03a9941fa64d
+    --hash=sha256:0bcc4768d29be80d20fd542aafd3a02510a5b1e47c7953beef8b03a9941fa64d \
+    --hash=sha256:1e4b0a0d2cfad3905123af2aa0afc2f6fcfaa9a2f74eb247cd5f140645817ab2
 pip==23.3.1 \
     --hash=sha256:55eb67bb6171d37447e82213be585b75fe2b12b359e993773aca4de9247a052b
 pytest==7.4.2 \