Ambilight Sample; video and canvas

ambilight

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:

JAVASCRIPT:
  1.  
  2. function getMidColors(side) {
  3.         var w = buffer.width,
  4.                 h = buffer.height,
  5.                 lamps = getOption('lamps'),
  6.                 block_width = getOption('block_size'),
  7.                 block_height = Math.ceil(h / lamps),
  8.                 pxl = block_width * block_height * 4,
  9.                 result = [],
  10.  
  11.                 img_data = buffer_ctx.getImageData(side == 'right' ? w - block_width : 0, 0, block_width, h),
  12.                 total_pixels = img_data.data.length;
  13.  
  14.  
  15.         for (var i = 0; i <lamps; i++) {
  16.                 var from = i * w * block_width;
  17.                 result.push( calcMidColor(img_data.data, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) );
  18.         }
  19.  
  20.         return result;
  21. }
  22.  

Then, two canvas objects are placed, one on each side, of the video itself.

ASP.NET MVC 2 Released

I’m happy to announce that the final release of ASP.NET MVC 2 is now available for VS 2008/Visual Web Developer 2008 Express with ASP.NET 3.5.  You can download and install it from the following locations:

The final release of VS 2010 and Visual Web Developer 2010 will have ASP.NET MVC 2 built-in – so you won’t need an additional install in order to use ASP.NET MVC 2 with them. 

ASP.NET MVC 2

We shipped ASP.NET MVC 1 a little less than a year ago.  Since then, almost 1 million developers have downloaded and used the final release, and its popularity has steadily grown month over month.

ASP.NET MVC 2 is the next significant update of ASP.NET MVC. It is a compatible update to ASP.NET MVC 1 – so all the knowledge, skills, code, and extensions you already have with ASP.NET MVC continue to work and apply going forward. Like the first release, we are also shipping the source code for ASP.NET MVC 2 under an OSI-compliant open-source license.

ASP.NET MVC 2 can be installed side-by-side with ASP.NET MVC 1 (meaning you can have some apps built with V1 and others built with V2 on the same machine).  We have instructions on how to update your existing ASP.NET MVC 1 apps to use ASP.NET MVC 2 using VS 2008 here.  Note that VS 2010 has an automated upgrade wizard that can automatically migrate your existing ASP.NET MVC 1 applications to ASP.NET MVC 2 for you.

ASP.NET MVC 2 Features

ASP.NET MVC 2 adds a bunch of new capabilities and features.  I’ve started a blog series about some of the new features, and will be covering them in more depth in the weeks ahead.  Some of the new features and capabilities include:

You can learn more about these features in the “What’s New in ASP.NET MVC 2” document on the www.asp.net/mvc web-site. 

We are going to be posting a lot of new tutorials and videos shortly on www.asp.net/mvc that cover all the features in ASP.NET MVC 2 release.  We will also post an updated end-to-end tutorial built entirely with ASP.NET MVC 2 (much like the NerdDinner tutorial that I wrote that covers ASP.NET MVC 1). 

Summary

The ASP.NET MVC team delivered regular V2 preview releases over the last year to get feedback on the feature set.  I’d like to say a big thank you to everyone who tried out the previews and sent us suggestions/feedback/bug reports. 

We hope you like the final release!

Scott

YQL Geo library – all your geo needs in pure JavaScript

I just finished doing some talks on geo hacking (slides are available here) and how to use some of the Geo technologies Yahoo and Google provide as part of a University gig in Atlanta.

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

  • Detecting the visitor's location with the W3C geo API and with IP as a fallback
  • Find geo location from text
  • Find location from lat/lon pair
  • Find locations in a certain web document (by URL)
  • Get the location for a certain IP number

And all of that in pure JavaScript. For example:

JAVASCRIPT:
  1. yqlgeo.get(
  2.   'paris,fr',
  3.    function(o){
  4.      console.log(o);
  5.   }
  6. )

Will get you:

JAVASCRIPT:
  1. "place":{
  2.   "lang":"en-US",
  3.   "uri":"http://where.yahooapis.com/v1/place/615702",
  4.   "woeid":"615702",
  5.   "placeTypeName":{
  6.     "code":"7",
  7.     "content":"Town"
  8.   },
  9.   "name":"Paris",
  10.   "country":{
  11.     "code":"FR",
  12.     "type":"Country",
  13.     "content":"France"
  14.   },
  15.   "admin1":{
  16.     "code":"",
  17.     "type":"Region",
  18.     "content":"Ile-de-France"
  19.   },
  20.   "admin2":{
  21.     "code":"FR-75",
  22.     "type":"Department",
  23.     "content":"Paris"
  24.   },
  25.   "admin3":null,
  26.   "locality1":{
  27.     "type":"Town",
  28.     "content":"Paris"
  29.   },
  30.   "locality2":null,
  31.   "postal":null,
  32.   "centroid":{
  33.     "latitude":"48.856918",
  34.     "longitude":"2.341210"
  35.   },
  36.   "boundingBox":{
  37.     "southWest":{
  38.       "latitude":"48.658291",
  39.       "longitude":"2.086790"
  40.     },
  41.     "northEast":{
  42.       "latitude":"49.046940",
  43.       "longitude":"2.637910" 
  44.     }
  45.   }
  46. }

Other uses:

This gets the name and the country of a lat/lon pair:

JAVASCRIPT:
  1. yqlgeo.get(33.748,-84.393,function(o){
  2.   alert(o.place.name + ',' + o.place.country.content);
  3. })

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

JAVASCRIPT:
  1. yqlgeo.get('visitor',function(o){
  2.   alert(o.place.name + ',' + o.place.country.content
  3.         ' (' + o.place.centroid.latitude + ',' +
  4.                o.place.centroid.longitude + ')'
  5.         );
  6. });

Read all about it on my blog and enjoy!

SVG Wow!

Erik Dahlström and Vincent Hardy have put together a cool website, called SVG Wow!, that showcases SVG doing things you didn’t expect SVG can do:

svgwow1

There are alot of unique demos on there.

One of my favorites uses SVG, HTML5 Audio, Web Fonts, and YUI to play music accompanied by flying animated lyrics (Chrome and Safari only):

svgwow2

There are lots of other great samples for you to play with and study!

Ext JS 3.2 beta: stores, components, transitions, and themes

The Ext JS team have announced the 3.2 beta which includes new components and goodness.

Take the animated DataView transitions for example:

On top of that, the release includes:

CSS3 Please! Instant results… Thank You

css3please

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

  • border-radius
  • box shadow
  • gradients
  • rgba support in backgrounds
  • transforms
  • font-face

Really nice way to make tweaks inline in the page….. nicely done. Hope to see some other examples out there :)

HTML Minification

Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage.

What does it do?

Kangax has forked John Resig’s HTML parser which parses the HTML and sends that into the Minifier. This has rules that do things like whitespace optimization, comment removal, and collapsing boolean attributes (e.g. disabled=”true” -> disabled).

He also has a linter going:

While working on minifier, I realized that oftentimes the most wasteful part of the markup is not white space, comments or boolean attributes, but inline styles, scripts, presentational or deprecated elements and attributes. None of these can be simply stripped, as that could affect state of the document and is just too obtrusive. What can be done, however, is reporting of these occurences to the user. HTMLLint is even a smaller script, whose job is exactly that—to log any deprecated or presentational elements/attributes encountered during parsing. Additionally, it detects event attributes (e.g. onclick, onmouseover, etc.). The rationale for this is that moving contents of event attributes to external script allows to take advantage of resource caching.

Harmony: Canvas Drawing Tool

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

harmony

(Thanks FND)

Spectrum Visualization with the HTML5 Audio Data API

The HTML5 specification introduces the and media elements, and with them the opportunity to dramatically change the way we integrate media on the web. The current HTML5 media API provides ways to play and get limited information about audio and video, but gives no way to programatically access or create such media. We present a new extension to this API, which allows web developers to read and write raw audio data.

The above quote is from the Audio Data API extension that joins a bunch of juicy developer work in Firefox 3.7.

Thomas Sturm has taken that API and <a href="http://www.storiesinflight.com/jsfft/visualizer/index.html
">created a spectrum visualization a kin to some of the great work by Scott Schiller (using Flash).

There is a new onaudiowritten attribute:

HTML:
  1.  
  2. <audio src="song.ogg" controls="true"
  3.            onaudiowritten="audioWritten(event);">
  4. </audio>
  5.  

that lets you get access to info such as the spectrum:

JAVASCRIPT:
  1.  
  2.       function audioWritten(event) {
  3.         spectrum = event.mozSpectrum;
  4.        
  5.         var specSize = spectrum.length, magnitude;
  6.        
  7.         // Clear the canvas before drawing spectrum
  8.         ctx.clearRect(0,0, canvas.width, canvas.height);
  9.        
  10.         for ( var i = 0; i <specSize; i++ ) {
  11.           magnitude = spectrum.item(i) * 4000; // multiply spectrum by a zoom value
  12.          
  13.           // Draw rectangle bars for each frequency bin
  14.           ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
  15.         }
  16.       }
  17.  

Add to that the ability to write audio....

JAVASCRIPT:
  1.  
  2. var audioOutput = new Audio();
  3. audioOutput.mozSetup(2, 44100, 1);
  4.  
  5. var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
  6. audioOutput.mozAudioWrite(samples.length, samples);
  7.  

Nice work all around.

ASMX ScriptService mistakes: Installation and configuration

Continuing my series of posts about ASMX services and JSON, in this post I’m going to cover two common mistakes that plague the process of getting a project’s first ASMX ScriptService working: Installing System.Web.Extensions into the GAC and configuring your web.config.

System.Web.Extensions (aka ASP.NET AJAX)

The ability for ASMX services to return raw JSON is made possible by two key features originally added by the ASP.NET AJAX Extensions v1.0:

  • JavaScriptSerializerThe JavaScriptSerializer class is the actual workhorse that translates back and forth between JSON strings and .NET CLR objects. Though less powerful than WCF’s DataContractJsonSerializer and third-party libraries like Json.NET, JavaScriptSerializer is likely all you’ll ever need for simple AJAX callbacks.
  • ScriptHandlerFactory – There are several more classes behind the scenes*, but the ScriptHandlerFactory is the tip of the iceberg that you’ll need to remember during configuration. Redirecting ASMX requests through this HttpHandler is what coordinates the pairing of ScriptService with JavaScriptSerializer to provide automatic JSON handling.

Though both of these classes appear in the System.Web.Script namespace, they actually reside in ASP.NET AJAX’s System.Web.Extensions assembly. That has different implications depending on which version of ASP.NET your site targets:

  • 1.x – No support for ScriptServices. A custom HttpHandler coupled with a third party library like Json.NET is your best bet (if anyone has a good tutorial on doing this under 1.x, let me know so that I can link to it).
  • 2.0 – ScriptServices are available in ASP.NET 2.0 with the installation of the ASP.NET AJAX Extensions v1.0.
    • That means that the ASP.NET AJAX installer needs to be run on the server that hosts your site, not just on your local development machine.
    • For some of a ScriptService’s features to work in medium trust (i.e. shared hosting), the System.Web.Extensions assembly needs to be in your server’s global assembly cache (GAC). Don’t waste your time trying to make it work in your site’s /bin directory; insist that the extensions be properly installed on the server.
  • 3.5+ – As of .NET 3.5, System.Web.Extensions ships with the framework. No additional assemblies need be installed.

* If you’re interested in the internals, I highly recommend downloading the ASP.NET AJAX Extensions v1.0 source and taking a look at ScriptHandlerFactory, RestHandlerFactory, and RestHandler. Though the classes have changed slightly since v1.0, they are still very similar.

Rerouting the ASMX handler via web.config

With the System.Web.Extensions assembly installed in the GAC, the remaining configuration step is an element in your site’s web.config. To take advantage of the ScriptService functionality, ASP.NET must be instructed to reroute ASMX requests through the ScriptHandlerFactory instead of ASP.NET’s standard ASMX handler.

This step is often unnecessary. The project templates in ASP.NET 3.5+ include all the necessary configuration elements, and ASP.NET 2.0 sites created with the “AJAX Enabled” templates are also pre-configured correctly.

However, if you find yourself unable to coax JSON out of an ASMX ScriptService, verifying your web.config is one of the best first steps in troubleshooting the issue. Whether due to a web.config generated by an older project template, accidental modification, or other issues, missing the httpHandlers web.config setting is a very common pitfall.

What should appear varies slightly depending on which version of ASP.NET your project targets. Regardless of your framework version, the config elements should be added to the <httpHandlers> section and are the only elements necessary. The variety of other config items required for the UpdatePanel and ScriptManager aren’t crucial to the ScriptService functionality.

ASP.NET 2.0 (with the ASP.NET AJAX Extensions installed)

<configuration>
  <system.web>
    <httphandlers>
      <remove path="*.asmx" verb="*" />
      <add path="*.asmx" verb="*" Culture=neutral, validate="false"
           type="System.Web.Script.Services.ScriptHandlerFactory, 
                 System.Web.Extensions, Version=1.0.61025.0,
                 PublicKeyToken=31bf3856ad364e35" />
    </httphandlers>
  </system.web>
</configuration>

ASP.NET 3.5

<configuration>
  <system.web>
    <httphandlers>
      <remove path="*.asmx" verb="*" />
      <add path="*.asmx" verb="*" Culture=neutral, validate="false"
           type="System.Web.Script.Services.ScriptHandlerFactory, 
                 System.Web.Extensions, Version=3.5.0.0,
                 PublicKeyToken=31bf3856ad364e35" />
    </httphandlers>
  </system.web>
</configuration>

ASP.NET 4

Thankfully, ASP.NET 4 has taken steps to reverse the trend of ever-enlarging baseline web.config files. By moving common configuration items such as the ScriptService’s HttpHandler to the default machine.config, each individual site need not include those configuration elements in their specific web.config files.

Unless you go out of your way to manually remove their HttpHandler, ASMX ScriptServices will work automatically in any ASP.NET 4 site.

###

Originally posted at Encosia. If you're reading this elsewhere, come on over and see the original.



ASMX ScriptService mistakes: Installation and configuration