Ultera Wall

Introduction  

AppInnovation Contest Category: Entertainment (Desktop App)

Ultera Wall is a unique wallpaper application that goes out of the box to satisfy needs of creative users. In addition to common features that most wallpaper apps offer, Ultera Wall has a lot more than that... Here is a feature list:

• Very easy to use – intuitive – Simple enough to provide one click access to all features 
• Multiple Images on wallpaper 
• Overlay images and text 
• Touch gestures to move, scale/zoom, crop & rotate -- images and text 
• Apply filters such as grey scale, black & white, sepia etc 
• Change transparency of any image/text 
• Option to automatically change wallpaper on ‘shake’ or after a configurable interval 
• Live preview  

Background   

There are many wallpaper applications out in the wild. However none of those have a fair balance of simplicity, ease of use and power.

On Ultrabook

Ultera Wall make use of following Ultrabook features: 

• Motion sensors (Gyro etc) to detect 'shake'
• Multi touch screen to give user full freedom while editing
• Ambient Light Sensor   

How It Works   

Ultera Wall wallpaper consist of 1 or more slides. Each slide has:

1. A base image (can have either no or 1 base image) 
2. Overlay Image (can have 0 to any number of overlay images) 
3. Overlay text (can have any number of overlay text objects) 

User Interaction

User can do all of the following operations on base image, overlay images and text:

• Move – using ‘drag’ or ‘flick’ gesture 
• Scale/Zoom – using zoom (spread & pinch) gestures 
• Crop – by moving image around ‘Live preview’ window 
• Rotate – by rotate gesture 
• Change transparency – using slider on side menu 
• Apply filters – using buttons on side menu 
• Change z-order (w.r.t. other overlays) – using buttons on side menu

Dynamic Wallpaper  

To support slide show and shake wallpaper, Ultera Wall agent runs in background so that it can change wallpaper whenever required.

Ultera Wall in Action

Illustration 1 

Image shows Ultera Wall creating wallpaper using different images and text objects with a base image: 

Preview

Wallpaper will look like this: 

Illustration 2

Image shows Ultera Wall creating wallpaper using different overlay images and text objects without a base image: 

Preview

Wallpaper will look like this: 

Technical Design

Ultera Wall will make most out of WPF and I am quite open to use any existing libraries to perofrm different tasks. WPF provides very good support in terms of loading/processing and exporting images. 

The code I will be concentrating the most on will be smooth "multi-touch" input and application's feedback on touch events because this is the gut of Ultera Wall.

Managed or Unmanaged Code

Ideally Ultera Wall shouldn't run into performance problems because every care will be taken to use WPF and .NET in optimized way. However under extraordinary circumstances some parts of code could be implemented in native code.

Logical Parts

Ultera Wall is divided into these modules: 

• Image transformation and processing 
• Asynchronous execution thread to monitor/change/apply wallpapers (e.g. shuffle wallpaper after interval)
• Image import & export library
• Input manager to map all touch input to actions on UI layer 
• UI layer with a main form that minimizes to system tray

Image Processing 

Here is some code that show how different filters will be applied.

using System.Drawing.Imaging;
using System.Drawing;
using System.Drawing.Drawing2D;

namespace UlteraWall
{
public class FilterManager
{
    private float[][] getMatrix()
    {
        float[][] matrix = {
            new float[]{1,0,0,0,0},
            new float[]{0,1,0,0,0},
            new float[]{0,0,1,0,0},
            new float[]{0,0,0,1,0},
            new float[]{0,0,0,0,1},
        };
        return matrix;
    }
    private Bitmap m_image;

    public FilterManager(Bitmap image)
    {
        m_image = image;
    }
    public void ApplySepiaTone()
    {
        ColorMatrix colorMatrix = new ColorMatrix(getMatrix());
        colorMatrix.Matrix00 = 0.393F;
        colorMatrix.Matrix01 = 0.349F;
        colorMatrix.Matrix02 = 0.299F;
        colorMatrix.Matrix10 = 0.769F;
        colorMatrix.Matrix11 = 0.686F;
        colorMatrix.Matrix12 = 0.534F;
        colorMatrix.Matrix20 = 0.189F;
        colorMatrix.Matrix21 = 0.168F;
        colorMatrix.Matrix22 = 0.131F;
        ProcessBitmap(colorMatrix);
    }
    public void ApplyGrayscale()
    {
        ColorMatrix colorMatrix = new ColorMatrix(getMatrix());
        colorMatrix.Matrix00 = colorMatrix.Matrix01 = colorMatrix.Matrix02 = 0.299F;
        colorMatrix.Matrix10 = colorMatrix.Matrix11 = colorMatrix.Matrix12 = 0.587F;
        colorMatrix.Matrix20 = colorMatrix.Matrix21 = colorMatrix.Matrix22 = 0.114F;
        ProcessBitmap(colorMatrix);
    }
    public void ApplyBrightness(int brightness)
    {
        if (brightness < -255) brightness = -255;
        if (brightness > 255) brightness = 255;
        ColorMatrix colorMatrix = new ColorMatrix(getMatrix());
        colorMatrix.Matrix40 = colorMatrix.Matrix41 = colorMatrix.Matrix42 = brightness / 255.0F;
        ProcessBitmap(colorMatrix);
    }
    public void ApplyContrast(float contrast)
    {
        if (contrast < -100) contrast = -100;
        if (contrast > 100) contrast = 100;
        contrast = (100.0F + contrast) / 100.0F;
        contrast *= contrast;
        ColorMatrix colorMatrix = new ColorMatrix(getMatrix());
        float tValue = (1.0F - contrast) / 2.0F;
        colorMatrix.Matrix00 = colorMatrix.Matrix11 = colorMatrix.Matrix22 = contrast;
        colorMatrix.Matrix40 = colorMatrix.Matrix41 = colorMatrix.Matrix42 = tValue;
        ProcessBitmap(colorMatrix);
    }

    private void ProcessBitmap(ColorMatrix colorMatrix)
    {
        Bitmap bmp = new Bitmap(m_image.Width, m_image.Height);
        ImageAttributes attrs = new ImageAttributes();
        attrs.SetColorMatrix(colorMatrix);
        Graphics g = Graphics.FromImage(bmp);
        g.InterpolationMode = InterpolationMode.NearestNeighbor;
        g.DrawImage(m_image, new Rectangle(0, 0, m_image.Width, m_image.Height), 0, 0, m_image.Width, m_image.Height, GraphicsUnit.Pixel, attrs);
        m_image = (Bitmap)bmp.Clone();
    }
}

Examples 

Here are some simple & intuitive Ultera Wall wallpapers showing different features & functionalities:

 

 

 

 

 

 

These are some examples, sky is the limit for your creativity...

Upcoming

• Further design updates 
• Further technical details 
• Full source code 

History

• 16-Oct-12 – Article publised
• 18-Oct-12 - Added technical design