On screen color picker

Picking color from a web page.

Color them is playing a key role inside any application, it helps user to recognize rather remember certain information like Errors, Notifications and Information. A recent project that I had to work on (A Dashboard), had a number of different colors specified from the design. And also each and every client meeting ended up with list of new color suggestion for example “Can you pick a color similar to this one/that one/darker version of this …..”. Picking a color from a image is easy if you have tools like Photoshop, but In my Dev machine I don’t have one, Even if I had it takes bit of extra memory JUST TO PICK A COLOR CODE.

Some time ago I visited a page from MSDN Forum which is about developing a screen pixel color reader similar to this one How do I test the color of a certain pixel or point.

With the help of it I have developed following Color Picker Application which will capture a screen pixel and copies the color code to Clipboard.

How to use

1. Run the ColorPicker.exe from …\ColorPicker\bin\Release\

2. Once it opened place the mouse cursor inside the ColorPicker Window and press and hold the mouse button.

3. Release the mouse button on anywhere on the screen to reveal color.

Code Explanation

        [DllImport("user32.dll")]
        static extern IntPtr GetDC(IntPtr hwnd);

        [DllImport("user32.dll")]
        static extern Int32 ReleaseDC(IntPtr hwnd, IntPtr hdc);

        [DllImport("gdi32.dll")]
        static extern uint GetPixel(IntPtr hdc, int nXPos, int nYPos);

        public Form1()
        {
            InitializeComponent();
        }

        private void lblColor_MouseDown(object sender, MouseEventArgs e)
        {
            var x = e.X;
            var y = e.Y;
        }

        /// <summary>
        /// Get the pixel color once mouse button released
        /// </summary>
        /// <param name="x">x position of the cursor</param>
        /// <param name="y">y position of the cursor</param>
        /// <returns>Color</returns>
        static public System.Drawing.Color GetPixelColor(int x, int y)
        {
            IntPtr hdc = GetDC(IntPtr.Zero);
            uint pixel = GetPixel(hdc, x, y);
            ReleaseDC(IntPtr.Zero, hdc);
            Color color = Color.FromArgb((int)(pixel & 0x000000FF),
                         (int)(pixel & 0x0000FF00) >> 8,
                         (int)(pixel & 0x00FF0000) >> 16);
            return color;
        }

        /// <summary>
        /// Load the selected pixel's color in to background label, 
        /// and code in to text box at the bottom
        /// </summary>
        private void lblColor_MouseUp(object sender, MouseEventArgs e)
        {
            this.Cursor = new Cursor(Cursor.Current.Handle);

            lblColor.BackColor = GetPixelColor(Cursor.Position.X, Cursor.Position.Y);
            txtColor.Text = HexConverter(lblColor.BackColor);
            Clipboard.SetText(txtColor.Text);
        }

        /// <summary>
        /// Converts color in to Hex Format
        /// </summary>
        /// <param name="c"></param>
        /// <returns></returns>
        private static String HexConverter(System.Drawing.Color c)
        {
            return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
        }

Download Code Here

Power and Performance of C++ Comes to C# with .NET Native

Sometimes it is very difficult choice to make whether to go for C++ with its power and performance or choose C# with the managed code and development speed. Microsoft recently gave a resolution to above question. Microsoft “.Net Native” is a compiler (currently supports for x64) which improves performance of .NET applications by precompiling managed code in to native codes using Microsoft’s C++ backend infrastructure. This mechanism is different from the NGen. 

NGen will compile .NET managed code into processor specific native images and stores it in local computer’s native image cache. Then the runtime can use native image cache instead of Just-In-Time(JIT) compiler to compile the original assembly.

However .NET native initially generates MSIL which will next processed by C++ optimizer, generating MDIL (Machine dependent intermediate language). These optimizations have increased the start up time up to 60%, while the memory footprint has been lowered by 15%, according to Mani Ramaswamy, Project Manager of the .NET Native team. .NET Native is currently a preview and is targeted at Windows Store apps, but the team intends to extend it to the general desktop .NET apps.

Getting started with .NET Native

TypeScript

Concerning last couple of years JavaScript has gone through an explosive growth and with HTML5 it delivers a rich user environment compared to any other server side scripting models.
But what is wrong with the JavaScript;
even though it is easier to learn basics of JavaScript; writing a application scale JavaScript is hard. And most importantly it is meant to be a scripting language not a programming language, so it lacks proper structuring mechanism which larger application model necessarily look for. 
But people still writing large scale applications using JavaScript with the help of tools like Google’s GWT and scriptsharp (a C# => JavaScript code transformer ).
TypeScript helps to strengthen JavaScript with what is lacks features like classes, module and static typing.

TypeScript is a language for application scale JavaScript development

Ultimately all TypeScript codes will be compiled to a plain JavaScript code. And most importantly the compiled code and the compiler works on Any browser, Any host and Any OS. Simply all JavaScript codes are TypeScript and just copying and pasting will work, optionally TypeScript can contain Static types Classes and Modules where all of those disappear at runtime.
Compiler and all libraries related are Open Source.

Install TypeScript

Once you installed there will be a new project type as follows;

Once the project created solution explorer will looks like,

Simply I’m not going to do any modifications to the code it generated as an example. Lets just go through the app.ts file

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

For the moment forget about all the matters with JavaScript, code above is very simple (even though I’m not a JavaScript expert). 

window has “onload” event which is subscribed with an anonymous method contains a new Greeter object with parameterized constructor (taking an HTMLElement as argument)…. Once start method called time should be displayed with 500 milliseconds interval.

Lets just see the output



While its running lets peek in to debugger generated code,



it has this app.js (Which is JavaScript) mapped to app.ts (which is TypeScript) and with in app.js we can see pure JavaScript code rendered.

var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }
    Greeter.prototype.start = function () {
        var _this = this;
        this.timerToken = setInterval(function () {
            return _this.span.innerHTML = new Date().toUTCString();
        }, 500);
    };

    Greeter.prototype.stop = function () {
        clearTimeout(this.timerToken);
    };
    return Greeter;
})();

window.onload = function () {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};//# sourceMappingURL=app.js.map

And most importantly check the index.html, it refers the app.ts as

 <script src="app.js"></script>