Throughout this week, I have discussed with other members of Roco team about how to improve the current interface. Ultimately, we agree that we should eliminate the current “right column”, which is currently the main interface to input new parameters of components and subcomponents. Such an interface is not user-friendly, however, since users have to remember which subcomponents that they are editing and what the constraints are relating to these parameters. A more intuitive way of implementing these functionalities would be to allow users to drag, drop, and hover over subcomponents to get the information that they need and edit based on those information.
Functionalities that I would like to implement:
To display parameters of subcomponents when hovering over them: This functionality is relatively easy to implement with the Raycaster API provided by THREE.js. Essentially, a ray is cast from the mouse’s location and intersects with subcomponents if any are in the way of the ray. A callback is called with the argument of the interested subcomponent, which can be used to create DOM elements to display relevant information and removed when the mouse is not on any subcomponents.
To edit parameters of subcomponents when clicking on them: To implement this functionality, I will again use the THREE.js’s API, which generates events upon clicks on subcomponents. After users click on the component, a pop up box should appear and disappear after users have changed the parameters. You can have multiple pop up boxes open and edit parameters of different subcomponents at the same time. A possible consequence of this would be that a new error detection method should be developed. Right now, parameters of subcomponents are passed to the backend and resolved there. But, it might be possible to move the error detection to the client side and don’t allow users to input invalid values. This would require tracking parameters changes on the client side and preliminary checks on whether user inputs make sense.
Upon completing these, I will then work on the display of component parameters/interfaces/connections, implementation of copy functionality, and possibly faster rendering of components.