Fabricjs comes with default grab bars that enable the user to scale and rotate the object placed on canvas. These grab bars are fully customisable. A variety of configurations were explored when testing optimal design for the grab bars. Versions rendred included; grab bars present, grab bars minimised, grab bars off, grab bars on creation, […]

Interaction with the canvas is the key user engagement with Picplan. This merited an in-depth study of precisely how the user rendered a mark up on the canvas. Picplan is being developed via an iterative design process which works via a sequence of creation and user testing. As I am developing it by myself, regular […]

User testing provided feedback relating to the mark-up process on Picplan’s canvas. It was observed that zone highlighting often proved to be problematic, which has prompted a review of the mark-up tool kit. The architecture plans uploaded to the canvas are user generated. As such, different users will generate different plans. Some users may use […]

In deciding the architecture of Picplan’s selection ability, a certain mark-up (shape created via touch) is to be associated with a certain set of photos. Rendering a clear link between the two is key. Unique objects or unique canvases are the two methods identified that could potentially be used to execute this. In order to investigate […]

First thing you can see in all of Fabric examples is creation of canvas object — new fabric.Canvas(‘…’). fabric.Canvas serves as a wrapper around <canvas> element, and is responsible for managing all of the fabric objects on that particular canvas. It takes an id of an element, and returns an instance of fabric.Canvas. We can […]

Picplan’s main interface will involve marking up architectural plans. The mark-ups will then be linked to a suite of photos. As such, each mark-up will need to be dynamic, interactive and exclusively linked to it’s relative photo set. Fabric.js is a JavaScript library which makes it easy to work with the HTML5 Canvas element. Fabric […]

HTML5 provides graphic rendering support. The key interaction with Picplan will be the ability to mark-up architectural plans.  Generating and interacting with shapes via touch constitute the primary user experience. The user will need to be afforded a set of mark-up tools that are suitable for highlighting areas on the architectural plan. HTML5 Canvas was […]

  Looking at the market for blueprint mark-up applications, some common themes emerged. The majority of those analysed operate primarily as site-management tools more so than mark-up tools. They were often dense in their ability which in some cases required tutorials or instructions for use. Collaborative team functionality was commonly found to be the main focus. One particular […]

Architects start with “parti diagrams” to quickly explore the big idea or chief organising thought for the entire design. The term “parti” comes from the French saying “prendre parti” which means “to make a decision.” While the project may evolve and change throughout, the original parti diagram remains as a touch-stone to guide development. In Matthew Frederick’s […]

After conducting some initial surveys, I had gathered enough information to begin paper prototyping. The application POP was used to quickly test the two key principal tasks in PicPlan. Task 1 – Map the photo Screen 1 – Asked users to locate where they were. Screen 2 – Asked users to map where the photo is […]