Image filter algorithms demo is updated!

Download the newest source code?

Image algorithms demo

At last an update to my blog! This has been a busy year for me with my work, I am now a developer in Helse Midt-Norge IT since May, earlier this year I worked as an independent consultant for Artsdatabanken (NTNU). I work with WPF and C# mainly presently.

I will now present a new hobby project of mine.

This WPF application demo of image algorithms demonstrates different techniques towards
blur, sharpen, edge detection and other filtering techniques, all relying on the general concept of Convolution in image processing. 8-bits level grayscale images (256 levels, 1 bpp) are supported.

I have worked with an image algorithms demo the last days. The
demo is a small WPF application that demonstrates image algorithms used in
edge detection. See the link below to download the zip file that contains
the Microsoft Visual Studio 2010 project with source code.

Examples of edge operators are sobel edge operator and Prewitt, Laplacian, Roberts and
Horizontal and Vertical Sobel, blur difference operator, shown above. There are additional
filters included.

The resulting images can be inverted. The application works with 8-bit grayscale images (256 levels). The BitmapSource class must be able to import the image (BMP or GIF should work).

Right now the demo is in v1.1. I will add more features soon. There are a few issues with double-edges, noise and normalization in the demo, but I hope I will complete the demo in a more stable version later. Feel free to unzip the zip file linked below and provide comments of the code. Perhaps you can add new features to my code and discuss optimizations, corrections?

I will state that already there is very little code to make a new filter, so this source code could be used as a basis for developing filters for applications needing to provide basic blur, sharpen and edge detection capabilities.

Sobel operator, horisontal komponent (3x3 convolution kernel).

Comment:

Download newest version of ImageAlgorithmsDemo WPF Application here [v1.1.]

Image algorithms v1.1 (Zip-fil, ca. 2,4 MB compressed)

Last update 28th of December 2010.

Future stuff:

• improve the speed of the filtering
• support greater than 8 bpp (e.g. RGB)
• support more operators. Canny edge and more advanced filters are desired
• improve code, add tests to the test project
• even friendlier GUI, more feedback and information
• document code
• share code with the community when v2.0 is done.

The goal is that this demo should be a good starter demo of edge analysis in digital image algorithms, that can be used in courses at universities and the likes. The demo demonstrates pixel manipulation in WPF-application and filtering also with up to date .NET 4.0 code. Often one only finds C or C++ code when looking for these kinds of algorithms..

Comments?

ASP.NET MVC og jQuery Grid

Jeg har testet ASP.NET MVC i Visual Web Developer Express og jQuery Grid. Det er kraftig teknologi som gir gode muligheter for å jobbe strukturert med utvikling i ASP.NET MVC (et rammeverk og paradigme som oppfordrer til strukturert og modularisert webutvikling, optimert mot TDD, test-drevet utvikling), samtidig som man vha. jQuery og jQuery grid kan vise data i en grid.

Jeg vil begynne med å vise et skjermbilde av hva som testløsningen min inneholder.



- ASP.NET MVC er en ny teknologi som ASP.NET kan benytte for å tilby en mer strukturert måte å jobbe på. Man går vekk fra code-behind og rammeverket er meget
datasentrisk. Man har en oppkobling, gjerne til Sql Server (.mdf filer og tilsvarende), altså MS-SQL, hvor man definerer raskt en datamodell. Man bruker så Linq-to-sql for å generere klasser for datalag for å jobbe mot dataene. Videre har man både Model og Model-View klasser etter behov, samt .aspx filer er "View". Partielle view er av typen MVC Web User control (.ascx filer).

For de som har jobbet lenge i ASP.NET vet man farene ved store prosjekter. Det blir fort spaghettikode og monolittisk kode. MVC tvinger en til å jobbe strukturert og modulrisert, samt unngår spaghetti på en mye mer streng måte enn standard ASP.NET.

En stor ulempe med MVC i ASP.NET er mangelen på en skikkelig grid-kontroll m.m., da vanlige ASP.NET kontroller ikke nødvendigvis vil virke i MVC..

Jeg har derfor testet ut jQuery Grid som er en meget bra måte å erstatte ASP.NET GridView. Best av alt, denne javascript baserte kontrollen kan benyttes i MVC-baserte løsninger!

Bortsett fra å tilby interesserte en nedlasting kan jeg kort si hva jQuery Grid er for noe. Det er en javascript plugin til jQuery og en klientbasert kontroll som er lik ASP.NET GridView, men har innebygd støtte for Ajax m.m.

Det tar en tid til å venne seg til å implementer en jQuery Grid. Man har ikke drag and drop på denne komponenten. Men det går temmelig raskt å få opp en løsning. I mitt demoprosjekt har jeg benyttet meg at Dynamisk Linq, som Scott Guthrie (en av de prinsipielle arkitektene bak ASP.NET) har laget. Dere finner implementasjonen i klassen Dynamic.cs. Jeg har i mitt testprosjekt laget en servermetode som spør en tabell i en .mdf fil om innholdet i tabellen Countries, som har alle hovedsteder og land i verden. Videre har jeg laget en Country dataklasse automagisk med Linq-To-Sql. I min HomeController (Controller er C-en i MVC) har jeg en Index funksjon som henter opp tabelldataene vha. Ajax og Json. Testfunksjonen min håndterer både paginering og sortering av databasen og json-dataene overføres tilbake til klienten, som viser dem i jQuery Griden. Denne kontrollen abonnerer på data fra server-side funksjonen som returnerer et ActionResult av type JsonResult.

MVC har en læringskurve og det er noe vanskelig å forstå hva alt dette er vits i å sette seg inn i. Men det vil spare en utvikler i ASP.NETfor mye arbeid, da det støtter TDD og unit testing på en mye bedre måte enn ASP.NET. Endelig går det an å utvikle nettsider profesjonelt og dele opp oppgaver til testere og verifisere at det man lager faktisk virker. Dette har vært enklere i applikasjonsutvikling enn i webutvikling, men med ASP.NET MVC så er det like enkelt å lage unit tester som for f.eks. WPF og WCF..

Ulempen med MVC er som sagt at vanlige ASP.NET serverkontroller ikke er vanligvis støttet. Men jQuery og jQuery Grid er sentral i MVC. Man har kontroller som er mer klient-orienterte enn de klassiske ASP.NET server-kontrollene. Med Json som kommunikasjon er det minimalt med data som går mellom klienten og serveren. Serveren leverer selvsagt data fortsatt ut til klient, men klienten "drar" dataene fra serveren oftere. Dermed blir det oftere requests, men disse er mindre i størrelse..

Dette gjør det mulig å utvikle webapplikasjoner som er repsonsive og tillater et vell av interaksjon. MVC i ASP.NET er en alternativ modell til Silverlight og den lekre jQuery Grid viser at dette er absolutt tilfelle.

I mitt demoprosjekt så er paginering og sortering støttet. Jeg har ikke testet enda hvordan man får til redigering i jQuery Grid eller har templates for celler, column reordering og annen avansert funksjonalitet, men dette er altså støttet i jQuery Grid. Dere finner jQuery Grid lett med et kjapt søkt med Google. Jeg anbefaler å sjekke ut vedlagte .zip fil for å se hele koden..

Til slutt før lenken til nedlastingen, så legger jeg ved koden for server-funksjonen i ASP.NET MVC som gir paginering og sortering. Den benytter som sagt Scott Guthrie sin Dynamic Linq klasse, som gir noen tilleggsfunksjoner som spytter inn SQL i linq-spørringer og gir det man trenger for akkurat dette..


public ActionResult DynamicGridData
(string sidx, string sord, int page, int rows)
{
var context = new GeografiTestDbDataContext();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = context.Countries.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

var countries = context.Countries.OrderBy(sidx + " " + sord)
.Skip(pageIndex * pageSize)
.Take(pageSize);

var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (
from c in countries
select new
{
i = c.Id,
cell = new string[] {
c.Id.ToString(), c.Capital, c.Country1
}
}).ToArray()
};
return Json(jsonData);
}


Linq-spørringene over virker ikke uten at man har Dynamics.cs filen som Scott Guthrie har laget, 81 kB stor. Her er det masse extension methods som gjør det mulig å spørre databasen inne i Linq-spørringer.. Dynamic Linq er helt vilt bra for de som tenker på hvordan det faktisk virker..

Til slutt, slik ser .aspx filen ut hvor man lager et jQuery Grid objekt:



jQuery(document).ready(function() {

jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Uniktnummer', 'Hovedstad', 'Land'],
colModel: [
{ name: 'Id', index: 'Id', width: 120, align: 'left' },
{ name: 'Capital', index: 'Capital', width: 120, align: 'left' },
{ name: 'Country1', index: 'Country1', width: 220, align: 'left' }
],
pager: jQuery('#gridpager'),
pgtext: "Side {0} av {1}",
pginput: true,
recordpos: 'left',
rowNum: 20,
width: 900,
multiSelect:true,
hidegrid: false,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
imgpath: '/scripts/themes/redmond/images',
caption: 'Hovedsteder i ulike land. Demotest.'
});
});



Man ser i json-egenskapen url hvordan jQuery Griden kobles mot server metoden
Index i HomeController.cs, som er tilgjengelig i route /Home/Index. MVC er litt
spesielt for ASP.NET utviklere, men etter å ha brukt det kun noen få dager ser
jeg vesentlige fordeler med det. En ulempe er at det kan bli litt vanskeligere på
klienten siden, men implementasjonen på server siden blir mye mer strukturert. Utfordringene ligger i at ferdige komponenter som ASP.NET GridView ikke er tilgjengelig. Skal man bruke MVC må man lære seg javascript godt og benytte jQuery
og nye komponenter. Dette er noe av den mest spennende teknologien, sammen med Linq, som Microsoft har laget på år og dag.


Visual Studio 2008 løsning:
Last ned prosjekt [Zip-fil, 711 kB] her.

Framgangsmåte for å kjøre mitt demoprosjekt:
1. Lagre zip fil på C:\minmappe
2. Pakk ut zip fil fra pkt 1.
3. Dobbeltklikk på .sln fil og se at Visual Studio laster..
4. Når pkt 3. er ferdig, trykk på knappen F5 på tastaturet ditt.
5. Be amazed.

:o)