Tecnologia para interação — Gestos Simples com Sensores e Hardware de Código Aberto

Este vídeo representa resultados iniciais do projeto de experimentação e testes com interfaces de interação. A ideia deste projeto é uma solução de baixo custo que permite um mínimo de interação do usuário — no caso trata-se do movimento com a mão para direita ou para a esquerda. A tecnologia, prototipada com auxílio de Fiozera(.com) em parceria com TelaSocial/Taboca Labs, foi elaborada para fins educacionais e para testes. Esta conta com uso de emissores de infra-vermelho e um projeto baseado no Arduino com código aberto. O projeto foi elaborado como parte de protótipos e interfaces de toque em trabalho conjunto com o grupo de comunicação da Fundação PTI ( Fundação Parque Tecnológico de Itaipu ) e também se relaciona com projeto anterior do uso da tecnologia TelaSocial no Latinoware 2011 [3]. Para maiores informações sobre o protótipo consulte:

[1] http://blog.telasocial.com/experimentacao-com-interacao-e-toque

[2] http://www.fiozera.com.br/blog/?p=213

[3] http://blog.telasocial.com/telasocial-latinoware-2011

Comment (1)
Posted by Marcio Galli 

Mediator 0.2 update

2012-01-13_20-46-47_172

Scenario 1: Repurposing a feed:

Cached and Resized Images

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="
}

Nota técnica: Iniciação com o Phonegap - criando uma app inicial para seu celular

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

No linux, se for Ubuntu

apt-get install git-core

Screen_shot_2012-01-10_at_6

Identifique a aplicação exemplo do PhoneGap ( PhoneGap-start )
página abaixo:

Screen_shot_2012-01-10_at_6

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

git clone <endereço completo tipo https:// ou git:// . Observe que abaixo eu utilizei o protocolo git://

0screen_shot_2012-01-10_at_6

O repositório será baixado. Depois edite o arquivo config.xml e coloque o nome da sua aplicação dentro.

1screen_shot_2012-01-10_at_6

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:

 

Screen_shot_2012-01-10_at_6
0screen_shot_2012-01-10_at_6

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:

1screen_shot_2012-01-10_at_6

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:

Screen_shot_2012-01-10_at_6

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” ):

0screen_shot_2012-01-10_at_6

O campo para copiar, no github.com, fica em Account -> Settings

Screen_shot_2012-01-10_at_6

Tentar executar o último comando:

Screen_shot_2012-01-10_at_6

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:

Screen_shot_2012-01-10_at_6

Vá para o seu ( diretório local recem criado, seu projeto e copie o conteúdo do phonegap-start para ele.

0screen_shot_2012-01-10_at_6

Adicione os arquivos formalmente no repositório local e faça commit:

0screen_shot_2012-01-10_at_6

Envie para o remoto, seu repositório:

1screen_shot_2012-01-10_at_6

De volta no github.com, clicar em continuar:

2screen_shot_2012-01-10_at_6

O que irá lhe mostrar a página e endereços git:// https:// do seu projeto:

Screen_shot_2012-01-10_at_6

Idenfique a linha URL do repositório: faça copy and paste.

0screen_shot_2012-01-10_at_6

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@:

Screen_shot_2012-01-10_at_6

Clicar criar:

0screen_shot_2012-01-10_at_6

Quando os códigos QR estiverem na página você poderá instalar tirando uma foto no celular se você tem aplicação de QRCode.

 

Comments (0)
Posted by Marcio Galli 

Experimentação com interação e toque

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.

Screen_shot_2012-01-08_at_6

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.

(download)

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

(download)

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

[5] http://lowres.ch/ftir/

 

Mediator 0.2 roadmap - NodeJS-based "localhost" middleware to TelaSocial

2012-01-04_19-09-53_671

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:

  • a) 12 web-based kiosks installed with access to a specific subnet without full internet access
  • b) Another server, available in the same subnet, was able to access content from the internet.

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:

  • Cache and Proxy Component: we continue to keep the channel concept, which means we maintain a cycle of fetches from the Web, using HTTP, specifically for RSS, Atom and other data formats, and we maintain in the local disk ( persistence of feeds ) however we want to do a better job related to how to keep the logs. As an example we want to know if the remote feed was available and we may also think about alternate actions in case a certain feed is not available. We maintain the idea of the rules configuration [2] file;

  • Cache and Proxy Component: Functional Resize HTTP Image component: we need to design a solution to be able to use the Mediator as a proxy tool to retrieve images to the client. So, for example, when the client requests a given image, it may decide to go via this component so the image is adequate to the client;
  • UI to access logs: we neep some sort of UI to see what is going on in terms of all the files served and also loaded from the network;
  • Client Process component: Today this functional aspect is covered by a Python code. We are considering bringing this function to the actual NodeJS-based code, the Mediator component. So to check if the client software ( TelaSocial XULRunner-based app ) is running and its memory footprint usage and we may act depending on conditions, for example, if the process is dead ( which also is our solution for first time boot ) or when memory usage goes higher of certain amount;
  • Log for process management: log everything, how many crashes, system boots, and more if there is more important things to log;

[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

Oportunidades free-lance work — TelaSocial Labs — Creative Commons e/ou Código Aberto

Projetos simples que envolvem código, e que funcionam no esquema "passo a passo" com entregas rápidas. Perfil é de "hacker empreendedor" a pessoa que tem conhecimentos básicos de eletrônica e também conhecimento de programação em C++ e Java além de muito interesse em projetos de tecnologia. Todos os documentos serão inicialmente publicados no site TelaSocial mas serão disponíveis com licença Creative Commons e código será aberto em licença a definir.

* Documentação básica, passos, de como instalar a infra básica para desenvolvimento de aplicações em Arduino
* Documentação básica, exemplo de aplicação em Arduino para piscar LEDs
* Documentação básica, de infra para comunicação entre Arduino e Android via MicroBridge
* Documentação básica, de exemplo de aplicação no Android ligando e desligando um LED no Arduino via MicroBridge
* Documentação básica, com exemplo de aplicação via ADK com Arduino

(download)

Documentação técnica - básico - infra-básica para desenvolvimento Android

Click here to download:
TabocaTelaSocialDocAndroidSDKeEclipse.pdf (213 KB)
(download)

Versão HTML em http://www.telasocial.com/p/d/android-basico.html e disponibilizado em Creative Commons 3.0 Atribuição.

Comments (0)
Posted by Marcio Galli 

Linux Build Master for TelaSocial Demo and Install Kit

Click here to download:
TabocaTelaSocialPositionTelasocialDistro(5).pdf (115 KB)
(download)

São Carlos, 16 de Dezembro de 2011 — Posição: Linux Customizer - Build Master for TelaSocial

Comments (0)
Posted by Marcio Galli 

Sinalização Social Interativa no Seminário de Sistemas de Informação IMED 2011

          Um grupo de alunos da Faculdade IMED, de Passo Fundo, Rio Grande do Sul, desenvolveu um protótipo de painel de informações utilizando tecnologias web com o TelaSocial. O projeto, elaborado para o V Seminário Acadêmico de Sistemas de Informação, foi implantado com o objetivo principal de exibir a agenda do evento e as atividades nas redes sociais.

Exibição da programação do evento.

          O evento realizado em uma semana de palestras, mostras e feiras, contou com dois terminais para recepção e informação ao público. Um dos  terminais foi exposto na entrada da Faculdade IMED para promoção das atividades do seminário aos diversos alunos e o outro, na entrada do  auditório principal, local onde estavam sendo realizadas todas as palestas.

          Os responsáveis pelo projeto inicial foram Fernando Vargas, Mauricio Araldi, Marcelo Araldi e Tales Farias. A ideia era conhecer e analisar uma experiência de painéis visuais através de um projeto piloto no ambiente interno da Faculdade IMED. Ainda em desenvolvimento, as telas foram instaladas para promover principalmente a apresentação das atividades nas redes sociais — vários participantes acompanharam as mensagens e fotos durante o decorrer do evento, o que fomentou uma boa percepção em tempo-real quanto as atividades do seminário acadêmico.

Acompanhamento das mensagens do Twitter.

Exibição das fotos do Flickr do evento.

          O grupo que trabalha na versão do sistema da IMED desenvolve atualmente melhorias de layout e atualizações do código fonte, que agora é baseado na nova arquitetura do TelaSocial: arquitetura cliente/servidor com edição totalmente em HTML, CSS e Javascript, como  páginas web. O criador do projeto, Marcio Galli, reitera que “Esta  versão permite que qualquer desenvolvedor possa acrescentar, remover ou alterar os recursos dos painéis. A ideia é que o software possa evoluir com base em tecnologias Web, permitindo assim que qualquer  desenvolvedor Web possa criar melhorias no sistema”.
         O projeto da Faculdade IMED conta com o suporte do projeto TelaSocial no sentido de adaptação do software da faculdade à nova versão. O novo código, ainda em desenvolvimento, está disponível no endereço https://github.com/fvargaspf/TelaSocial_IMED2011-2. O código é open-source, porém, deve-se conservar os direitos legais sobre logos e nomes das várias entidades envolvidas, como IMED, TelaSocial, dentre outros. 

Comments (0)
Posted by Marcelo Araldi 

Posição Oportunidade: Contest Master

(download)

Comments (0)
Posted by Marcio Galli