210 likes | 216 Views
Unlock the power of group collaboration with Microsoft Surface Hub. Discover the best way to create, brainstorm, and engage in a modern workplace. Explore its features, from the wide-angle camera to NFC reader, and learn how to optimize your apps for this platform. Building and publishing apps for Surface Hub is made easy, with tips on targeting Universal Windows Apps. Design considerations, interaction zones, and app positioning tips are also covered. Maximize your Surface Hub experience with custom layouts and XAML techniques. Ensure your apps are touch and pen-friendly for seamless user interaction. Dive into the Surface Hub journey, featuring demos and helpful resources for app development. Start optimizing now for an engaging large screen experience.
E N D
Go Big! Optimizing Your Applications for Large Screen Experiences Mark Rideout Senior Program Manager P4115
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
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
Demo: Surface Hub Overview Mark Rideout
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
Publishing through Dev Center Leave default availabilities checked: The last item enables targeting to Surface Hub
Publishing through Dev Center Enable offline licensing, allowing orgs to deploy your app using management tools:
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
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
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
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”
Demo: Building Apps Mark Rideout
Demo: Customizing Layout Mark Rideout
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.
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
Sensor APIs Motion Sensor Windows::Devices::Sensors::ProximitySensor Ambient Light Sensor Windows::Devices::Sensors::LightSensor
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; }