MagPen - A Novel Way of Digitizing Notes Using Magnets

A mobile device has a multitude of sensors ranging from GPS to a barometer. One sensor that is used daily is the capacitive sensor. Capacitive sensors detect anything that is conductive and they are used for touch input in mobile phones. We rely tremendously on touch input to interact with our devices ranging from playing games to checking notifications. We also have the ability to use our finger or styluses to write notes directly on a mobile device. However, touch/stylus input on mobile devices has its own set of problems. We are unable to easily draw detailed diagrams or write notes using the touch screen.

Is there another way to provide a different method of digitizing notes with a mobile device that expands the capabilities of touch? Another sensor that can be used for alternative methods of interaction is a magnetometer. The magnetometer senses changes in the magnetic field in all three axes (x,y,z) [10]. If the magnetic field can be detected, then it is possible to alter the magnetic field by using an external magnet. When the external magnet is moved around, it will alter the magnetic field thus producing different (x,y,z) values.

MagPen is a system that allows the user to digitize notes while they are written on a sheet of paper. The pen itself contains magnets or it can be an electromagnet. As the pen moves around in the area next to the phone, the changes in the magnetic field are detected and they are mapped out onto an x-y plane. To simulate an actual pen, the pen will only emit a magnetic field when the tip is pressed down. That allows the phone to only recognize actual pen inputs and not the pen movements.

To enable a richer set of interactions, the magnetic field strength can be used to control various pen attributes, such as stroke size or color. This is accomplished by moving the magnet based pen closer and further away to control the size of color.

There has been existing work in the industry that attempts to solve this problem. A few examples are Livescribe, Equil JOT, or the Wacom Tablets. This devices however require additional devices and/or special pen and paper to be able to digitize these notes. MagPen attempts to remove the need of additional devices by just requiring your mobile device and a custom pen.

To read more about this, take a look at the project writeup here.

Android 5.0 Compat Libraries

Many Android developers have been itching to get their hands on Android 5.0 compatibility libraries to integrate it into their applications. I am working on integrating it into Spottr (a data usage monitoring application). In this post I will discuss my process of integrating Material Design and the items that the app compatiblity libraries have to offer.

Integrating Compatibility Libraries

AppCompat v21, a library that backports Android 5.0 libraries to previous verisons of Android has been released. A mini sidebar on compatiblity libraries. There are multiple android support libraries that backport a different feature sets in Android. The v4 Support Library backports the largest set of APIs (related with Fragments, Pagers, Accessibility, and much more). The v7 compatibility libraries support ActionBar APIs back to Android API Level 7 (Android 2.1). You can check out the rest of the support libraries here.

To begin integrating the support libraries, you must add them to your build.gradle file.

compile "com.android.support:support-v4:21.0.+"
compile "com.android.support:appcompat-v7:21.0.+"

The project will need to compiled against Android 5.0 Libraries (API Level 21) to take advantage of the latest APIs. In your build.gradle file, you will need to set the compileSdkVersion to 21 and the buildToolsVersion to ‘21.0.1’. Note this does not limit your app only be compatible with v21, it just compiles against v21. The minSdkVersion specifies the lowest API that your app is compatible with.

Working with Compatibility Libraries

App Theme

To start off, we need to update the theme of the application. This would be in your themes.xml or styles.xml. Your app theme’s parent should be based off of Theme.AppCompat. In the example below I have chosen to use Theme.AppCompat.Light as my parent theme. Make sure to remove all other instances of AppTheme in your styles.xml and themes.xml files.

App Theme in themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Set AppCompat’s actionBarStyle -->
        <item name="actionBarStyle">@style/BlueActionBar</item>

        <!-- Set AppCompat’s color theming attrs -->
        <item name="colorPrimary">@color/primary_color_blue</item>
        <item name="colorPrimaryDark">@color/primary_darker_color_blue</item>
    </style>
</resources>

In your main application theme, you will need to set the colorPrimary and the colorPrimaryDark. You can set these in your colors.xml file.

App Colors in colors.xml

    <color name="primary_color_blue">#08519c</color>
    <color name="primary_darker_color_blue">#08306b</color>

Next, make sure your activities extend ActionBarActivity instead of Activity.

public class MyActivity extends ActionBarActivity

Toolbar

Right now if you run your application, your actionbar will be styled with the primary color. If you are testing this on Android Lollipop, your status bar will also be colored. However, this is not using the new Toolbar APIs in the 5.0 and Compatibility Libraries. It is using the old ActionBar APIs. The reason to use the Toolbar apis are to have the ToolBar directly in your layouts. This will allow developers to interact with the ToolBar as any other view, allowing animations and etc. It is also possible to set the height of the ToolBar to various sizes to follow the new Material Design Guidelines.

To implement Toolbar, some changes will need to be made within your layouts and in your activities. The layout for the default activity would look like this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity"
    tools:ignore="MergeRootFrame" />

It contains the FrameLayout to allow the use of Fragments in the activity. Adding a Toolbar is not complicated. Since the toolbar is now part of our view, we will have the toolbar at the top of the screen withour view elements below it. To achieve this this, a vertical LinearLayout is needed as the parent element, and the ToolBar and FrameLayout inside the linear layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" >

	<android.support.v7.widget.Toolbar
	    xmlns:app="http://schemas.android.com/apk/res-auto"
	    android:id="@+id/my_awesome_toolbar"
	    android:layout_height="wrap_content"
	    android:layout_width="match_parent"
	    android:minHeight="?attr/actionBarSize"
	    android:background="?attr/colorPrimary"/>

	<FrameLayout
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:id="@+id/container" />

</LinearLayout>

One additional change to be made is letting your activity know that you will be using the toolbar instead of the application bar. In your onCreate method, set your actionbar to your Toolbar in your layout:

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);

Now, when you run the application, you might get an error (displayed below). If you get these errors, be sure to set windowActionBar to false in your AppTheme. This will tell your application, you will no longer be using ActionBar and will be using your own toolbar. If your application will have a mix of ActionBars and Toolbars (which I would not reccommend), you can use different themes with different settings of windowActionBar to achieve this type of functionality.

windowActionBar error

java.lang.RuntimeException: Unable to start activity 

ComponentInfo{com.squarestaq.compattest/com.squarestaq.compattest.MyActivity}: 

java.lang.IllegalStateException: This Activity already has an action bar supplied 

by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar

to false in your theme to use a Toolbar instead.

Caused by: java.lang.IllegalStateException: This Activity already has an action bar 

supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set 

windowActionBar to false in your theme to use a Toolbar instead.

fix

<style name="AppTheme" parent="Theme.AppCompat.Light">
	...
    <item name="windowActionBar">false</item>
    ...
</style>

 

 

Toolbar Shadow

Unstyled Toolbar

 

You will notice a slight change in your Toolbar, the font should be somewhat differet as well as the “flatness” of the Toolbar. Now you may be asking your self, where is my shadow?! A shadow will not exist under a toolbar for pre-lollipop devices due to the elevation attribute not being supported. The elevation attribute will only work on lollipop devices.

To add a shadow to your toolbar, you will need to add it manually by using a 9 patch drawable. The Google I/0 app does exactly this to achieve a shadow under the toolbar link. Download the shadow 9-patch drawable here and add it to your FrameLayout in your activity as the windowForegorund attribute.

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/bottom_shadow" />

Toolbar Theme

We also need to set the theme of our toolbar so our text is the right color. This is most noticable when the primary color is dark and the toolbar text colors need to be changed to white. To do this, we need to create a separate theme for our Toolbar:

<style name="BaseToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:textColorPrimary">#FFFFFF</item>
    <item name="android:textColorSecondary">#FFFFFF</item>
</style> 

Styled Toolbar

Toolbar Overflow Menu Theme

Our Toolbar Overflow Menu is currently white text on a black background. If we needed to change this, we need to specify a new popup theme for the toolbar. Create a BaseToolbarPopupStyle in your styles.xml. By setting the background, and textColorPrimary attributes we can control the toolbar’s overlflow menu’s background color and text color.

<style name="BaseToolbarPopupStyle" parent="Theme.AppCompat">
    <item name="android:background">#FFFFFF</item>
    <item name="android:textColorPrimary">#000000</item>
</style>

Also, remember to specify the toolbar theme and the toolbar popup in your toolbar tag:

 <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        ...
        app:theme="@style/BaseToolbarStyle"
        app:popupTheme="@style/BaseToolbarPopupStyle"/>

Accent Colors

It is also possible set the accent colors of widgets. (tinting the widgets). To do this set the colorAccent attribute in your Toolbar’s theme.

<item name=”colorAccent”>@color/accent</item>

On earlier versions of Android AppCompat will only tint a subset of UI Widgets:

• Everything provided by AppCompat’s toolbar (action modes, etc)
• EditText
• Spinner
• CheckBox
• RadioButton
• Switch (use the new android.support.v7.widget.SwitchCompat)
• CheckedTextView

Misc

There are also other ways of using the Toolbar, such as on the bottom or part of the screen. See this link to find out more information.

AppCompat also provides material design theme widgets. I was unable to find a complete list of widgets that applied the material design theme, however it seemsl ike any widgets that support tinting also implement the material design themes.

• EditText
• Spinner
• CheckBox
• RadioButton
• Switch (use the new android.support.v7.widget.SwitchCompat)
• CheckedTextView

Troubleshooting

Duplicate Resources Error

If you run into this issue (detailed below) them make sure the AppTheme does not exist anywhere else in your other resource files.

Error: Duplicate resources: 

{path-to-app}/app/src/main/res/values/themes.xml:style/AppTheme, 

{path-to-app}/app/src/main/res/values/styles.xml:style/AppTheme

Resources

• http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html
• http://android-developers.blogspot.com/2014/10/material-design-on-android-checklist.html
• http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html
• http://www.murrayc.com/permalink/2014/10/28/android-changing-the-toolbars-text-color-and-overflow-icon-color/
• http://antonioleiva.com/material-design-everywhere/

Assassins: A Real World Game That Uses NFC

Project Links Github

#of Team Members: 4


This project description was written by the whole team. “Assassins” is a live-action "killer" game. Players try to eliminate each other from the game using mock weapons in an effort to become the last surviving player. Currently, players must eliminate their target in person and report their success to a webpage online or to a game administrator in person; this reporting system is tedious and relies heavily on an honor system. In our solution, each player will be assigned a target when the game begins. The assassin (a player with a target) will need to eliminate the target inconspicuously. The target’s phone will report its location randomly throughout the day. If the target notices the assassin first, he will be able to bump phones with the assassin to create a “timeout” period where the assassin will not be able to eliminate the target. However, if the assassin successfully locates the target without getting noticed, he will be able to bump phones to eliminate the target. These scenarios will be dependent on an honor system of who is noticed first. Assassin When the game begins, the assassin (who is also a target, as everyone playing has an assigned assassin and an assigned target) receives a notification with the name of their target. At random intervals throughout the day, they receive updates on the location of their target. They also are notified of their target’s location whenever their target “kills” their own target. When they successfully “kill” their target using whatever rules have been agreed upon, they then bump phones with the target, and the app registers the kill. The assassin’s assigned killer is also notified of the assassin’s location, and the assassin is given a new target. Target The target will use the application if he notices the assassin before getting eliminated. He will bump phones with the assassin, while the app is open, and initiate the transfer. This will create a “timeout” period where the assassin cannot eliminate the target for a set amount of time. We plan to use the Android SDK to build the game and NFC technology to share data between users. Location services such as Google Maps will also be used to display targets and other information. Google Cloud Messaging might be used if we need push notifications from servers to users.

Medical Viewer for Emory

Project Links
Github

# of Team Members: 5

This was my senior design project; we worked with emory to create a tablet app that lets doctors and nurses monitor patient data and annotate this data. It uses a variety of technologies and the goal is to make the application as easy to use while still showing all essential data.

Project Documents
Project Documentation/Description
This project documentation/description was written by the whole team.

CourseBuzz

Project Website: http://gremsi.com/projects/coursebuzz

Android App: https://play.google.com/store/apps/details?id=com.gremsi.coursebuzz

A web and mobile application that provides a clean interface to Georgia Tech's course lookup system. It also combines information from three different webpages and displays them in one page. 

CourseBuzz first started out as an Android application that scrapes data from different pages in Oscar and displays it to the student in a clean interface. The source code has support to display notifications from a server using C2DM (deprecated). The website does the same thing but does not support notifications.

Heads up! The android app has been removed from Google Play due to issues with the scraper. You can visit CourseShark for the the seat watcher function. The website is still up and running and will work for Spring 2013.

There are a few limitations for this application. First, the user will not be able to register for a class or have the application register for that class as soon as an open spot is available. Second, schedules of classes of past semesters and future semesters will not be available. Storing schedules from the past is unnecessary because the user will only need alerts for that current registration period.

Project Documents

Project Report | Project Presentation | Source Code

Pad: a simple notepad

Project Links

Website (alpha)

Android App

Pad provides a new and simple way to jot down notes. There are no tabs, pages, ads, clutter, and etc. It's only one page that auto saves as you type.

Pad started off as a simple android application that lets you jot down your thoughts easily. Pad+ has widget support and a holo interface. Dropbox support will come soon.   

The website leverages HTML5 offline storage to store the notes. There are a few bugs with it so don't expect it to work completely!