Underlay Image Upload of Floorplan on Houzz

-
  • Link
  • Abstract
        Underlay image can be used as a reference in floor plan design.  Suppose the user has a pdf or image and they want to create the same design in Houzz website, they could use this feature to draw the walls, add windows, doors and furnitures.  With this design added,  they could view the plan in 2d or 3d.  At the same,  they can also leverage all the features of Houzz floor plan to see the measurements,  to apply different style to the walls and floors， and add all the furnitures from Houzz marketplace.
        This was the biggest project I did in Houzz,  besides designers and project managers,  I also need to work with backend engineers to make sure the connection between frontend and backend be conducted well. Backend is using websocket to notify the front end about info of the uploaded image,  my job was to properly build the connection and properly handle the info and calculate the scale for the image.
  • Team
        Project manager,  designers, backend engineers,  other frontend engineers
  • Responsibility
    1. Communicated with project managers to collect requirement,  communicate with designers to make sure design is feasible,  deliver frontend updates to backend to make sure the development is on the same page.
    2. Created a new class for underlay image objects, implmente engine code for operations of underly images
    3. Implemeted the UI to display the preview of image and pdf, and the modal to set the scale of image.
    4. Implemented UI code to update the properties of underly image (transparency,  lock & scale), introduced a new mode -- trace mode to indicate the system is using underlay image to trace the design
    5. Built connection between front end and back end to make sure info is delivered to the api correctly and handled the returned info correctly
    6. Tested the whole application with backend end to make sure corner cases are handled well.    
  • Results
  1. Users select an image from their local storage,  after uploading is successful,  a modal is poped up with uploaded image for user to scale.

  2. Users select a pdf from their local storage,  previews of pdf will be displayed on a modal,  user can select a page to upload,  backend will transfer the pdf page to an image, when the processing is done,  the scale model will show up.

  3. On the scale modal,  user can adjust the ruler and input the length the ruler represents. Meanwhile,  in order to assist the scaling job,  the modal allows the users to rotate, zoom, pan the image.


  4. Property menu has the ui to lock the underlayimage and the slider to adjust the opacity of the image.
  5. Trace mode will be autmatically turned on when the image is placed on canvas after uploading. In trace mode,  the underlay image shows up and color of wall and floor will change to indicate user to draw or adjust object to follow the underlay image.
  • Feature
    1. Upload can be conducted by dragging or selecting from storage
    2. Png with transparent background will be filled with white color
    3. Vector pdf can also be handled well
    4. Scale input supports multiple ways of input formats 
    5. The underlay image function provides the interface on onboading page and tutorial page

Comments

Post a Comment

Popular posts from this blog

Data Visualizations in chord chart of Vega

-
Image
Link of works https://brainspace.revealdata.com/about Chord chart was a project for my client,  it mainly shows the nodes and ribbons which are used to connect nodes,  and ribbons on hovering shows the data flow animation with directions on it. Nodes can be expanded. Loading and data flowing Expanding
Read more

Measurement Tool of Floor Plan on Houzz

-
Image
Link https://pro.houzz.com/manage/floorplans 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 ...
Read more