Fullsix Labs

Showcase de experiências

Bing homepage with Silverlight DeepZoom

clock March 4, 2010 08:16 by author ricardo.fiel

 

[EN]

The Bing Homepage has amazing photos (they even do some contests once in a while). What if those were high resolution ones? What if Microsoft could further improve the user experience in Bing’s homepage by talking advantage of it’s Silverlight techonlogy? They’ve been using it in other Bing areas to implement some amazing experiences.

With this in mind, I did a quick demo of what could be possible by integrating html and Silverlight’s Deep Zoom feature through Javascript.

See it here. (Works a bit better on IE, as the image doesn’t get perfectly centered in FF and chrome).

[PT]

A página de entrada do Bing tem fotografias espectaculares (até fazem concursos de vez em quando). Então e se essas fotografias pudessem ser em alta resolução? E se a Microsoft pudesse melhorar a experiência do utilizador, tirando partido da sua tecnologia, Silverlight? Eles têm-na usado noutras àreas do Bing para criar experiências de utilização fantásticas.

Com isto em mente, resolvi fazer uma pequena demo do que seria possível, através de integração de html e Silverlight DeepZoom através de Javascript.

Podem ver a experiência aqui. (Funciona melhor no IE, pois a imagem não fica perfeitamente centrada no FF e no chrome).



Destaques3D

clock January 30, 2010 02:09 by author francisco.coelho

[PT]

Uma classe em AS3 que pega num layout em flash e transforma MovieClip's em Destaques3D.

Ao pressionar um destes destaques carrega e abre uma area (neste prototipo só existe uma area).

O efeito que se arrasta em relação á posição do rato exite só para tornar a navegação mais aplativa.

 

Ver Experiência

 

[EN]

An AS3 class that allows you to create 3DCubes from any MovieClip within your Flash layout.

By pressing one of these 3D cubes you will see how you could load and open any content (only one area in this prototype)

The blury dragging effect turns the navigation experience more interactive and interesting.

 

See the experiment



Cardboard 3D (PPV)

clock December 16, 2009 21:27 by author francisco.coelho

[PT]

Um conjunto de ideias aproveitadas de vários projectos que resulta num website com uma navegação interessante. O efeito 3D pretendido é o de uma caixa de cartão usando Papervision 3D.

Nota: Esta experiência só contempla uma homepage+4areas mas esta navegação permite que cada uma das areas tenha 3 subareas, ou seja os níveis são infinitos.

Ver Experiência

[EN]

A set of the ideias from various projects put together to result in a website with an quite interesting navigation. The 3D effect here is to simulate a cardboard using Papervision 3D.

Note: This experience only shows the homepage+4areas but the navigation solution allows you to have 3 subareas for each area, so that you could have an unlimited level site.

See the experiment 

 

PS: Obrigado ao Daniel Gomes pelas imagens cortadas.



Showcase HTML

clock November 26, 2009 18:10 by author alexandre.falcoeiras

 

[PT]

Olá a todos

Foi pedido ao sub departamento de IT, HTML, para realizar uma apresentação de projectos e de funcionalidades que se destacassem, pela sua diferença e inovação, para partilhar conhecimentos e experiências, para dar a conhecer aos restantes elementos da empresa, o que se anda a desenvolver em projectos, que muitas das vezes por serem projectos externos (UK,FR), não ha muita visibilidade dentro da empresa (PT), e todos podemos ganhar com essa experiencia e know how.

O showcase HTML encontra-se dividido por clientes, plugins de jquery e repositórios de plugins.
O próprio showcase tem funcionalidades aplicadas, e de fácil manutenção.

 

http://labs.fullsix.pt/Projects/showcase_html/

 

obrigado

 

Showcase HTML

 

[EN]

Hi all

It was asked to the sub department of IT, HTML, to carry out a presentation of projects and of functionalities that they were detached, by their difference and innovation, to share knowledge and experiences, for give it know to the remaining elements of the company, what is being developed in projects, since many of the times by being external projects (UK,FR), they don't have a lot of visibility inside the company (PT), and everybody can win with that experience and know how. 

The html showcase is splited into clients, jquery plugins and plugins repositorys.
The showcase itself has applied functionalities, and is easy maintained.

 

http://labs.fullsix.pt/Projects/showcase_html/

 



WPF XBAP: Import your Contacts from Outlook (demo)

clock November 11, 2009 04:21 by author goncalo.chaves@fullsix.com

 

[PT] (for a English version, see bellow on this page, please)

Olá a todos,

Recentemente num projecto interno nós estávamos a necessitar de utilizar algum tipo de activeX numa página Web, para que fosse possível a importação dos contactos do Outlook, tal como no linkedIn.

Portanto, para quê um activeX quando temos as aplicações XBAP? Hum… parece-me bem. Então aqui fica um pouco da experiência que tivemos no desenvolvimento desta brincadeira. Em primeiro lugar, não esquecer que se a nossa aplicação vai interagir com um dos membros do Microsoft Office, as Visual Tools for Office têm as bibliotecas certas para isto!

Eis os nossos passos:

1) Importação da biblioteca do Outlook para a nossa aplicação:

using Microsoft.Office.Interop.Outlook;

2) Criação dos tipos necessários para a transmissão com o Outlook e leitura dos dados:

private MAPIFolder oContactsFolder = null;
//load outlookcontacts
           var oApp = new Microsoft.Office.Interop.Outlook.Application();
           NameSpace oNS = oApp.GetNamespace("MAPI");
           oContactsFolder = oNS.PickFolder();
      
           string filter = "[MessageClass] = \"IPM.Contact\"";
           Items oContactItems = oContactsFolder.Items.Restrict(filter);
 
           foreach (ContactItem oContact in oContactItems)
           {
               var item = new EmailContact();
              if (oContact != null)
               {
                   item.ContactEmail = oContact.Email1Address;
                   item.ContactName = oContact.FullName;
                   //before add the email let's see that's is valid
                   if (ValidateEmailAdd(item.ContactEmail) && !String.IsNullOrEmpty(item.ContactEmail))
                   {
                       contactList.Add(item);
                   }
               }

3) Definição da interface e da lógica da aplicação

Para tal escolhemos a XBAP para que nos seja possível aplicar todas as funcionalidades que o WFP nos oferece, mas para tal existem algumas notas importantes a ter em consideração:

- A XBAP deverá correr em modo de “full trust”, e para tal é necessário um certificado digital que assine o código da aplicação, e obviamente o nosso browser deverá confiar no mesmo.

image

Para tal, criámos um certificado fullsix CA, algo que fomos seguindo aqui:

http://msdn.microsoft.com/en-us/library/aa194055%28office.11%29.aspx

Outro post com informações muito importantes sobre esta parte:

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/05/wpf-xbap-as-full-trust-application.aspx

Para a extracção do certificado seguimos:

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/31/how-to-run-wpf-xbap-application-in-full-trust-mode-post-2-certificate-extraction.aspx

Para automatizar este processo, desenvolvemos uma pequena aplicação de consola que permite o download e a instalação silenciosa do mesmo. Assim o certificado fullsix CA fica instalado no computador, que assina o certificado que usamos para assinar o código da nossa XBAP application.

image

Aqui fica o código que usámos:

try
           {
 
               var myStream = Assembly.GetExecutingAssembly().GetManifestResourceStream("InstallXBAPOutlookCert.Console.f6signing.cer");
 
               byte[] b = new byte[myStream.Length];
 
               myStream.Read(b, 0, b.Length);
 
               X509Certificate2 cert = new X509Certificate2(b);
 
               X509Store store = new X509Store(StoreName.AuthRoot, StoreLocation.LocalMachine);
 
               store.Open(OpenFlags.ReadWrite);
 
               store.Add(cert);
 
               store.Close();
 
               store = new X509Store(StoreName.TrustedPublisher, StoreLocation.LocalMachine);
 
               store.Open(OpenFlags.ReadWrite);
 
               store.Add(cert);
 
               store.Close();
 
               System.Console.WriteLine("Certificate Successfully Installed...!");
 
               System.Console.Read();
           }
           catch (Exception ex)
           {
               
               System.Console.WriteLine("Error " + ex.ToString());

}

Não esquecer de embeber o ficheiro de manifesto da aplicação dentro do ficheiro exe da aplicação, isto é necessário para utilizar os direitos de Administrador da máquina, para que seja possível fazer a instalação do certificado. É necessário alterar este manifesto como se segue:

<requestedExecutionLevel level="requireAdministrator" uiAccess="false" />

E para embeber o manifesto no exe:

image

O utilizador vê o ficheiro .exe no browser e se no seu caso a empresa possuir um certificado assinado por uma das bem conhecidas CA’s não deverá existir qualquer problema, no nosso caso, os utilizadores deverão confiar no nosso certificado, para que seja possível visualizar a demo correctamente :)

image

Depois o certificado fullsix CA fica instalado no computador tal como se pode ver abaixo:

image

Agora a aplicação XBAP está devidamente assinada e é confiada pelo browser e tudo corre em modo full trust.

Nota:

- WPF threading module. É um pouco doloroso entender para quem está mais familiriarizado com o modo de threading do silverlight como é o nosso caso. Em WPF existem algumas diferenças, o que significia que é necessário pensar sobre esta questão para que não se bloqueie a thread da Interface. Imaginando por exemplo uma animação de loading enquando a comunicação com o Outlook é feita. Um bom artigo para ajudar nesta questão:

http://msdn.microsoft.com/en-us/library/ms741870.aspx

Para evitar o bloqueio da thread principal da interface, lançamos o método de interacção com o Outlook noutra thread da seguinte forma:

var myDispatcher = new Thread(new ParameterizedThreadStart(s => { StartRetriveContacts(); }));

Depois no regresso á thread original:

private void StartRetriveContacts()
       { …
UIDispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { ProcessContacts(contactList); },
                                    contactList);

Usando este tipo de “roteamento” entre as threads permite-nos fazer um update constante na interface de modo a dar feedback constante ao utilizador sobre as operações que decorrem em background.

E pronto :) é isto, podem testar. http://labs.fullsix.pt/projects/xbapoutlookdemo/default.aspx e já agora dar uma vista de olhos nos outros projectos que estão no fullsix Labs.

Queria deixar também uma nota de agradecimento aos meus colegas Antoine e Fiel pela ajuda no desenvolvimento.

Merci.

 

[EN]

Hi all,

In order for a internal project we need some kind of an activeX in a web page from Outlook contact email addresses importation, such has like linkedIn has.

So why use a activeX when we have XBAP apps? Sweet hum? Here is how we've done the little app. First of all keep in mind this is something to interop with an Microsoft Office application, right? The Visual Tools for Office have the right libraries for it!

Steps:

1) Import the Microsoft Interop Namespace:

using Microsoft.Office.Interop.Outlook;

easy as butter

2) Create the right types to exchange with outlook and load content

private MAPIFolder oContactsFolder = null;
//load outlookcontacts
           var oApp = new Microsoft.Office.Interop.Outlook.Application();
           NameSpace oNS = oApp.GetNamespace("MAPI");
           oContactsFolder = oNS.PickFolder();
      
           string filter = "[MessageClass] = \"IPM.Contact\"";
           Items oContactItems = oContactsFolder.Items.Restrict(filter);

           foreach (ContactItem oContact in oContactItems)
           {
                
               var item = new EmailContact();
               

               if (oContact != null)
               {
                   item.ContactEmail = oContact.Email1Address;
                   item.ContactName = oContact.FullName;

                   //before add the email let's see that's is valid

                   if (ValidateEmailAdd(item.ContactEmail) && !String.IsNullOrEmpty(item.ContactEmail))
                   {
                       contactList.Add(item);
                   }
               }

3) Define your UI and the rest of the behaviors

We choose a XBAP application in order to have the WPF capabilities in a regular web page but you must be aware of some important settings:

- XBAP app needs to run in a full trust mode, so that requires a DigitalCertificate to sign your code and the browser needs to trust on that.

image

So we created a fullsix CA certificate. Something that follows here:

http://msdn.microsoft.com/en-us/library/aa194055%28office.11%29.aspx 

You can see a quite nice post’s about this at:

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/05/wpf-xbap-as-full-trust-application.aspx 

and for the certificate extraction

http://blogs.microsoft.co.il/blogs/maxim/archive/2008/03/31/how-to-run-wpf-xbap-application-in-full-trust-mode-post-2-certificate-extraction.aspx

to automate this process we develop a simple console application that you download first and installs on your computer our fullsix CA certificate, that signs the code sign certificate that we use previously to sign the xbap code.

image

Here is the code for that:

try
           {

               var myStream = Assembly.GetExecutingAssembly().GetManifestResourceStream("InstallXBAPOutlookCert.Console.f6signing.cer");

               byte[] b = new byte[myStream.Length];

               myStream.Read(b, 0, b.Length);

               X509Certificate2 cert = new X509Certificate2(b);

               X509Store store = new X509Store(StoreName.AuthRoot, StoreLocation.LocalMachine);

               store.Open(OpenFlags.ReadWrite);

               store.Add(cert);

               store.Close();

               store = new X509Store(StoreName.TrustedPublisher, StoreLocation.LocalMachine);

               store.Open(OpenFlags.ReadWrite);

               store.Add(cert);

               store.Close();

               System.Console.WriteLine("Certificate Successfully Installed...!");

               System.Console.Read();
           }
           catch (Exception ex)
           {
               
               System.Console.WriteLine("Error " + ex.ToString());
           }

Don’t forget to embed the application manifest in the exe file, you need that for auto Admin rights permissions to install :) like this in your manifest file:

<requestedExecutionLevel level="requireAdministrator" uiAccess="false" />

and to embed it on the exe:

image

The user see’s the .exe on the browser and if your company has a certificate that’s signed by one of very well known CA you should haven’t any trouble. In this case our users must have trust on us :) 

image

 

then you have the fullsix CA in your machine as you can see here:

image

So now XBAP application is signed and User grant a full trust environment for it.

Note:

- WPF threading module. It’s some kind of “pain”, for those who are more familiar with Silverlight like me, in WPF there are some differences, which means that you have to think about threading block handling, in order to avoid frozen the main UI thread, that can being display, for example, a loading animation of the contact import progress. for that there are also a nice article:

 http://msdn.microsoft.com/en-us/library/ms741870.aspx 

To avoid the main UI thread block we launched the Outlook interop method in another thread, here’s the way:

var myDispatcher = new Thread(new ParameterizedThreadStart(s => { StartRetriveContacts(); }));

then to get back on the main UI:

private void StartRetriveContacts()
       { …
UIDispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { ProcessContacts(contactList); },
                                    contactList);

Using this kind of “routed threading model” we were able to provide an UI update with some animation and application update state.

And that’s it..! you can try for your self 

http://labs.fullsix.pt/projects/xbapoutlookdemo/default.aspx , and take a look into our others fullsix labs projects.

Also a thanks to Antoine and Fiel for their help on this development.



Funky Draw v5

clock October 24, 2009 03:46 by author manuel.barbosa

[PT]
Após algumas experiências com o DrawBitmap, aqui vai o resultado mais-ou-menos-final.
(feito em as2 devido ao projecto onde ia ser aplicado)

Instruções:
Clique no botão Esquerdo do Rato e desenha.
Qualquer tecla para limpar a tela.

Ver Experiência

[EN]
After a few tests with DrawBitmap, here is the more-or-less-final-result.
(made with as2 due to the project that was developed for)

Instructions:
Press the left mouse button and draw.
Press any key to clear the canvas.

See the experiment 



Papervision3D Spiral Gallery

clock September 15, 2009 04:03 by author francisco.coelho

[PT]

Uma galeria de fotografias em espiral editável por xml que usa o movimento da camera (Papervision 3D). Ver Experiência.

[EN]

A spiral shaped xml editable photo gallery using the camera movement to navigate (Papervision3D). View Experience.



Bitmap Effects with WritableBitmap

clock September 9, 2009 03:15 by author Tiago Andrade e Silva

[PT]
Efeitos aplicados a uma imgem utilizando o WritableBitmap do Silverlight

Ver Experiência

[EN]
Effects applied to an image using the WritableBitmap Silverlight class

See the experiment 



DAE Texture

clock September 8, 2009 02:28 by author francisco.coelho

[PT]
Uma experiência com um modelo 3D (.dae) de uma lata usando papervision3.

É possível alterar a textura em tempo real pintando ou movimentando o logotipo da Fullsix.

Ver Experiência

[EN]
An experimence with an 3D model (.dae) from a can using papervision3.

It allows to change the texture in real-time by painting or moving the Fullsix logo.

See the experiment 



FLINT - Particle Systems Library...uma primeira abordagem

clock September 7, 2009 20:39 by author Ricardo Castelhano

[PT]
"Library" FLINT para motores de particulas. Nesta primeira abordagem, recorri a um dos exemplos que estão no SVN do GoogleCode e em que através de um BitmapData o motor gera as particulas de forma a reproduzir o que "leu" na imagem...neste caso é o lettering "Fullsix". Ver Experiência

Mais para breve...

[EN]
FLINT library for particle systems. In this first approach, I turned to one of the examples that are in GoogleCode's SVN and that by a BitmapData the engine generates the particles in order to reproduce the image ... for instance the "Fullsix" lettering. View Experience

More soon ...



XML Gallery PPV Effects

clock September 2, 2009 23:03 by author marcos.neves

[PT]
Protótipos de galerias dinâmicas em PPV utilizando Papervision3D 2.0 Effects.

Neon | clique para ver

Dark | clique para ver

Clean | clique para ver

Agradecimento a equipe SixandCo pelas imagens originais !!

Obrigado,

Marcos Neves

[EN]
Some prototypes of dynamic galleries using Papervision3D 2.0 Effects.

Neon | click to see

Dark | click to see

Clean | click to see

Thanks team SixandCo for the original images!

Thank you,

Marcos Neves



ByteArray Dynamic Sound

clock August 25, 2009 00:48 by author marcos.neves

[PT]
Protótipo utilizando ByteArray para gerar e manipular objectos sounds.
Para os cabos foi utilizado as classes draw do flash com muita matemática e física.

OBS:Somente para o Flash Player 10

Quando voltar do FlashOnTheBeach onde farei um workshop justamente sobre ByteArray com Lee Brimelow pretendo colocar a opção para gravar o som criado/manipulado.

Ver protótipo

Abs,

Marcos Neves

[EN]
Prototype using ByteArray to generate and manipulate sound objects.
For cables was used "DRAW" classes from flash with a lot of math and physics.

NOTE: Only for Flash Player 10

When returning from FlashOnTheBeach where I will have a ByteArray Workshop with Lee Brimelow, I intend to add the option to record the created or manipulated sound.

See prototype

Hugs

Marcos Neves



Papervision3D Spiral Gallery

clock August 21, 2009 00:49 by author marcos.neves

[PT]
Galeria Espiral em Papervision3D 2.0 Ver

[EN]
Papervision3D 2.0 Spiral Gallery See



Efeito de chuva em televisão com Silverlight 3

clock August 20, 2009 02:37 by author Tiago Andrade e Silva

[PT]
Utilização do WritableBitmap em Silverlight 3 Ver Experiência | Mais Info

[EN]
Using Silverlight3 WritableBitmap feature View Experience | More Info



Vista 360º

clock July 20, 2009 02:43 by author Gonçalo Chaves

[PT]
Esta demo utilizar uma imagem equirectangular para dar uma visão 360º. Ver Experiência

[EN]
This demo use an equirectangular image to give a full 360º view. See Experience



Sobre a Fullsix

CONTACTOS

FULLSIX Portugal
Galerias Alto da Barra, Piso 4
2780 Oeiras

+ 351 21 446 24 60

Sign in