Adobe Air; Comunicação visual via TV

Adobe Air; Comunicação visual via TV

Venho falar de um projecto que terminei em Janeiro, e que foi bem interessante de desenvolver visto que foram optadas algumas práticas de desenvolvimento focadas em display’s TV / LCD.

O projecto trata-se de o desenvolvimento de uma plataforma de comunicação visual para apresentação publica em Televisores. Com certeza já passou num aeroporto, hotel, ginásio e viu alguns LCD’s espalhados por lá com as mais diversas informações, principalmente nos aeroportos com as chegadas / partidas, pois então, o projecto focou-se no desenvolvimento de uma plataforma dessas em Adobe AIR (Flex 4) que pudesse facilmente ser administrada pelo cliente, mas também que fosse facilmente personalizada para poder ser distribuída por vários clientes.

O sistema baseou-se me duas aplicações, uma front-end para distribuição pelos clientes, apenas com controlo de chaves (Numero de série gerado pela administração) e que carregará toda uma playlist de vários módulos, bem como toda a skin (cores e logo). A segunda aplicação consiste numa area administrativa onde o cliente pode gerir a sua playlist, noticias, videos, animações, aniversariantes, noticias manuais, etc’s. Esta area administrativa também permite no caso do login de Super Administrador de gerir todos os clientes, skins e restantes informações.

As playlists são ilimitadas, pelo que podem criar uma playlist completa para o dia!

Todo o sistema do cliente, ao abrir-se  (na primeira apresentação pede a chave da aplicação) carrega todas as informações do servidor; Skin, playlist e logotipo e adapta-se em fullscreen ao ecrã. Dá-se então inicio ao processo de carregamento da playlists e seus elementos. Esta palylist consiste na apresentação de variados modulos e respectivas durações de apresentações.  (Vejam as imagens mais em baixo…)

Os módulos desenvolvidos foram os seguintes:

  • Noticias; Vários modulos de noticias de varias categorias, quer com fonte num Feed RSS  ou na base de dados (Inserção manual). Categorias: Actualidade, Mundo, economia, tecnologia, inovação, desporto, cultura, saúde, país.
  • Tempo; Previsão de tempo para o dia e próximos 3 dias com a possibilidade de 1 ou mais locais na area central, e com os display das temperaturas para todas as grandes cidades no topo;
  • Informação financeira; Bolsa de valores (cotações em tempo real) e Cambios.
  • Aniversariantes; Possibilidade de apresentar aniversariantes e suas fotos /departamentos na area central para os próximos 7 dias.
  • Animações / Publicidade; Possibilidade de colocar animações em formato SWF para display apenas na area central ou em fullscreen.
  • Videos / Publicidade; Apresentação de videos em streamming na area central ou em fullscreen.

As noticias na area central podem conter também fotografias vindas de um feed RSS ou da base de dados. A playlist pode ser organizada com varios destes elementos / módulos, e facilmente gerida via “drag&drop”.  O sistema ficou preparado para a qualquer hora poder criar um novo módulo e integra-lo na playlist; Novos módulos se adivinham como conferências, dicas, publicidade, classificações de jogos, programação de canais de televisão, etc’s…

O sistema ainda conta com auto-update para se actualizar sem necessidade de intervenção do administrador, tal como a própria aplicação procura actualizações de noticias, skins, imagens, videos, playlist de 15 em 15 minutos para que desta forma apresentar sempre conteúdo actualizado.

Se eu ao inicio tinha algumas duvidas se o consumo de memória e processador da aplicação no PC do cliente poderia depois de uma longa utilização entrar num ponto crítico, essas duvidas foram desaparecendo depois de alguns dias de testes, que surpreendemente revelaram que o consumo de memória se mantinha praticamente o mesmo (em alguns casos mais baixo que o inicial) e que o consumo de processador apenas era mais elevado a quando do carregamento de videos em streamming.

Tecnologias usadas:

O pricipal “motor” do front-end e da skin foi o Adobe Illustrator que permitiu converter elementos vectoriais do corel draw facilmente para o Flash Builder, claro sempre com a ajuda preciosa do Flash Catalyst. Depois disto foi criar a skin no Flash Builder, definir os elementos, configurar as diferentes skins dos módulos e juntar tudo num só componente MXML.

A partir daí o Flex encarrega-se de fazer o resto, usando so módulos necessários e ajustando a skin conforme as necessidades. A parte mais fantastica é que ao usar PATH’s (FXG) a skin faz o auto-resize sem perder qualidade e toda ela pode facilmente mudar de cor, o que permitiu criar diferentes skins configuradas no backend.

Foi usado o ZendAMF (PHP) + MySQL como backend para gestão de dados.

As informações de noticias são vindas quer da base de dados quer de varios feeds (que podem também ser alterados facilmente no backend), já as informações meterológicas para todas as cidades são do google e as financeiras (bolsa e cambios) do yahoo.

Penso que é tudo, aqui fica mais uma prova que o Flex pode também servir para aplicações variadas, tal como esta. Como a própria aplicação está em adobe AIR, provavelmente num futuro próximo ela pode ser migrada para as próprias Televisões “Internet” com o sistema operativo Android, abolindo a necessidade de um PC para o trabalho :)

Abraço!

Deixo-vos com algumas imagens (Partes das areas foram ocultadas, como o logotipo e imagens dos aniversariantes para preservar os clientes).


12 comments

add yours
  • Sérgio Morais February 9, 2011

    Parabéns, ficou show de bola.

  • Anderson Chagas February 9, 2011

    Olá, parabéns pelo projeto.
    Conheço alguns softwares de digital signage, mas são soluçoes normalmente em java..
    Quando havia planejado algo semelhante.. me deparei no problema de que o flash player nao fica fullscreen no monitor segundario caso eu trabalhe no monitor principal. toda vez que clicava em algo no monitor principal ele saia do modo fullscreen..

    Existe esse problema realmente ou o problema era comigo? Como vc contornou?

  • João Patrício February 9, 2011

    Parabéns pelo projecto.
    Tenho algo desse género a funcionar, mas totalmente web-based ( php {codeigniter} + html + js ), para facilitar a difusão em computadores com poucos recursos. Todos os módulos que tenho estão a funcionar por webservices, inclusive feeds de noticias, tempo, fotos, meteorologia, etc.

    Tenho algumas perguntas:

    A aplicação que desenvolveu é open-source?
    Como é que se comporta em computadores com poucos recursos (fraca placa grafica ou fraca memória)?

    Cumps e parabéns mais uma vez

  • Mário Santos February 9, 2011

    Anderson,
    Eu testei por varias vezes e em varios PC’s / ecrãs e em algumas gráficas diferentes e o modo fullscreen funcionou em todos eles sempre no monitor secundário. Achei estranho voce ter encontrado esse problema, talvez não tenha usado o modo correcto do fullscreen no air. (StageDisplayState.FULL_SCREEN_INTERACTIVE).

    Cumps.

  • Mário Santos February 9, 2011

    João,
    A aplicação é comercial, foi feita para uma empresa que revende esse serviço / software a terceiros.

    A nivel de performance, o sistema utiliza Adobe Air, sendo que as maiores limitação podem ser encontradas quando um pc não respeitas as configurações minimas do Air 2.5. :
    Windows:
    Intel® Pentium® III (Pentium 4 recommandé)
    Microsoft® Windows® XP Pro, Home ou Tablet PC c/ Service Pack 2 ou 3, Windows Server® 2003, Windows Vista® HOME, Premium, Integral, Pro ou Empresa c/ Service Pack 1, Windows 7

    512 Mo de RAM (1 GB Recomendado)

    Mac OS:
    Processador Intel Core™ Duo (+)
    Mac OS X v10.4.9 ou superior
    512 Mb de RAM (1 GB recomendado)

    Linux:
    Processeur Intel Pentium III (Pentium 4 recommandé)
    Fedora Core 12, Ubuntu 9.10, OpenSUSE 11.2
    1 GB de RAM

    Se estas configurações não forem respeitadas, o sistema pode sofrer atrasos ou problemas de velocidade. No entanto penso que estas configurações hoje em dia estão quase disponiveis em todas as maquinas.

    Cumps.

  • Joao Felipe - jotaef February 9, 2011

    Mário,

    Meus parabéns pelo projeto, a idéia dele é fantástica!
    E claro, além de ser uma boa referencia de demonstrar a utilidade de Flex + Air.

    Abraços,

  • Thiago February 9, 2011

    Mário,

    parabéns pelo projeto, tenho uma solução mt parecida com a sua tbm toda em air estou aguardando ansiosamente a chegada do stagevideo para que eu possa rodar os videos em 720p tranquilamente, pois hoje mesmo com a plataforma ion quando eu dou overlay no video fica bem ruim a qualidade.

    Abraços

  • Mário Santos February 11, 2011

    Oi Thiago,
    A verdade é que o stageVideo, apesar de já estar disponível no Flash, não acredito que ele vá ficar tão depressa disponivel no AIR, aliás, pensa-se que apenas ficará disponivel no Air com o deploy para TV’s. A qualidade do video realmente não á a melhor, no entanto se for em formato H.264 (f4v) com uma resolução decente o seu playback é bastante aceitável.

    Abraço!

  • Liba Junior May 11, 2011

    Olá Márcio, com vai ?

    Há tempos acompanho seu trabalho… Parabéns por este novo projeto. Falando nele, estou desenvolvendo um aplicativo como o seu para utilizarmos aqui na empresa.

    Gostaria de saber se vai falar mais sobre, como fez com alguns projetos, para ajudar quem está tentando desenvolver aplicativos desta natureza.

    []s

  • Antonio Carlito May 14, 2011

    Mário, tenho um sistema de propaganda via tv’s instaladas em pontos comerciais, gostaria de umas dicas sobre como inserir informações de tempo, cotação, notícias…, sei que preciso de internet em cada ponto, mas, não sei como efetuar as atualizações via web.

  • Mário Santos May 17, 2011

    Liba,
    Sim, pretendo falar um pouco mais sobre ele, no entanto tenho andado meio ocupado, mas assim que consiga um pouco de tempo livre falarei sobre mais alguns detalhes.

    Abraço.

    Antonio,
    Para obter informações sobre as previsoes do tempo e as informações financeiras tive que criar uma implementação para acesso a uma API para cada um deles. As informações financeiras são do yahoo finance e as meterologicas / tempo são do Google. Para ambos foram usadas as APIs fornecidas por estes serviços…

    Quanto às notificas foi criado um sistema no proprio Flex/AIR para ler feeds RSS de onde são extraídas as noticias. Já as noticias “manuais” são retiradas de uma base de dados central que é administravel via backend.

    Espero ter esclarecido um pouco mais.
    Abraço.

  • Ruan Aragão December 26, 2011

    Parabéns pelo seu trabalho Mário, eu estou tentando fazer algo do tipo, mas utilizando mesmo php, html e js, mas no reprodutor de vídeo em flash to apanhando um pouco para fazer a play list. Mas é isso ai, estou fazendo primeiramente para ver como vai ser e tudo mais, se eu ver que tem futuro eu invisto mais. Mais uma ver parabéns pelo projeto e obrigado polo post!

Leave a Comment

Post