Johannes Kebeck's Blog
09-15-2007, 03:25 PM
<p>Have you ever heard about 'MSR HD View'? You haven't? It is an awesome*tool which has been developed by Microsoft Research to bring gigapixel images to the web. The example below is a completely zoomed out panorama with 3.7 gigapixel...
<p><a href="http://research.microsoft.com/ivm/HDView/HDGigapixel.htm" target="_blank"><img style="border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px" height=171 alt="HD View zoomed out" src="http://blu1.storage.msn.com/y1pgaVuGim1rV30rufPNMrTnV72ZPO1xo4Q0PMKAcJ49gwxjWk gX2DgqvpKGMJn73xbXMACoaQ_x_KBJ5IbBsP-h66e5OnNj5Gs" width=404 border=0></a>
<p>... and you can get that close:
<p><a href="http://research.microsoft.com/ivm/HDView/HDGigapixel.htm" target="_blank"><img style="border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px" height=199 alt="HD View zommed in" src="http://blu1.storage.msn.com/y1pgaVuGim1rV2CN1pD9g8EZ65IEwcctncrZkcdbjYGMTDU9Go RoTF921rnfddp1p4s9DLBypYXLipFnW7-41KVmrvrYZusrBvK" width=404 border=0></a>
<p>Check out the <a href="http://research.microsoft.com/ivm/HDView.htm" target="_blank">MSR HD View homepage</a> to find some examples and to get started.
<p>I was wondering if I could combine this*awesome viewer with Virtual Earth*and it turned out to be lots of fun. You can have a look at a sample implementation <a href="http://mappointemea.members.winisp.net/HDView01/Default.htm" target="_blank">here</a>.
<p><a href="http://mappointemea.members.winisp.net/HDView01/Default.htm" target="_blank"><img style="border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px" height=262 alt="MSR HD View in VE-Infobox" src="http://blu1.storage.msn.com/y1pgaVuGim1rV2FuHQm6aHp8xSXayCJwBxytq5rCbxoVQwtFH1 mV4CCs3AuvO2PE8grRdOu9gEZ-f4khWZryhmezVZzI1ZaYC_e" width=399 border=0></a>
<p>Well I'm not really much of a photographer and my equipment is not really high-end either so bare with me if the quality of the image is not too impressing but*how did I do it?
<ol>
<li>I shot a sequence of 11 pictures of Microsoft's office in London with <a href="http://www.casio.co.uk/Products/Digital Cameras/Exilim Card/EX-S100DDA-R/At a Glance" target="_blank">my digital camera</a>.
<li>Then I*used <a href="http://www.ptgui.com/" target="_blank">PTgui</a> to create a panorama-image of this 11 individual images. The resulting JPG was about 15 MB big so not really what you want to publish on*the web but here comes now MSR HD View.
<li>MSR HD View provides a command line tool which allows you to create tile pyramids and mosaics of such big images. You will find a good explanation on how to use it on the MSR HD View homepage. As a result you will have a folder structure with smaller tiles of about 20-40 KB each and you also get an XML-file which describes the tile-structure so that the HD View browser plug-in can understand it. Once you install the HD View utilities you will also get a sample*HTML-file which implements the HD View control but there is of course a full documentation on the MSR-site.
<li>Obviously you need to find some storage for*the tiles and currently I'm using <a href="http://www.amazon.com/s3" target="_blank">Amazon S3</a> which gives you really good service for your money.
<li>OK, now we have a*HTML-document which implements the*HD View control but how do we combine it with Virtual Earth? Well the first idea that came to my mind was to bring it into the infobox of a VEShape-object. There are only 2 things we have to consider.
<ul>
<li>First it is easy to bring complete HTML-code in the*InfoBox and you can also easily create a link which points to an external JavaScript but you can't run the JavaScript in the*InfoBox itself. On the other side HD View is controlled through JavaScript which appears to be a dilemma in the first place. Well, the workaround is easier than you might think. In the old days of HTML-coding you frequently used iframes and this is exactly what I do here. I use an iframe to insert the complete HTML-document as description in the*InfoBox of the VEShape-object.<pre>shape1.SetDescription(<span style="color:rgb(163,21,21)">'<iframe src="HDView01-MSFT-London.htm" width="100%" height="95%"></iframe>'</span>);</pre>
<li>The second point to consider is that the*InfoBox of a VEShape-object is not in the appropriate size to render the HD View control but that is even easier to overcome. Since version 5 of the VE MapControl you can define your own styles for the InfoBox. In the header of the HTML-document you just include a CSS like this<pre><span style="color:rgb(0,0,255)"><</span><span style="color:rgb(163,21,21)">link</span> <span style="color:rgb(255,0,0)">href</span><span style="color:rgb(0,0,255)">="StyleSheet.css"</span> <span style="color:rgb(255,0,0)">rel</span><span style="color:rgb(0,0,255)">="stylesheet"</span> <span style="color:rgb(255,0,0)">type</span><span style="color:rgb(0,0,255)">="text/css"</span> <span style="color:rgb(0,0,255)">/></span></pre>
<p><span style="color:rgb(0,0,255)"></span>My CSS only changes the size of the InfoBox:<pre><span style="color:rgb(163,21,21)">.customInfoBox-previewArea</span>
{
<span style="color:rgb(255,0,0)">width</span>:<span style="color:rgb(0,0,255)">400px</span>;
<span style="color:rgb(255,0,0)">height</span>:<span style="color:rgb(0,0,255)">400px</span>;
}
</pre><a href="http://11011.net/software/vspaste"></a>
<p>In your JavaScript you need to make sure, that you disable the default styles:<pre>map.ClearInfoBoxStyles();</pre></ul></ol>
<p><font face=ve>And that's it. You can download the full source-code direct from the <a href="http://mappointemea.members.winisp.net/HDView01/Default.htm" target="_blank">sample-page</a>.</font><img src="http://c.services.spaces.live.com/CollectionWebService/c.gif?cid=4819404664324524694&page=RSS%3a+MSR+HD+View+%26+Virtual+Earth&referrer=" width="1px" height="1px" border="0" alt=""><img style="position:absolute" alt="" width="0px" height="0px" src="http://c.live.com/c.gif?NC=31263&NA=1149&PI=88469&RF=&DI=3919&PS=85545&TP=johanneskebeck.spaces.live.com>1=JohannesKebeck">
Click here to view the article. (http://JohannesKebeck.spaces.live.com/Blog/cns!42E1F70205EC8A96!1630.entry)
<p><a href="http://research.microsoft.com/ivm/HDView/HDGigapixel.htm" target="_blank"><img style="border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px" height=171 alt="HD View zoomed out" src="http://blu1.storage.msn.com/y1pgaVuGim1rV30rufPNMrTnV72ZPO1xo4Q0PMKAcJ49gwxjWk gX2DgqvpKGMJn73xbXMACoaQ_x_KBJ5IbBsP-h66e5OnNj5Gs" width=404 border=0></a>
<p>... and you can get that close:
<p><a href="http://research.microsoft.com/ivm/HDView/HDGigapixel.htm" target="_blank"><img style="border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px" height=199 alt="HD View zommed in" src="http://blu1.storage.msn.com/y1pgaVuGim1rV2CN1pD9g8EZ65IEwcctncrZkcdbjYGMTDU9Go RoTF921rnfddp1p4s9DLBypYXLipFnW7-41KVmrvrYZusrBvK" width=404 border=0></a>
<p>Check out the <a href="http://research.microsoft.com/ivm/HDView.htm" target="_blank">MSR HD View homepage</a> to find some examples and to get started.
<p>I was wondering if I could combine this*awesome viewer with Virtual Earth*and it turned out to be lots of fun. You can have a look at a sample implementation <a href="http://mappointemea.members.winisp.net/HDView01/Default.htm" target="_blank">here</a>.
<p><a href="http://mappointemea.members.winisp.net/HDView01/Default.htm" target="_blank"><img style="border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px" height=262 alt="MSR HD View in VE-Infobox" src="http://blu1.storage.msn.com/y1pgaVuGim1rV2FuHQm6aHp8xSXayCJwBxytq5rCbxoVQwtFH1 mV4CCs3AuvO2PE8grRdOu9gEZ-f4khWZryhmezVZzI1ZaYC_e" width=399 border=0></a>
<p>Well I'm not really much of a photographer and my equipment is not really high-end either so bare with me if the quality of the image is not too impressing but*how did I do it?
<ol>
<li>I shot a sequence of 11 pictures of Microsoft's office in London with <a href="http://www.casio.co.uk/Products/Digital Cameras/Exilim Card/EX-S100DDA-R/At a Glance" target="_blank">my digital camera</a>.
<li>Then I*used <a href="http://www.ptgui.com/" target="_blank">PTgui</a> to create a panorama-image of this 11 individual images. The resulting JPG was about 15 MB big so not really what you want to publish on*the web but here comes now MSR HD View.
<li>MSR HD View provides a command line tool which allows you to create tile pyramids and mosaics of such big images. You will find a good explanation on how to use it on the MSR HD View homepage. As a result you will have a folder structure with smaller tiles of about 20-40 KB each and you also get an XML-file which describes the tile-structure so that the HD View browser plug-in can understand it. Once you install the HD View utilities you will also get a sample*HTML-file which implements the HD View control but there is of course a full documentation on the MSR-site.
<li>Obviously you need to find some storage for*the tiles and currently I'm using <a href="http://www.amazon.com/s3" target="_blank">Amazon S3</a> which gives you really good service for your money.
<li>OK, now we have a*HTML-document which implements the*HD View control but how do we combine it with Virtual Earth? Well the first idea that came to my mind was to bring it into the infobox of a VEShape-object. There are only 2 things we have to consider.
<ul>
<li>First it is easy to bring complete HTML-code in the*InfoBox and you can also easily create a link which points to an external JavaScript but you can't run the JavaScript in the*InfoBox itself. On the other side HD View is controlled through JavaScript which appears to be a dilemma in the first place. Well, the workaround is easier than you might think. In the old days of HTML-coding you frequently used iframes and this is exactly what I do here. I use an iframe to insert the complete HTML-document as description in the*InfoBox of the VEShape-object.<pre>shape1.SetDescription(<span style="color:rgb(163,21,21)">'<iframe src="HDView01-MSFT-London.htm" width="100%" height="95%"></iframe>'</span>);</pre>
<li>The second point to consider is that the*InfoBox of a VEShape-object is not in the appropriate size to render the HD View control but that is even easier to overcome. Since version 5 of the VE MapControl you can define your own styles for the InfoBox. In the header of the HTML-document you just include a CSS like this<pre><span style="color:rgb(0,0,255)"><</span><span style="color:rgb(163,21,21)">link</span> <span style="color:rgb(255,0,0)">href</span><span style="color:rgb(0,0,255)">="StyleSheet.css"</span> <span style="color:rgb(255,0,0)">rel</span><span style="color:rgb(0,0,255)">="stylesheet"</span> <span style="color:rgb(255,0,0)">type</span><span style="color:rgb(0,0,255)">="text/css"</span> <span style="color:rgb(0,0,255)">/></span></pre>
<p><span style="color:rgb(0,0,255)"></span>My CSS only changes the size of the InfoBox:<pre><span style="color:rgb(163,21,21)">.customInfoBox-previewArea</span>
{
<span style="color:rgb(255,0,0)">width</span>:<span style="color:rgb(0,0,255)">400px</span>;
<span style="color:rgb(255,0,0)">height</span>:<span style="color:rgb(0,0,255)">400px</span>;
}
</pre><a href="http://11011.net/software/vspaste"></a>
<p>In your JavaScript you need to make sure, that you disable the default styles:<pre>map.ClearInfoBoxStyles();</pre></ul></ol>
<p><font face=ve>And that's it. You can download the full source-code direct from the <a href="http://mappointemea.members.winisp.net/HDView01/Default.htm" target="_blank">sample-page</a>.</font><img src="http://c.services.spaces.live.com/CollectionWebService/c.gif?cid=4819404664324524694&page=RSS%3a+MSR+HD+View+%26+Virtual+Earth&referrer=" width="1px" height="1px" border="0" alt=""><img style="position:absolute" alt="" width="0px" height="0px" src="http://c.live.com/c.gif?NC=31263&NA=1149&PI=88469&RF=&DI=3919&PS=85545&TP=johanneskebeck.spaces.live.com>1=JohannesKebeck">
Click here to view the article. (http://JohannesKebeck.spaces.live.com/Blog/cns!42E1F70205EC8A96!1630.entry)