Writting on Canvas in Windows Store App

This video demonstrate the canvas in action with Windows Store app. We can write or make drawings using canvas. We can draw/write custom lines/letters using finger/mouse/pen on screen in Windows Store Apps. We are using Html5, CSS and JS to demonstrate the same.

Presented By: Nirmal Hota, Cross-Platform Mobile and Windows Phone Lead, Mindfire Solutions

Settings Flyout in Windows Store App

The video displays the use of settings flyout in the Windows Store apps. It is also displays the ways to open the system settings flyout as well as creating and consuming the custom settings flyout.

Presented By: Nirmal Hota, Cross-Platform Mobile and Windows Phone Lead, Mindfire Solutions

Drawing on screen by finger touch in Windows Store App

Introduction

In some mobile projects, Many times I have come across about the requirement of drawing some figure on a mobile screen in a specified area by using the finger touch. Below is an example of very simple drawing mechanism in WinRT environment.

Description

To begin with the example, we must think about the logic of implementing the same. So considering the idea of drawing on screen, the primary thought coming to mind is CANVAS.

Yes, we will use the canvas object here to draw the objects on screen. Continue reading

Detect input pointer device in Windows Store App

Introduction

The Windows Store Application can run in any Windows 8 supported devices. Such as in Win8 desktops, Surface Tablets, touch sensitive devices etc.

In the desktop environment, to perform operations like button clicks etc we need to use the MOUSE as the input pointer device.

In tablet or touch sensitive devices to perform such operation we need to use the FINGER TOUCH as the input pointer. Also we can use PENs to perform the touch operation.

Let’s assume a scenario where we need to program on basis of the pointer device used in the application. Below is one of the example to detect the pointer device.

Description

In the below example we are trying to sense the pointer device.

Html file contect


   <span class="spnTouch" id="spnDevice">Touch/Click Me</span>
  <img id="imgDevice" alt="" />

Continue reading

Invoking Camera Using WinJS

Introduction

Couple of days back, I got a task to capture image of an user. The image area is very limited in size. The user has to crop the image as per the required size and area to display. Before start worrying about the same, I was glad to see the features provided by WinJS.

We can use Windows.Media.Capture.CameraCaptureUI to invoke the camera and capture image. This not only shows the camera UI on screen but also displays the cropping options along with pixel adjustment and timer options.

Below is just a simple example of how it works.

HTML PART:-

<body>
    <input type="button" id="btnOpenCamera" value="Open Camera" />
    <br />
    <img src="#" id="imgCapture" alt="Caputured Image" style="display:none" />
</body>

We have added a button to open the camera and an image control to display the captured image on screen.

Continue reading

One Way Data Binding In WinJS

Introduction
Data binding is one of the key feature in the application development. One way data binding is the way to reflect the data in the control from a model. Any up-gradation made to the data in the model it will reflect in the control to which it is bound.

One way data binding
Below is a one way binding application example to see how it is really working. Let’s add a page item to the project. This will add 3 files in general. One JS file, Html file and a CSS file with the same name specified for the page item.

Continue reading

Displaying popups Using Flyouts WinJS Control

Introduction

Flyouts are also a kind of popup. They appear on the screen on request. Unlike the dialogs, flyouts are usually non-modal. It is a WinJS control which can be customized basing upon the requirement.

Unlike the dialogs, Flyouts can be closed by clicking somewhere in the screen area out side the flyout itself. We can customize the look feel along with the display position of the flyout.

Continue reading