Scry Implementation | groupscrysketches

Our Working Project:

https://dazhar2.people.uic.edu/final/scry/scry.html

Our Project Code:

https://dazhar2.people.uic.edu/final/scry/scry.pde

Our Project Images:

All found here: https://dazhar2.people.uic.edu/final/scry/

Our Project Icon And Picture Sources:
Refer to the menu above, the page with the icon sources.

Our Video Link:

https://www.youtube.com/watch?v=IV_I0eFaZ1E

Some standard info about our design:

We tried to keep most of our interfaces very simple and minimalistic, with white text and use of whitespace. Our used font is a sans serif font.
We used icons of the same shape and size to represent our widgets and apps
On many of our apps, we have a resizing option. The way to resize is to press on the arrow on the bar on the left or right of the app. A minimized version of an app can become full-screen and vise-versa. Ideally, this would occur with just a swipe of the app to that direction, so this is meant to emulate that.
Similarly, with the bottom bar of apps, the arrows are meant to emulate a simple swipe across the apps, as it would have ideally been instead of a button press.
Pressing on the app after it was chosen closes it.
Chosen icons get highlighted in white light.
For apps bought on the app store, such as the social media apps, it is up to those third-parties to design it visually and functionally. They, however, need to meet the specifications for full-size and minimized-size interfaces.

First Time User Installation

Upon the first boot of the mirror, the user is brought to an installation screen. For the purposes of the demonstration these are set to autofill for now, but there will be multiple data input methods for the final release version

Choosing a language is the first thing a user has to do, which is for the purpose of making it easy to do the rest of the process. Languages are presented in their language, as it is presumable the user can read their own language.

Below is how it looks like when a language is chosen.

The mirror's features function optimally with the use of wi-fi, which is why the user is given the choice to connect to it early on.

The mirror can still, however, function without wi-fi, so they can choose to skip this step.

Otherwise, users can use a keyboard to enter passwords (in our working project, this just autofills it with a click) and a scroll bar to scroll through available wifi.

This is the screen once a user has chosen their wifi.. The chosen wifi is checked and the arrow turns blue, indicating a user can now proceed.

This is the screen for the user to choose the date/time. They can input it manually with the number pad (right now this just autofills it in our working project implementation)or just use location services if connect to wifi, which will fill it automatically.

Filling it in manually will automatically take you to the next field, so you do not have to reach to switch between fields.

Here the user creates their own "swipe password". Like a smartphone or tablet device, the swipe will be recognized by the mirror as a unique identifier.

The grid is only for the purposes of implementation, in a final release version the entirety of the mirror theoretically could be used as a canvas for users.

Users must confirm their swipe to proceed, to ensure they do not create it haphazardly.

Guest Screen

By default, this will be what is displayed on the mirror when it is "off" and no user is logged in. Here the two most important and mostly static visual display apps, the weather and date/time, as well as in-home temperature, are visible, but most other apps will have their functionality locked until someone logs in. The "master" or user who first installed the mirror and has admin access can customize what is displayed on this screen.

The bottom-left button is for user login, which brings up an enter-swipe panel, and the bottom right button is to create a new account, which is simply just to create a new swipe to associate with yourself.

Home Screen

An example of a home screen once a user is logged in. As with the guest screen, the weather and date/time are displayed. The mirror has most of its functionality accessed by a control bar on the bottom center. We chose this location since it'd be the easiest to physically access for most users, given a large mirror. Each user can group up the apps however they wish and selectively display certain apps on certain pages. In our example implementation, the first or default page has the most important or frequently used apps.

Below we have the locked version, which happens by clicking the lock and will not allow any click to be registered (unless unlocking by clicking again), and the hidden apps version, which happens when you click the grid and can have apps be shown by clicking it again, too.

Settings

For settings, there is no full-screen, only a left and right version, The settings include all the initial setup interfaces, so you can change them when needed.

This requires simply clicking what you wish to change and changing it on the screen below the options.

Light

Simply clicking on a light color will turn on that light color, and clicking on a chosen light color will turn it off. The light will be on after you exit the app, if you had it on.

Utilities

Our utilities tracker can be linked to the users' home's physical devices like a thermostat to automatically gather data, and display that information visually.

In the minimized version, users can choose between seeing heat, water, and electricity information by clicking a button on the bottom, as it would be ideal for users of different heights to reach.

Calendar

A basic calendar, if the user has chosen to use location services and has an active internet connection, this can be calibrated automatically and pipe in things such as federal holidays. In a final release version, the user could pick any date to add whatever information they wish, and pin certain dates to the display. Many apps such as this one also have two modes: a full-screen mode which uses the mirror as a screen, and a minimized mode that allows the user to use the mirror while still displaying data.

Daily tasks will always show for the current day and the current day is highlighted on the calendar.

Weather

A weather display that shows the weather with highs and lows for not just all hours of that day, but also that current week. In a final release version the user could scroll to travel back and forth through time and see other dates.

Full-size and minimized display the same info and are read-only.

Background

A simple app that replaces the blankness of the mirror display with something else, such as for example an image, or even a looped video, and can access images by pressing on the arrow key to go through your choices. The image will remain if you exit the screen, unless you return to the normal mirror as your choice.

Timer

This is a simple app to set a time using the number pad, and the timer will count down afterwards, alerting the users with a noise once counted down.

Home Screen second page (secondary apps)

The second page contains other apps that are installed with the mirror by default.

Health

This app keeps track of various data like the user's weight and sleep patterns and displays that information visually. The data can be input manually by the user, or piped in from certain devices such as a bathroom scale, a step monitor, etc.

Like the utilities page, for the minimized version, you must choose between the health information you wish to see through buttons on the bottom.

News

The news feed allows the user to (with an active internet connection) pipe in data from news organizations and display a scrolling feed. In a final release version the user could pin certain feeds to the display, pick and choose the feeds that are available, etc.

In the full-size version, a user can scroll through the story on the left and can scroll through different news (with their representative logos beside the news titles) on the right. Read-only info about the news story selected goes on top.

In the minimized version, you can either scroll through the story or turn it like pages with the arrow icons below, just in case it cannot be reached to be scrolled.

Music

A basic music player. Both the video and the music player will need to access files; these can be stored locally on some type of physical storage linked to or networked to the mirror, or streamed from an online source.

The full-screen version and the minimized screen work the same. Below, for the minimized version, we have the stopped and play versions if you click on stop and play, as well as an example of scrolling.

Video

A basic video player. Both the video and the music player will need to access files; these can be stored locally on some type of physical storage linked to or networked to the mirror, or streamed from an online source.

The full-screen version and the minimized screen work the same. Below, for the minimized version, we have the stopped and play versions if you click on stop and play. It can also scroll, too, with a press on the arrow.

Notes

The notes will allow the user to write directly on the mirror. These additions can be made semi-permanent by being pinned to the note paper to be saved and reviewed until erased at a future time by that same user.

The pencil button allows you to choose a color, but the erase button clears all.

Draw

The the draw tool will both allow the user to write directly on the mirror and use it as a canvas. These additions will remain on the draw screen until erased at a future time by that same user.

The pencil button allows you to choose a color, but the erase button clears all.

App Store

The app store allows the user to search through any online app sources (requires an active internet connection) and find and download other apps. As previously stated, the user may need to give permissions at any point of installation or access.

Home Screen third page (social media)

The third page contains the third-party apps that individual users may have downloaded and installed from other firms. The implementation within the bounds of our mirror will be up to those individual developers, as well as the extent of the user customization. As with mobile and tablet devices, the user may need to give permissions to implement functionality for third-party applications.