Measurement Tool of Floor Plan on Houzz
- Link
- Abstract
The measurement tool is basically the ruler on the canvas to measure the distance between objects, objects include the walls, windows, doors, furnitures and other rulers. Snapping is ensured during the interaction so the measurement could be accrurately reflect the design ideas.
Measurement tool was my first major project in Houzz. From this project, I could learn the whole process of implementing a new majoy feature. By finishing this project, I learned how to define a new object and update the object with our engine code. At the same I learned how to update the objects data between ui and engine, so every change on the ui will update the object on the canvas and change on the canvas will change the display content of ui. I also learned how to define the frontend object in backend, so the date could be correctly stored in the backend.
- Team
- Designer
- Project Manager
- Responsibility
- Created new class for ruler object
- Implement design of rulers based on Figma
- Implement engine code to manipulate ruler objects ( CRUD )
- Implement interaction on rulers
- Implement UI code to display and update properties of ruler
- Results
- Click ruler icon to start drawing, click anywhere on the canvas to mark the start point of ruler, move the mouse to move the ruler, click again to mark the end point of the ruler and the ruler is created and added to the canvas
- Mouse Interactions on the rulers includes hover on the ruler main part and end. Moving the ruler as a whole or move ends to update the ruler
- On property menu, ruler will be given a default name and the name can be changed and measurement is displayed here as well for user to cop
- Feature
- Snapping happens when create and updating the ruler, ruler end could snap on the walls, rulers and other objects, and ruler could snap to xy axis direction
- Displayed data will be displayed between meters or feet and based on the unit user selection
Comments
Post a Comment