Build GUI buttons & sliders in meshcat? #44

Activity

1. rdeits commented on Feb 5, 2019

   

   rdeits

   on Feb 5, 2019

   Collaborator

   More actions

   That's a great question, and I'm not sure I have the answer yet. One option I've considered is just to say that meshcat itself is only an output, and the way to add controls to it is to compose them as separate elements on the same page. By that I mean that you would render something like:

   <div class="my-robot-GUI">
     <div class="meshcat-viewer">
     <div class="my-sliders">
   </div>

   This is what we chose to do in RigidBodySim.jl: since MeshCat.jl uses WebIO.jl, which already supports creating widgets and combining them together on the same page, we created a simple GUI consisting of a meshcat window and a few buttons by just rendering them together: https://github.com/JuliaRobotics/RigidBodySim.jl/blob/master/src/visualization.jl#L194-L204 In that case, WebIO handles all the messiness of synchronizing the sliders or buttons to the Julia code that they're supposed to control.

   That approach worked pretty well, and I generally like the idea of trying to compose different tools rather than adding more features. The downside, however, is that it only works in Julia. I'm sure something similar could be done in Python, but the widgets and layout would probably be a bit different.

   So, I think that if your goal is to have a meshcat window with some controls that link to backend code, then using WebIO.jl widgets (like we did in https://github.com/JuliaRobotics/RigidBodySim.jl/blob/master/src/visualization.jl#L194-L204 ) in Julia or something similar in Python would work really well and be pretty easy (in particular, it requires absolutely no knowledge of three.js at all).

   On the other hand, if you want widgets that actually live inside the meshcat viewer, that's more of a challenge. What are you actually interested in doing?
2. yijiangh commented on Feb 5, 2019

   

   yijiangh

   on Feb 5, 2019

   Author

   More actions

   The WebIO.jl widgets seem to fit my needs! I think my pipeline will be very similar to the one used in RigidBodySim.

   I will try that and post question in RigidBodySim. Thank you so much for your comments and helps!
3. yijiangh

   closed this as completedon Feb 5, 2019
4. tenhjo commented on May 10, 2023

   

   tenhjo

   on May 10, 2023

   Last edited by tenhjo

   More actions

   How can this be done on Python? I am not able to translate the Julia example...

   👍React with 👍3Reacted by Sharanya Puthige Venkatesh, ntorresalberto and richardrl