Description

Consentful Design = Awareness + Permission

Design Concept

Awareness | pop up boxes and "Learn More" page

In the beginning when the page first load, there will be an alert message generated by the browser, letting the user know what they are going into (in advanced). On the start page, a pop up box will ask the user about their preferred camera and image data settings to start with. If the user disabled camera and image data access, the user will be directed to a page with the options to "learn more" (going to my glitch portfolio page) or to go back to the home page and change the settings. If the user agreed to grant access for both the camera and image data, the experimental camera will be activated and starts working. On the top of the screen, there are also two signal lights that indicates current the camera and image settings/status. Therefore, the user is always aware of what the program has access of and what not. It is very easy to forgot what we choose as the default settings in the beginning, so having this feature helps reminding the user what is happening in the back stage of the program.

Permission | executions based on consents

Once the camera starts working, the user will see two buttons on the bottom of the screen. One is "Scan". Another one is "Draw". Here I separated the two functions of scanning the environment's visual information taken by the camera and searching the identified objects in the google's api to draw on top of the camera screen. By making these two functions into their own buttons give the user the control over what the camera should execute now. This way, the camera will not be constantly scanning and taking the visual data from user's environment. Moreover, it will only start drawing when the user granted the permission to do so.

Design Process

Developing the Code | Problems Along the way

ATTEMPT 1 (Making Alert and Pop Up Boxes)

How I used to remember making alert and pop up boxes were all by html then style it with CSS. However, this time, I challenged myself to create them all in javascript. It was very confusing at first because I wasn't sure how can I referred to them. Later, I realized that I don't have to do the getdocumenbyId thing anymore. I can just refer the different components by their names and add a period at the end to link it with a function.

ATTEMPT 2 (Code counteracting)

As I was developing my code, the previous camera code started counteract with the new buttons code. In the end, I decided to rewrite them all in more clean logic operator.