Photosynth es una herramienta muy interesante que nos ayuda a crear panoramas semi tridimensionales de una manera muy sencilla (solo seleccionas un conjunto de fotos de un mismo lugar y las subes).

El otro día mi amigo Jorge Levy estaba desarrollando una aplicación de Silverlight para una empresa de Tamales. Dicha aplicación cuenta con una página de contacto, donde muestra un control de Bing Maps y una opción para ver la fachada del local. Lo malo de esto es que para ver la fachada, el link te lleva a la página de Photosynth donde puedes ver el synth del local.

Me pareció una buena idea, pero no me gustó el hecho de que no pudieras ver el synth dentro de la aplicación. Me di a la tarea de investigar una forma de hacer esto. Primero pensé, en Silverlight 4 beta es posible poner contenido HTML, pero esto tiene dos problemas actualmente. Primero, ¡Es BETA! por lo que para ver la página estarías obligando al usuario a buscar el runtime de SL4Beta (pues en la página te dan la liga para instalar la última versión estable). Segundo, esta funcionalidad solo funciona fuera del navegador, lo cuál tampoco queremos, pues no queremos forzar al usuario a instalar una aplicación nada más para esto.

Pues bien, después de buscar y buscar, encontré este post donde aprendí sobre la existencia de un control gratuito llamado HtmlHost. Todo lo que hay que hacer es descargar el zip y descomprimirlo en su lugar predilecto para librerías.

Para una pequeña demostración, vamos a crear un proyecto nuevo de Silverlight, y vamos a agregar como referencia el emsamblado que acabamos de descargar: Divelements.SilverlightTools.dll

image

Después abrimos MainPage.xaml en Blend para hacer una layout rápido:

image

Aquí tenemos una versión resumida del XAML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
;"]<UserControl x:Class="PhotosynthDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:divel="clr-namespace:Divelements.SilverlightTools;assembly=Divelements.SilverlightTools"
mc:Ignorable="d"
d:DesignWidth="640"
d:DesignHeight="480">
<Grid x:Name="LayoutRoot"
Background="#FF293949">
<Border BorderBrush="#FF9A0707"
BorderThickness="3"
Margin="82,88,90,120">
<divel:HtmlHost Name="htmlHost" />
</Border>
</Grid>
</UserControl>

En la línea 6 estamos agregando el namespace del control HtmlHost y en la línea 17 es donde colocamos y nombramos nuestro control.

Ahora necesitamos asignar un valor a la propiedad SourceHtml del HtmlHost. Vamos a usar el mismo código que nos da Photosynth como si lo fueramos a poner en una página Html común y corriente:

image

image

Y en el code behind vamos a asignar esa cadena a la propiedad antes mencionada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
namespace PhotosynthDemo
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
htmlHost.SourceHtml = "<iframe frameborder='0' src='http://photosynth.net/embed.aspx?cid=e9f3bd27-c3f5-4e2e-8022-3a746a4b3119&delayLoad=false&slideShowPlaying=false' width='100%' height='100%'></iframe>";
}
}
}

Como podemos ver tuvimos que hacer unos cambios a la cadena, primero tenemos que cambiar todas las comillas dobles, por comillas sencillas. También cambiamos el parámetro delayLoad a false y el with y height a 100%.

Si en este momento corren el proyecto, funcionará bien, pero verán un cuadro de dialogo con la siguiente advertencia:

image

Para corregir esto solo tenemos que ir a nuestro aspx de nuestro proyecto web:

image

Y en la sección del div llamado silverlightControlHost vamos a agregar un parámetro:

1
<param name="windowless" value="true" />

Pueden ver un demo en vivo aquí y descargar el código aquí.

[Artículo orignal aquí.]