Modern UI aka Metro

Hi Guys,


For Accountable, i have decided to use Microsoft’s Modern UI (No more Metro) for the design. After careful consideration I have gone with Metro UI CSS instead of Code52’s Metro.css for the sole reason I was having trouble with MVC4’s bundling feature on LESS files which is what Metro.css uses.


Metro UI CSS though is easy to implement. Once I have completed Accountable, i will create a MVC4 Project Template and some custon scaffolding and T4 Templates that uses the custom CSS and Javascript that it utilises so anyone can pick it up without the pain of manually amending views CSS etc.


Here are some images so far. Some of the styling is turd at the moment and will improve, but this is just a glimpse of what is to come:


This slideshow requires JavaScript.

Enhanced by Zemanta

Moving to Github….

Deutsch: Logo von GitHub
Deutsch: Logo von GitHub (Photo credit: Wikipedia)

I’m in the process of moving my Codeplex repos over to github. Im starting with MvcImage first just to give it a go, and i’m finding it a breeze to use,. There is even a Windows Metro GUI version that is very nice to use if you don’t get on with bash commands too well.

My MvcImage github page can now be found here:

I will slowly start moving Bradaz Utlities next after i have finished my MvcLiveSearch repo. I get alot of traffic to the codeplex MvcImage so i will phase it out slowly once my others are all up and running fine.


Enhanced by Zemanta

My OpenSource Update

Logo for the Open Source Initiative Français :...
Logo for the Open Source Initiative Français : Logo Open Source (Photo credit: Wikipedia)

Hi Everyone,

Just a quick update on the following Open Source Projects i contribute to:

  1. MvcImage – Now has been released as Stable Release. I’ve removed the Bradaz.OpenSource Project reference and updated the project to use a reference to the assembly dll instead.
  2. Bradaz Utilities – I’ve released the Bradaz.OpenSource project on Codeplex. It includes the following.
    •  Stream class to help handle common I/O Stream activities like, RewindStream.
    •  Image class to help handle common Image activities like, ImageToBinary, FromStreamHeight, FromStreamWidth, FromByteHeight and FromByteWidth . There are some methods to help create Thumbnails.
    • MVC class to help handle common MVC activities like HTML Helpers to handle images and some Debug classes to interrogate ModelState.

I will be adding to this as i build more utilities.

I’ve recently joined Dev Circle and we hope to create more Open Source Projects together, one being an MVC Project using EF. Watch this space.

Enhanced by Zemanta

Code52 – Show & Tell – Post Mortem

Hi Everyone,

As per my last post, i had the honour of being one of the Show & Tell projects on Code52 site. This is a just a quick post to show you how much exposure something like this can give an aspiring Open Source blogger! It rocketed my visits, by creating my busiest day yet by 114 extra hits, a total of 218 hits for that day! I also generated additional 2 followers and my MVCImage Project got an additional 100 odd downloads from Codeplex, which im very happy with!

So what’s next? Well, firstly i want to finish my wife’s app, then i want to try my skills out with the code52 gang if i can. Yes  i dont think im good enough yet, but hey, im going to have to try one day!

Wordpress stats for the day of the Code52 article release.










Here are some of the other Show & Tell posts from other Code52 contributors

Related articles
  • Enhanced by Zemanta

Code52 – Show & Tell – My Open Source Application

M in blue square (similar to seen on )
M in blue square (similar to seen on ) (Photo credit: Wikipedia)

I’ve recently started using Jabbr.Net, a chat room built using  SignalR Framework. At Jabbr i async’d into a room called code52. And what a find this is, a gem within the OSS community. Its a community with goals to start a new coding project every week, and already there are some interesting ideas like metro.css. More information about this awesome community can be found here:

The latest post in this community is show and tell. It invites coders to submit some short articles on stuff they recently been building and to share with the wider world.

We want to hear:

  • what did you find that is awesome?
  • what is awesome about it?
  • how did you use it?
  • what did you learn from using it?
  • is there some code that people can have a play with?

So my immediate reaction was “I’m not good enough yet for this”. Why? Because im a OO Programmer in my spare time. During the day i write 4GL Applications within the OpenVMS environment using the Agile Framework mainly for EDI, WMS, Ledger Systems, Order Processing and Royalties… and in the evening, i’m self-learning the .NET Stack. Within the last 6 years i have been learning the following:

  1. C#
  2. C++ .NET & ANSI (College)
  3. OOP
  4. XNA Framework (Google 8weekgame)
  5. Recently: ASP.NET MVC3,  JavaScript, JQuery and HTML
  6. Recently: Branching out learning design patterns like Dependency Injection.

I’ve been learning ASP.NET MVC3 solidly for the past few months, each night during the week (Mon-Fri) 7.30PM – 9PM. Not alot of time, but enough. Sacrificing time spending with the wife (Very understanding wife indeed). Yes my skills as a Programmer within the OO world is not of the same pedigree of say someone doing it full-time, but im getting there and my love and passion for coding and technology is second to none!  Im finding the best way of learning is creating applications for the OSS community, and the 1st one is MVCImage hosted on Codeplex. This is a combination of blog posts found here on my journey in learning in how to handle :

  • Images and saving them to a SQL Express Database using Entity Framework
  • Thumbnail Support
  • Image Previewing using JQuery
So the answers to code52 questions are:
  • what did you find that is awesome?
    Learning new skills and exploring the world of Web Development using the .NET stack. Finally understanding the relationship between Server/Client for a website and using awesome free tools like Fiddler to explore the workings of HTTP!
  • what is awesome about it?
    Its my 1st Open Source Project!
  • how did you use it?
    Im using it to build a Image Library for ASP.NET MVC and i hope to build a UserProfile system for future Projects (Using DI).
  • what did you learn from using it?
    Im learning everything as i go, from Web Standards (ECMA and w3c), to Image Handling, JSON Serialisation, Model Binding, Data Annotations and Etnity Framework plus ORM theory, some SQL……..
    Blogged about this here: 
  • is there some code that people can have a play with?

So where do i see myself this time next year? Writing ASP.NET MVC 4 apps, maybe some Continuous Clients linking my web app to say a WP7 app. Oh and proficient in DI and its underlying principles!! And maybe the courage to contribute to a code52 project……

Enhanced by Zemanta

[MVC 3] MvcImage Project–How did i do Thumbnail Support?

Before reading the following, please read up on the tutorial posts listed here to get up-to speed on how i have accomplished Image handling using MVC so far, as i wont be going into detail on the code i have updated changed, only new code:

Also, before i continue, you can download and use the code on my MvcImage Codeplex Project home page.

So firstly i updated the AjaxSubmit and ImageLoad controllers. I have updated them to segregate the Image and Thumbnail byte arrays within the Session. The AjaxSubmit controller references my new Extension method Images.CreateThumbnailToByte to create the Thumbnail. I will discuss this in a moment. Remember to read up in the previous tutorials on how i use these withn a JQuery Image Preview Plugin.

So the AjaxSubmit Code is:

        public ActionResult AjaxSubmit(int id)

            Session["Image.ContentLength"] = Request.Files[0].ContentLength;
            Session["Image.ContentType"] = Request.Files[0].ContentType;
            byte[] b = new byte[Request.Files[0].ContentLength];
            Request.Files[0].InputStream.Read            (b, 0, Request.Files[0].ContentLength);
            Session["Image.ContentStream"] = b;

            if (id > 0)
                byte[] thumbnail = Images.CreateThumbnailToByte(Request.Files[0].InputStream, 100, 100);

                Session["Thumbnail.ContentLength"] = thumbnail.Length;
                Session["Thumbnail.ContentType"] = Request.Files[0].ContentType;

                byte[] c = new byte[thumbnail.Length];
                Request.Files[0].InputStream.Read(c, 0,                 Request.Files[0].ContentLength);
                Session["Thumbnail.ContentStream"] = thumbnail;


            return Content(Request.Files[0].ContentType + ";" + Request.Files[0].ContentLength);

And the ImageLoad Controller Code – the id parameter is used to determine if to Respond with the Thumbnail binary or the Image binary.

       public ActionResult ImageLoad(int id)
            if(id == 0)
                byte[] b = (byte[])Session["Image.ContentStream"];
                int length = (int)Session["Image.ContentLength"];
                string type = (string)Session["Image.ContentType"];
                Response.Buffer = true;
                Response.Charset = "";
                Response.ContentType = type;
                Session["Image.ContentLength"] = null;
                Session["Image.ContentType"] = null;
                Session["Image.ContentStream"] = null;

            //--The following is the Thumnbail id.

            if (id == 1)
                byte[] b = (byte[])Session["Thumbnail.ContentStream"];
                int length = (int)Session["Thumbnail.ContentLength"];
                string type = (string)Session["Thumbnail.ContentType"];
                Response.Buffer = true;
                Response.Charset = "";
                Response.ContentType = type;
                Session["Thumbnail.ContentLength"] = null;
                Session["Thumbnail.ContentType"] = null;
                Session["Thumbnail.ContentStream"] = null;
            return Content("");

It is not the nicest code but it is there to show the logic behind what I’m trying to do. I’m following the same pattern as before but this time handling two byte arrays.

So lets resume talking about the following piece of code:

byte[] thumbnail = Images.CreateThumbnailToByte(Request.Files[0].InputStream, 100, 100);

So parameter 1 is the Stream of the Image, and the 2nd and 3rd parameters are the maximum height and width of the new resized Thumbnail Image. So using inspiration from Nathanael Jones (but not using it all as i didn’t have time), i maintain the aspect ratio of the image and create a new height and width by scaling the image properly. Then again based on advice from Nathanael’s article we create a new GDI drawing surface and create the Thumbnail Image. Then lastly we convert it back to a binary stream and return the byte array.

Here is the code:

        /// <summary>
        /// This method creates a Thumbnail Image and and scales it. /// It returns a byte array
        /// to be used.
        /// </summary>
        /// <param name="stream">Image Stream</param>
        /// <param name="maxHeight">Max Height (Used to scale the image</param>
        /// <param name="maxWidth">Max Width (Used to scale the image)</param>
        /// <returns>Scaled thumbail image byte array.</returns>
        public static byte[] CreateThumbnailToByte(Stream stream,         double maxHeight, double maxWidth)
            int newHeight;
            int newWidth;
            double aspectRatio = 0;
            double boxRatio = 0;
            double scale = 0;

            Stream imageStream = new MemoryStream();
            Image originalImage;

            Streams.RewindStream(ref stream);
            using (originalImage = Image.FromStream(stream))
                //--We need too maintain the aspect ratio on the image.
                aspectRatio = originalImage.Width / originalImage.Height;
                boxRatio = maxWidth / maxHeight;

                if (boxRatio > aspectRatio)
                    scale = maxHeight / originalImage.Height;
                    scale = maxWidth / originalImage.Width;

                //--Scale the Original Images dimensions
                newHeight = (int)(originalImage.Height * scale);
                newWidth = (int)(originalImage.Width * scale);

                using (var bitmap = new Bitmap(newWidth, newHeight))

                //--Create a new GDI+ drawing surfance based on the original Image. 
 //--This methid allows us to alter
                //--it where necessary, based on advice from here. //-- -pitfalls/
                using (var graphics = Graphics.FromImage(bitmap))
                    var rectangle = new Rectangle(0, 0, newWidth, newHeight);

                    graphics.CompositingQuality = CompositingQuality.HighQuality;
                    graphics.SmoothingMode = SmoothingMode.HighQuality;
                    graphics.InterpolationMode =                     InterpolationMode.HighQualityBicubic;
                    graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
                    graphics.DrawImage(originalImage, rectangle);

                    //--The same image to a new ImageStream so we can //--convert this to a byte array.
                    bitmap.Save(imageStream, originalImage.RawFormat);


                byte[] thumbnail = new byte[imageStream.Length];
                BinaryReader reader = new BinaryReader(imageStream);
                imageStream.Seek(0, SeekOrigin.Begin);

                //--Load the image binary.
                thumbnail = reader.ReadBytes((int)imageStream.Length);
                return thumbnail;




Now in the future i will look to extend this further to encompass all of Nathanael’s advice. So that’s it! Took a lot of work getting there, not just coding the solution but understanding it which is key.

The last thing i did was add more properties to my ImageModel to save the Thumbnail data separately from the main Image, so we don’t have to convert it each and every time we want to load the Thumbnail instead of the main Image binary.

So my new ImageModel class is now:

    /// <summary> 
    /// This class represents the table for Images and it necessary columns
    /// </summary>
    public class ImageModel : IImageModel
        public Guid UniqueId { get; set; }
        public Guid TableLink { get; set; }
        public String RecordStatus { get; set; }
        public DateTime RecordCreatedDate { get; set; }
        public DateTime RecordAmendedDate { get; set; }
        public Byte[] Source { get; set; }
        public Int32 FileSize { get; set; }
        public String FileName { get; set; }
        public String FileExtension { get; set; }
        public String ContentType { get; set; }
        public Int32 Height { get; set; }
        public Int32 Width { get; set; }

        //-- New in Alpha Release 0.0.2
        public Byte[] ThumbnailSource { get; set; }
        public Int32 ThumbnailFileSize { get; set; }
        public String ThumbnailContentType { get; set; }
        public Int32 ThumbnailHeight { get; set; }
        public Int32 ThumbnailWidth { get; set; }

Enhanced by Zemanta

[MVC 3] MvcImage Alpha Released!

As you all know ive been working on an Open Source project which shows you how to handle images using ASP.NET MVC 3. This release now encompasses the last code update as such for this Project to include the functionality to show a collection of Users registered (Using the vanilla Membership).
This collection will show:





The code is now available on Codeplex:

The code is also now available on Github:

I’m now going to write some blog posts to explain the functionality and how i accomplished this to describe the code.

Enhanced by Zemanta