Download - COMP 4026 Lecture 6 Wearable Computing
![Page 1: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/1.jpg)
LECTURE 6: WEARABLE COMPUTING
COMP 4026 – Advanced HCI Semester 5 - 2016
Mark Billinghurst University of South Australia
September 1st 2016
![Page 2: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/2.jpg)
![Page 3: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/3.jpg)
![Page 4: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/4.jpg)
![Page 5: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/5.jpg)
Major changes in computing
![Page 6: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/6.jpg)
![Page 7: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/7.jpg)
![Page 8: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/8.jpg)
Living Heads Up vs. Heads Down
![Page 9: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/9.jpg)
What is a Wearable Computer ? ▪ A computer that is: ▪ Portable while operational ▪ Enables hands-free/hands-limited use ▪ Able to get the user’s attention ▪ Is always on, acting on behalf of the user ▪ Able to sense the user’s current context
Rhodes, B. J. (1997). The wearable remembrance agent: A system for augmented memory. Personal Technologies, 1(4), 218-224.
![Page 10: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/10.jpg)
Wearable Computing ▪ Computer on the body that is: ▪ Always on ▪ Always accessible ▪ Always connected
▪ Other attributes ▪ Augmenting user actions ▪ Aware of user and surroundings
![Page 11: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/11.jpg)
The Ideal Wearable ▪ Persists and Provides Constant Access:
Designed for everyday and continuous user over a lifetime.
▪ Senses and Models Context: Models the users environment, mental state, it’s own state.
▪ Augments and Mediates: Information support for the user in both the physical and virtual realities.
▪ Interacts Seamlessly: Adapts its input and output modalities to those most appropriate at the time.
Starner, T. E. (1999). Wearable computing and contextual awareness (Doctoral dissertation, Massachusetts Institute of Technology).
![Page 12: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/12.jpg)
History of Wearables ▪ 1960-90: Early Exploration ▪ Custom build devices
▪ 1990 - 2000: Academic, Military Research ▪ MIT, CMU, Georgia Tech, EPFL, etc ▪ 1997: ISWC conference starts
▪ 1995 – 2005+: First Commercial Uses ▪ Niche industry applications, Military
▪ 2010 - : Second Wave of Wearables ▪ Consumer applications, Head Worn
![Page 13: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/13.jpg)
Thorp and Shannon (1961)
• Wearable timing device for roulette prediction • Audio feedback, four button input
Ed Thorp
![Page 14: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/14.jpg)
Keith Taft (1972)
• Wearable computer for blackjack card counting • Toe input, LED in Glasses for feedback
Belt computer Shoe Input
Glasses Display
![Page 15: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/15.jpg)
Steve Mann (1980s - )
http://wearcomp.org/
![Page 16: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/16.jpg)
MIT Wearable Computing (1996)
![Page 17: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/17.jpg)
Enabling Technologies (1989+) ▪ Private Eye Display (Reflection Technologies)
▪ 720 x 280 dipslay ▪ Red LED ▪ Vibrating mirror
▪ Twiddler (Handykey) ▪ Chording keypad ▪ Mouse emulation
![Page 18: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/18.jpg)
MIT Tin Lizzy (1993) ▪ General Purpose Wearable ▪ Doug Platt, Thad Starner ▪ 150 MHz Pentium CPU ▪ 32-64 Mb RAM ▪ 6 Gb hard disk ▪ VGA display ▪ 2 PCMCIA slots ▪ Cellular modem
http://www.media.mit.edu/wearables/lizzy/lizzy/index.html
![Page 19: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/19.jpg)
Early Wearable Computing
![Page 20: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/20.jpg)
US Military Wearables (1989- ) ▪ Early experimentation
▪ 386 computer, VGA display ▪ GPS, mapping software
▪ Land Warrior (1991-) ▪ Integrated wearable system ▪ Camera, colour display, radio ▪ Navigation, reports, photos
Zieniewicz, M. J., Johnson, D. C., Wong, C., & Flatt, J. D. (2002). The evolution of army wearable computers. IEEE Pervasive Computing, 1(4), 30-40.
![Page 21: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/21.jpg)
Wearables at CMU (1991–2000) ▪ Industry focused wearables ▪ Maintenance, repair
▪ Custom designed interface ▪ Dial/button input
▪ Rapid prototyping approach ▪ Industrial designed, ergonomic
http://www.cs.cmu.edu/afs/cs/project/vuman/www/frontpage.html
![Page 22: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/22.jpg)
![Page 23: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/23.jpg)
Early Commercial Systems
▪ Xybernaut (1996 - 2007) ▪ Belt worn, HMD, 200 MHz
▪ ViA (1996 – 2001) ▪ Belt worn, Audio Interface ▪ 700 MHz Crusoe
• Symbol (1998 – 2006) • Wrist worn computer • Finger scanner
![Page 24: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/24.jpg)
Prototype Applications ▪ Remembrance Agent ▪ Rhodes (97)
▪ Augmented Reality ▪ Feiner (97), Thomas (98)
▪ Remote Collaboration ▪ Garner (97), Kraut (96)
• Maintenance • Feiner (93), Caudell (92)
▪ Factory Work ▪ Thompson (97)
![Page 25: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/25.jpg)
Mobile AR: Touring Machine (1997) ▪ University of Columbia ▪ Feiner, MacIntyre, Höllerer, Webster
▪ Combines ▪ See through head mounted display ▪ GPS tracking ▪ Orientation sensor ▪ Backpack PC (custom) ▪ Tablet input
Feiner, S., MacIntyre, B., Höllerer, T., & Webster, A. (1997). A touring machine: Prototyping 3D mobile augmented reality systems for exploring the urban environment. Personal Technologies, 1(4), 208-217.
![Page 26: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/26.jpg)
MARS View ▪ Virtual tags overlaid on the real world ▪ “Information in place”
![Page 27: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/27.jpg)
Backpack/Wearable Systems 1997 Backpack Wearables
▪ Feiner’s Touring Machine ▪ AR Quake (Thomas) ▪ Tinmith (Piekarski) ▪ MCAR (Reitmayr) ▪ Bulky, HMD based
Piekarski, W., & Thomas, B. (2002). ARQuake: the outdoor augmented reality gaming system. Communications of the ACM, 45(1), 36-38.
![Page 28: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/28.jpg)
2008: Location Aware Phones
Nokia Navigator Motorola Droid
![Page 29: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/29.jpg)
2009 - Layar (www.layar.com)
• Location based data – GPS + compass location – Map + camera view
• AR Layers on real world – Customized data – Audio, 3D, 2D content
• Easy authoring • Android, iPhone
![Page 30: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/30.jpg)
Watches
![Page 31: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/31.jpg)
Second Gen. Systems
• Recon (2010 - ) • Head worn displays for sports • Ski goggle display • Investment from Intel (2013)
• Google (2011 - ) • Google Glass • Consumer focus
![Page 32: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/32.jpg)
Demo Video
• https://www.youtube.com/watch?v=u24cbjqiVfE
![Page 33: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/33.jpg)
Google Glass (2011 - )
![Page 34: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/34.jpg)
![Page 35: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/35.jpg)
• Hardware • CPU TI OMAP 4430 – 1 Ghz • 16 GB SanDisk Flash,1 GB Ram • 570mAh Battery
• Input • 5 mp camera, 720p recording, microphone • GPS, InvenSense MPU-9150 inertial sensor
• Output • Bone conducting speaker • 640x360 micro-projector display
![Page 36: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/36.jpg)
View Through Google Glass
Always available peripheral information display Combining computing, communications and content capture
![Page 37: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/37.jpg)
![Page 38: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/38.jpg)
dsfh
![Page 39: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/39.jpg)
Smart Watches
• Eg Motorola Moto 360, Apple Watch • Measure heart rate, movement • Provide notifications, runs apps, messages, etc
![Page 40: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/40.jpg)
Moto 360 Smart Watch
https://www.youtube.com/watch?v=Q0prQniEZTA
![Page 41: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/41.jpg)
Activity Monitor
• Fitbit, Microsoft Band • Measures footsteps, heart rate, calories, sleep
![Page 42: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/42.jpg)
Device Ecosystem
![Page 43: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/43.jpg)
Usage Matterns
![Page 44: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/44.jpg)
Number of Devices Shipped
![Page 45: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/45.jpg)
Summary Wearables are a new class of computing
Intimate, persistent, aware, accessible, connected Evolution over 50 year history
Backpack to head worn Custom developed to consumer ready device
Enables new applications Collaboration, memory, AR, industry, etc
Many head worn wearables are coming Android based, sensor package, micro-display
![Page 46: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/46.jpg)
TECHNOLOGY
![Page 47: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/47.jpg)
Wearable Attributes
▪ fafds
![Page 48: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/48.jpg)
Some Key Aspects
▪ Display Technologies ▪ Input Devices ▪ Interaction Metaphors ▪ Perceptual Factors ▪ Ergonomics ▪ Cognitive Aspects
![Page 49: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/49.jpg)
Types of Head Mounted Displays
Occluded See-thru
Multiplexed
![Page 50: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/50.jpg)
Multiplexed Displays ▪ Above or below line of sight ▪ Strengths ▪ User has unobstructed view of real world ▪ Simple optics/cheap
▪ Weaknesses ▪ Direct information overlay difficult
• Display/camera offset from eyeline ▪ Wide FOV difficult
![Page 51: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/51.jpg)
Vuzix M-100
▪ Monocular multiplexed display ($1000) ■ 852 x 480 LCD display, 15 deg. FOV ■ 5 MP camera, HD video ■ GPS, gyro, accelerometer
![Page 52: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/52.jpg)
Display Types
▪ Curved Mirror ▪ off-axis projection ▪ curved mirrors in front of eye ▪ high distortion, small eye-box
▪ Waveguide ▪ use internal reflection ▪ unobstructed view of world ▪ large eye-box
![Page 53: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/53.jpg)
See-through thin displays
▪ Waveguide techniques for thin see-through displays ▪ Wider FOV, enable AR applications ▪ Social acceptability
Opinvent Ora
![Page 54: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/54.jpg)
Waveguide Methods
See: http://optinvent.com/HUD-HMD-benchmark#benchmarkTable
Holographic Hologram diffracts light Limited FOV Colour bleeding
Diffractive Slanted gratings Total internal reflection Costly, small FOV
![Page 55: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/55.jpg)
Waveguide Methods
See: http://optinvent.com/HUD-HMD-benchmark#benchmarkTable
Clear-Vu Reflective Several reflective elements Thinner light guide Large FOV, eye-box
Reflective Simple reflective elements Lower cost Size is function of FOV
![Page 56: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/56.jpg)
Input Options ▪ Physical Devices ▪ Keyboard ▪ Pointer ▪ Stylus
▪ Natural Input ▪ Speech ▪ Gesture
▪ Other ▪ Physiological
![Page 57: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/57.jpg)
Twiddler Input
▪ Chording or multi-tap input ▪ Possible to achieve 40 - 60 wpm after 30+ hours ▪ Chording input about 50% faster than multi-tap ▪ cf 20 wpm on T9, or 60+ wpm for QWERTY
Lyons, K., Starner, T., Plaisted, D., Fusia, J., Lyons, A., Drew, A., & Looney, E. W. (2004, April). Twiddler typing: One-handed chording text entry for mobile phones. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 671-678). ACM.
![Page 58: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/58.jpg)
Virtual Keyboards
▪ In air text input ▪ Virtual QWERTY keyboard up to 20 wpm
- On real keyboard around 45-60+ wpm
▪ Word Gesture up to 28 wpm - On tablet/phone Word Gesture up to 47 wpm
▪ Handwriting around 20-30 wpm
A. Markussen, et. al. Vulture: A Mid-Air Word-Gesture Keyboard (CHI 2014)
![Page 59: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/59.jpg)
Unobtrusive Input Devices
▪ GestureWrist ▪ Capacitive sensing ▪ Change signal depending on hand shape
Rekimoto, J. (2001). Gesturewrist and gesturepad: Unobtrusive wearable interaction devices. In Wearable Computers, 2001. Proceedings. Fifth International Symposium on (pp. 21-27). IEEE.
![Page 60: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/60.jpg)
Unobtrusive Input Devices
▪ GesturePad ▪ Capacitive multilayered touchpads ▪ Supports interactive clothing
![Page 61: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/61.jpg)
Interaction on the Go
▪ Fitt’s law still applies while interacting on the go ▪ Eg: Tapping while walking reduces speed by > 35% ▪ Increased errors while walking
Lin, M., Goldman, R., Price, K. J., Sears, A., & Jacko, J. (2007). How do people tap when walking? An empirical investigation of nomadic data entry.International Journal of Human-Computer Studies, 65(9), 759-769.
![Page 62: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/62.jpg)
Where to put Wearables?
▪ Places for unobtrusive wearable technology
Gemperle, F., Kasabach, C., Stivoric, J., Bauer, M., & Martin, R. (1998, October). Design for wearability. In Wearable Computers, 1998. Digest of Papers. Second International Symposium on (pp. 116-122). IEEE.
![Page 63: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/63.jpg)
Where to Place Trackpad?
▪ User study 25 people different postures ▪ Front of thigh most preferred, torso/upper arm worst
Thomas, Bruce, et al. "Determination of placement of a body-attached mouse as a pointing input device for wearable computers." 2012 16th International Symposium on Wearable Computers. IEEE Computer Society, 1999.
![Page 64: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/64.jpg)
Where do users want Wearables?
29% on clothing 28% on wrist 12% on Glasses
![Page 65: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/65.jpg)
RAPID PROTOTYPING FOR GLASS
![Page 66: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/66.jpg)
How do you Design for this?
![Page 67: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/67.jpg)
Typical Development Steps
▪ Sketching ▪ Storyboards ▪ UI Mockups ▪ Interaction Flows ▪ Video Prototypes ▪ Interactive Prototypes ▪ Final Native Application
Increased Fidelity & Interactivity
![Page 68: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/68.jpg)
Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator
![Page 69: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/69.jpg)
GlassSim – http://glasssim.com/
▪ Simulate the view through Google Glass ▪ Multiple card templates
![Page 70: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/70.jpg)
GlassSim Card Builder ▪ Use HTML for card details ▪ Multiple templates ▪ Change background ▪ Own image ▪ Camera view
![Page 71: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/71.jpg)
GlassSim Samples
![Page 72: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/72.jpg)
Glass UI Templates
▪ Google Glass Photoshop Templates ▪ http://glass-ui.com/ ▪ http://dsky9.com/glassfaq/the-google-glass-psd-template/
![Page 73: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/73.jpg)
Glass Application Storyboard
• http://dsky9.com/glassfaq/google-glass-storyboard-template-download/
![Page 74: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/74.jpg)
ToolKit for Designers
▪ Vectoform Google Glass Toolkit for Designers ▪ http://blog.vectorform.com/2013/09/16/google-glass-
toolkit-for-designers-2/
▪ Sample cards, app flows, icons, etc
![Page 75: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/75.jpg)
Glassware Flow Designer
• Visual design tool for Glass interaction flows • Collaboratively design apps using common patterns and layouts. • https://glassware-flow-designer.appspot.com/
![Page 76: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/76.jpg)
Glass Application Flow
![Page 77: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/77.jpg)
▪ Series of still photos in a movie format. ▪ Demonstrates the experience of the product ▪ Discover where concept needs fleshing out. ▪ Communicate experience and interface ▪ You can use whatever tools, from Flash to iMovie.
Video Sketching
![Page 78: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/78.jpg)
See https://vine.co/v/bgIaLHIpFTB
Example: Video Sketch of Vine UI
![Page 79: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/79.jpg)
Interactive Wireframing ▪ Developing interactive interfaces/wireframes ▪ Transitions, user feedback, interface design
▪ Web based tools ▪ UXpin - http://www.uxpin.com/ ▪ proto.io - http://www.proto.io/
▪ Native tools ▪ Justinmind - http://www.justinmind.com/ ▪ Axure - http://www.axure.com/
![Page 80: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/80.jpg)
UXpin - www.uxpin.com
▪ Web based wireframing tool ▪ Mobile/Desktop applications ▪ Glass templates, run in browser
https://www.youtube.com/watch?v=0XtS5YP8HcM
![Page 81: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/81.jpg)
UXpin Demo
http://www.youtube.com/watch?v=0XtS5YP8HcM
![Page 82: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/82.jpg)
Viewing on Glass
• Use Android Design Preview • Push desktop onto Android screen • https://github.com/romannurik/AndroidDesignPreview
![Page 83: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/83.jpg)
Android Design Preview Demo
• https://www.youtube.com/watch?v=WvQrP1szEzg
![Page 84: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/84.jpg)
Processing and Glass ▪ One of the easiest ways to build rich
interactive wearable applications ▪ focus on interactivity, not coding
▪ Collects all sensor input ▪ camera, accelerometer, touch
▪ Can build native Android .apk files ▪ Side load onto Glass
![Page 85: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/85.jpg)
Hello World //called initially at the start of the Processing sketch!void setup() {! size(640, 360);! background(0);!} !!//called every frame to draw output!void draw() {! background(0);! //draw a white text string showing Hello World! fill(255);! text("Hello World", 50, 50);!}!
![Page 86: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/86.jpg)
Demo
![Page 87: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/87.jpg)
Hello World Image PImage img; // Create an image variable!!void setup() {! size(640, 360);! //load the ok glass home screen image! img = loadImage("okGlass.jpg"); // Load the image into the program !}!!void draw() {! // Displays the image at its actual size at point (0,0)! image(img, 0, 0);!}!
![Page 88: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/88.jpg)
Demo
![Page 89: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/89.jpg)
Touch Pad Input • Tap recognized as DPAD input
!void keyPressed() {!!if (key == CODED){!! !if (keyCode == DPAD) {!
!// Do something ..!• Java code to capture rich motion events
• import android.view.MotionEvent;!
![Page 90: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/90.jpg)
Motion Event //Glass Touch Events - reads from touch pad!public boolean dispatchGenericMotionEvent(MotionEvent event) {! float x = event.getX(); // get x/y coords ! float y = event.getY();! int action = event.getActionMasked(); // get code for action! ! switch (action) { // let us know which action code shows up! !case MotionEvent.ACTION_DOWN:! ! !touchEvent = "DOWN";! ! !fingerTouch = 1;! !break; ! !case MotionEvent.ACTION_MOVE:! ! !touchEvent = "MOVE";! ! !xpos = myScreenWidth-x*touchPadScaleX;! ! !ypos = y*touchPadScaleY;! !break;!
![Page 91: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/91.jpg)
Demo
![Page 92: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/92.jpg)
Sensors • Ketai Library for Processing
• https://code.google.com/p/ketai/
• Support all phone sensors • GPS, Compass, Light, Camera, etc
• Include Ketai Library • import ketai.sensors.*;!• KetaiSensor sensor;!
![Page 93: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/93.jpg)
Using Sensors • Setup in Setup( ) function
• sensor = new KetaiSensor(this);!• sensor.start();!• sensor.list();
• Event based sensor reading void onAccelerometerEvent(…)!{! accelerometer.set(x, y, z);!}!
![Page 94: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/94.jpg)
Sensor Demo
![Page 95: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/95.jpg)
Sensors ▪ Ketai Library for Processing ▪ https://code.google.com/p/ketai/
▪ Support all phone sensors ▪ GPS, Compass, Light, Camera, etc
▪ Include Ketai Library ▪ import ketai.sensors.*; ▪ KetaiSensor sensor;
![Page 96: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/96.jpg)
Using the Camera ▪ Import camera library
▪ import ketai.camera.*; ▪ KetaiCamera cam;
▪ Setup in Setup( ) function ▪ cam = new KetaiCamera(this, 640, 480, 15);
▪ Draw camera image void draw() { //draw the camera image image(cam, width/2, height/2); }
![Page 97: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/97.jpg)
Camera Demo
![Page 98: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/98.jpg)
RESOURCES
![Page 99: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/99.jpg)
Online Wearables Exhibit
Online at http://wcc.gatech.edu/exhibition
![Page 100: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/100.jpg)
Glass Resources ▪ Main Developer Website ▪ https://developers.google.com/glass/
▪ Glass Apps Developer Site ▪ http://glass-apps.org/glass-developer
▪ Google Design Guidelines Site ▪ https://developers.google.com/glass/design/
index?utm_source=tuicool ▪ Google Glass Emulator ▪ http://glass-apps.org/google-glass-emulator
![Page 101: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/101.jpg)
Other Resources ▪ AR for Glass Website ▪ http://www.arforglass.org/
▪ Vandrico Database of wearable devices ▪ http://vandrico.com/database
![Page 102: COMP 4026 Lecture 6 Wearable Computing](https://reader034.vdocuments.mx/reader034/viewer/2022042611/587082001a28ab57368b6981/html5/thumbnails/102.jpg)
Books ▪ Programming Google Glass ▪ Eric Redmond
▪ Rapid Android Development: Build Rich, Sensor-Based Applications with Processing ▪ Daniel Sauter