Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / XAML

UltraHello

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
15 Oct 2012CPOL6 min read 16.8K   5   5
Unconventional uses of Sensors!

This article is an entry in our AppInnovation Contest. Articles in this sub-section are not required to be full articles so care should be taken when voting.

Introduction

UlraHello is the new way of saying Hello World! to Ultrabooks. Ultrabooks are devices which are thin, light, have great battery life and still pack the punch in terms of performance. Ultrabooks also have sensors unlike any laptops/desktops. Apart from the conventional uses of sensors, they can also be used to do things they were never meant to do! They can be used to create applications which are more aware about their environment and are more alive. UltraHello takes advantage of the UltraBook capabilities and helps you enter a virtual world where you interact with objects/environments using these new sensing capabilities.

This is a WinRT application developed using C# and XAML.

Image 1

Goal

Revealing the full concept here with screenshots. The screenshots do not represent the final designs as they may be changed for better. Also, new capabilities, levels will be added before the final submission.

Feature Walkthrough

1) Manipulation Through Touch

UltraHello exploits multitouch capabilities and allows user to interact with the world objects using their fingers. The world simulates physics using Farseer Physics Engine which makes breaking, throwing and colliding objects very realistic. Users can slash objects using upto four fingers which makes it much more fun than using a mouse.
Users also get to produce fireworks using touch at upto 4 points simultaneously which is impossible on Laptops/Desktops.

Image 2

Capabilities Utilized

  • Multitouch to manipulate multiple objects
  • Performance to emulate very realistic physics comes from the Core i5 ULV processors

2) World Gravity Manipulation through Accelerometer/Gyroscope

UltraHello will allow you to manipulate the world gravity using the accelerometer and gyroscore. Just change the physical orientation of the device and see the world behave in a completely different manner! You may invert the gravity or make it go haywire!

Image 3

Image 4

Capabilities Utilized

  • Acclerometer/Gyroscope for calculating gravity

3) Whirling and Shaking with Compass

Usual compass applications are coded by using two values, one which is the current compass reading and the other which attempts to reach out to the final reading. This gives a smooth and realistic compass view. Creating whirls is easy, just provide acceleration to the follower variable rather than a constant velocity. Each ring in the dial below will have different initial angular velocities and horizontally rotating the device will beautifully manipulate them based on compass readings.

Compass can help in horizontal movement detection if you continuously monitor the north position. Thus, it can be used for detecting perfectly horizontally shaking device.

Image 5

Capabilities Utilized

  • Compass to retrieve whirling data

4) Themes Based on Weather and Location

UltraHello automatically analyzes the weather and location of the user and sets the world theme accordingly. Like if it's raining, a world with raining background appears which is aesthetically pleasing. UltraHello also detects common places like zoos and jungles and if you run UltraHello there, it will automatically set an appropriate theme. This feature makes this application more alive and more location/environment aware.

Image 6

Image 7

Capabilities Utilized

  • GPS to access geo coordinates and Maps API to access actual location name
  • Weather services

5) Ambient Light Sensing

Ultrabook has two variants for each theme Light and Dark, utilizing Ambient Light Sensing technology UltraHello sets a light theme if it's a dark environment and a dark theme if it's a bright environment. This again makes it more environment aware.

Image 8

Image 9

Capabilities Utilized

  • Ambient light sensing

6) Using New Touch Feedback Provided by Windows 8 with Fluid Dynamics

Windows 8 provides us with rotation data when a user rotates an object using two fingers. UltraHello takes advantage of this gesture and allows you to do stuff like emulate water flow from one glass to the other. Again, not possible with just a mouse!

Image 10

Capabilities Utilized

  • Ultrabook performance to emulate fluids
  • Touch data

Using the Code

Now let's see how to do some of the things which have been mentioned in this article. The farseer wrapper which I'm using is Physics Helper XAML (available on CodePlex). It is very neat and works on both WP7 and WinRT.

Adding Physics Helper XAML to Your Project

  1. Get it from http://physicshelperxaml.codeplex.com/
  2. Right-click the solution and select "Add Existing Project". Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
  3. Right-click the solution and select "Add Existing Project". Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
  4. From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Creating Farseer Objects

  • Add this namespace on top of your XAML page.
    XML
    xmlns:FarseerHelper="using:Spritehand.FarseerHelper" 
  • Now create a physics canvas, all the physics enabled sprites will be children of this canvas. MousePickEnabled helps the user to manipulate objects with touch/mouse.
    XML
     <FarseerHelper:PhysicsCanvas Height="768" Width="1366" MousePickEnabled="True">
    </ FarseerHelper:PhysicsCanvas >   
  • Now you can create sprites inside the canvas in the following manner:
    XML
    <FarseerHelper:PhysicsCanvas Height="768" Width="1366" MousePickEnabled="True">
        <FarseerHelper:PhysicsSprite Height="100" Width="100" Canvas.Left="311" Canvas.Top="540">
        <Rectangle Fill="#FFAC809A" Height="100" Stroke="Black" Width="100"/>
        </FarseerHelper:PhysicsSprite></ FarseerHelper:PhysicsCanvas >   
  • Canvas has various other properties like GravityHorizontal and GravityVertical which can help you do some amazing stuff. Making a sprite Static makes it immovable and this technique should be used to make world boundaries.

I'm not going to explain the basics here since they are already well explained in Physics Helper XAML documentation. Thus, I'll go ahead to the fluid part. Now the blue dots you see in one of the screenshots are definitely not fluid like but I'll tell you techniques to make them so. I'll provide the full source code later.

What are Joints?

A joint, as the name suggests, joins two physics sprites. Now this joint can be welded, i.e., very stiff or can be elastic. Observe the following syntax:

XML
<FarseerHelper:PhysicsJoint Height="8" Width="8" Canvas.Left="1086" 
Canvas.Top="441" BodyOne="_5" BodyTwo="_6" AngleSpringConstant="0.2"/> 

This is a joint at the (1086, 441) between body _5 and body _6 (sprites) and is elastic with constant 0.2.

Next (Expression Blend)

Image 11

Those tiny dots are the physics joints, create joints between all the sprites and you'll emulate liquid's force of attraction! Now this might not be very accurate but with extra ellipses to cover empty spaces, this does become very usable!

A Look at the Use of Sensors

It is very easy to utilize sensors in WinRT and most of the sensors share the same style of coding:

  • Let's use the accelerometer, add the following namespace in your C# code:
    C#
    using Windows.Devices.Sensors;  
    C#
    Accelerometer accelerometer;
    
    C#
    accelerometer = Accelerometer.GetDefault();
    accelerometer.ReadingChanged += accelerometer_ReadingChanged;
    accelerometer.ReportInterval = accelerometer.MinimumReportInterval;
    

    Say playerBlock is your PhysicsSprite and you want to move it with accelerometer, do something like (experiment with values please!):

    C#
    void accelerometer_ReadingChanged(Accelerometer sender, AccelerometerReadingChangedEventArgs args)
           {
    
          playerBlock.Position = new Vector2() { X = (float)
                  (playerBlock.Position.X + args.Reading.AccelerationX),
                   Y = (float)(playerBlock.Position.Y - args.Reading.AccelerationY) };
                       playerBlock.Update()
    
               }
    

Neat Trick

Pay attention to playerBlock.Update(); above, this is required to keep the sprite inside the engine in sync with the one you see on the screen. Don't forget this point!.

Points of Interest

Ultrabooks are truly amazing devices - they bring the aesthetic pleasure on the Windows PCs for the first time along with the sensing capabilities. WinRT also makes it very easy to take advantage of the new capabilities of these systems. Ultrabooks + Windows 8 is definitely the technology due to look forward to!

In the end, I would like all those who use Farseer to please pay attention to the "Neat Trick".

Future Plans

  • Code for fluid simulation
  • Manipulating gravity with accelerometer
  • Code for producing the Whirl effect

History

  • 16th October, 2012: First post!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
I'm a Microsoft Certified Solutions Developer (MCSD), student, technology enthusiast etc, and I also co-founded a startup named Codlash Technologies Private Limited based in India (http://www.codlash.com)

I have been coding for more than 6 years and have 3 years of experience in WPF/Silverlight/C#.

LinkedIn Profile: http://in.linkedin.com/in/naqvitalha/

My Windows 8 apps can be seen at: http://www.codlash.com/Products/List

My Windows Phone apps: http://www.windowsphone.com/en-us/search?q=talha%20naqvi

Comments and Discussions

 
GeneralMy vote of 5 Pin
Joezer BH4-Aug-13 20:31
professionalJoezer BH4-Aug-13 20:31 
QuestionOrbits Pin
Member 94234931-Dec-12 20:41
Member 94234931-Dec-12 20:41 
QuestionGreat work with Engine Pin
Ojas Sinha21-Oct-12 18:43
Ojas Sinha21-Oct-12 18:43 
AnswerRe: Great work with Engine Pin
Joezer BH4-Aug-13 20:30
professionalJoezer BH4-Aug-13 20:30 
GeneralMy vote of 5 Pin
Nirmit Kavaiya16-Oct-12 0:16
professionalNirmit Kavaiya16-Oct-12 0:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.