manipulation icon indicating copy to clipboard operation
manipulation copied to clipboard

meshcat: can I resize the GUI sliders

Open RussTedrake opened this issue 4 years ago • 0 comments

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 avatar Sep 04 '21 20:09 RussTedrake