Rajnish Noonia

Category: General

  • Windows 8: TopMost window

    TopMost

    I am working on my next ambitious project “MouseTouch” which is multi touch simulator application for windows 8 platform and intended to increase the productivity if you are running windows 8 on non-touch device.

    This will bring the touch feature of windows 8 to life even if you are using mouse pad.

    The first challenge is how to render something on top of metro start menu items?

    So if you want to create a true topmost window which can float even on top of windows 8 metro apps here are the simple steps..

    1. Create WPF visual studio application (or any other window app )
    2. Set TopMost=True for MainWindow
    3. Right-click on your project in the Solution Explorer
    4. Select “Add New Item” from the context menu.
    5. Choose “Application Manifest File” from the list of options in the dialog box that appears.
    6. Right-click on your project in the Solution Explorer and click “Properties” (or double-click on the “Properties” item under your project).
    7. Under the first tab (“Application”),select your app.manifest file from the drop-down box labeled “Manifest”.
    8. Set the, <requestedExecutionLevel level=”asInvoker” uiAccess=”true” />

    The next part is to create a certificate and install it in trusted root authorities.

    1. Create certificate
      1. makecert -r -pe -ss PrivateCertStore-n “CN=TopMost.com” topmost.cer
    2. Import certificate to (Local Machine) trusted root certification authorities using mmc.exe.

    Now sign your executable using the certificate, either by using the command, or using visual studio (check the delay sign flag).

    1. Signtool sign /v /s PrivateCertStore /n TopMost.com /t http://timestamp.verisign.com/scripts/timestamp.dll TopMost.exe

    Now copy the TopMost.exe to trusted location like c:Windows or program files and execute the TopMost.exe..

    Still struggling ..

    Ok if , executable is not signed or certificate is not installed properly, you see following exception

    referralError

     

     

     

     

     

     

     

    To avoid this exception, open mmc.exe, add certificates snap-in>Select Computer account>Local Computer>

    Go to trusted root certification authorities>certificates>right click > tasks and import the certificate ..

    CertInstall

  • Microsoft Surface & Windows 8

    Microsoft Surface

     Black, bevelled and beautifully designed, a tablet that’s a unique expression of entertainment and creativity. A tablet that works and plays the way you want. A new type of computing. Surface.

    Windows 8

    If you only want a quick look round at the Windows 8 highlights, then, the safest approach is to install it on a VirtualBox virtual machine. You won’t have to spend time freeing up a laptop or creating a new partition, and can browse the new Metro interface in a window on your desktop: far more convenient.

    Installation

    And finally here are few screen shots

    Start building on Windows 8 > http://www.buildwindows.com/

    Designing Ux for Apps : http://msdn.microsoft.com/en-us/library/windows/apps/hh779072

    Windows 8 Animations : http://msdn.microsoft.com/en-us/library/windows/apps/hh975420

    Coming soon > Tech. in-depth on windows 8_

  • Silverlight for Symbian S60 devices

    Microsoft has released Silverlight platform design to work with Symbian S60 devices at the on MIX10 conference at Las Vegas.The plateform is now available for Nokia SymbianOS (S60 5th Edition) devices i.e. Nokia 5235, 5800 XpressMusic, Nokia N97 and Nokia N97 Mini Mobiles. I did some basic test with nokia 5235 and it runs with charm.

    The current Silverlight beta for Symbian comes in two forms – one as an installer for Symbian (S60 5th edition) devices and the second one in the form of a developer tools suite for developing Silverlight applications for Symbian devices including emulator etc.

    Silverlight includes a Runtime that is optimized to display content on memory-constrained devices.

    •  The ability to view Silverlight applications in the mobile browser.
    •  Tools to build Silverlight applications that target devices

    Microsoft has bought the Silverlight platform to a non-Microsoft mobile platform for the first time ever.

    In order to get started with Silverlight for Symbian, you will want to familiarize yourself with the platform capabilities.

    More resources are available on microsoft website.

    Days are not far when you will see silverlight on rest of consumer devices ..

  • 3d Lenticular (3d Without Glasses)

    After Anaglyph 3DPlayer from last month, the next challenge is to create 3d without glasses using lenticular sheet. A lenticular lens is an array of magnifying lenses, designed so that when viewed from slightly different angles, different images are magnified. The most common example is the lenses used in lenticular printing, where the technology is used to give an illusion of depth, or to make images that appear to change or move as the image is viewed from different angles.

    Lenticular imaging is a multi-step process consisting of creating a lenticular image from at least two existing images, and combining it with a lenticular lens. This process can be used to create various frames of animation (for a motion effect), offsetting the various layers at different increments (for a 3d effect).

    To create output from two input images here in this article you will find lenticular shadder effect (WPF).With lenticular effect you can transform image or video into lenticular source within WPF or online Silverlight application. The heart of lenticular effect is HLSL (High Level Shader Language) code

    int pxW =floor (PixelWidth);
    float virtualRow;
    if(Direction ==0)
    virtualRow =round( (uv.y * ImageHeight)/(floor (PixelWidth)));
    else
    virtualRow =round( (uv.x * ImageWidth)/(floor (PixelWidth)));
    
    if (virtualRow % 2 >= 1) //Odd Even Rows
    return tex2D(RightImage, uv);
    else
    return tex2D(input, uv);

    The HLSL code above calculates the pixel position and determines from which source it has to pick the pixel color information to create final output. To create and test HLSL program I have used Shazzam pixel shader utility which is very nice tool to quickly develop shader logic.

    The attached Silverlight project uses lenticular effect to render merged images and to convert it into good looking 3d, you need to precisely align lenticular sheet on top of your laptop.

    Lenticular output from Silverlight project and final look, after you put your lenticular sheet

             .

    xaml behind project is

    <Image Margin="20" Stretch="None" Name="imageSource" Source="/LenticularEffect3D;component/Uta_bar_sm 1.png">
    <Image.Effect>
    <effects:LenticularEffect ImageWidth="{Binding ElementName=imageSource,Path=ActualWidth}" ImageHeight="{Binding ElementName=imageSource,Path=ActualHeight}" x:Name="lenticularEffect"  Direction="1" PixelWidth="1" >
    <effects:LenticularEffect.RightImage>
    <ImageBrush Opacity="1"  ImageSource="/LenticularEffect3D;component/Uta_bar_sm 2.png">
    </ImageBrush>
    </effects:LenticularEffect.RightImage>
    </effects:LenticularEffect>
    </Image.Effect>
    </Image>

    The lenticular sheet has specific ppi (pixel per inch) , since we are trying to produce 3d from laptop screen (TFT DPI 120) and you have to somehow match the picture pixels to screen & screen dpi to lenticular sheet to get desired results. I was not able to achieve very good 3d output as you will need matching ppi lenticular sheet and very high resolution screen to fix at least two pixes under single lenticular lense.

    Download source code

  • 3d Player

    Silverlight 3d Player: Anaglyph 3DPlayer.

    Why objects looks 3d in real world and why they look flat when you view them on your TV or laptop. When you focus on an object, your brain takes into account the effort it required to adjust your eyes to focus on it as well as how much your eyes had to converge. Together, this information allows you to estimate how far away the object is.Since there is gap between your two eyes i.e bath eyes have two slightly different pictures of same object and you mind then interprets objects depths and object looks 3d.Where as in flat panel display you two eye see exactly same picture.

    The secret to 3-D television and movies is that by showing each eye the same image in two different locations, you can trick you brain into thinking the flat image you’re viewing has depth. But this also means that the convergence and focal points don’t match up the way they do for real objects. While your eyes may converge upon two images that seem to be one object right in front of you, they’re actually focusing on a screen that’s further away. This is why you get eye strain if you try to watch too many 3-D movies in one sitting.

    Passive Glasses

    To view pictures as 3d there are two main categories of lenses used to filter image from single picture for your left and right eye and these are passive/active lenses. The classic 3-D glasses have anaglyph lenses which uses two different color lenses to filter the images you look at on the television screen. The two most common colors used are red and blue. The software to render picture on screen produces two sets of images slightly offset from one another. One will have a blue tint to it and the other will have a reddish hue. If you put on your glasses, you should see a single image that appears to have depth to it. The red lens absorbs all the red light coming from your television, canceling out the red-hued images. The blue lens does the same for the blue images. The eye behind the red lens will only see the blue images while the eye behind the blue lens sees the red ones. Because each eye can only see one set of images, your brain interprets this to mean that both eyes are looking at the same object. But your eyes are converging on a point that’s different from the focal point — the focus will always be your television screen. That’s what creates the illusion of depth.

    Test this you tube link  with your anaglyph glasses.

    Active Glasses

    You still wear 3-D glasses with this method, but they don’t use colored lenses. The method doesn’t compromise the color quality of the image as much as anaglyph glasses do. It also doesn’t require you to put a polarization film on your television screen. The glasses use liquid crystal display (LCD) technology to become an active part of the viewing experience. They have infrared (IR) sensors that allow them to connect wirelessly to your television or display. As the 3-D content appears on the screen, the picture alternates between two sets of the same image. The two sets are offset from one another similar to the way they are in passive glasses systems. But the two sets aren’t shown at the same time — they turn on and off at an incredible rate of speed. In fact, if you were to look at the screen without wearing the glasses, it would appear as if there were two sets of images at the same time. The LCD lenses in the glasses alternate between being transparent and opaque as the images alternate on the screen. The left eye blacks out when the right eye’s image appears on television and vice versa. This happens so fast that your mind cannot detect the flickering lenses. But because it’s timed exactly with what’s on the screen, each eye sees only one set of the dual images you’d see if you weren’t wearing the glasses. You can’t use a standard television and expect active glasses to work. You must have some way to synchronize the alternating images on the screen with the LCD lenses in the glasses.

    Lenticular Displays (3D Posters)

    There’s another way to create three-dimensional images that you may see in 3d posters commonly available in market. This method relies on a display coated with a lenticular film. Lenticules are tiny lenses on the base side of a special film. The screen displays two sets of the same image. The lenses direct the light from the images to your eyes — each eye sees only one image. Your brain puts the images together and you interpret it as a three-dimensional image. This technology requires content providers to create special images for the effect to work. They must interlace the two sets of images together. If you were to try and view the video feed on a normal screen, you would see a blurry double image.
    Another problem with lenticular displays is that it depends upon the audience being in a sweet spot to get the 3-D effect. If you were to move to the left or right from one of these sweet spots, the image on the screen would begin to blur. Once you moved from one sweet spot to another, the image would return to a cohesive picture.

    Experimenting 3D

    Within this article I am going to experiment several techniques and will use Microsoft WPF or silverlight to generate images on laptop screen. The simplest method is to start with anaglyph glasses technique. I have already tried Lenticular technique and its very difficult to achieve the desired results on laptop screen as precise alignment and eyes angle is required between laptop screen, Lenticular sheet and your eyes.Lenticular methods is however may suits for laptops and there is generally single user with fixed angle. I will try this method after anaglyph lenses technique.

    Generating pictures for anaglyph lenses
    Anaglyph images provide a 3D stereoscopic effect when viewed with red/cyan glasses. This article shows how to use a WPF shader effect to blend a image to produce the anaglyph illusion. This shader can be used for any kind of WPF UIElement.

    The anaglyph effect combines two image sources, the result is the red channel from the left image source and the green and blue channels from the right image source. The alpha is taken as the max of the two image sources. It is implemented with the following HLSL code:

    sampler2D input1 : register(S0); // right image input
    sampler2D input2 : register(S1); // left image input

    float4 main(float2 uv : TEXCOORD) : COLOR
    {
    float4 Color1;
    Color1 = tex2D( input1 , uv.xy);

    float4 Color2;
    Color2 = tex2D( input2 , uv.xy);

    Color1.r = Color2.r;
    Color1.g = Color1.g;
    Color1.b = Color1.b;
    Color1.a = max(Color1.a,Color2.a);

    return Color1;
    }

    Install Microsoft DirectX SDK, and add the fxc compiler to the path C:/Program Files/Microsoft DirectX SDK/Utilities/bin/x86 or similar.

    The shader effect can be compiled with the command:

    fxc /T ps_2_0 /E main /Fo AnaglyphEffect.ps AnaglyphEffect.fxThen, add the compiled pixel shader (.ps) to the project as a Resource.
    The AnaglyphEffect class contains dependency properties for LeftInput and RightInput. These Brush inputs are used to define the input sources for the anaglyph blending shader.

    I have not been using the RightInput property, since the effect is applied to the right image source element in all these demos.

    The source code can be found in Home.xaml

    <Grid x:Name=”GrdMain” Background=”Black” >
        <Border BorderBrush=”White” BorderThickness=”1″ Padding=”2″ HorizontalAlignment=”Center” Background=”Transparent” VerticalAlignment=”Center”>
                <Grid>
                    <Image Opacity=”1″ Margin=”20″  Stretch=”Uniform” Name=”imageSource” Source=”/Anaglyph3DPlayer;component/images/l.JPG” >
                    <Image.Effect>
                        <effects:AnaglyphEffect x:Name=”Effect1″ >
                            <effects:AnaglyphEffect.RightInput >
                                    <ImageBrush Opacity=”1″ Stretch=”Uniform”  ImageSource=”{Binding ElementName=imageSource,Path=Source}”>
                                    <ImageBrush.Transform>
                                            <CompositeTransform  Rotation=”0.2″ SkewX=”0.2″ SkewY=”0.2″ TranslateX=”3″ TranslateY=”3″/>
                                    </ImageBrush.Transform>
                                </ImageBrush>
                            </effects:AnaglyphEffect.RightInput>
                        </effects:AnaglyphEffect>
                    </Image.Effect>

                </Image>
                    <TextBlock HorizontalAlignment=”Right” VerticalAlignment=”Bottom” Text=”3D Picture – by Rajneesh” Margin=”2″>
                        <TextBlock.Effect>
                            <DropShadowEffect BlurRadius=”8″ ShadowDepth=”0″ Color=”White”/>
                        </TextBlock.Effect>
                    </TextBlock>
                </Grid>
            </Border>
            <Button Click=”Change_Picture” Content=”Change” Padding=”5″ Margin=”5″ HorizontalAlignment=”Right” VerticalAlignment=”Bottom” />
        </Grid>

    For real 3d effect two images are required one for left eye and another for right eye however in this sample i have used only single image to produce 3d effect.

    Put you Anaglyph glasses shown in the picture below

     and launch this silverlight application Anaglyph 3DPlayer.
    The source code for this project can be downloaded here…