JP Hellemons

HTML5 Webcam monitor

Mon, 15 Apr 2013 17:25:00 +0200

We have several IP camera’s in the building for security purposes. They all have internal IP addresses and can be viewed separately with their own web interface which is Chinese by default and does not remember the language setting.

It has 3 options: download an active X component and only work in internet explorer. Or use server push or a version build with JavaScript.

It refreshes the url by adding a new random number to the image source:

new Date().getTime() + Math.random();

This inspired me to make an overview webpage of all the webcams in our LAN.

Since it might be accessed through a mobile device, I have used the responsive version of the twitter bootstrap. For the small source and the caching of browsers, I have used the jQuery library and the twitter one from CDN’s.

I have used jQuery 1.9.1 and bootstrap 2.3.1 and that is all there is. Please let me know if you have any suggestions to make it even better. For demo purposes I have not changed the logins of the Wanscams and used the factory settings.

You can fork this code on GitHub. or view the code of the single HTML page on this url: https://github.com/jphellemons/WebcamMonitor/blob/master/index.html

Change Notepad++ icon to Metro style

Fri, 08 Mar 2013 17:36:00 +0200

I have been running Windows 8 now for a while and have been using Notepad++ for a long time. It is my favorite notepad replacement. It has great syntax highlighting and is fast and lightweight. The only downside is that there is no updated icon for windows 8.

The current icon is from 2010 and looks great, but it does not fit in the new Microsoft UX design guidelines. There was this free nice looking icon on the web:

source: http://www.softicons.com/free-icons/system-icons/windows-8-metro-icons-by-dakirby309/notepad-icon

Which looks imho better on the Windows 8 desktop. So I have downloaded version 3.6 of resource hacker from this website: http://www.angusj.com/resourcehacker/ direct link to resource hacker 3.6. After installing and launching it you can open for example: C:/Program Files (x86)/Notepad++/notepad++.exe and navigate in the treeview to icon/1

at action you can replace icon with the .ico file which you can download from the softicons url above. Save the ‘new’ .exe in the same folder as Notepad++ and right click on a .txt file, select ‘open with’ and navigate to the ‘new’ .exe.

Another icon option is this image from SalvoGentile from deviantart, it looks nice but you have to convert it to .ico yourself.

Good luck!

Application pool crashes with BlogEngine 2.7

Mon, 04 Mar 2013 18:37:00 +0200

This is de default of BlogEngine 2.7:

<?xml version="1.0"?>
<configuration>
    <system.web>
        <httpRuntime 
            enableVersionHeader="false" 
            useFullyQualifiedRedirectUrl="true" 
            maxRequestLength="16384" 
            executionTimeout="3600" 
            requestLengthDiskThreshold="16384" 
            requestValidationMode="2.0"/>
        <pages 
            enableSessionState="false" 
            enableViewStateMac="true" 
            enableEventValidation="true" 
            controlRenderingCompatibilityVersion="3.5" 
            clientIDMode="AutoID">
            ...
        </pages>
    </system.web>
</configuration>

And I have used these settings for quite a while. But my application pool keeps crashing after about a week.

I have enabled elmah logging

<elmah>
    <errorLog type="Elmah.XmlFileErrorLog, Elmah" logPath="~/elmahErrors" />
</elmah>

This enabled me to have a better look at what was causing the crashes. Because the elmah page is of course unavailable when BE crashes. The log had several error’s the two most common ones where:

A potentially dangerous Request.Path value was detected from the client
Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.

I have now added:

validateRequest="true"

to my pages section in the web.config and have added:

requestPathInvalidCharacters=""

to the httpRuntime section and my error logging feature stays empty and the BlogEngine application returns a nice 404 when trying some querystring injection and/or XSS attacks.

So this will fix all the thrown exceptions and keeps my application pool from automatically shutting down. I have found this on StackOverflow http://stackoverflow.com/a/6026291/169714 but turning off the validateRequest seems like a bad idea.

Good luck with BlogEngine!

IE8 does not @import my CSS

Fri, 01 Feb 2013 17:16:00 +0200

CSS media queries are common these days. So I googled an example which I could modify to my needs for a nice cross browser, cross device compatible web application. I came up with:

@import url("/css/desktop.css") only screen;

/* Smartphones (portrait and landscape) ----------- */
@import url("/css/smartphone.css") only screen and (min-device-width : 320px) and (max-device-width : 480px);

/* Smartphones (landscape) ----------- */
@import url("/css/smartphone-landscape.css") only screen and (min-width : 321px) and (max-width : 800px);

/* Smartphones (portrait) ----------- */
@import url("/css/smartphone-portrait.css") only screen and (max-width : 320px);

/* iPads (portrait and landscape) ----------- */
@import url("/css/ipad.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px);

/* iPads (landscape) ----------- */
@import url("/css/ipad-landscape.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape);

/* iPads (portrait) ----------- */
@import url("/css/ipad-portrait.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait);

/* iPhone 4 ----------- */
@import url("/css/iphone4.css") only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5);

This looks great, but… it didn’t work in IE8. I have spend a long time searching the web, why it didn’t work. I added a

body { margin-top: 0px; }

as was suggested in this StackOverflow thread. But that didn’t work either.

I verified that the css was linked correctly. I was loaded, only the import wasn’t. There was also a resource online which said that the CSS imports should be first in the document for Internet explorer. But that also did not matter.

After browsing for a while, I stumbled upon an MSDN page.

http://msdn.microsoft.com/en-us/library/ie/ms530768%28v=vs.85%29.aspx

and there it was. –evan— pointed out that according to the w3 organization.

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.

source: http://www.w3.org/TR/CSS2/cascade.html#at-import

So this is in CSS 2 which became a recommendation in 1998. it was started in 1997 and Internet explorer 8 was released on 19 March 2009. That is over 10 years later!

So removing the ‘only screen’ from the CSS I posted earlier fixed it!

Thank god for standards!

Masonry, Isotope and the gutters

Thu, 03 Jan 2013 18:30:00 +0200

You know Pinterest? And would like a layout like Pinterest? Well I did and came across this jQuery Masonry plugin.

But I wanted to do some sorting and filtering with the elements. The Masonry which is released with an MIT license does not have this functionality. Isotope does, but has a $ 25,- license for commercial use and is free for personal use.

This quote from StackOverflow explains the difference between masonry and isotope:

To some people Isotope would look very similar to the work you had previously done with Masonry; can you explain the main differences between the two?

Isotope has several features that Masonry lacks. Masonry essentially does one thing, placing item elements in a cascading arrangement. Isotope has Masonry’s layout logic built in, but in addition, it also has several other layout modes that can be used to dynamically position elements. You can even develop your own custom layout mode.

As I’ve mentioned, it has filtering and sorting functionality built in. Filtering items is as easy as passing in a jQuery selector:

$('#container').isotope({ filter: '.my-selector' });

Isotope takes advantage of the best browser features out there. Instead of using typical left/top styles positioning, Isotope takes a progressive enhancement approach and uses CSS transforms if supported by the browser. This provides for top-notch performance for top-notch browsers. With hardware acceleration kicking in, animations look silky smooth on WebKit browsers, and even less-powerful devices using iOS. CSS transforms perform better with CSS transitions, which I’ll discuss later.

You can use isotope to make something look like a masonry layout.

$('#container').isotope({
  masonry: {
    columnWidth: 110,
    gutterWidth: 10
  }
});

But Somehow the gutters don’t show up. So you need a custom layoutmode for Isotope. I have found it in the sourcecode of the example: http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html

Here is the javascript code:

// modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function () {
    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
    containerWidth = this.element.width();

    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
        // or use the size of the first item
        this.$filteredAtoms.outerWidth(true) || 
        // if there's no items, use size of container
        containerWidth;

    this.masonry.columnWidth += gutter;

    this.masonry.cols = Math.floor((containerWidth + gutter) / this.masonry.columnWidth);
    this.masonry.cols = Math.max(this.masonry.cols, 1);
};

$.Isotope.prototype._masonryReset = function () {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getMasonryGutterColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
        this.masonry.colYs.push(0);
    }
};

$.Isotope.prototype._masonryResizeChanged = function () {
    var prevSegments = this.masonry.cols;
    // update cols/rows
    this._getMasonryGutterColumns();
    // return if updated cols/rows is not equal to previous
    return (this.masonry.cols !== prevSegments);
};

$(window).load(function(){
    $('#container').isotope({
        masonry : {
            columnWidth: 110,
            gutterWidth: 10
        },
        itemSelector: '.item',
        animationEngine: 'best-available',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
});

Good luck with the jQuery Isotope plugin!

Excel file corrupt in Windows 8

Thu, 06 Dec 2012 19:39:00 +0200

A while ago, I made something in Asp.Net with CarlosAg Excel XML Writer Library. This is a free component to generate Excel (.xls) documents (xml). It does not require an installation of Office on your IIS server.

Here is a code sample to show how easy it works.

using CarlosAg.ExcelXmlWriter;

class TestApp {
    static void Main(string[] args) {
        Workbook book = new Workbook();
        Worksheet sheet = book.Worksheets.Add("Sample");
        WorksheetRow row =  sheet.Table.Rows.Add();
        row.Cells.Add("Hello World");
        book.Save(@"c:\test.xls");
    }
}

The downside is that it is a library dated from 2005 and it has no xlsx support (office 2010, office 365). But it works!

So I made an generic handler (.ashx) which gives this popup to download the Excel workbook.

public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "application/vnd.ms-excel";
    context.Response.AddHeader("Content-Disposition", 
        "attachment; filename=Report-" + DateTime.Now.ToString("yyyy-MM-dd") + ".xls");

    GenerateMyExcel gme = new GenerateMyExcel ();
    Workbook book = gme.GetExcelReport();
    
    book.Save(context.Response.OutputStream);
}

And I also made a method which takes this workbook and attaches it and mails it.

MailMessage msg = new MailMessage("from@mydomain.com", 
    "to@mydomain.com", "Report", "look at attachment");
GenerateMyExcel gme = new GenerateMyExcel();
Workbook book = gme.GetExcelReport();
MemoryStream ms = new MemoryStream();
book.Save(ms);
Byte[] byteArray = ms.ToArray();
ms.Close();
MemoryStream StreamToAttach = new MemoryStream(byteArray);
msg.Attachments.Add(new Attachment(StreamToAttach, "report.xls"));

SmtpClient sc = new SmtpClient();
try
{
    sc.Send(msg);
}
catch (Exception ex)
{
    System.Diagnostics.Debug.WriteLine(ex.Message + " " + ex.StackTrace);
}
StreamToAttach.Close();

But When I opened the file, my excel in Office 365 Home Premium Preview on Windows 8, I get this “File is corrupt” message.

Was this information helpful? Seriously?

Hours debugging later, I found out that it was a security issue. When you open the properties of the file (and have a Dutch Windows):

There is this security message: “This file came from another computer and might be blocked…” So When I hit ‘unblock’ and ‘ok’, I can open the file normally!

This took me a day, because I thought that there was some thing with the CarlosAg library which made my file corrupt. Like setting a cell to number when there is a string inside.

The next time that I want to generate an Excel file, I will use EPPlus.

Move to Windows 8

Fri, 30 Nov 2012 21:25:00 +0200

This post is about my 2 cents about upgrading from Windows 7 pro x64 to Windows 8 pro. I have been a Windows user since 3.11 and have never upgraded a Windows installation. I have been clean installing all versions.

Hardware background

My Dell notebook is from 2009. It had Vista installed by default and was ready for Windows 7. In fact, it came with a free upgrade from Dell.

I have blogged about my win8 test drive earlier. It still had the windows start button in that build and had no metro/live tiles. It is almost a year ago.

My dell xps16 has a limit of 4gb and has an Samsung 830 SSD 128gb as laptop upgrade kit (which is really recommended).

Upgrading to windows 8

My first step was to make a backup. I had backups around because SSD can fail in a blink of an eye. As side note: my Samsung drive has never let me down. In fact, it made my Windows 7 really fast!

I ran the upgrade advisor/assistant and uninstalled Ultramon, Visual Studio 2010 (used 2012 anyway) and Office 2010 (used the 2013 preview of Office 365).

So the upgrade was just a next, next finish thing and took about 2 hours and several reboots. After that, my system was good to go.

Reasons to upgrade to win8

1. speed

This is actually enough reasons already to upgrade.

Boot time reduction (cold boot)
More responsive user interface in use
Return from hibernate is faster
File move/copy dialog feels faster and has more details

2. shortcuts

The Windows key is everything! I already used the key a lot in win7, but now even more! Here are the shortcuts I used in Windows 7:

windows key + E for explorer
windows key + M to minimize all and go to desktop
windows key + start typing to launch an application
windows key + F to search a file
windows key + shift + arrow to move window to other screen
windows key + digit to activate pinned application nr# on taskbar
windows key + L to lock the account
windows key + R to run

and now the additional for windows 8:

windows key + C to control the current application (app specific settings)
windows key + W to search in control panel
windows key + X for power/super user quick menu

3. Backup

You now have file history! The files are stored like normal files so you can access them easily. You can also set Windows back to a fresh install!

4. Security

Bitlocker in already in pro and also Bitlocker portable. In Windows Vista and Windows 7 you needed the ultimate or enterprise edition to have Bitlocker.

Auto updates are installed in the background. So non-tech people have secure and up to date systems with win8.

5. Other

it has a lot of changes under the hood. With printer drivers and direct X and all those changes make windows 8 fast!

metro/live tiles

don’t be scared. I have no touch enabled device and use Visual Studio 2012 and Office 2013 all the time. I only notice the new metro stuff when I login and press the windows key. But it is so responsive and fast that it is not annoying. And you can control everything with the keyboard. Also all the metro stuff! So there is NO reason not to upgrade! I am running Windows 8 in desktop mode the whole day. There are some small applications that give you back a start button. But if you actually require those hacks, you are using the operating system not how it’s meant to be used.

So to conclude this post: Upgrade from Windows 7 to 8 today! It’s only 30 euro’s according to the upgrade assistant. So it’s a bargain!

Have fun with your new OS!

CouchDB for windows, really relaxed

Wed, 31 Oct 2012 19:55:00 +0200

CouchDB is a non-relational, no-sql database which is build relying on the HTTP stack. It’s from the apache foundation.

The Wiki of CouchDB provides this info about the windows version.

Installation of CouchDb on Windows

The current release (at the moment of writing) is 1.1.1 and it’s up on Github.

Their wiki gave me this download file:

As Dave pointed out in the comments, you should download 1.2 now from https://couchdb.apache.org/#download. Thanks Dave!

You can open it and keep all the default settings.

After the installation completes, you can visit http://127.0.0.1:5984

You would see this:

The management tool, Futon, can be reached in subdirectory _utils.

So just click on this link to see the CouchDB’s version of “PhpMyAdmin”

http://127.0.0.1:5984/_utils/

So you are good to go!

More details about CouchDB on Windows can be found on the Quirks page.

But that’s optional.

Setup CouchDb

With the default installation, you will see this message:

It is recommended to create one Admin user. You can create a database afterwards by clicking on the top left link.

You can set the security of the CouchDb if you have added some more users, but we will skip that for the moment and start using the database from our Asp.Net WebForm web application.

Asp.Net and CouchDb

There are a lot of options to access CouchDb. You can do everything manually, since it is just a combination of JSON and REST. But there are also a lot of wrappers available which support streaming and/or POCO etc.

Lots of benefits which differ from wrapper to wrapper. The official documentation of CouchDb recommends the following:

LoveSeat, aug 2012 (strong typed poco)
Relax, a.k.a. Hammock, nov 2011
Divan, jul 2010
SharpCouch, aug 2008
DreamSeat, jul 2012 (same as loveseat + async)
CouchDb.Net, dec 2010
Ottoman, dec 2010
Skitsanos Webware Development Kit, sep 2012

When you look for Nuget packages with the keyword CouchDb you will only find LoveSeat and DreamSeat at the moment. Both are using Json.Net a.k.a. Newtonsoft.Json. NuGet will pull that reference in, so don’t worry. I just mentioned it, so that you know that you can use that library to parse objects to JSON.

If you look for resources for CouchDB, you will see a lot Unix oriented. A lot requires CURL. You can get it for windows, or (recommended) get Git for windows and get curl for free http://superuser.com/a/483964/24642

You can read more about that on the run curl commands with windows thread on superuser.

This is my DreamSeat code. The blog object is a test object with comments etc. just to fill the database with a JSON serializable object with related objects.

private void TestDreamSeat()
{
    var blog = GetBlog();
    var client = new DreamSeat.CouchClient();

    var db = client.GetDatabase("southwind");
    DreamBlog dream =(DreamBlog)blog;

    dream = db.CreateDocument<DreamBlog>(dream, new Result<DreamBlog>()).Wait();

    DreamBlog myObj = db.GetDocument<DreamBlog>(dream.Id);
    Response.Write(myObj.Name);
    db.DeleteDocument(myObj);
}

And this is my LoveSeat test

private void TestLoveSeat()
{
    var blog = GetBlog();
    var client = new LoveSeat.CouchClient();

    var db = client.GetDatabase("southwind");

    string blogAsJson = JsonConvert.SerializeObject(blog);
    var doc = new Document(blogAsJson);
    doc.Id = new Guid().ToString();
    doc = (Document) db.CreateDocument(doc);

    Blog myObj = db.GetDocument<Blog>(doc.Id);
    Response.Write(myObj.Name);
    db.DeleteDocument(doc.Id, doc.Rev);
}

I used the

System.Diagnostics.Stopwatch

class to measure the differences and I was planning to test all the libraries that I have found and mentioned earlier. But I believe that the best solution is to stick with the libraries that are in the NuGet repository, because other libraries might be outdated.

Get the sample code from:

https://github.com/jphellemons/CouchDbFromDotNet

Good luck coding!

My first Nancy webapplication

Thu, 20 Sep 2012 20:53:00 +0200

As web developer you might have heard of Sinatra. Not the famous artist, but the Sinatra framework! It is a framework/Domain Specific Language (DSL) for Ruby to quickly create web applications with minimal effort.

Nancy is a lightweight framework which is inspired by Sinatra. It has been around since November 2010 and a few days ago there was the Nancy 0.12 release.

WAIT? WHAT? #nancyfx 0.12 is released you say? And it comes with support for content negotiation? NO WAY! Where can I get it? Nuget? YAY!!
— NancyFx (@NancyFx) September 4, 2012

So it's time to give this a try and make my own first Nancy web application.

My first Nancy web app

Launch visual studio and File -> New project -> ASP.NET Empty Web application

Right click on the project in the solution explorer and select ‘Manage NuGet packages’

Type in Nancy.Hosting.Aspnet This NuGet package depends on Nancy 0.12 which is automatically installed when you hit the Install button

Add a new class HelloNancy.cs

Make it inherit NancyModule

type in the default constructor

Get["/"] = parameters => "Hello World";

And don’t forget to add

using Nancy;

Your full code of HelloNancy.cs should look something like

using Nancy;

namespace MyFirstNancyWebApp
{
    public class HelloNancy: NancyModule
    {
        public HelloNancy()
        {
            Get["/"] = parameters => "Hello World";
        }    
    }
}

And hit F5 to build

This gives you a nice and clean hello world:

If you add (below the previous Get…) this line:

Get["/hello/{name}"] = parameters => "Hello " + parameters.name;

And go to /hello/yourname

Nancy is build for the web in a developer friendly way. Now you use HTTP GET requests, but you can also use the POST and DELETE. The routing can work with regular expressions and is very powerful.

But besides the query string, you can also accept JSON, XML etc. out of the box with a single line of code!

But this sample does not contain any HTML! Well you can do that by adding a view. So add a folder called views and add a products.html file.

When you add this line:

Get["/products"] = parameters => View[new ProductsModel()];

and this class to your solution:

public class ProductsModel
{
    public string Code { get; set; }
    public string Name { get; set; }
}

Nancy will look in the views folder for a view called products.

When you use @!Model.Code in your products.html you can show the bound value of the productsmodel object in html.

Get["/products"] = parameters => View["products.html", new ProductsModel(){Code="C1009", Name ="Product name here"}];

You can read more about it here:

https://github.com/NancyFx/Nancy/wiki/Documentation

You can also download my small sample project from Github.

Nancy is open source under an MIT license and available on GitHub. So you can fork it and make pull requests etc.

Good luck coding!

ps. if you want to see some octocat’s (Github logo) check out this Octodex!

Raspberry Pi with RaspBmc

Thu, 13 Sep 2012 20:21:00 +0200

A lot of (IT)people have heard of the raspberry pi. It is a tiny cheap computer. There are two models, model A and B. The difference between model A and B is the network (lan) connection.

Order a Raspberry pi

I have bought a model B at http://export.farnell.com/rp/order/

The raspberry pi was ordered at 23th of August and it arrived in the Netherlands at 11th of September. So that’s less then the 3 weeks that element14 mentions on the website. A fast SD card is recommended. So I have bought an 8GB Transcend class 10 card (for only 8 euro’s).

As programmer you should have an HDMI cable available and network connection and micro-usb power supply.

Make a HTPC from your Raspberry

In 2003 there was a project started to make an Xbox act as HTPC. This project was named XBMC (X-Box Media Center). The software is still available for the X-Box, but also for various number of other platforms.

As you might know, you can install various Linux distributions on your raspberry. A lot of them are listed on the official raspberry pi website. There is even a special distro for XBMC on your Raspberry pi called RaspBmc. It is super easy to install (when you run windows). Insert your (fast) SD card and download the Windows RaspBmc installer. Unzip and hit install. When you are done, put the SD in your pi and connect the LAN, HDMI and power up! It might take a while, so grab some coffee. If if fails downloading the updates, remove the power and try again after a few seconds. It should look like this after 30 minutes:

Remotes

To work with it without usb keyboards or mice, you need a remote. Of course you can get a real remote. Some are supported out of the box. But it is now 2012 and everybody has a tablet and/or smartphone! So I downloaded the official XBMC remote for Android devices.

Airplay support

When you have your remote, you can enable Airplay support, so that you can send pictures and videos from your iPad/iPhone to the RaspBmc. You can enable it under

System –> Network –> “Allow XBMC to receive Airplay content”

Responsive UI

To make the user interface of XBMC more responsive, you can switch the skin to a more lightweight skin. The default skin is confluence

But for a system with limited resources like the raspberry pi, it’s better to move to Quartz.

So now you have a cheap good solution to add Airplay to your TV and play all kinds of files stored on the LAN.

The next step is to add DVR/PVR support and live TV. I can now use airplay from my iPad, so that’s great! Get yourself a Raspberry pi now!

Have fun with your Raspberry Pi!

p.s. the url for the official iOs XBMC remote.