Mikael Söderström

Creating a temperature web server using ESP8266

Tue, 08 Mar 2016 14:20:19 GMT

ESP8266 is a fantastic micro controller unit, with built-in Wifi and is programmable via the Arduino IDE (or LUA if you wish). By using this with a DS18B20 we are going to run a web server on it, with which we can use any browser to get the current temperature.

Getting started

Before we can start writing the code, we will need to have the following hardware:

ESP8266 Micro controller unit (doesn’t matter which model)
Breadboard
4k6 ohm resistor
Cables
DS18B20

There are different kinds of both ESP8266 and DS18B20. The ESP8266 I am going to use is NodeMCU, which has built-in USB and is breadboard-friendly. The DS18B20 I am going to use for now is the non-waterproof which comes without a cable and is much smaller. You could of course use other variants of both.

These are some of the ESP8266 that you could use:

And a picture with all of the hardware I am going to use (I’m not going to use the DS18B20 with a cable though):

Connecting everything

If you are using a ESP8266 with built-in USB, you shouldn’t have to do that much in this step. If you however are using a ESP8266 without it, you need to connect a couple of wires (I recommend using a USB to TTL cable), and remember to lower the voltage to 3.3 volts or you may destroy the ESP8266! You could use a power source with 3.3 volts for VCC and a Logic Level Converter between TX on the ESP8266 and RX on the USB to TTL cable. If you are using a NodeMCU or another ESP8266 with USB, you don’t have to care about that.

Now it’s time to connect the wires. This is how I did it:

ESP8266 -> DS18B20
VCC -> 3.3 volts
GND -> GND
Data -> D1

You also have to add a 4k7 ohm pull-up resistor between Data and VCC on the DS18B20.

And a picture of it:

Writing the software

Before we can start writing the software, you have to add ESP8266 in the board manager in Arduino IDE. You also have to add DallasTemperature and OneWire from the libraries manager.

I am attaching the full source code below:

Before you build it, make sure you change the Wifi SSID and password to your own. You should also open the Serial Monitor to get the IP Address used by the ESP8266.

As you can see in the source code, we have three different levels on temperature (cold, mediumhot and hot). Depending on the temperature, the background colors will change automatically. You could also change that to background images (for example a beach when it’s hot, and a snow man when it’s really cold J).

When it’s built and I navigate to the IP address on my phone, this is what I get:

Next step

When this is up and running, there are some things we could do. We could for example send the temperature to a Raspberry Pi with a database which is logging the temperature, once per hour. We could also try to get the ESP8266 to sleep mode, which means it will draw much less current, and thereby be able to run on two AA batteries.

Or maybe add another sensor, such as the DHT22 which is able to measure both temperature and humidity.

Please let me know in the comments if you have made any improvements! :)

Blinking LEDs on Windows 10 IoT Core

Tue, 05 May 2015 22:04:46 GMT

With the release of Windows 10 IoT Core, Microsoft released a set of new APIs, such as the ability to control GPIO pins on Raspberry Pi. These can be used both as output and input. In this example we are using them as outputs, to be able to control a set of LEDs on a breadboard.

Software needed:

Windows 10 IoT Core
Visual Studio 2015 RC

Hardware needed:

Raspberry Pi 2
Four LEDs (red, green, blue and yellow)
Five jumper wires (male-female)
Four 220 ohm resistors (red - red - brown)
A breadboard
Ethernet cable
Micro-SD card

Before you are able to follow this, you must have installed Windows 10 IoT Core on your Raspberry Pi. You can follow the guide here if you haven’t:

http://ms-iot.github.io/content/win10/SetupRPI.htm

The first thing we will have to do is to set up the breadboard. Make sure you have disconnected your Raspberry Pi before doing this!

It should look like this (make sure the long legs are connected to the resistors and the short legs to ground):

You can connect your Raspberry Pi again, but none of the LEDs should be turned on, since the pins are set to Low (0 volts) as default. To turn them on, we will have to set them as High (3.3 volts).

The reason we use 220 ohm resistors between the Gpio pins and the LEDs is because they will get too much current if we don’t. To calculate the current for this sketch, we can use Ohm’s law:

Current = Voltage / Resistance

Current = 3.3 / 220

Current = 0.015 (15 mA)

Since the LEDs we are using can hold 25-30 mA, this will work great. Using a resistor with less resistance will make the LED brighter, but giving it more than the maximum current will make the LED burn out after a very short while.

Now that we have set up the breadboard we can start Visual Studio.

Since we are going to use the DispatcherTimer class, which runs in the UI thread, we will have to create a “Blank App (Windows Universal)”, and not “Background Application (IoT)”.

When the project is created we need to go to “Add references” and choose Windows Universal > Extensions > Windows IoT Extension SDK. This will make it possible to use the Windows.Devices.Gpio namespace.

In Mainpage.xaml.cs we will add this code:

We start by declaring our four LEDs, the timer and an int that will be used in the timer callback function to control which LEDs will be turned on.

In the constructor, we start our timer and setup all LEDs. When setting up the LEDs, we declare the GPIO pins to use for each led, and set them all as outputs since we want to control either they should get voltage or not. By using them as input, we can use sensors and devices such as photoresistors, memory card readers, temperature sensors etc to send voltage to the pin, which we can read the value from later on. But in this case, the pins are the “master”.

When our pins are configured, we call the BlinkLeds method every 250 millisecond. Each time we set a new LED to High, or set them all to Low.

To deploy (and possibly debug) the code, change the platform target to ARM, and to a Remote Machine. Here you need to set the IP or machine name to your Raspberry Pi. When you have done that, just click on F5 and your project should be deployed and started. J

This is how it should look like:

You can download the full project here:

https://github.com/MikaelSoderstrom/rpi-win10-blinking-leds

Use ASP.NET to control the GPIO pins on Raspberry Pi

Fri, 03 Apr 2015 13:01:35 GMT

By using the GPIO pins on Raspberry Pi with ASP.NET, it’s possible to measure temperature, humidity, turn LEDs on or off, control robots and much, much more. In this blog post I am going to start with just the basics, how to turn two LEDs on or off by using a simple web page and a REST API running on ASP.NET 5.

First of all, we need some hardware:

Raspberry Pi 2 Model B (should work with the older ones, but this is much faster)
Two LEDs (I use red ones, but you could use white, green, blue, purple, UV or whatever you have got with two legs (anode and cathode))
Two 220 Ohm resistors (red-red-brown)
Breadbord
Five wires (without a breakout board for your Raspberry Pi, I recommend using male-female wires. You could also connect the cathode directly to ground, which in case allows you to use just three wires)
A breakout board (not necessary, but makes it much easier! I am not using one here though)

First of all we need to set everything up. To install ASP.NET 5 on Raspbian, you can follow the steps in Scott Hanselmans blog post.

The next step is to connect the hardware. Turn you Raspberry Pi off when connecting the wires, by removing the micro USB-cable! We are going to use Gnd, Pin 23 and Pin 24 from the raspberry. If you are not using a breakout board with labels for the pins, you can find them here (physical pin 16 & 18):

http://pi.gadgetoid.com/pinout

You can also see the pins here:

When connecting the wires, resistors and LEDs, it should look like something like this:

Make sure you connect the anode and cathode correctly!

When everything is connected like this, we can make sure everything is working by manually turning one of the LEDs on. To do this we will use SSH to connect to the Raspberry Pi and start with this command:
cd /sys/class/gpio

If we then use “ls” to list all files we will get export, gpiochip0 and unexport. The first thing we need to do is to export one of the GPIO pins:
echo 23 > export

Running “ls” again should now list gpio23 as one of the “files“.

We have now activated that GPIO pin and are able to control it (set the value to HIGH or LOW, depending on if we want voltage to run through the pin or not. Default is LOW).

Since GPIO pins are Input/Output we first need to set the direction of the pin:
echo out > gpio23/direction

And now we can turn the LED on by sending 1 to the value:
echo 1 > gpio23/value

It should look like this now:

If your LED is not turned on, check your wiring again.

Control the LEDs using ASP.NET

Turning the LEDs on using the command line is probably just fine sometimes, but since we have installed ASP.NET on the Raspberry Pi, we can create a web site where the user can click on buttons to turn them on or off.

To get started the best way is to use one of the libraries available on the web. I have been using Raspberry.IO.GeneralPurpose, which makes it possible to just get started, without having to manually write and read from /sys/class/gpio. You can find the Nuget package here:

https://www.nuget.org/packages/Raspberry.IO.GeneralPurpose/2.2.0.1

To get the code I have used with this library, check the Github page:
https://github.com/MikaelSoderstrom/rpi-aspnet-leds

To clone the package on Raspberry Pi, run:
git clone https://github.com/MikaelSoderstrom/rpi-aspnet-leds.git

Since we need to be running as sudo to be able to modify the GPIO pins, you should run this command before starting the web site:
sudo –s

Then you can just run this inside of the project file, where the project.json is located:
k kestrel

And now we are done! Just navigate to http://ip.used.by.raspberry.pi:4000 and turn the LEDs on. :)

This is how it should look like:

Writing end-to-end tests with Nightmare.js

Sun, 19 Oct 2014 08:06:00 GMT

Nightmare.js allows you to automate HTTP requests in Node.js, which you can use to download files from sites, check your e-mail, runt integration tests, etc.

The last couple of years, more and more logic have appeared on the client-side of web sites. Thanks to Single Page Applications (SPA) instead of server-side frameworks, we are able to cache views on the client and just get the data from the backend.

While doing this, it is more important than ever to test our sites in different browsers, versions, devices etc. One popular framework to do this is Karma (http://karma-runner.github.io/0.12/index.html), which is created by Google and often used with Angular.js. But sometimes you just want to go to an url, enter some input, click some buttons and make sure the expected result shows up on the web page, and do all this in the background with a headless browser such as PhantomJS (http://phantomjs.org/) or SlimerJS (http://slimerjs.org/). And since you don’t actually see the output, you might want to grab a screenshot while running the tests to make sure it looks correct with the styling.

Sweet dreams with Nightmare.js

Recently I found a library that works great for these kind of tasks. It’s called Nightmare.js (http://www.nightmarejs.org/) and is, as it says in the headline, “A high level wrapper for Phantomjs”. And not just that, the API is absolutely stunning.
The example shown on the start page for Nightmare.js shows us an example of how to do a simple search on Yahoo:

new Nightmare()
  .goto('http://yahoo.com')
  .type('input[title="Search"]', 'github nightmare')
  .click('.searchsubmit')
  .run();

Nightmare.js also allows us to write plugins for common tasks, such as logging in to a site before running the specific logic.

So, we know what we can do, but when could we actually use this? Some tasks that I can think of where this could be useful could be:

Downloading files from a web site.
Logging in to web shops such as Amazon and get our order information.
Logging in to the webmail to get the number of unread e-mails.
Use this to make end-to-end tests.

In this article I am going to the the last thing on the list, use this to make some easy tests by using Nightmare.js with Mocha (http://visionmedia.github.io/mocha/) and Chai (http://chaijs.com/).

Get the necessary tools

To be able to run these tests we need a couple of tools and frameworks.

First of all, we need to install the latest version of Node.js with npm (http://nodejs.org/). We also need to install Python 2.7.x (https://www.python.org/). Make sure to install 2.7 and not 3.x since the latter is not officially supported by node-gyp, which is used to compile some components.

When both Node.js and Python is installed, we start by creating a new npm package inside an empty folder.

Navigate to an empty folder in your terminal/powershell/command prompt or what you are using. Start by running npm init and click enter until you are done (you don’t have to fill in all information yet, you can do that later by editing package.json). You should have an package.json file in your project now, which allows you to save packages and developer dependencies in your package.json.

The next step is to install Mocha (global), Chai and Nightmare.js.

Mocha (may require sudo on Linux and Mac OS X since it is a global module):
> npm install -g mocha

Chai:
> npm install --save-dev chai

Nightmare.js:
> npm install --save-dev nightmare

The next step is to create a test folder with an index.js in it.

We have all files needed to create the tests, but we need something to test as well. I have prepared a simple web site, which you can download here:
https://github.com/MikaelSoderstrom/nightmarejs-demo

Clone the repository and go to the server folder.

To start the server, run these commands:

npm install
node index.js

You should now be able to use your browser to go to http://localhost:3000.

Closing the terminal will shutdown the server, so to be able to test this site, you will need to keep that open. The tests should be run in another terminal window.

Start the tests

You should have everything you need to run the tests now.

We are going to create three different tests for this web site, using Mocha, Chai and Nightmare.js.

To make it easier to explain how it works, I will just paste the full tests here:

Mocha gives us describe() and it(), which contains the tests. By adding “done” as parameters in the callback function, we can use these tests with asynchronous calls. If we omit that, it will just run the tests without waiting for the result, and always return success.

With Chai (and “should”) we can tell the tests that some variable “should” have the expected value. Chai also contains “expect” and “assert”. You can use any of them, you will just have to import the right one in the file.

And by using Nightmare.js, we can make these simple calls to the url, where we perform some tasks and wait for the result.

Spinning up a new PhantomJS browser and going through the steps for each task takes a while, and since the standard timeout in Mocha is set to 2000 milliseconds, we have to change that. I have been using 15000 milliseconds here, which seems to be a good number for this test (it takes 8-9 seconds per test on my machine). Because of the time to run all tests, you probably do not want to use this in your normal test runner (like “grunt test”), but running it from time to time to make sure everything still works or running it from the build server could be a good plan, and you should not use this to do performance tests.

To run the tests, simply go to the root directory for your tests (where you have your package.json) and type:

> mocha

The result should look like this:

That´s it! We are now able to run tests on any website by just entering the url, and doing the tasks needed to get the information we ask for.

The full project used here can be found here:
https://github.com/MikaelSoderstrom/nightmarejs-demo

HTML5 Hidden Attribute

Thu, 27 Jun 2013 17:30:27 GMT

One of the new global attributes in HTML5 is the hidden attribute. It is not the most advanced or revolutionary attribute in HTML5, since all it does is actually to hide the content of the element.

To use it, all you have to do is to add it to an element, and you can see that the content is gone.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Hidden attribute</title>

</head>

<body>

    <h1>Hidden attribute</h1>

    <div>I´m visible!</div>

    <div hidden>I´m invisible!</div>

</body>

</html>

Result:

The purpose of this attribute is to tell the browser that its content is irrelevant as it is, but could be used to store elements or information that you might need to use with JavaScript for example.

Since it is not available in IE 10 and earlier (introduced in IE 11), the attribute will be ignored. To hide it in older browsers, all you have to do is to add some CSS:

<style>

    [hidden] {

        display: none;

</style>

This is only going to hide the content as long as CSS is activated and parsed, while browsers with support for the attribute will hide the content whether or not CSS is activated.

How to use nested custom elements with CSS Shaders

Fri, 24 May 2013 11:49:34 GMT

Last time I wrote about how to use Polymer to create custom elements. This time we will create two custom elements, where one of them is going to use the other to add additional functionality. We will also use CSS Filters and properties unique to this element.

If you don´t know what Polymer is and how to get it, please read my last post about it.

As I demonstrated in the last post, it´s really easy to create a new custom element and use it on your page. An element is not always a simple control though, but can be a collection of different controls. We could add all these controls into one huge element, or we could create smaller components which we will use together in a new element.

In this post I will create a new element (x-filter) which uses CSS Filters, and that element will be used in another element (x-choosefilter) which will have a dropdown list where we can choose which filter we want to use. The x-filter element will be able to set the filter on any element we want, so we will need to make it possible to add additional elements inside of it.

This is how we will use the elements on the page with x-choosefilter:

Since the x-filter element is just an ordinary element, we will also be able to use that directly on the page.

The first thing we will have to do here is to create the x-filter element.

<element name="x-filter" attributes="filter">

    <template>

        <style>

            .grayscale {

                -webkit-filter: grayscale(100%);

                -moz-filter: grayscale(100%);

                -ms-filter: grayscale(100%);

                -o-filter: grayscale(100%);

                filter: grayscale(100%);

            .blur {

                -webkit-filter: blur(3px);

                -moz-filter: blur(3px);

                -ms-filter: blur(3px);

                -o-filter: blur(3px);

                filter: blur(3px);

            .brightness {

                -webkit-filter: brightness(25%);

                -moz-filter: brightness(25%);

                -ms-filter: brightness(25%);

                -o-filter: brightness(25%);

                filter: brightness(25%);

            .contrast {

                -webkit-filter: contrast(50%);

                -moz-filter: contrast(50%);

                -ms-filter: contrast(50%);

                -o-filter: contrast(50%);

                filter: contrast(50%);

            .dropshadow {

                -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

                -moz-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

                -ms-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

                -o-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

                filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

            .huerotate {

                -webkit-filter: hue-rotate(180deg);

                -moz-filter: hue-rotate(180deg);

                -ms-filter: hue-rotate(180deg);

                -o-filter: hue-rotate(180deg);

                filter: hue-rotate(180deg);

            .invert {

                -webkit-filter: invert(100%);

                -moz-filter: invert(100%);

                -ms-filter: invert(100%);

                -o-filter: invert(100%);

                filter: invert(100%);

            .opacity {

                -webkit-filter: opacity(50%);

                -moz-filter: opacity(50%);

                -ms-filter: opacity(50%);

                -o-filter: opacity(50%);

                filter: opacity(50%);

            .saturate {

                -webkit-filter: saturate(1000%);

                -moz-filter: saturate(1000%);

                -ms-filter: saturate(1000%);

                -o-filter: saturate(1000%);

                filter: saturate(1000%);

            .sepia {

                -webkit-filter: sepia(100%);

                -moz-filter: sepia(100%);

                -ms-filter: sepia(100%);

                -o-filter: sepia(100%);

                filter: sepia(100%);

        </style>

        <div id="filter" class="{{ filter }}">

            <content></content>

        </div>

    </template>

    <script>

        'use strict';

        Polymer.register(this, {

            filter: '',

            setFilter: function (test) {

                this.$.filter.className = test;

});

    </script>

</element>

As you can see, we have a couple of CSS classes which uses one filter each. We are not going to implement support for different values for each class in this element, but that is something you could add if you want to. You will just have to change the JavaScript to take care of the value as well. We could also make it possible to sett the filter more dynamically instead of having one class for each, but for this demo I don´t feel that it´s necessary.

Since we use content element inside of <div id=”filter” …></div>, everything we send to the x-filter element will be styled with the filter we have chosed.

To test this, we will add a new HTML page (index.html):

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>CSS Filters</title>

    <link rel="import" href="x-filter.html">

    <script src="polymer.min.js"></script>

</head>

<body>

    <h1>CSS Filters</h1>

    <x-filter filter="sepia">

        <img src="image.jpg" />

    </x-filter>

</body>

</html>

We have added an import link in head, and havet hen added the x-filter element with the filter set to ”sepia” and the content to an image we have. If we open the page now, we will se this:

The image which is just a normal photo, have instead got a sepia filter. At the moment, this demo only works in Chrome (I am using Chrome Canary 29) since CSS Filters isn´t fully implemented in other browsers.

The next step is to add a dropdownlist where we can use different filters and switch easily. To do this we will create a new HTML page for the new x-choosefilter element.

<element name="x-choosefilter">

    <template>

        <select id="selectedfilter" on-change="setfilter">

            <option value="">None</option>

            <option value="grayscale">Grayscale</option>

            <option value="blur">Blur</option>

            <option value="brightness">Brightness</option>

            <option value="contrast">Contrast</option>

            <option value="dropshadow">Drop shadow</option>

            <option value="huerotate">Hue rotate</option>

            <option value="invert">Invert</option>

            <option value="opacity">Opacity</option>

            <option value="saturate">Saturate</option>

            <option value="sepia">Sepia</option>

        </select>

        <x-filter id="xfilter">

            <content></content>

        </x-filter>

    </template>

    <script>

        'use strict';

        Polymer.register(this, {

            filter: 'opacity',

            setfilter: function () {

                this.$.xfilter.setFilter(this.$.selectedfilter.value);

});

    </script>

</element>

We create this element the same way as before, but we will send the content into the x-filter element from this one. When we change the value for the dropdown list, we call the setFilter(…) method which we created in the x-filter element.

If we want to use this element, we will have to add an link to index.html, and then add the element. We will still need to have the link to x-filter in index.html.

The new and improved index.html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>CSS Filters</title>

    <link rel="import" href="x-filter.html">

    <link rel="import" href="x-choosefilter.html">

    <script src="polymer.min.js"></script>

</head>

<body>

    <h1>CSS Filters</h1>

    <x-choosefilter>

        <img src="image.jpg" />

    </x-choosefilter>

</body>

</html>

If we open the page now, we will have the dropdown list where we can change filter.

We are now able to choose between the different CSS Filters we provide, by simply adding the x-choosefilter element. We can still use x-filter though, and if we add it on the same page after the x-choosefilter element we will see this:

Since the elements have their own scopes with their own Shadow DOM they don´t affect each other. It means that we can add both this elements to existing web sites without breaking anything.

Create a video player using custom elements

Fri, 17 May 2013 09:14:00 GMT

Thanks to a new specification from W3C called ”Custom Elements” we will be able to create our own elements such as <x-stock symbol=”MSFT” /> and use that element as any other element in our browsers, which includes custom styling, custom events, custom APIs etc.

I previously blogged about Shadow DOM where I demonstrated how to use the Developer tools in Google Chrome to get the underlying DOM that is not visible to the user, in this case the video element. This is a great tool to get more understanding about how the element is actually built, and the API makes it possible to create our own Shadow DOM with ”hidden” elements.

This time we will not inspect the current video element, but instead we will create a new element that is using the video element underneath, while providing separate APIs and menu controls. Since the browser support is very limited so far, I am going to use Polymer, which allows us to use HTML Imports, Custom Elements and Shadow DOM in all major browsers. The library is still in pre-alpha mode and is not stable enough for production environments, so you should only use this for experimenting for the moment.

Get the latest Polymer

Polymer is hosted on Github, and if you like me, are using Visual Studio 2012 for web development, you should download Update 2and the Git add-in for Visual Studio 2012. For information and download links, visit Scott Hanselmans blog:

http://www.hanselman.com/blog/GitSupportForVisualStudioGitTFSAndVSPutIntoContext.aspx

When you have downloaded and installed everything you need to open up Visual Studio and clone the repository which you can find at:

git://github.com/Polymer/polymer.git

You should have all files needed now, and will be able to update them later on with just a click. :-)

Creating the <x-simplevideo /> element

Since we will use HTML Imports to include the custom element, we will need two different HTML files, index.html and x-simplevideo.html.

Note: You should always prefix your custom elements with ”x-” since you don´t want to risk problems with new elements in the specification further on (for example, we name our element <simplevideo />, and W3C decides to create their own <simplevideo /> in year 2018).

This is how our new element will work:

The custom element will be included with its own DOM since it´s a separate file. It will include a standard video control though, but we will replace the menu controls with our own menu.

To get started with the new element we will make it as simple as possible to start with. So let´s start with the X-simplevideo.html.

<element name="x-simplevideo">

    <template>

        <video controls src="Big_Buck_Bunny_Trailer_400p.ogg.360p.webm"></video>

    </template>

    <script>

        'use strict';

        Polymer.register(this);

    </script>

</element>

The ”element element” specifies our element. The name attribute is what we are going to use in the parent site (<x-simplevideo />). We are also going to add some other attributes here later. The next element is the template element. It contains what is going to be rendered by the browser, but since it´s part of our x-simplevideo element, it will be hidden in the Shadow DOM. The script tags outside of the template will never be rendered, and will only be used by our own element.

Since we need to use the Polymer polyfill to use all these new specifications, we will need to register our element.

The next step is to actually use the element on index.html.

<!DOCTYPE html>

<html>

<head>

    <title>SuperVideo</title>

    <script src="polymer.min.js"></script>

    <link rel="import" href="x-simplevideo.html">

</head>

<body>

    <h1>Simplevideo test</h1>

    <x-simplevideo />

</body>

</html>

First of all we need to import our element in the head of the page. As soon as it´s imported, we can start using it.

If we open the page now, we will see this:

And if we take a look at the DOM in Developer tools, we can see that there is no trace of our original video element, but only the custom element we created.

Make it customizable with attributes

Our new videoplayer is a new element which can play a single video, nothing special about that. The next step is to make it more customizable, so the user of our new element can choose which video to play, and also change the width and height of the player.

The first thing we need to do is to add support for these new attributes:

<element name="x-simplevideo" attributes="src width height">

And now we need to register them so we can use them either by using JavaScript or by binding them directly to our videoplayer.

Polymer.register(this, {

    src: '',

    width: '480',

    height: '400'

});

As you can see we have some standard values in case the user didn´t specify them. The last step is to bind these attributes to the videoplayer.

<video controls src="{{src}}" width="{{width}}" height="{{height}}"></video>

Now when we use the player in index.html, we can specify these three attributes.

<x-simplevideo src="Big_Buck_Bunny_Trailer_400p.ogg.360p.webm" width="500" height="300" />

If we play the video again, it is playing the same video, but has changed size to 500x300 pixels.

Add custom menu controls

What we have now is still the standard video control, but what we want is to use our own menu control instead of the original one. To do this, we first need to remove the controls attribute from the video element. Now we will add a really simple menu with play, pause and a timeline.

<element name="x-simplevideo" attributes="src width height">

    <template>

        <style scoped>

            div {

                display: inline-block;

                position: relative;

            nav {

                background: rgba(0, 187, 255, 0.5);

                top: 0;

                opacity: 0.1;

                position: absolute;

                transition: all 0.5s;

                width: 100%;

            video:hover ~ nav, nav:hover {

                opacity: 1;

        </style>

        <div>

            <video src="{{src}}" width="{{width}}" height="{{height}}" id="video"></video>

            <nav>

                <input type="button" on-click="playVideo" value="Play" />

                <input type="button" on-click="pauseVideo" value="Pause" />

                <input type="range" name="timeline" max="{{videoDuration}}" value="{{currentTime}}" id="timeline" />

            </nav>

        </div>

    </template>

    <script>

        'use strict';

        Polymer.register(this, {

            src: '',

            width: '480',

            height: '400',

            videoDuration: 0,

            currentTime: 0,

            playVideo: function () {

                this.$.video.play();

},

            pauseVideo: function () {

                this.$.video.pause();

},

            srcChanged: function () {

                (function (scope, video) {

                    scope.$.video.addEventListener('canplay', function () {

                        scope.videoDuration = scope.$.video.duration;

});

                    scope.$.video.addEventListener('timeupdate', function () {

                        scope.currentTime = video.currentTime;

});

                })(this, this.$.video);

});

    </script>

</element>

Some new things have happened now. First, we have added styling for the menu element. Then we have added and id to the video element so we can use it with the Polymer API. The video element is now encapsulated inside a div together with the nav element which is used as menu control. Last, we have added new properties for duration and current time, and some functions that we use for play, pause and to update the properties when the video src is updated.

For the play and pause buttons, on-click attributes are added. These are used by Polymer to bind the click event to functions specified in Polymer.register().

All properties registered in Polymer is having observers, such as srcChanged, which will listen for changes in that specific property. When the value changes, we update videoDuration and currentTime, which will reflect the changes to our menu control automatically.

We have also binded videoDuration to our range element, so the value will be updated while we are playing the movie, and also let us go back and forward in the video.

If we reload the page with these changes and play the video, we will now get this:

It´s not the most elegant video player, but it was easy to create, and even more easier to reuse. All we have to do is to import the x-simplevideo element and add the element on our page. All HTML, CSS and JavaScript will be used only in that specific element, so it´s really simple to distribute these components to other sites. If we open Developer tools, we can see that we still only have our x-simplevideo element in the DOM, while the rest is hidden in the Shadow DOM.

CustomEvent in DOM Level 3 and DOM Level 4

Fri, 01 Feb 2013 22:19:00 GMT

In DOM Level 3 Events, a new type of events, CustomEvent, is available. It extends the ordinary Event with a new detail property which you can use to provide extra information. With this new method you are able to create new types of events that you can use in your application.

To use the event, you use addEventListener, just as you do with click, mouseover, load etc. But instead of using those events that you are used to, you can name your event whatever you want, and then add a listener to any element on your page.

To start with, we need to have a web page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Lab - CustomEvent</title>

</head>

<body>

    <h1>CustomEvent</h1>

    <div id="content">Lorem ipsum...</div>

    <input type="button" id="magic" value="Click me!" />

    <script src="scripts/customevents.js"></script>

</body>

</html>

The idea is that when we click on the button, I want to trigger a custom event that I have created, and which the div element (#content) is listening to.

The first thing we need now is to create the CustomEvent.

var customEvent = new CustomEvent('doMagic', {

    detail: {

        message: 'Click #'

});

customEvent is now a new instance of CustomEvent, which we can add listeners for. When the event is triggered, it will automatically call all event listeners and send not just the normal properties, it will also send detail.message in this case. The detail property is just a normal object, so we can add all data we think is useful there.

The next step is to listen for changes, so we will add a new listener to the content element.

var contentBox = document.getElementById('content');

var count = 0;

contentBox.addEventListener('doMagic', function (e) {

    count++;

    this.textContent = e.detail.message + count;

}, false);

Nothing strange here. When we trigger the doMagic event, we want to execute the function in the event listener, which will change the textContent in our div to the message that was sent to us, and apply the number of calls to the method.

The last step is to actually trigger the event.

var magicButton = document.getElementById('magic');

magicButton.addEventListener('click', function () {

    contentBox.dispatchEvent(customEvent);

}, false);

I am listening for clicks on the button, and then trigger doMagic using the dispatchEvent method and send in the reference to the CustomEvent.

Custom events like this can be really useful, for example when building different controls where the developer using your control should be able to listen for specific changes, like folding out a dropdown menu. Libraries such as jQuery has this functionality built in already, but now you can listen for events in a standardized way using almost no extra code at all.

So what about browser compatibility? Actually, almost all modern browsers supports everything here (Chrome 15, Firefox 11, Opera 11.60 and Nightly builds of Safari according to MDN). IE 9 supports everything except from the use of the constructor, which is part of DOM Events Level 4. Take a look at the MSDN page for more information about support in IE. If you use the functionality as specified in the DOM Events Level 3 specification, all major browsers will be able to run your code.

You can find more info about this at:

The new
element in HTML 5.1

Sun, 27 Jan 2013 22:47:35 GMT

In the upcoming specification for HTML 5.1, a new semantic element will be introduced, the <main> element.

When developing web sites using HTML5 you might be using the new semantic elements such as <article>, <section>, <aside>, <nav> etc. They are great for marking different sections of your content, but none of them is telling the user which content is specific for the current page.

Let´s say your layout looks like this:

The content in the “main container” is what is unique for that page. The header and the context boxes on the right are static and will look the same on all pages.

The markup for this page might look like something like this:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>My awesome site!</title>

</head>

<body>

    <header>

        <h1>My awesome site</h1>

    </header>

    <div id="main" role="main">

        <article>

            <!-- Markup for the article -->

        </article>

        <section>

            <!-- Comments -->

        </section>

    </div>

    <section>

        <!-- Content boxes with addition information -->

    </section>

    <footer>

        Copyright &copy; 2013 Foo Bar Inc, all rights reserved.

    </footer>

</body>

</html>

Here we use the div element to mark our main content. We also have the main role for accessibility purposes.

But instead of using this div element, HTML 5.1 will allow us to use the main element, which will look like this:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>My awesome site!</title>

</head>

<body>

    <header>

        <h1>My awesome site</h1>

    </header>

    <main role="main">

        <article>

            <!-- Markup for the article -->

        </article>

        <section>

            <!-- Comments -->

        </section>

    </main>

    <section>

        <!-- Content boxes with addition information -->

    </section>

    <footer>

        Copyright &copy; 2013 Foo Bar Inc, all rights reserved.

    </footer>

</body>

</html>

It looks almost the same, but we use the main element instead of the div, which gives us more semantic HTML. Since no user agents supports the main element yet, we should still have the role attribute set to main. When more user agents supports this element we could skip this though.

There are some important things you as a developer must know about this element though:

You can only have one main element on each page.
You must only use it for the page specific content. Don´t use it for your page header for example.
You must not use the main element as a child of an article, aside, footer, header or nav element.

Except from these cases, you are good to go! Since all modern web browsers will ignore this element, you can actually use it today. To be able to style it in IE 8 or earlier, you will have to create the element using JavaScript.

Get under the hood with Shadow DOM

Mon, 21 Jan 2013 19:57:24 GMT

When you add an element to your page, it is being added to the Document Object Model (DOM). When added to the DOM, you can use CSS to style it or JavaScript (getElementById, querySelector etc) to get a reference to the element and modify it. There are some cases where this isn´t true though.

Let´s say we want to add a video player to our site. We use the standard <video> element, choose which movie to play and start it. Here we have a standard element doing what it´s supposed to do. But what if we add the controls attribute?

This is what we see in the browser if we are using Internet Explorer 10:

We have got some controls here as expected since we added the controls attribute. BUT..! Where are they in the DOM? If we take a look at the Developer Tools in IE 10 we will see this:

As we can see in the picture above, there are no elements for the play/pause button, the time slider or the other elements. So where are they?

The answer to that question is the Shadow DOM.

To make it easier to explain how it works I have created this diagram with the current DOM:

The blue elements are what we can see in the DOM through Developer Tools, and the green elements are what is hidden in the Shadow DOM.

So…

Okay, so there is this thing Shadow DOM… But… What does it matter to me as a web developer? If it´s hidden, why would I care about it?

Thanks to a new specification on W3C, called Web Components, we can actually use Shadow DOM to create components that will be visible for the user, but rendered separately from the rest of the page. This means we can use HTML, CSS and JavaScript that is rendered independently from what is being rendered for the rest of the page.

At the moment, there is only one browser that supports Web Components, and that is Chrome Canary (Chrome 25), so I will be using it for the demos.

Creating a Shadow Host using JavaScript

First of all we will need to create a new HTML document. I have created a very simple one which looks like this:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Creating a Shadow Host using JavaScript</title>

        <style>

            p { color: #0a0; }

        </style>

    </head>

<body>

    <h1>

        Shadow DOM

    </h1>

    <p>This is rendered outside of our Shadow DOM.</p>

    <div id="shadowhost"></div>

</body>

</html>

The div element with id “shadowhost” will be the host for our Shadow DOM Tree. The first we will have to do is to create a new Shadow DOM based on that element using JavaScript.

Let´s add these three lines of JavaScript:

var el = document.querySelector('#shadowhost');

var root = el.webkitCreateShadowRoot();

root.innerHTML = '<p>Rendered inside of our Shadow DOM!</p>';

The first thing we are doing here is to get a reference of the div element which will be the host. After that we use the webkitCreateShadowRoot method (when more browsers have support for this you will of course have to use their vendor specific prefixes as well, but for the moment I will only use webkit to save some lines). The next step is to add a p element to the div.

This is no rocket science, and you have probably used the code before (except from the second line). But it is the second line which is creating the magic.

If we take a look at the page in Chrome Canary, we will get this result:

Whoa! Two things are different from how we are used to see things when we are adding elements.

We added a p element, and we have CSS that is supposed to make the text green, as in the first p element on the page.
Our shadowhost is still empty! Where is the p element we added and which is apparently added to the page?

First of all, the text is black since our shadow tree is like a whole new document, as if we would have added an iframe. The difference here is that it is on the same page. It is in other words not affected by the surrounding DOM.

And the reason to why we can´t see the element in the DOM is because there are no elements in the DOM, since they are in the Shadow DOM.

Light up the Shadow DOM

In Chrome Developer Tools, there is actually possible to show the Shadow DOM. If we go to settings –> General and active “Show Shadow DOM” we will be able to see what´s inside of the Shadow DOM.

And what about the CSS? You might want the developer using your component to be able to style the elements inside of your Shadow DOM. This is actually possible by enabling applyAuthorStyles for the root variable:

root.applyAuthorStyles = true;

With “Show Shadow DOM” enabled in the Developer Tools, and applyAuthorStyles set to true, we will get this result:

Great! We are now able to add elements that are not (usually) visible in the DOM Tree, and we can choose whether or not our elements will be affected by the styles set by the developer who will be using our component.

Create a separate HTML file for the component

So far, we have been using pure JavaScript and an empty element on the page for our component. But this isn´t probably the most usable way to use it all times. Sometimes you would want to create a separate HTML file for the component which contains all styles, data etc that you would want to use for your component, and later on give the user of your component the ability to add it to their page for a better experience.

The next step here is to create an entirely new HTML page. In this page we will use some new elements; <element>, <template> and <content>, as well as some new attributes to use with them.

But first of all we have to create the document which will be visible for the user, where we will use the component:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Shadow DOM</title>

    <link rel="components" href="vip-component.html" />

</head>

<body>

    <h1>Persons</h1>

    <ul is="vips">

        <li class="vip">Mikael Söderström</li>

        <li>Boris Jeltsin</li>

        <li>Julius Caesar</li>

        <li class="vip">Bill Gates</li>

    </ul>

    <script src="scripts/components-polyfill.js"></script>

</body>

</html>

We have a list with people here, and on two of them we have the vip class (hrm ;-)). In the head you can see something different though. We have a link element that references to a vip-component.html as “components”. In the vip-component.html page we will use markup to create our Shadow DOM, and then apply it on the list. Since all features aren´t implemented in the browser yet, we will have to include a polyfill as well.

You can download the polyfill here:

https://github.com/dglazkov/Web-Components-Polyfill

If we open the page we will see nothing but a list with names, so the next step is to create the vip-component.html page which will look like this:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

</head>

<body>

    <element name="vips" extends="ul">

        <template>

            <h2>VIP</h2>

            <div>

                <ul>

                    <content select=".vip"></content>

                </ul>

            </div>

            <h2>Other people</h2>

            <div>

                <ul>

                    <content></content>

                </ul>

            </div>

        </template>

    </element>

</body>

</html>

It looks like an ordinary HTML page, but we are using some new elements that is supported by the Web Components API.

<element> is the name of our new element, and in this case we are extending the existing ul element. We could create a whole new <vip> element if we want to.
<template> tolds the browser that this is the template which will be rendered in the Shadow DOM.
<content> is where the markup will be placed from the original DOM. The select attribute uses ordinare CSS selectors, and in the first content element we want the users who have the class “vip”, and in the other content element we will have the rest.

To test this, I disabled “Show Shadow DOM” in the Chrome Developer Tools and reloaded the page. This is what I got:

If we look at the DOM, we still have the original one as before, but if we look at the page, we can see that we have the grouping and headers from our Web Component!

Conclusion

Web Components are extremely useful in a lot of cases where you want to separate your components into other files, and at the same time let them be isolated from CSS in your original page.

I just demonstrated the basics here, but if you want to go one step further, you could add JavaScript methods in your component, that the original page can call to modify your Shadow DOM, like the play() method on the video element. You can also add your own pseudo classes to the CSS for your element, like ul:vip-header { color: #0f0; } in this case.

Have you used Web Components and perhaps have any cool demos? Please let me know!

Declarative helpers in Razor

Wed, 06 Oct 2010 20:02:18 GMT

ASP.NET Web Pages Beta 1 have support for Helpers, which are methods written in C# or Visual Basic, and returns IHtmlString. They can return HTML that is displayed on the page. If you choose to create helpers that way, you would need to have your HTML in an assembly, which makes it different to modify. Because of that, the new version of Razor supports declarative Helpers that you can create directly on the page. They work in both ASP.NET MVC 3 Beta and ASP.NET Web Pages Beta 2, which is included in WebMatrix.

A declarative helper is created the same way as a method, but instead of having a return type, you set ”helper”.

Let´s say you have this code:

@{

    var text = "Hello, world!";

    <p>@text</p>

We want to refactor it into its own method to be able to reuse it. We can do it using a declative helper, like this:

@helper SayHello(string yadda)

    <p>Text: @yadda</p>

And if you want to use it:

@SayHello("Hello, world!")

We can also add code in the helper, such as:

@helper Calculator(int a, int b)

@{

        var sum = a + b;

    <b>@sum</b>

And to display the result, we use:

1 + 2 = @Calculator(1, 2)

It will display ”3” on the page, which is the sum of the numbers.

To go one step further and make it even more dynamic, we can use Lambda Expressions for the helper. If we want to be able to change how to count the result, we could use this instead:

@helper Calc(int a, int b, Func<int, int, int> calc)

@{

        var sum = calc(a, b);

    <p>@sum</p>

And if we want to multiply the letters, we use the helper this way:

@Calc(4, 4, (a, b) => a * b)

We can actually create really advanced helpers directly on the page. This is for those who are using ASP.NET Web Pages, but it can also be used in ASP.NET MVC 3 Beta.

Unobtrusive validation in ASP.NET MVC 3

Wed, 06 Oct 2010 19:50:07 GMT

In ASP.NET MVC 2 we got support for client validation of the model. When we activate it, a JavaScript is generated and added to the rendered view. It contains all validation rules we set up for the model, and are used to generate error massages without reloading the page.

I ASP.NET MVC 3 they have extended that support. Instead of generating a JavaScript, you can now use ”unobtrusive Jquery validation”, which uses the data-* attribute in HTML5 instead of using JavaScript.

To activate it on the page you can add this:

@Html.EnableUnobtrusiveJavaScript()

And to activate it on all pages, you can add a key to web.config:

<appSettings>

  <add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

New ASP.NET MVC 3 Beta projects will have this enabled as default, and upgraded projects will not have it activated as default to make sure it is backwards compatible.

To use this new validation, you will have to add references to jquery-1.4.1.js, jquery.validate.js and jquery.validate.unobtrusive.js.

To test this, I have a model, ”Customer”, which looks like this:

using System;

using System.ComponentModel.DataAnnotations;

namespace MyMvc3Site.Models

    public class Customer

        [Required]

        public int CustomerId { get; set; }

        [Required]

        [StringLength(5)]

        public string Name { get; set; }

        [Required]

        public DateTime Birthday { get; set; }

In the view, I have this:

@model MyMvc3Site.Models.Customer

@{

    View.Title = "Create";

<h2>Create</h2>

@using (Html.BeginForm()) {

    @Html.ValidationSummary(true)

    <fieldset>

        <legend>Fields</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.CustomerId)

        </div>

        <div class="editor-field">

            @Html.TextBoxFor(model => model.CustomerId)

            @Html.ValidationMessageFor(model => model.CustomerId)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Name)

        </div>

        <div class="editor-field">

            @Html.TextBoxFor(model => model.Name)

            @Html.ValidationMessageFor(model => model.Name)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Birthday)

        </div>

        <div class="editor-field">

            @Html.TextBoxFor(model => model.Birthday)

            @Html.ValidationMessageFor(model => model.Birthday)

        </div>

<p>

            <input type="submit" value="Create" />

        </p>

    </fieldset>

Without unobtrusive jQuery validation, we will get this in the view:

<form action="/Customer/Create" id="form0" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>

</ul></div>    <fieldset>

        <legend>Fields</legend>

        <div class="editor-label">

            <label for="CustomerId">CustomerId</label>

        </div>

        <div class="editor-field">

            <input id="CustomerId" name="CustomerId" type="text" value="" />

            <span class="field-validation-valid" id="CustomerId_validationMessage"></span>

        </div>

        <div class="editor-label">

            <label for="Name">Name</label>

        </div>

        <div class="editor-field">

            <input id="Name" name="Name" type="text" value="" />

            <span class="field-validation-valid" id="Name_validationMessage"></span>

        </div>

        <div class="editor-label">

            <label for="Birthday">Birthday</label>

        </div>

        <div class="editor-field">

            <input id="Birthday" name="Birthday" type="text" value="" />

            <span class="field-validation-valid" id="Birthday_validationMessage"></span>

        </div>

<p>

            <input type="submit" value="Create" />

        </p>

    </fieldset>

</form><script type="text/javascript">

//<![CDATA[

if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }

window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"CustomerId",

"ReplaceValidationMessageContents":true,"ValidationMessageId":"CustomerId_validationMessage",

"ValidationRules":[{"ErrorMessage":"The CustomerId field is required.","ValidationParameters":{},

"ValidationType":"required"},{"ErrorMessage":"The field CustomerId must be a number.",

"ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Name",

"ReplaceValidationMessageContents":true,"ValidationMessageId":"Name_validationMessage",

"ValidationRules":[{"ErrorMessage":"The Name field is required.","ValidationParameters":{},

"ValidationType":"required"},{"ErrorMessage":"The field Name must be a string with a maximum length of 5.",

"ValidationParameters":{"max":5},"ValidationType":"length"}]},{"FieldName":"Birthday",

"ReplaceValidationMessageContents":true,"ValidationMessageId":"Birthday_validationMessage",

"ValidationRules":[{"ErrorMessage":"The Birthday field is required.","ValidationParameters":{},

"ValidationType":"required"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});

//]]>

</script>

It is a lot of JavaScript being rendered, and if we activate unobtrusive jQuery validation, we will get this instead:

<form action="/Customer/Create" method="post">    <fieldset>

        <legend>Fields</legend>

        <div class="editor-label">

            <label for="CustomerId">CustomerId</label>

        </div>

        <div class="editor-field">

            <input data-val="true" data-val-number="The field CustomerId must be a number." data-val-required="The CustomerId field is required." id="CustomerId" name="CustomerId" type="text" value="" />

            <span class="field-validation-valid" data-valmsg-for="CustomerId" data-valmsg-replace="true"></span>

        </div>

        <div class="editor-label">

            <label for="Name">Name</label>

        </div>

        <div class="editor-field">

            <input data-val="true" data-val-length="The field Name must be a string with a maximum length of 5." data-val-length-max="5" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />

            <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

        </div>

        <div class="editor-label">

            <label for="Birthday">Birthday</label>

        </div>

        <div class="editor-field">

            <input data-val="true" data-val-required="The Birthday field is required." id="Birthday" name="Birthday" type="text" value="" />

            <span class="field-validation-valid" data-valmsg-for="Birthday" data-valmsg-replace="true"></span>

        </div>

<p>

            <input type="submit" value="Create" />

        </p>

    </fieldset>

</form>

Instead of JavaScript, the different elements will have a couple of new attributes instead. Jquery.validation.unobtrusive.js contains functionality that can parse these values and generates error messages based on these instead. In this way, we will get much cleaner HTML, and still have valid HTML5. The validation will work exactly like before, the only difference is what is being rendered.

Introducing NuPack

Wed, 06 Oct 2010 17:00:32 GMT

When you install ASP.NET MVC 3 Beta or WebMatrix Beta 2, a new product called ”NuPack” is installed with it. NuPack makes it possible to quickly add references to third party products like Ninject, jQuery and so on. All necessary files (dll, js etc) are automatically added to the project, and necessary modifications in web.config are automatically added.

There is an existing list with packages that is used when installing NuPack, but you can create your own if you need to. You can also put all packages on a network share so you can distribute them to all developers at your company.

I am going to show you how to add packages in both Visual Studio and WebMatrix since they work differently.

NuPack in Visual Studio 2010

In Visual Studio, we have to different ways to add references, in the GUI or through a Console window, which is based on PowerShell.

In the GUI, we can get a list with all products, add them to the project and update existing references. In the console window, we can do the same, but also remove existing references.

NuPack works in both existing projects, and in new projects. I have now created a new ASP.NET MVC 3 project with no references at all. To be able to log all errors, I would like to add ELMAH, which is a really good tool that can be used to log all errors. If I was going to add it manually, I would have to go to the homepage, download the assembly, add a reference to the assembly and then make some changes in web.config. If I want to use NHibernate or some other tools, I will have to do the same with them and all dependencies.

Instead of doing this manually, I will use NuPack to add ELMAH to my project.

To add ELMAH, I right-click on References in my project, and then I click on “Add Package Reference”. This window is now opened:

I search for ELMAH and choose to install it. What happens now is that ELMAH is downloaded and added as a reference in the project, and all necessary modifications in web.config are automatically done!

If we take a look in the folder where we have our solution, there is a new folder named ”packages”, and here we can find ”elmah 1.1” which contains all files we just downloaded. We have also got a new file in our project, “packages.config”, which contains the name and version of the package.

This took a few seconds to do, which is going to save us a lot of time compared to doing this manually (downloading files, adding references, reading instructions etc).

We also have a concole window for NuPack, which can be used the same way.

We can use commands like:

· Add-Package name – Adding the package ”name”

· Remove-Package name – Removing the package ”name”

· List-Package – Displays a list with all packages

· Update-Package name – Updating the package ”name” to the latest version

If we want to remove ELMAH, which we just added we can write:

Remove-Package ELMAH

All references are deleted, and the changes in web.config are restored.

If we install MvcScaffold we will get new PowerShell commands to use, such as Add-MvcView, which adds a new view to the project.

ASP.NET Web Pages

If we want to use NuPack with ASP.NET Web Pages, we can use a website instead.

If we want to display the site, go to /_Admin in the browser. The first time we go here, we will have to set the admin password:

When we have entered the password, we will get to the next step where we can see a list with all available packages:

The packages available for ASP.NET Web Pages contain different helpers, such as a Bing-helper which can be used to search on our site using Bing. There are also some other helpers here. If we choose to install Microsoft-web-helpers 1.0, the package will be downloaded and we will get this:

We can now use the helper on our site by writing:

@Bing.SearchBox(”http://www.minsida.com”)

This is the result:

The first time we logged in on the site, we had to create a password. This password is hashed and then saved in a text file on the server:

It may look bad and insecure to store it in clear text, but you can´t actually open that file in the browser:

Summary

Thanks to NuPack, we can quickly and easy add functionality to our site without doing anything but click on some buttons. Since we can create our own packages, we can use it internally on the company to easily distribute assemblies and settings to our colleagues.

What's new in ASP.NET MVC 3 Beta & WebMatrix Beta 2

Wed, 06 Oct 2010 15:25:00 GMT

Microsoft just released ASP.NET MVC 3 Beta, which came with some news. Among other things, we now have a new project dialog box, an updated version of Razor, support for helpers from ASP.NET Web Pages, new interfaces for Dependency Injection, unobtrusive jQuery validation and more. A new beta of WebMatrix has also been released.

New project dialog

When we created new ASP.NET MVC project in CTP's that came before, there were different project types for the Web Forms and Razor syntax. In ASP.NET MVC Beta we have a single project type called ASP.NET MVC 3 Web Application. If we choose to create a new project, we get a new window, where we can choose View Engine, type of ASP.NET MVC 3-projects and if we want a test project:

Updated version of Razor

Unfortunately, we still don´t have syntax highlighting and intellisense for Razor, but for syntax highlighting, you can use either WebMatrix, or this plugin for Visual Studio 2010:

http://bit.ly/a0Jkqv

However, there are some new features for Razor in ASP.NET MVC 3, like a new way to specify the model, as well as support for declarative helpers.

Helpers from ASP.NET Web Pages

When ASP.NET Web Pages came with WebMatrix, we got a couple of different helpers like one which is used to show a table, with support for sorting and paging. It can now be used in asp.net MVC 3.

New interfaces for Dependency Injection

ASP.NET MVC 3 CTP came with enhanced support for Dependency Injection, by IMvcServiceLocator. In the new beta, we can use the IDependencyResolver insttead, which is smaller and contains just what we need to inject code in ASP.NET MVC.

There is also a new interface called IControllerActivator, which is used to create an instance of an already existing instance of a controller, i.e. as that the Activator class. Unlike the IControllerFactory it is not used to locate the correct controller.

Unobtrusive jQuery Validation

ASP.NET MVC 2 supports validation on the client. In ASP.NET MVC 3 Beta has been updated to provide a cleaner way to validate. Instead of the JavaScript with validation rules directly on the page it now takes advantage of the data-* attribute from HTML5 on the elements. This means that the rendered HTML looks much better, while we still have a validated page (if we validate against HTML5). However, developers can disable it if they want to continue to use the JavaScript as before.

Updated ValidateInputAttribute

When we try to post HTML from the client, we will, by default, get an error message that says that potentially dangerous code has been posted. This came in ASP.NET 1.1, and can be turned off in WebForms by setting the ValidateRequest to false.

In ASP.NET MVC, we instead insert a ValidateInput attribute on the controller or action method and set the parameter to false. What´s new in ASP.NET MVC 3 Beta and WebMatrix Beta 2 is that we now can define specific fields you may post HTML, while all others are protected. This provides increased security when we usually do not want to allow HTML in all fields.

NuPack

A very exciting new feature, and which are included in both ASP.NET MVC 3 Beta and WebMatrix Beta 2 is NuPack. It is a new package manager which makes it possible to download and install modules with just a few clicks. This means that we can get the Ninject, jQuery, ELMAH, and more without having to go to each page and download them manually.

With ASP.NET MVC 3 Beta, we can either use a dialog window in Visual Studio to add packages, or we can use a new command window. With WebMatrix we visit a specific page instead to get access to the modules.

More information

I will mention all the new features in separate blog posts for more in-depth information, but you can already download both ASP.NET MVC 3 and WebMatrix here:

http://www.microsoft.com/web/gallery/install.aspx?appid=MVC3

New Internet Explorer 9 APIs

Mon, 20 Sep 2010 20:09:17 GMT

Internet Explorer 9 Beta 1 introduces some new APIs to make it possible to integrate with the jump lists and icons on the taskbar. To make it easier to use them, I created an even simpler API.

To test the API you can browse (with Internet Explorer 9) to this page:
http://bit.ly/dhQpEB

You will then see this:

The API allows you to see whether the browser supports the API or not. So far, the only browser that supports them is Internet Explorer 9. If more browsers add support for it, it will be easy to integrate it as well.

The first thing we need to do before using the functions is to pin the site at the taskbar. To do it, just drag the tab or favicon to the taskbar and release it there. You will then get an icon with custom options on the jump list:

To have custom items as default, I added these meta tags:

<meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com/vimpyboy;icon-uri=/ie9/content/twitter.ico">

<meta name="msapplication-task" content="name=Blog;action-uri=http://weblogs.asp.net/mikaelsoderstrom;icon-uri=/ie9/content/blog.ico">

It´s really simple to do and we will also get customized buttons for back and forward automatically based on the favicon:

So what can we do with the API? I have added support for most of the new features in Internet Explorer 9.

Pin to Start Menu

You can ask the user to add a shortcut to the Start Menu in Windows using:

windowsIntegration.pinToStartMenu();

This will display:

Add Jump list category with items

If you want a more dynamic jump list with your own items, you can use something like:

var items = [{

     'name': 'MSDN',

     'url': 'http://www.msdn.com',

     'icon': 'Content/twitter.ico'

}, {

     'name': 'Internet Explorer 9',

     'url': 'http://msdn.com/ie',

     'icon': 'Content/blog.ico'

}];

windowsIntegration.addJumpListCategory('Links', items);

This will add a new category, “Links”, with the custom items specified:

To remove the custom category with its items, you can use:

windowsIntegration.clearJumpList();

Flash button

If you want to alert the user, you can make the button flash, if it´s in the background. To do it, use:

windowsIntegration.flash();

Add overlay image

Another way to alert the user is to use an overlay image. This function adds an overlay:

windowsIntegration.addOverlay('Content/Refresh.ico', 'Text!');

And this removes it:

windowsIntegration.clearOverlay();

The button looks like this when we add an overlay:

Use it on your own site

If you want to use this on your own site, please download the JavaScript file that makes this easier. You can find the files for this demo here:

http://bit.ly/ar0hLh

And if you want to try it out, look here:

http://bit.ly/dhQpEB

Get started with HTML5 – Canvas

Thu, 16 Sep 2010 19:06:58 GMT

Playing games on the internet using Silverlight or Flash is getting really popular, which you can see if you are using Facebook (Farmville, anyone?). To play these games you need to install a plugin to your browser, or you won’t be able to play them. On some devices you can´t install plugins like these, which make it impossible to play them. Instead you will have to create separate applications for each device, but then you will have to maintain several versions of your application.

To get it to work in a smooth way on computers, phones and other devices you can use Canvas. Canvas is part of the HTML5 specification, and makes it possible to draw objects on the screen using JavaScript APIs.

In my examples I use Internet Explorer 9 which supports hardware acceleration for Canvas, but you should be able to use the same code on all modern browsers.

Create a canvas object

To be able to use Canvas on the page, we will need to use the new Canvas element in HTML5.

I have created a template which I will use:

<!DOCTYPE HTML>

<html>

<head>

    <title>Canvas</title>

    <script>

    </script>

    <style>

        body

            background-color: #000;

            text-align: center;

div

            margin: 0px auto;

            width: 400px;

        canvas

            background-color: #fff;

    </style>

</head>

<body>

    <div>

        <canvas id="canvas" width="300" height="300">

            Your browser does not support Canvas.

        </canvas>

    </div>

</body>

</html>

I use the new HTML5 doctype to tell the browser that I´m using HTML5 here. I also add a Canvas element which is 300x300 pixels. If we open the site in a browser without Canvas support, the text will be displayed, and if we open it in Internet Explorer 9, we will get this:

The white area is our canvas where we will start drawing objects. First of all, I would like to set the background to a linear gradient which shows red and white.

To do this, I add the following code between the script elements:

function init() {

    var c = document.getElementById('canvas');

    var ctx = c.getContext('2d');

    var grad = ctx.createLinearGradient(0, 0, 300, 300);

    grad.addColorStop(0, '#FFFFFF');

    grad.addColorStop(0.5, '#FF0000');

    grad.addColorStop(1, '#FFFFFF');

    ctx.fillStyle = grad;

    ctx.fillRect(0, 0, 300, 300);

If we take a look at the page again, we will see this:

When you want to draw on a canvas you will first have to get the canvas object. I use document.getElementById here, but you could use jQuery selectors as well to get the element. The next step is to create a 2d context, which is the only available context in HTML5. The object we get here is what we will use to draw on the canvas.

Now when we have the canvas element and have got the 2d context, we can start drawing on it. What we want is a gradient that starts on the upper left (0,0) and stops at the lower right (300,300) in the current LinearGradient object.

Then we set the colors we want. It should start with white, be red in the middle, and then stop as white again. Notice that 0 is the start and 1 is the end, which makes 0.5 the middle.

At last we will fill the canvas element with the gradient we just created. To do this, we sett fillStyle to “grad” which is our object, and then call fillRect() where we set the start and stop for the drawing.

Now we will get a gradient background!

Draw patterns

With only a background we will probably don´t get far, what we need to do is to add other objects on the canvas.

The next step here is to draw a transparent square with shadows on top of the background.

What we will add after the previous code is:

ctx.shadowOffsetX = 3;

ctx.shadowOffsetY = 3;

ctx.shadowBlur = 5;

ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';

ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';

ctx.fillRect(50, 50, 200, 200);

We are still using the same object as before, but continue to draw on the canvas after we have set the background.

First we will have to set the shadow on the object we want to draw. I have set offset to 3 for both X and Y, which gives us a 3px shadow. I have also set shadowBlur to 5, which settles how blurred the shadow should be (a higher number makes it blurrier). I also set the color on the shadow to black, but the opacity to 0.7 to make it more transparent.

When we have set the properties for the shadow we will set the color for the object to draw. We will use RGBA here too since we wants the square to be transparent. I set the color to blue and opacity to 0.3.

The last thing to do is to draw the object on the canvas. It should be positioned 50px from the top and the left, and should be 200x200px.

If we look at the site again we will see this:

With a little help from our beloved friend JavaScript, we have done what we earlier should have had to use a real image for. Since it´s JavaScript we can make this process much more dynamic.

Animate the square

To make it do something, we can animate the canvas. Since there is not state for the objects in the canvas, we will have to keep track of that ourselves. What we will do here is a very simple animation where the square will move between two different positions every 500 millisecond.

To make it easier to animate the canvas, I will move the code for drawing the object to a separate function. I will call this function when the page is first loaded, and then every 500 millisecond. The code needed to do this is:

var position = 75;

function init3() {

    drawImage();

    setInterval(function () { drawImage(); }, 500);

function drawImage() {

    var c = document.getElementById('canvas');

    var ctx = c.getContext('2d');

    var grad = ctx.createLinearGradient(0, 0, 300, 300);

    grad.addColorStop(0, '#FFFFFF');

    grad.addColorStop(0.5, '#FF0000');

    grad.addColorStop(1, '#FFFFFF');

    ctx.fillStyle = grad;

    ctx.fillRect(0, 0, 300, 300);

    ctx.shadowOffsetX = 3;

    ctx.shadowOffsetY = 3;

    ctx.shadowBlur = 5;

    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';

    ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';

    ctx.fillRect(position, position, 200, 200);

    position = (position == 25) ? 75 : 25;

We are using pure JavaScript to draw an animated object on the screen using only web standards. This is probably not the most advanced example you will ever see, but there are far more advanced games out there. A good source for Canvas based games is http://www.canvasdemos.com where you can find a lot of games and programs that won´t need a third party plugin.

Since Internet Explorer 9 have hardware acceleration for Canvas, it is going to be possible to write really advanced games and applications which will use the graphic card to render your canvas, and all this is possible using only HTML5 and JavaScript!

Introduction to HTML5

Thu, 16 Sep 2010 18:56:22 GMT

HTML5 is the next version of the HTML standard and is developed by W3C and WHATWG. After HTML 4.01 was released W3C started to work with XHTML 1.0, which have the same elements as HTML 4.01 but gives us a XML compatible syntax. They continued with XHTML 2.0, which should have many new elements, and wouldn´t be compatible with XHTML 1.x at all. Meanwhile a new group called WHATWG (Web Hypertext Technology Working Group) started to work on a new separate standard called Web Applications 1.0, which should be a natural next step of HTML 4.01.

Since XHTML 2.0 received a lot of critics because of the complexity and lack of compatibility with XHTML 1.x, W3C decided to stop working on that and instead cooperate with WHATWG on Web Applictions 1.0, which became HTML 5.

Same same, but different

Many advocates of XHTML thinks that HTML will again make the web more incompatible because of the possibility to write sloppy HTML since you don´t need to have apostrophes around attribute values, and other things that is required according to the SGML standard. Because of this, you will be able to write HTML5 in two different ways, with HTML syntax and with XML syntax. The latter requires you to send the document with the correct MIME type (application/xhtml+xml), which isn´t supported by Internet Explorer 8 and earlier versions (Internet Explorer 9 supports this). If you use the HTML syntax, the pages should be delivered as text/html like earlier.

Why HTML5?

HTML 4 has been used by developers since the 90’s, and it became a standard in 1999. If we want to have more advanced content, we can use Silverlight, Flash and other plugins to do what we want. So why should we care about HTML5?

We need HTML5 since it´s a modern standard which correlates to how we created modern web sites, and makes it possible to view those pages on all platforms. If you are dependent on a plugin, you can´t be sure it will work on your phone for example. By using HTML5 we can use the same web site on all platforms to view videos, play games, listen to music, create advanced web based applications etc. That is why we need HTML5 now.

News in HTML5

There are a lot of new features in HTML5 that makes it possible to write modern standard compliant sites. HTML 4.01 became a standard in 1999 when almost everyone had slow modems. What have happened since then is that we have got much faster connections, which makes it possible to watch videos, plays music and other things on the web.

Some of my favorite new features in HTML5 are:

New HTML elements

The specification contains some new elements such as section, nav, article, aside, hgroup, footer etc. They will make it easier to group the content instead of using div elements with corresponding id´s.

Video & audio

Thanks to the new video and audio elements, we will be able to play video and audio on the web site without using third party plugins. So far, there are no specific formats in the specification, so it´s up to the browser vendors to choose what to support.

Canvas

With canvas, it´s possible to draw objects on the browser without the need of images (you can use images in canvas though). Thanks to the hardware acceleration in Internet Explorer 9, we can create games and applications using canvas. If you want to use audio in your game you could use the audio element.

Inline SVG

SVG have been a standard for a while, but with HTML5 we will be able to use inline SVG in our documents instead of using separate SVG files. Like canvas, we can draw images in the browser, but the difference is that canvas uses JavaScript, and SVG is XML based and used to draw vector images.

New input types in forms

When we create forms on web sites today, we often use JavaScript with strange regular expressions to validate the input. If you require a date you might add a calendar using JavaScript. In HTML 5 there will be new types of input elements like date, datetime, email, phonenumber etc, which makes it possible for the browser to validate the input. In that way you won´t need to care about it (except for the validation on the server side of course).

New JavaScript APIs

Except for the HTML of HTML5, there are some related specifications that are often included. These are not part of the HTML5 standard per se, but separate specifications. These are Selectors, Web Storage, Web Sockets, Web Workers, Geolocation, Offline Web Applications and many others. Even Internet Explorer 8 had support for both Selectors and Web Storage, which means many users can take advantage of these right away.

The future of HTML5

Since HTML5 is still under development, many developers wants to know when it will become a standard, so… When? The specification is estimated to be a recommendation in 2022. Yepp, 2022. It may sound scary, but don´t forget that not even CSS 2.1 is a recommendation yet. The Candidate Recommendation (feature complete, and only really important changes will be made) of HTML5 is supposed to be released in 2012. If a Candidate Recommendation is going to be a Recommendation, at least two full implementations are needed.

Get started today

To prepare for HTML5 you can download Internet Explorer 9 Beta 1, which has support for many new HTML5 features, such as video, audio, inline SVG and Canvas. It also supports many new features in the coming CSS 3 specification.

Internet Explorer 9 Beta 1 can be downloaded here:
http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

Kom igång med HTML5 – Canvas

Wed, 15 Sep 2010 19:38:53 GMT

Att spela spel på internet genom Silverlight- eller Flash-baserade gränssnitt blir alltmer populärt, vilket man kan se om man är flitig användare av Facebook. Dessa spel kräver att man har rätt komponent installerad för att kunna köra dem över huvud taget. På vissa enheter som till exempel mobiltelefoner händer det ofta att man inte kan installera dessa plugins, och då måste man lösa det på ett annat sätt. Det skulle t.ex. kunna lösas genom att man skriver ett separat program som påminner om det man visade på sidan, men även det kan ge problem då man har flera olika applikationer att underhålla.

För att smidigt få det att fungera på både datorer, mobiltelefoner och andra enheter så skulle man kunna använda Canvas. Canvas är en del av HTML5 och gör det möjligt att rita ut objekt direkt på skärmen med hjälp av nya JavaScript-API:er.

I exemplen så använder jag Internet Explorer 9 som använder hårdvaruaccelerering för att rendera objekten, men alla webbläsare med stöd för Canvas bör klara av detta.

Skapa ett Canvas-objekt

För att få in Canvas på hemsidan så måste vi använda oss utav det nya Canvas-elementet i HTML5.

Jag har en grundsida som ser ut så här:

<!DOCTYPE HTML>

<html>

<head>

    <title>Canvas</title>

    <script>

    </script>

    <style>

        body

            background-color: #000;

            text-align: center;

div

            margin: 0px auto;

            width: 400px;

        canvas

            background-color: #fff;

    </style>

</head>

<body>

    <div>

        <canvas id="canvas" width="300" height="300">

            Din webbläsare har inte stöd för canvas.

        </canvas>

    </div>

</body>

</html>

Här använder jag den nya doctypen för HTML5 för att visa för webbläsaren att det är det jag vill använda. Sedan har jag lagt in ett Canvas-element som är 300x300 pixlar stort. Om vi öppnar upp det i en webbläsare utan stöd för Canvas så får vi upp texten innanför start- och sluttaggarna.

Om vi öppnar upp det här nu så får vi:

Den vita ytan är vår canvas där vi kan börja rita med hjälp av JavaScript. Till att börja med så vill jag få dit en bakgrund som ska skifta mellan vitt och rött.

Jag lägger nu till det här mellan script-elementen:

function init() {

    var c = document.getElementById('canvas');

    var ctx = c.getContext('2d');

    var grad = ctx.createLinearGradient(0, 0, 300, 300);

    grad.addColorStop(0, '#FFFFFF');

    grad.addColorStop(0.5, '#FF0000');

    grad.addColorStop(1, '#FFFFFF');

    ctx.fillStyle = grad;

    ctx.fillRect(0, 0, 300, 300);

Ser vi på sidan nu så ser vi att vi har fått det här:

När man ska rita på en canvas-yta så måste man först få tag i canvas-elementet. Här använder jag document.getElementById, men det går lika bra att använda jQuery för att få rätt element. Nästa steg är att skapa upp en 2d-context, vilket är den enda som finns i HTML5. Det objektet vi får där är det vi ska använda för att rita ut de olika delarna på canvasen.

Nu när vi har ett canvas-element och fått tag i dess 2d-context så kan vi börja rita på den. Det vi vill ha är en gradient som börjar skifta färg längst upp till vänster (0,0) och slutar längst ned till höger (300, 300) i det aktuella LinearGradient-objektet.

Vi sätter sedan färgerna vi vill ha. I början ska det vara vitt, i mitten ska det ha blivit rött, och mot slutet ska det ha gått tillbaka till vitt. Värt att notera är att 0 är början och 1 är slutet.

Till sist så vill vi fylla vårt canvas-element med den gradient vi just skapade. För att göra det så sätter vi fillStyle till ”grad” som är vårt objekt, och anropar sedan fillRect() där vi sätter att vi ska börja rita längst upp till vänster och sluta längst ned till höger.

Det som händer nu är att vi får en bakgrund med skiftande färg direkt på sidan.

Rita ut mönster

Med bara en bakgrundsbild kommer vi dock inte långt, utan på denna kanske vi vill lägga till objekt. Det vi ska göra härnäst är att rita ut en genomskinlig kvadrat med skugga bakom mitt på ytan, och det gör vi på nästan samma sätt som vi ritade ut bakgrunden.

Det vi behöver lägga till efter den tidigare koden är det här:

ctx.shadowOffsetX = 3;

ctx.shadowOffsetY = 3;

ctx.shadowBlur = 5;

ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';

ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';

ctx.fillRect(50, 50, 200, 200);

Vi använder fortfarande det objektet vi hämtade tidigare, men fortsätter att rita vidare på canvasen efter att ha ritat ut bakgrunden.

Först och främst så vill vi sätta skugga på det objektet vi vill rita ut. Jag har satt Offset till 3 på både X och Y vilket ger en 3 px stor skugga. Jag har sedan satt shadowBlur till 5, vilket avgör hur suddigt det ska vara (ju högre siffra desto suddigare skugga). Jag sätter därefter färgen på skuggan till svart, men opacity till 0,7 för att få skuggan lite svagare.

När vi har satt egenskaper för skuggan så ska vi sätta färgen på själva objektet som ska ritas ut. Här använder vi återigen RGBA för att kunna sätta opacitet. Jag väljer att sätta färgen till blå, men med 0.3 i opacitet.

Det sista vi gör är att rita ut objektet på canvasen. Det skall hamna 50px från toppen och vänster, samt vara 200x200px stort.

Kikar vi på sidan nu så kan vi se att vi har fått det här:

Med lite JavaScript har vi nu gjort vad som tidigare krävde att vi lade in en bild. Då det är JavaScript så kan vi dessutom göra det här väldigt dynamiskt.

Animera rutan

För att få lite liv i canvasen så kan vi animera innehållet. Då det inte finns någon state för det som ritas ut så får vi hålla reda på det själv. Det vi ska göra här är en väldigt enkel animering där rutan ska flyttas fram och tillbaka mellan två olika positioner med 500 millisekunders mellanrum.

För att göra det enklare att animera så flyttar jag ut koden för att rita ut objektet till en separat funktion. Jag anropar sedan den funktionen när sidan laddas för att få en bild direkt, och anropar den sedan igen var 500:e millisekund. Koden för det blir det här:

var position = 75;

function init3() {

    drawImage();

    setInterval(function () { drawImage(); }, 500);

function drawImage() {

    var c = document.getElementById('canvas');

    var ctx = c.getContext('2d');

    var grad = ctx.createLinearGradient(0, 0, 300, 300);

    grad.addColorStop(0, '#FFFFFF');

    grad.addColorStop(0.5, '#FF0000');

    grad.addColorStop(1, '#FFFFFF');

    ctx.fillStyle = grad;

    ctx.fillRect(0, 0, 300, 300);

    ctx.shadowOffsetX = 3;

    ctx.shadowOffsetY = 3;

    ctx.shadowBlur = 5;

    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';

    ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';

    ctx.fillRect(position, position, 200, 200);

    position = (position == 25) ? 75 : 25;

Det är helt vanlig JavaScript som nu ritar ut ett animerat objekt direkt på skärmen. Det här exemplet är inte särskilt avancerat, men det finns redan nu spel skrivna med Canvas. En bra källa för Canvas-spel är http://www.canvasdemos.com där man kan hitta en mängd spel och program som inte kräver att man har något plugin installerat.

Då Internet Explorer 9 kommer med hårdvaruaccelerering för Canvas så kommer det bli möjligt att skapa väldigt avancerade spel och program som renderas med hjälp av grafikkortet, och det genom att använda HTML5 och JavaScript!

Introduktion till HTML5

Wed, 15 Sep 2010 19:32:08 GMT

HTML5 är nästa version av HTML-standarden och tas fram av W3C tillsammans med WHATWG. Efter att HTML 4.01 släpptes så började W3C arbetet med XHTML 1.0, vilket har exakt samma element som HTML 4.01, men ger en syntax mer lik XML. De fortsatte sedan med XHTML 2.0, vilket skulle ha helt nya element, och då inte alls bakåtkompatibelt med XHTML 1.0. Under tiden började en ny grupp kallad WHATWG (Web Hypertext Technology Working Group) med en separat standard kallad Web Applications 1.0, vilket skulle bli en fortsättning på HTML 4.01.

Då XHTML 2.0 fick mycket kritik på grund av komplexiteten och då det inte var bakåtkompatibelt med tidigare versioner av HTML och XHTML beslutade W3C att lägga ned arbetet med det och istället satsa på HTML5 tillsammans med WHATWG.

Same same, but different

Många förespråkare för XHTML menar att HTML ger svagare krav på utvecklaren då man inte längre behöver stänga element, ha apostrofer runt attributens värden och annat som krävs i SGML. Det här har dock lett till att det kommer att bli möjligt att skriva HTML5 på två olika sätt – med HTML-syntax och med XML-syntax. Det senare kräver dock att hela sidan skickas med rätt MIME type (application/xhtml+xml) , vilket Internet Explorer 8 och tidigare inte klarar av (Internet Explorer 9 har dock stöd för det). Vill man använda HTML-syntaxen så levereras sidorna som tidigare med text/html.

Varför HTML5?

En fråga som många ställer sig är varför vi skulle behöva HTML5 när vi idag med HTML 4.01/XHTML 1.1, JavaScript, Silverlight, Flash och annat redan kan göra allt vi behöver. Svaret på det är att genom att erbjuda en standard gör det möjligt att skapa moderna webbsajter så som de flesta fungerar idag, och samtidigt kunna visa den i alla webbläsare på alla plattformar. Krävs det ett plugin för att se till exempel filmer så låser man lätt ute användare på andra plattformar än den man har skapat sidan för. Genom att använda HTML5 så räcker det med att använda en webbläsare med stöd för det för att man ska kunna erbjuda samma upplevelse för även dessa personer.

Nyheter i HTML5

Det finns en mängd nyheter i HTML5 som leder oss in i nutiden. HTML 4.01 blev en standard 1999 när i stort sett alla fortfarande satt med slöa modem. Vad som har hänt de senaste 11 åren är att vi har fått helt klart snabbare uppkopplingar, vilket ger möjligheten att visa filmer, spela musik och annat direkt på hemsidorna.

Några av de största nyheterna i HTML5 är:

Nya HTML-element

Det tillkommer en del nya element så som section, nav, article, aside, hgroup, header, footer m.m. Dessa används för att enklare gruppera sidan i olika delar där vi idag ofta har div-element med ett id som förklarar vilken del av sidan det gäller.

Video & audio

Med de nya video- samt audio-elementen kan vi spela upp video och ljud direkt på hemsidorna utan att behöva tredjepartsplugins. Det finns än så länge inte någon specifikation för vilka format som skall ingå i standarden, utan som det ser ut nu så är det till stor del upp till webbläsartillverkaren.

Canvas

Med Canvas kan vi rita ut objekt direkt i webbläsaren utan att behöva använda bilder (det går dock att använda bilder i canvas). Tack vare hårdvaruaccelereringen som finns i till exempel Internet Explorer 9 så kan vi skapa spel och annat som tidigare krävde Silverlight eller Flash, genom att med canvas-elementet och JavaScript rita ut alla objekt. Vill man få in ljudeffekter kan man med fördel använda det nya audio-elementet.

Inline SVG

SVG är sedan tidigare en W3C-standard, men med HTML5 slipper vi ha separata SVG-filer, och kan nu istället använda SVG direkt i våra HTML-dokument. SVG kan precis som canvas användas för att rita ut objekt på skärmen, men med skillnaden att SVG är XML-baserat och renderar vektorgrafik, medan canvas används med JavaScript för att rita ut objekten.

Nya input-typer i formulär

När man skapar formulär på hemsidor idag så används ofta JavaScript på klienten för att validera det som skrivs in. Vi kanske har telefonnummer, e-postadresser och annat i vanliga text-fält, vilka sedan måste valideras manuellt. Som en del av HTML5 kommer det dock stöd för nya typer av input-fält, vilket gör att vi får valideringen inbyggd i webbläsaren.

Nya JavaScript-API:er

Förutom just det HTML5-specifika så brukar man räkna med en del olika JavaScript-API:er i standarden. Dessa är bland annat Selectors, Web Storage, Web Sockets, Web Workers, Geolocation, Offline Web Applications med flera. Redan Internet Explorer 8 hade stöd för bade Selectors och Web Storage, vilket betyder att väldigt många kan använda det redan idag.

Framtiden för HTML5

Så när beräknas HTML5 bli en färdig standard? Det talas ofta om att år 2022 är då det blir en rekommendation hos W3C. Det låter som en ganska skrämmande siffra, men med tanke på att det kräver två fulla implementationer av standarden så är det inte så konstigt trots allt. Som jämförelse kan man ta CSS 2.1 som trots att det är vad man använder idag, fortfarande inte är en standard utan bara en ”Candidate Recommendation” vilket betyder att standarden är så gott som klar, men att det eventuellt kan ske någon ändring som upptäcks när standarden skall implementeras i flera webbläsare. Man räknar med att HTML5 skall nå det stadiet år 2012, så om två år från att det här skrivs så bör alla funktioner och element vara färdiga och redo att implementeras och användas.

Kom igång redan idag

För att förbereda sig på vad som komma skall så kan man redan idag ladda ned Internet Explorer 9 Beta 1, vilket har stöd för många av de kommande funktionerna i HTML5, som till exempel video, audio, inline SVG och Canvas, men även stöd för en annan kommande standard – CSS 3.

Internet Explorer 9 Beta 1 kan laddas ned här:
http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

Use HTML5 forms in ASP.NET MVC

Wed, 18 Aug 2010 13:06:55 GMT

With the release of ASP.NET MVC 2 we got support for DisplayTemplates and EditorTemplates, which make it possible to create custom forms for the edit views. With this feature, we can easily take advantage of the new input fields in HTML5 such as date, color, email etc.

The first thing we need to do is to create a new ASP.NET MVC project and add a controller. After that we have to create a new folder, ~\Views\Shared\EditorTemplates. We will have out EditorTemplates here.

The controller will be very basic in this test:

using System.Web.Mvc;

namespace Html5Templates.Controllers

    public class Html5Controller : Controller

        public ActionResult Create()

            return View();

We will also add a very simple view:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage<Html5Templates.Models.Templates>" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <% using (Html.BeginForm()) {%>

        <%: Html.ValidationSummary(true) %>

        <fieldset>

            <legend>Fields</legend>

            <%: Html.EditorFor(_ => Model) %>

<p>

                <input type="submit" value="Create" />

            </p>

        </fieldset>

    <% } %>

</asp:Content>

As you can see in the Page directive, the model is of the type “Templates”, which we will have to create. In our model, we will take advantage of some attributes in the DataAnnotations namespace, DataType and UIHint. We will now create a property for every new type in HTML5 forms:

using System.ComponentModel.DataAnnotations;

using System;

namespace Html5Templates.Models

    public class Templates

        [UIHint("Color")]

        public string Color { get; set; }

        [DataType(DataType.Date)]

        public DateTime Date { get; set; }

        [DataType(DataType.DateTime)]

        public DateTime DateTime { get; set; }

        [UIHint("DateTimeLocal")]

        public DateTime DateTimeLocal { get; set; }

        [DataType(DataType.EmailAddress)]

        public string Email { get; set; }

        [UIHint("Month")]

        public string Month { get; set; }

        [UIHint("Number")]

        public string Number { get; set; }

        [UIHint("Range")]

        public int Range { get; set; }

        [DataType(DataType.PhoneNumber)]

        public string PhoneNumber { get; set; }

        [DataType(DataType.Time)]

        public DateTime Time { get; set; }

        [DataType(DataType.Url)]

        public string Url { get; set; }

        [UIHint("Week")]

        public string Week { get; set; }

When use DataType when possible, and UIHint when we can´t. To be able to use this, we will have to create a new EditorTemplate for each input type. For example, we will have a DateTime.ascx file with this content:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.String>" %>

<%: Html.TextBoxFor(_ => Model, new { type = "datetime" }) %>

You can find a link to a sample project at the end of the post.

If we run the page in Opera, you will see this:

Looks great! But what about Internet Explorer 8? If we open the same page in IE 8, we will get this:

As you can see, the browser will still render normal textboxes if HTML5 forms isn´t supported, so it won´t break your page.

Thanks to the awesome open source library “jQuery Tools” with its Forms functionality, we can add actually get HTML5 forms support for older browsers such as Internet Explorer 8.

To load the library including jQuery, add this to your site:

<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>

<script>

    $(document).ready(function () {

        $(":date").dateinput();

});

</script>

This will add support for the date field, and you can also add support for Range and add validation using this tool. To know more about it and to download it, take a look at this site:

http://flowplayer.org/tools/release-notes/index.html#form

The source code for the project can be downloaded here:

http://bit.ly/bIflxw

Mikael Söderström

Creating a temperature web server using ESP8266

Getting started

Connecting everything

Writing the software

Next step

Blinking LEDs on Windows 10 IoT Core

Use ASP.NET to control the GPIO pins on Raspberry Pi

Control the LEDs using ASP.NET

Writing end-to-end tests with Nightmare.js

Sweet dreams with Nightmare.js

Get the necessary tools

Start the tests

HTML5 Hidden Attribute

How to use nested custom elements with CSS Shaders

Create a video player using custom elements

Thanks to a new specification from W3C called ”Custom Elements” we will be able to create our own elements such as <x-stock symbol=”MSFT” /> and use that element as any other element in our browsers, which includes custom styling, custom events, custom APIs etc.

Get the latest Polymer

Creating the <x-simplevideo /> element

Make it customizable with attributes

Add custom menu controls

CustomEvent in DOM Level 3 and DOM Level 4

The new element in HTML 5.1

Get under the hood with Shadow DOM

So…

Creating a Shadow Host using JavaScript

Light up the Shadow DOM

Create a separate HTML file for the component

Conclusion

Declarative helpers in Razor

Unobtrusive validation in ASP.NET MVC 3

Introducing NuPack

NuPack in Visual Studio 2010

ASP.NET Web Pages

Summary

What's new in ASP.NET MVC 3 Beta & WebMatrix Beta 2

New project dialog

Updated version of Razor

Helpers from ASP.NET Web Pages

New interfaces for Dependency Injection

Unobtrusive jQuery Validation

Updated ValidateInputAttribute

NuPack

More information

New Internet Explorer 9 APIs

Pin to Start Menu

Add Jump list category with items

Flash button

Add overlay image

Use it on your own site

Get started with HTML5 – Canvas

Create a canvas object

Draw patterns

Animate the square

Introduction to HTML5

Same same, but different

Why HTML5?

News in HTML5

New HTML elements

Video & audio

Canvas

Inline SVG

New input types in forms

New JavaScript APIs

The future of HTML5

Get started today

Kom igång med HTML5 – Canvas

Skapa ett Canvas-objekt

Rita ut mönster

Animera rutan

Introduktion till HTML5

Same same, but different

Varför HTML5?

Nyheter i HTML5

Nya HTML-element

Video & audio

Canvas

Inline SVG

Nya input-typer i formulär

Nya JavaScript-API:er

The new
element in HTML 5.1