RussTedrake / manipulation

Course notes for MIT manipulation class
BSD 3-Clause "New" or "Revised" License
426 stars 124 forks source link

meshcat: can I resize the GUI sliders #151

Closed RussTedrake closed 1 year ago

RussTedrake commented 3 years ago

In particular, it would be nice to have more real-estate when using the teleop sliders.

Here is a javascript snippet that does the trick, but it's not pretty. I could plumb it through the websockets if we like.

var viewer = new MeshCat.Viewer(document.getElementById("meshcat-pane"));
viewer.set_control("TestSlider", (value) => {
    console.log("TestSlider = " + value);
}, .5, 0, 1, 0.01);

viewer.set_control("ExtendSliders", (value) => {
  let e = viewer.gui_controllers.TestSlider.domElement;
  e.parentElement.parentElement.style.marginLeft="-300px";
  e.parentElement.querySelector(".property-name").style.width="15%";
  e.style.width="85%";
  e.querySelector(".slider").style.width="89%";
  e.querySelector("input").style.width="10%";
}, .5, 0, 1, 0.01);
viewer.set_control_value("ExtendSliders", .01);  // To execute the callback.
viewer.delete_control("ExtendSliders");
RussTedrake commented 1 year ago

Closing this, since https://github.com/RobotLocomotion/drake/issues/18542 will address it.