manipulation
manipulation copied to clipboard
meshcat: can I resize the GUI sliders
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");