Go Big! Optimizing Your Applications for Large Screen Experiences

2. Go Big! Optimizing Your Applications for Large Screen Experiences Mark Rideout Senior Program Manager P4115

3. Microsoft Surface Hub – Unlock the Power of the Group Engaging and productive meetings Designed for the modern workplace Best way to create and brainstorm with others Platform for amazing large screen apps

4. All in one Microphone Array Wide Angle Camera 1080p WiFi and Bluetooth Motion and Light Sensors Wide Angle Camera 1080p Motion and Light Sensors NFC Reader Speakers Speakers Pen and Charging Dock Pen and Charging Dock LCD Low Friction, Anti Glare Surface Pen and Touch Sensor, 120Hz 84” 4K and 55” 1080P Integrated Compute

5. Demo: Surface Hub Overview Mark Rideout

6. Building and Publishing Apps for Surface Hub

7. Building Apps for Surface Hub is Easy • Surface Hub runs Universal Windows Apps • Device Family targeting • Ensure your app targets Windows.Universal so you’re available to Surface Hub devices • Not supported: • Win32 application • Desktop Bridge UWP (packaging up Win32 code to UWP package) • Windows 8/8.1 applications

8. Publishing through Dev Center Leave default availabilities checked: The last item enables targeting to Surface Hub

9. Publishing through Dev Center Enable offline licensing, allowing orgs to deploy your app using management tools:

10. Designing Apps for Surface Hub

11. Session Cleanup • Surface Hub is a communal device • At the end of every session, all application data, documents, pictures, media, temporary files will be deleted • To avoid data loss, store any user data to the cloud or connected devices • Consider removing all first run experiences because they will run for every new session

12. Interaction and consumption zones Zone 2 – 84” Surface Hub Medium/Large Meeting Rooms 1.3m to 6m Zone 1 Near Screen Collaboration Screen to 1.3m Zone 2 – 55” Surface Hub Small/Medium Meeting Huddle Spaces 1.3m to 4m

13. Surface Hub App design considerations • Optimize for Pen and Touch • Know the user’s context and posture • Consider brightness and proximity of the user to the screen • Position and design UI controls appropriately

14. Positioning of controls and scaling appropriately • Apps scale automatically to fill • Scale content and controls appropriately for interaction at the screen • Make controls reachable and comfortable to use for multiple users • Controls at top of screen may be hard to reach • Duplicate controls or move to center of screen • Place core functionality within user’s “cone of awareness”

15. Demo: Building Apps Mark Rideout

16. Demo: Customizing Layout Mark Rideout

17. Call to Action • Intentionally design for Surface Hub • Provide a touch and pen first experience • Add adaptive layouts in XAMLhttps://docs.microsoft.com/en-us/windows/uwp/layout/layouts-with-xaml • Test your Surface Hub apps using Visual Studio Simulator(VS 2015 instructions) https://docs.microsoft.com/en-us/windows/uwp/debug-test-perf/test-surface-hub-apps-using-visual-studio • View previous Build sessions and talks on Surface Hub https://channel9.msdn.com/Events/Build/2015/2-660 and on Channel 9 • Continue your education atMicrosoft Virtual Academy online.

19. Demo Open Source Components • Carousel by Sebastien Pertus • LightStone • http://github.com/mimetislightstone • WinRT XAML toolkit by Filip Skakun • http://winrtxamltoolkit.codeplex.com • Open source components used in the demo

20. Sensor APIs Motion Sensor Windows::Devices::Sensors::ProximitySensor Ambient Light Sensor Windows::Devices::Sensors::LightSensor

21. Code Example for Querying the Pen ID privateconstuintWirelessIdUsagePage = 0x0D; privateconstuintWirelessIdUsage = 0x5B; privateint? GetPenId(PointerPointPropertiespointerProperties) { varhasId = pointerProperties.HasUsage(WirelessIdUsagePage, WirelessIdUsage); returnhasId ? pointerProperties.GetUsageValue(WirelessIdUsagePage, WirelessIdUsage) : (int?)null; }