For the past two weeks, I have been rewriting the code for ROCO interface, making the transition to React.js. The reason of doing so is that we hope to make the interface more modularized and customable. Since ROCO interface is a design tool, these are important aspects since we would like to tailor the interface to fulfill the needs of all users who may have different needs and need specific behaviors. Ideally, users can specify certain parameters, such as the materials that they are using, the specific folding functions they want, and the behavior that their robot should have and roco interface is rendered to do have these options supported by the backend engine of ROCO.
This week, I finished rewriting the 3D view and created general components that will be used for things, such as popups and sidebars. My general concept on the layout is shown in the following diagram. On the left hand side, there is the component list and the SVG 2D display (which should be resizable). On the right hand side, there is the 3D view, which shows the parameters of components in hierarchical order upon mouse hovering and allows user to edit those parameters upon mouse clicking on the 3D view. As of now, operations on the component are mostly done in the 3D-View but in the future, there might be specific functions where the 2D-View is more user-friendly and can be used to do operations, such as split edges, on the component (this might have to wait though). Finally on the top, there are tabs where users can click on to switch back and forth between their electrical, mechanical, and code components. Since I’m not the best UI designer, if you have any ideas on how to improve the interface, feel free to tell me! Cheers!
P.S. Sorry for deleting the blog section last night. Thanks Prathyush for fixing it!