Skip to content

Instantly share code, notes, and snippets.

@nperez0111
Last active November 3, 2017 03:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nperez0111/b86ededba87de9fb8eeed0e1df984da7 to your computer and use it in GitHub Desktop.
Save nperez0111/b86ededba87de9fb8eeed0e1df984da7 to your computer and use it in GitHub Desktop.
Description of a Note Taker app

Screens breakdown

Main/Capture Screen

Main Screen

This is the Camera screen and the first screen you see when opening the app. The middle ring is the capture button which will capture the image the user is currently pointing at.If you click on the notebook icon you will be navigated to a list of notebooks.

Notebook List Viewer

list viewer

This is the notebook list viewer which allows the user to look at their saved notebooks and look at the content of their notes easily. It also allows extended options such as to rename notebooks.

Notebook Viewer

notebook viewer

This allows the user to view all of the notes within a notebook. Currently this is empty so let's go back and take a picture to have some content in here. To go back we click the back button, and then click the done button on the notebook list viewer page.

So now we decide to take a picture, since this was taken on a mac rather than on an iphone itself it takes an image of a solid color and a timestamp of the current date. Such as below.

Image Editing Screen

image editor

This is the main editor of the application and allows you to overlay drawings on top of the image, add text to the image and put small blips of extra information kind of like a tag but it only shows the information when you tap the blip.

Let's see the drawing feature...

Image Sketch Screen

sketch screen

As you can see we can draw whatever we want with a semi transparent black. At the bottom left you have the option to use the white coloring tool so let's try that.

Image Sketch Screen with white coloring tool

white coloring tool illustration

So that is great and all, but how about we try to use the undo button.

Image Sketch Screen with Undo

undo button

So we see that the white coloring we did is now gone and we are now presented with a redo button if we mistakenly pressed the undo button.

Let's put the white back just to make sure it works

Image Sketch Screen now undoing the undo

undo button stuff

So now let's save our changes by tapping the top right checkmark button

Image Editing Screen

post draw editing screen

Now we can see that the drawing has been saved on top of our image we captured. From here we will press the add text button to add text to the image (making it a proper note).

Add Text Screen

add text screen

This screen allows you to add text to the image, clear the changes that you have made and save the text to the note.

Now if we go back to the editing screen it will look the same as before with the text saved to be viewed later. If we tap the notebook label that currently says "Default Notebook" it will allow us to change the notebook we are currently saving to.

Select Notebook Screen

select notebook screen

This screen would show a list of notebooks to select from, where the user can tap to select the notebook, as there are no other notebooks in the system at the moment we can create a new notebook by giving a title to it and it will automatically be selected.

Post Save Note Screen

post save note

Once you save the note after editing it in the editing screen you are sent directly to the notebook viewer of the notebook which you have just saved the note into to allow you to view that and other notes which you have in that notebook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment