Естественные интерфейсыЗнакомство с Microsoft Surface

Сергей Звягин, Ingate Development

Что такое Microsoft Surface?

Что такое Microsoft Surface?

• Это стол (56х107х53 см)• Компьютер Intel Core Quad Xeon "WoodCrest"

2.66GHz, 4GB DDR2-1066 RAM, 1TB 7200RPM Hard Drive (максимальная комплектация) с операционной системой Windows Vista

• Проектор на технологии Digital Light Processing• Светоизлучающий диод (LED) λ = 850 нм• 5 инфракрасных камер с разрешением 1920x1440

Что такое Microsoft Surface?

Почти…Но не совсем так

И что?Это просто компьютер внутри стола?

4 отличительных особенности

• Высокий уровень интерактивности Управление с помощью пальцев Никаких клавиатуры и мыши!

• Мультитач Поддержка 52 одновременных касаний

• Широкие возможности совместной работы Как отдельные элементы управления, так и целые приложения

специально оптимизированы

• Распознавание объектов Объекты распознаются по форме или по специальным кодам

Put & Play

• Легкое взаимодействие с внешними устройствами (через WLAN и Bluetooth)

• И с обычными окружающими нас предметами

История

• Идею формализовали Стивен Бефич и Энди Уилсон в 2001 году

• В 2003 году концепт одобрен Биллом Гейтсом• Продукт представлен 29 мая 2007 года Стивом

Балмером на конференции D5• Первый стол появился 17 апреля 2008 года в

салоне мобильного оператора AT&T

Область применения

Область применения

• Привлечение новых клиентов• Улучшение лояльности и повышение

удовлетворенности существующих клиентов

• Оптимизация операций

Розничныепродажи

Развлечения Автопром Финансовыеуслуги

Здравоохранение

Область применения

Что внутри Microsoft Surface?

Архитектура MS Surface

Microsoft Surface – аппаратная часть и драйверы

Windows Vista SP1

Система отображения Интеграция с ОС

Core API (XNA) Shell UI & APIs

Приложения Surface

WPF API

Аппаратная составляющая

1. Отражающая поверхность2. Светоизлучающий диод3. Инфракрасные камеры4. Проектор DLP

Surface и WPF

• Проекция особенностей MS Surface на возможности WPF

• Расширенные версии контролов WPF• Контролы, учитывающие специфику Surface UX• Базовые классы для создания новых

контролов Surface

XAML <s:SurfaceWindow> <Canvas s:Contacts.ContactDown=“OnContactDown“> <s:SurfaceButton Click=“OnButtonClick”/> </Canvas> </s:SurfaceWindow>

Code void OnContactDown(object sender, ContactEventArgs e) { // ... } void OnButtonClick(object sender, RoutedEventArgs e) { // ... }

XAML <Window> <Canvas Mouse.MouseDown=“OnMouseDown“> <Button Click=“OnButtonClick”/> </Canvas> </Window>

Code void OnMouseDown(object sender, MouseEventArgs e) { // ... } void OnButtonClick(object sender, RoutedEventArgs e) { // ... }

Различия в коде минимальны

Расширенные версии контроловSurfaceWindow

• Всегда в режиме fullscreen• Расположено к запустившему

приложение пользователю

SurfaceMenuSurfaceContextMenu

SurfaceMenuItem• Несколько элементов могут

использоваться одновременно

SurfaceButtonSurfaceRadioButton

SurfaceCheckBoxSurfaceToggleButton

• Событие “click” возникнет только тогда, когда все другие

контакты с поверхностью прекратятся

Расширенные версии контроловSurfaceListBox

SurfaceScrollViewer• Различает прокрутку и выбор

• Контрол инерциален

SurfaceSliderSurfaceScrollBar

• Контрол инерциален• Бегунок едва различим, когда

контрол не используется

SurfaceTextBoxSurfacePasswordBox

• При нажатии запускает виртуальную клавиатуру,

расположенную к пользователю

Что дает такой легкий перенос?

• Многое для разработчиков:– Быстро начать на новой платформе– Можно использовать уже существующий код,

навыки и средства• …но для пользователей не имеет смысла

Это и правда просто

компьютер?

Сколько у нас на часах?

17:44?

Постоянно обходить стол

вокруг? Неприкольно…

Зачем мне нужно ждать

своей очереди?

Учитывайте специфику Surface!

ScatterView• Одновременная работа

нескольких человек• Мультитач и жесты• 360 ° UI – взаимодействие

с любой стороны стола• Натуральное

взаимодействие с виртуальными объектами

TagVisualizer• Распознавание объектов• Натуральное

взаимодействие с физическими объектами

Это просто мегакомпьютер

Ага, я вижу сколько сейчас

времени!

Ух ты! Прикольная штука!

Мы с друзьями не мешаем друг

другу

Распознавание объектовContact.Tag.Byte256 уникальных значений

Contact.Tag.Identity>340 282 366 920 938 000 000 000 000 000 000 000 000уникальных значений

Byte Tags

Identity Tags

Byte Tag

• Некоторые точки являются индикаторами расположения

• Уже сейчас 3 приложения Surface интегрированы в Windows 7 Touch Pack

• Surface Globe• Surface Collage• Surface Lagoon

Surface и Windows

Surface HardwareWindows

Vista

Windows 7

NativeWin32

Application

WPF 3.5 SP1

Surface SDK1.0

Managed Wrapper and

Interop

WinForms Application

WPF 4.0 w/ Multi Touch APIs

Multi-Touch Controls

Surface Multi-Touch

Controls &API

Multi-Touch API

Surface Toolkit for Windows

Touch

Multi-Touch Controls &

API

WPF Application

Surface Application

Surface и Windows

Surface Toolkit for Windows Touch

• Бета-версия выпущена 12 апреля 2010 года• Построена на .NET 4 Touch API• Содержит оригинальные контролы Surface

Технологии совершенствуются…

Microsoft Surface 2.0

История

• Вторая версия Microsoft Surface впервые была представлена 6 января 2011 года на выставке Consumer Electronics Show 2011

• Для заказа новый стол стал доступен в январе 2012 года

Аппаратная составляющая

1. Защитное стекло2. LCD-панель с интегри-

рованными сенсорами3. Оптические листы4. Подсветка со

светодиодами в видимом и ИК-диапазонах

5. Блок для встраивания компьютера

PixelSense

• Контакт (палец/метка/объект) касается дисплея• ИК-элемент создает луч, который отражается от контакта• Отраженный луч улавливается встроенными сенсорами• Сенсоры конвертируют световой сигнал в электрический

сигнал• Значения от всех сенсоров поверхности формируют

изображение• Изображение проходит цифровую обработку• Результат отправляется на обработку компьютеру. Он

включает скорректированное изображение и данные о контактах

Изменения в SDK

• Один и тот же код создает приложение для Surface 2.0 и Windows Touch

• Новые средства эмуляции• Определение положения поверхности:

горизонтальное или вертикальное

Вопросы?

Полезные ссылки

• Microsoft Touch Pack for Win7: http://cut.ms/buai• Sufrace SDK 1.0 SP1: http://cut.ms/buaj• Surface SDK 2.0: http://cut.ms/buak• Блог разработчиков: http://

blogs.msdn.com/b/surface/

Спасибо за внимание!

Сергей Звягин, Ingate DevelopmentE-mail: bingofirst@gmail.com

Twitter: @Bingo87