Responding to pen and stylus interactions (HTML)
Make an app that can create handwritten notes, drawings, and annotations, by adding support for a pen or stylus.
Tip The info in this topic is specific to developing Windows Store apps using JavaScript.
See Responding to pen and stylus interactions (XAML) for Windows Store app using C++, C#, or Visual Basic.
Prerequisites: If you're new to developing Windows Store apps using JavaScript, have a look through these topics to get familiar with the technologies discussed here.
Create your first Windows Store app using JavaScript
Roadmap for Windows Store apps using JavaScript
Learn about events with Quickstart: adding HTML controls and handling events
App features, start to finish: Explore this functionality in more depth as part of our App features, start to finish series
User interaction, start to finish (HTML)
User interaction customization, start to finish (HTML)
Note
The platform control libraries (HTML and XAML) provide the full Windows user interaction experience, including standard interactions, animated physics effects, and visual feedback. If you don't need customized interaction support, use these built-in controls.
If the platform controls are not sufficient, these user interaction guidelines can help you provide a compelling and immersive interaction experience that is consistent across input modes. These guidelines are primarily focused on touch input, but they are still relevant for touchpad, mouse, keyboard, and stylus input.
- Guidelines for common user interactions
- Guidelines for optical zoom and resizing
- Guidelines for panning
- Guidelines for rotation
- Guidelines for Semantic Zoom
- Guidelines for visual feedback
Samples: See this functionality in action in our Windows Store app samples.
User interaction customization, start to finish sample
Input: Device capabilities sample
Input: DOM pointer event handling sample
Overview
A pen/stylus can serve as a precision pointing device. It can also be a drawing device associated with digital ink.
The Windows 8 ink platform, together with a pen/stylus device, provides a natural way to create handwritten notes, drawings, and annotations. The platform supports capturing ink data from digitizer input, generating ink data, rendering that data as ink strokes on the output device, managing the ink data, and performing handwriting recognition.
In addition to capturing the spatial movements of the pen as the user writes or draws, your app can also collect info such as pressure, shape, color, and opacity, to offer user experiences that closely resemble drawing on paper with a pen, pencil, or brush.
Note The ink platform in Windows 8 also supports input from other pointer devices, including touch digitizers and mouse devices.
The inherent precision of pen input is supported naturally by the UI of Windows 8, which is optimized for the imprecise nature of touch. Optimize your Windows Store app design for touch input and get basic pen support by default.
To support pen interactions in scenarios that emphasize direct manipulation, use pen-specific UI to provide equivalent functionality for the users of your app independent of the device they are using. For example, when a pen is detected use a scrollbar to emulate panning or previous and next buttons to flip through pages of content.
In this section
| Topic | Description |
|---|---|
This Quickstart walks you through capturing ink data from an input digitizer. |
|
Learn how to render ink stroke segments as smooth Bézier curves. |
|
This topic demonstrates how to save ink data by serializing it as Ink Serialized Format (ISF) metadata and embedding the metadata into a Graphics Interchange Format (GIF) file. |
|
This topic demonstrates how to load ink data by de-serializing it from ISF metadata embedded in a GIF file. |
|
Learn how to select ink strokes in a Windows Store app using JavaScript. |
|
Learn how to erase ink strokes in a Windows Store app using JavaScript. |
|
Learn how to use handwriting recognition and convert ink strokes to text in a Windows Store app using JavaScript. |
Related topics
Conceptual