This use case refers to a client ( web social kiosk ) that wants to display a number of pictures associated with a given feed — think a flickr feed with URLs to some images. The client app wants to display smaller version for each of the images ( so that it fits to a TV screen ) and it also does not want to reload the images from the network for every feed request initiated by the client. It only needs the resized images or new fetched and resized images when a new URL is found in the remote feed.
The proposed architecture is a means to repurpose remote feeds and it's done via the mediator using a local channel ( a localhost URL for the feed and pointers to local images.) In this case, a configuration rule script should define associated operation to the feed as the following example shows:
{
"channel":"flickrresized",
"timer": "30000",
"function":"cacheandresize",
"url":"http://api.flickr.com/services/feeds/photos_public.gne?tags=flower&lang=pt-br&format="
}Geral — Receita :
* Account no Github
* Colocar chave pública ( a partir das chaves criadas ) no github ( account settings )
* Criar um repositório com o GIT ( ter GIT no seu computador ), repositório local
* Criar um repositório no github.com
* Associar o seu repositório local com o que você criou no GitHub.com
* Identificar a URL tipo pública do seu repositório, no github https://taboca@github.com/taboca/TestEducational.git e colocar em um novo projeto no build.phonegap.com
* gerar
Identifique a aplicação exemplo do PhoneGap ( PhoneGap-start )
página abaixo:
Uma vez que tem o git instalado, faça um git clone do endereço do github:
Você pode utilizar o endereço, acima, HTTP ou Git Read Only: copiar tudo
O repositório será baixado. Depois edite o arquivo config.xml e coloque o nome da sua aplicação dentro.
Okay, guarde isto. É somente um diretório com os exemplos.
Volte para o GIT e crie um novo repositório, crie um público de início, mais fácil.
Complete:
Siga os passos abaixo que o github.com irá lhe informar como criar um novo repositório local no seu computador. Observe que isto tudo é um novo diretório que não é relacionado com o diretório que fizemos anteriormente. O que foi feito anteriormente é do tipo “reserve”. Ou seja, volte um diretório ou ache um outro local no seu computador local e siga as instruções abaixo:
A última linha vai dar problema — git push -u origin master. Isto é porque você pode ainda não ter a chave pública no github. Se este for o caso, então volte para o seu shell e faça a chave:
A chave será instalada em algum local no computador conforme indicado pelo programa ssh-keygen ( ou outro se você estiver utilizando outro ). Copiar o conteúdo da chave para o GIthub.com ( dá pública “.pub” ):
O campo para copiar, no github.com, fica em Account -> Settings
Tentar executar o último comando:
Se subir é porque funcionou. Daí agora vamos copiar aqueles arquivos ( baixados do repositório Getting Started no passo anterior inicial ) para o seu novo repositório local. Faça cd no outro diretório ( phoegap-start ) e apague o sub-diretório .git que é um sub-diretório escondido:
Vá para o seu ( diretório local recem criado, seu projeto e copie o conteúdo do phonegap-start para ele.
Adicione os arquivos formalmente no repositório local e faça commit:
Envie para o remoto, seu repositório:
De volta no github.com, clicar em continuar:
O que irá lhe mostrar a página e endereços git:// https:// do seu projeto:
Idenfique a linha URL do repositório: faça copy and paste.
Volte para o build.phonegap.com, criar nova app e coloque a linha lá. Mas ajuste caso a linha acima for como a minha que tem taboca@. Isso está assim porque eu estava logado no Github. Se sim, tire o seuusuario@:
Clicar criar:
Quando os códigos QR estiverem na página você poderá instalar tirando uma foto no celular se você tem aplicação de QRCode.
Esta é uma nota técnica em relação as telas de toque que apresenta soluções que existem no mundo e no final uma proposta de um caso de uso para o TelaSocial.
As telas de toque são sistemas que geralmente vão acoplados em painéis tipo TV ou telões. Atualmente, os tabletes e smartphones possuem telas de toque do tipo multitouch, que permitem novos tipos de experiências, tais como o movimento de "esticar" uma figura. O vídeo abaixo mostra um exemplo com uma tela multitouch com suporte via software no Windows, e uma aplicação de desenho, que aceita vários pontos de toque ao mesmo tempo:
Visão geral das tecnologias
Telas sensíveis ao toque capacitivas
É a tecnologia encontrada em notebooks modernos, smartphones ou tabletes e é chamado em inglês capacitive touch screen. Neste caso, um sistema calcula a posição do toque porque o corpo humano carrega eletricidade alterando a capacitância na película que conduz eletricidade instalada na frente do painel. Esta tecnologia permite a identificação de vários pontos ( telas de múltiplos toques ao mesmo tempo ) mas não recebe sinal se o ponto de contato não conduzir eletricidade, ou seja, um usuário com uma luva ou um dedo engordurado pode ter uma experiência prejudicada ( não vai funcionar ).
Telas sensíveis ao toque resistivas
Dispositivos antigos, como os primeiros palm, utilizavam desta tecnologia. Basicamente, existem duas películas que estão separadas por um espaço. Quando um objeto físico pressiona um ponto, as camadas se tocam, e então ocorrem medições, uma para o eixo X, e a outra para o eixo Y. Com este tipo de tecnologia, é difícil medir vários pontos. O ponto positivo é que pode-se pressionar com qualquer objeto.
Tecnologia infra-vermelho
Esta é uma das tecnologias mais antigas e tem um funcionamento bom para toque simples ou multi-toque. Existem vários sensores que são colocados ao longo do frame ( aparato físico como uma moldura de quadro ) do painel e também emissores de luz infra-vermelho. Por se tratar de uma matrix, uma vez que o dedo ( ou qualquer objeto ) faz o bloqueio da luz, sabe-se então a posição do elemento por estes sensores terem sido fisicamente colocados nos eixos X e Y do frame.
Busca de Novas Soluções e Casos de Uso
As tecnologias acima são as mais tradicionais, porém, existem várias outras. A Samsung, por exemplo, tem um aparelho de TV moderno, que traz uma tecnologia chamada PixelSense [3], que é baseada na ideia de sensores óticos. Assim, estes estão implantados no nível dos pixels da TV, o que lhe permite não somente capturar a posição de objetos como também suas imagens.
Algumas ideias relacionadas com este tipo de solução podem ser encontradas em projetos que fazem uso de webcams para detectar onde o dedo tocou em uma tela de acrílico ou outros materiais.
Alguns projetos se baseiam em TIR ( total internal reflection ) [4] e simplesmente fazem a detecção do dedo uma vez que este desvia parte da luz que passa pelo material de acrílico. Este esquema é referido como FTIR ( Frustrated Total Internal Reflection ) [5].
Caso de Uso: Intervenção Individual vs Social
É importante observar que atualmente o sistema TelaSocial oferece interação mas através de meios indiretos, via Web, utilizando-se de feeds ( canais como RSS, Atom, JSON etc ). No entanto, existem casos que pedem interação física dos usuários nas telas. Neste sentido ocorre a busca pelo entendimento do que é uma experiência híbrida com interação via toque, para provavelmente um ou poucos humanos, e ainda a continuidade da interação remota, indireta, via web. É importante ainda observar que o usuário, quando fisicamente tocando na tela, está bloqueando a visão dela.
A figura abaixo mostra o caso A, com interação remota indireta, versus um cenário B onde um único usuário foi fisicamente para a frente da tela.
O caso de uso pode ser válido em alguns ambientes e deve ser medido para se entender os benefícios da experiência.
Proposta Áreas Sensíveis ( Hot Areas )
Uma proposta de implementação deste caso de uso trata-se de um modelo híbrido, ou seja, que o sistema fique em modo "piloto automático", e quando um usuário colocar o dedo em algumas áreas da tela, a experiência fica temporariamente controlada. Isso pode ser uma experiência de interação limitada que depende do tipo de conteúdo, ou seja, não seria uma navegação livre na web. De fato acabaria sendo uma experiência individual que é compatível com o tema geral do painel — o painel faz a governança das áreas "clicáveis".
Visão geral do frame de captura de "hot areas" de interação. Imagine uma grande tela que tem uma área em baixo que apresenta a imagem de um botão.
Proposta Projeto Implementação:
Painel de Baixo Custo de Toque — hot áreas
As fuguras abaixo apresentam a visão inicial do sistema e como que a comunicação com o TelaSocial será feita. Um frame, estrutura do tamanho da TV, deverá ser colocado na frente do painel e deverá conter sensores e emissores de luz infra-vermelho. A mão do usuário deverá cortar os feixes de luz permitindo que o sistema eletrônico possa informar o sistema no PC ( Linux ) que deverá oferecer a informação via sockets.
Referências
Este artigo é continuação do artigo Interação Parte 1.
[1] http://en.wikipedia.org/wiki/Touchscreen
[2] http://www.gizmodo.com.br/conteudo/giz-explica-magica-por-tras-das-telas-sens...
[3] http://www.slashgear.com/samsung-pixelsense-lcd-multitouch-displays-hit-mass-...
[4] http://en.wikipedia.org/wiki/Total_Internal_Reflection
First version prototype 0.1:
The Mediator [1] is a NodeJS-based application that works to support TelaSocial run-time environment. The Mediator was initially created to keep a means to serve remote feeds ( content avaialable via RSS, Atom, and more ) using a middleware server. The original code was created as a solution to allow multiple clients to to load feed content from external sites. The network scenario was the following:So the Mediator app was placed in b) server and it used a rules configuration [2] file to fetch remote content ( RSS, Atom, etc ) and keep it locally in the server. When a given client app, a kiosk, requested data, then it served from the disk via HTTP.
Proposal to update 0.2: In the above scenario the application was running in a separated server. For 0.2, the ideia is to run this application in the same computer that runs TelaSocial client — so it will work as a run-time engine to support the client app. It will maintain persistent information about remote channels and also can be used as a means modify and perform some configuration in each client. The following features are planned to the release 0.2:[1] https://github.com/taboca/TelaSocial-Mediator
[2] https://github.com/taboca/TelaSocial-Mediator/blob/master/config.json
[3] TelaSocial - Powered by Mozilla kiosk www.telasocial.com
