...
Once Ben is satisfied with how his notes are organized, he can use the rich text editing pane to take notes as in our previous designs. When the time comes to insert the crucial diagram, he clicks the drawing button at the right of the toolbar.
Image of QR code screen
As in design 1, the first time he clicks the button he must associate a smartphone with his account by downloading our app and signing in. He can scan the QR code that pops up to download our app onto his phone. Once Ben has associated a phone with his account, clicking the drawing button will bring up a canvas where his cursor is in the notes. If he doesn't already have the app open on his phone, the canvas will contain a text prompt to open it. Ideally we would The pane can be deleted like any image could be, by backspacing or using undo.
Images of phone app and web app with the synchronized canvasses
Once the smartphone app is open, Ben can draw the diagram using the touchscreen on his phone. The canvas in his notes will show a live view of his diagram. Ben can choose from a limited selection of colors, draw lines with a single finger, and do bitmap erase with a single finger. He can also zoom in by using standard pinch to zoom, and navigate around the zoomed in image by either using the grabby hand or dragging with two fingers.
By clicking on the image in the notes webapp, Ben brings up a pane that lets him add text labels to his diagram, and drag those around. The controls on the side of this pane allow you to insert labels, move them around, navigate around the diagram, and undo or redo actions.