I’ve been playing with the new Nokia N8 (Symbianˆ3) and was able to use it as a softphone to make and receive VoIP calls using my default SIP provider. As the setup is not that straightforward, I’m sharing the steps here.

Installing SIP VoIP Settings

The first non-obvious thing is that the N8, as well as other S60 v5 and v3 devices like 5800 and N85, doesn’t come with the settings applications pre-installed. Without that, the built-in SIP settings is pretty much useless for our purpose.

So, rush to Forum Nokia and get / install the settings application. The new version is compatible with Symbianˆ3 devices so it fits nicely the Nokia N8.

Creating a SIP profile

To actually use your VoIP provider account you will need to setup SIP proxies, user name, password, codecs, etc. Nokia has split this rigmarole of settings into two separate things which it calls SIP Settings and VoIP services. So you’ll need to create both. Let’s start with the former.

Start by opening the Menu and going into:

Settings > Connectivity > Admin Settings > Net Settings > Advanced VoIP settings > SIP settings

If the above settings page is not available, then check the previous step.

Now create a new profile by going into Options > New SIP profile

Here you’ll need to fill in the connection details as the SIP proxy address and login information. In my case I use Inphonex and they provide detailed information on how to do that. Your experience may vary but your provider should require similar settings, basically is to set Proxy and Registrar servers.

Creating VoIP service

Once the previous is done, go up one level and then go into VoIP services

Create a new service Options > New service and point it to the SIP profile you just created.

[Optional] Enabling use of VoIP over 3G

If you only intent to use WiFi to make VoIP calls, then skip this step, otherwise click the name of the VoIP service you just created and go into Profile settings.

Now search one configuration flag called “AWCDMA” (Allow WCDMA), change that to On.

Testing

Go to your phonebook, there should be a new tab on the top. Between Contacts and Groups, a tab with the globe and a phone. Click it and you should be able to click a Sign-in option (if it’s not signed-in already). To confirm that, check whether this phone+world icon is shown at the top-right corner of the status-bar, close to the Bluetooth and WiFi icons (see Image).

Now open the dialer, dial something and click Options -> Call -> Your_SIP_Service_name

Should be that

Hopefully this post if useful for you, comments are always appreciated. Enjoy!

Get it HERE

The use case

Image you are writing a widget or a piece of an application interface and you want to rotate something based on a mouse click. For instance, you may have a widget that looks like a rotating knob, or a round analogue gauge.

For this post, let’s use a car dashboard speedometer. What I want here is to click somewhere on the gauge and have the needle rotated towards the current mouse position. Check this video of how it should work.

The problem

In Qt, rotating a widget is easy in the context of QtQuick or QGraphicsView, just define the “rotation” property to the desired angle and you are all set. The problem here is to find out what the desired angle is.

Here I want to find out which is the angle formed between a given mouse position and centre of the gauge, or the origin of the needle rotation. Getting the mouse position is easy in QtQuick, simply watch the “mouseX” and “mouseY” properties of a MouseArea. But what about converting that to an “angle” ?

In mathematical terms what I want is to convert the mouse position from linear coordinates (X,Y pair) to circular coordinates (angle, radius pair) with the centre of the gauge being the origin of my plane. But designers using QtQuick really don’t want to deal with that.

The solution

I made a Qt class meant to be used as a “model” or “helper” for both C++ and QtQuick applications. This class hides the trigonometry required for that conversion by exporting a set of properties, namely:

• originX
• originY
• x
• y
• angle
• radius

So how would we use it in our example?

1. Set “originX” and “originY” to the centre of the gauge. That’s the origin of the needle, right?
2. Set “x” and “y” to the current mouse position. In QML that would be “x: mouseArea.mouseX” and “y: mouseArea.mouseY”.
3. Read the value of “angle“. In QML that would be something like  “needleRotation.angle: angleModel.angle”

Then QtQuick data binding system will handle everything else. Every time the mouse moves, the properties “x” and “y” will be updated, the model will then recalculate the values of “angle” and “radius” causing the needle to update itself.

Below you can see a diagram of that behaviour. Note that the opposite also works, that is, once I explicitly set an “angle” and “radius” in the model, the values of “x” and “y” are automatically updated.

Relationship between AngleModel and different coordinates

The Source

To grab the code go to Qt Components Gitorious and check:

• examples/clickable-dial
• examples/angle-model

Hope you enjoy it. Comments are always welcome.

While QGraphicsView and QML already provide rectangular clipping, it does not support clipping to arbitrary forms and opacity, something we would need in order to implement the “moving bars” transition used in the image slider I mentioned above.

I expected QGraphicsEffect to be suitable for that usecase but I had no experience with it, so I decided to try and make a proof of concept effect class that would clip an arbitrary QGraphicsItem to the shape of a bouncing circle.

A more useful class would be one that received as parameter a mask image instead of the “hard-coded” bouncing circle, but I’ll let that as an exercise to those reading

Code is attached, I complied against Qt 4.6 and it works fine. Just run:

# qmake
# make
# ./effect

l class would be one that received as parameter a mask image instead of the “hard-coded” bouncing circle, but I’ll let that as an exercise to those read.

Download and try it here.

UPDATE:  If your default graphics system is not raster, ie. if you get errors like:

QPainter::setCompositionMode: Blend modes not supported on device

Try running the example as follows:
# ./effect -graphicssystem raster

A nova versão está disponível para download em qt.nokia.com, em versões pré compiladas para Windows, MacOS e Symbian, além do código fonte (para todas as plataformas). Usuários Linux podem baixar e compilar o fonte ou então instalar usando os procedimentos normais de cada distribuição, tão logo estejam disponíveis os pacotes desta versão.

Entre as novidades dessa versão estão:

• API de Animação (QAnimation)
• Máquina de Estados (QStateMachine)
• Novo layout (QGraphicsAnchorLayout)
• Suporte para a plataforma Symbian, o que permite que o Qt rode em dezenas de milhões de novos aparelhos

A documentação atualizada com todas as novas classes está pronta também, ou pelo Qt Assistant ou online.

Outro fato marcante desta versão é o fato de ser a primeira após a abertura do repositório Git do Qt, e assim marca uma integração cada vez maior com a comunidade. Nesse sentido esperamos que todos usem, testem e mandem opiniões e reports de eventuais bugs, para que as próximas versões sejam cada vez melhores!

Para ilustrar um pouco, um vídeo feito pelo pessoal aqui do openBossa mostrando o 4.6.0 rodando em diversos aparelhos!

Para finalizar, algumas fotos do time do Qt.

Em Oslo

Em Berlin

Em Brisbane

Em Munich

Parabéns pessoal!

Hoje gostaria de dar uma visão geral sobre como este novo layout funciona e sobre o porquê de estarmos tão animados com isso.

Para tal, vou falar um pouco sobre: os layouts que já existiam no Qt, o uso do Anchor Layout e finalmente, os problemas que são melhores resolvidos por ele. De agora em diante assuma que estou escrevendo sobre o universo QGraphicsView e assim, onde ler “widget” ou “layout”, entenda que me refiro a QGraphicsWidgets ou QGraphicsLayouts.

QGraphicsLayouts existentes

Até o Qt 4.5, estavam disponíveis os layouts Linear e de Grid. Com eles, como seus nomes indicam, usuários poderiam ter seus widgets alinhados lado a lado ou em formato de tabela, com widgets ocupando uma ou mais células.

No entanto, não era possível organizar os itens para que ficassem fora da tela ou que se sobrepusessem, total ou parcialmente. Além disto, para obter o resultado desejado em alguns casos, era necessário utilizar diversos layouts encadeados.

O conceito do Anchor Layout

Layouts anteriores funcionavam assim: o layout Linear pedia que você adicionasse items ao layout em uma determinada seqüência e assim os itens seriam arranjados lado a lado (ou um sobre o outro); no caso do layout de Grid o conceito era similar, mas com itens associados a índices X,Y para representar a linha e coluna onde eles deveriam ser inseridos.

O Anchor Layout quebra com este paradigma no sentido de que não existe um conceito pré-definido de como os itens devem ser dispostos. A posição final de cada item é totalmente dependente de como você cria as âncoras. Em outras palavras, o Anchor Layout é um layout muito, muito flexível.

Apesar da maioria dos layouts serem flexíveis até certo ponto, e permitirem que se configure parâmetros como o espaçamento entre itens ou as margens, o Anchor Layout eleva a flexibilidade a um novo patamar. Foi também um dos nossos objetivos, fazer com que o processo de criação do layout fosse algo simples. Não queríamos expor centenas de parâmetros abstratos ao usuário, ao invés disto, nós  queríamos disponibilizar uma conceito e uma API de alto-nível. Além de fazer com que seu uso seja mais gratificante, isto facilita a tarefa de transformar em código C++, as idéias e a maneira de pensar dos designers de interfaces. E é assim que surgiram as âncoras.

Neste layout, cada item possui seis pontos de ancoragem, que são esquerda, direita, topo, base e os centros horizontal e vertical. O usuário por sua vez, é responsável por conectar os pontos de ancoragem de diferentes itens entre eles, e com os pontos de ancoragem do próprio layout. Essas conexões são feitas através das tais âncoras, que têm tamanhos bem definidos.

Depois, com base em:

- as âncoras criadas,
- os tamanhos mínimo, recomendado e máximo de cada item, e
- o tamanho do layout propriamente dito.

o layout calcula as geometrias apropriadas para cada um dos widgets.

Casos de uso do Anchor Layout no mundo real

Aqui no openBossa nós temos trabalhado no desenvolvimento de interfaces ricas há um bom tempo, e foi com essa experiência como bagagem que começamos a contribuir com o pessoal do Qt no desenvolvimento do QGraphicsAnchorLayout.

A seguir você irá encontrar alguns dos nossos casos de uso que não eram bem tratados pelos layouts existentes e que são bem mapeados para âncoras.

Transição entre telas

Nós freqüentemente precisamos fazer uma transição entre duas telas de uma mesma aplicação. Imagine que o usuário executa alguma ação que causar o sumiço da tela atual para que uma nova apareça.

Em uma aplicação de interface rica nós provavelmente gostaríamos de animar tal transição. Duas das alternativas seriam tornar transparente ou embaçar a tela corrente até que a que está por vir se faça visível. Para alcançar tal efeito, nós precisamos que as duas telas ocupem a mesma posição na tela, sendo que a mais velha deverá estar na frente (índice Z maior). Em seguida, basta aplicar o efeito à tela que está na frente, por exemplo mudar sua opacidade, e pronto, temos o efeito!

Então, como poderíamos usar um layout comum para fazer um widget (a tela nova) ocupar o mesmo espaço que outro (a tela velha)? Não dava. Agora com âncoras, basta ancorar os lados de uma tela aos lados da outra (direita com direita, topo com topo, etc) e pronto!

Uso do AnchorLayout para colocar duas telas no mesmo lugar.

Items fora da tela

Outro “truque” que usamos na animação de interfaces é fazer um item “entrar” ou “sair” da tela. Por exemplo, imagine uma barra de ferramentas no topo da tela que desliza pra dentro da tela e depois pra fora. A idéia aqui é criar dois estados (usando QStates talvez) onde a barra está dentro da tela em um deles,. e fora no outro.

Mais uma vez, com os layouts comuns não poderíamos criar o estado “fora-da-tela”. Com âncoras, basta ancorar a base da barra ao topo do layout, por conseqüência a barra será colocada logo acima do layout, pronta para entrar na tela quando necessário.

Uso do AnchorLayout para colocar um widget fora da tela.

Disposição orgânica

Existem também aqueles casos onde os designers criam um protótipo de tela com diversos itens arranjados de maneira disforme ou “orgânica”. Na maioria destes casos não é prático (ou possível) ter de usar diversos layouts encadeados para definir tal arranjo. No entanto, com um único Anchor Layout, todos os itens podem ser organizados de maneira precisa.

Experimente!

Existem outras situações não mencionadas onde um layout tão flexível também é útil. Eu acredito no entanto que os exemplos que coloquei aqui são suficientes para mostrar o tipo de problema que estamos tentando resolver. Por favor, experimente e nos diga o que achou. Todo o tipo de opinião é realmente bem vindo, quanto à forma de uso, performance, API, recursos e assim por diante. Tudo será levado em conta para que vocês tenham uma boa ferramenta nova para usar no Qt 4.6.

Aproveitem

Now I’d like to give some overview of how it works and why we’re so excited about it.

To do that I’ll talk about the layouts that already existed in Qt, the Anchor Layout basic usage and finally, the situations that are better handled by the latter. From now on assume I’m talking about the QGraphicsView framework and where you read “widget” or “layout”, understand that I refer to QGraphicsWidgets and QGraphicsLayouts.

Existing QGraphicsLayouts

As of Qt 4.5, the exiting layouts available were the Linear and the Grid layouts. With those, as their names imply, users could have their widgets arranged side-by-side or in a spreadsheet-like fashion, with support for merged cells included.

It was not possible however to lay items out of the screen or overlap them, total or partially. Besides that, some cases would require several layouts to be nested in order to achieve the desired result.

The Anchor Layout concept

Previous layouts work like this: the linear layout would require you to add items to the layout in a given sequence and then those would be arranged side by side (or one on top of the other); in the grid layout the concept is similar, but items are now associated to X,Y indexes to represent the row and column where they should be inserted.

The Anchor Layout breaks with this paradigm in the sense there is no pre-defined concept of how should the items be arranged. The final position of each item is totally dependent on how you set the anchors. In other words, the anchor layout is a very, very flexible layout.

While most layouts are flexible to some extent and allow you to configure parameters like spacing between items or margins, the Anchor Layout brings flexibility to a new level. It was also our goal to make the setup process something easy. We didn’t want to expose hundreds of abstract parameters to the user, instead, we wanted to provide a high-level API and concept. Besides making the coding more rewarding, that would make it easier to translate into C++ code, the UI designers ideas and way of thinking. That’s what the anchors are about.

In this layout, each item has six anchorage points, which are Left, Right, Top, Bottom and the Horizontal and Vertical centers. The user is then responsible for connecting the anchorage points of different items to the others, and to the anchorage points of the layout itself. These connections are made through the use of the so called Anchors, that have well defined sizes.

Then, based on:

- the anchors created,
- the size hints of each item, and
- the size of the layout itself

the layout engine calculates the appropriate geometry of each widget.

Real world Anchor Layout use cases

Here at openBossa we have been involved on the development of rich-UI applications for long, and it was with that experience in mind that we started contributing with the guys from Qt on the development of the QGraphicsAnchorLayout.

Bellow you will find a few use cases of ours that were not handled by existing layouts and work fine with anchors.

Transition between screens

We often want to make a transition between two screens of the same application. Imagine the user performs an action that should hide the current screen and show another one.

In a rich UI application we probably want to animate such transition, one of the alternatives is to apply a fade-out or blur to the current screen until the new screen is seen. To achieve that, we want both screens to occupy the same position on the screen, the old one being in front of the new one (higher Z value). Then it’s just a matter of changing the opacity of the screen on the front and voilà, we have the effect.

So, how do we use a standard layout to make one widget (next screen) occupy the same position as another one (current screen)? We couldn’t do that with existing layout. With anchor is just a matter of anchoring both screens edges to the layout edges (right of item to right of layout, left to left, and so forth).

Usage of AnchorLayout to set two swallows on the same place.

Off-screen items

Another common trick used in UI animations is to have an off-screen item get “inside”  the screen or vice-versa. For instance, imagine a toolbar on the top of the screen that shows or hides itself in an animated way, like “walking into” or “out” of the screen. The idea here is to have two states (QStates maybe?) where the toolbar widget is on-screen in one of them, and off-screen in the other.

Again, with standard layouts we could not create this “off-screen” state. With anchors it’s just a matter of anchoring for instance, the bottom of the toolbar to the top of the layout, thus, the toolbar will sit right above the layout, ready to enter the screen (in an animated way) when necessary.

Usage of AnchorLayout to set a toolbar on or off-screen.

Organic setup

There are also those cases where we have several items arranged on the screen in a very organic way as drawn by the UI designers. Often it’s not practical (or possible) to define that arrangement in terms of several nested layouts. However, with a single Anchor Layout, all items can be arranged precisely.

Try it

There are other situations where such a flexible layout is helpful, however I hope the cases above exemplify the kind of problem we are trying to solve. Please, give it a try, let us know of your impressions. We really appreciate all kinds of feedback, either on usage, performance, API, features, and so forth. All of these will be taken into account so you can have a nice new tool ready for use in Qt 4.6.

Enjoy

Para olhar o código fonte ou fazer o download de um tarball do código fonte, visite o Gitorious do Qt.

Como o nome indica, a versão atual só é compatível com o canvas Graphics View, ou seja é um QGraphicsLayout, e não um QLayout. Esta versão ainda está em desenvolvimento e possui defeitos conhecidos, especialmente quando os itens são organizados de maneira impossível. No entato melhoras virão ao longo do próximo mês, podem esperar.

Enquanto a documentação não está pronta, veja a declaracão da classe QGraphicsAnchorLayout para conhecer sua API. Logo que possível eu publicarei algum material explicando melhor o seu uso.

Como sempre, comentários são bem vindos!

To browse the source or download a tarball, visit Qt Gitorious.

As the name implies, the current version is only available for the Graphics View Framework, ie. it is a QGraphicsLayout, not a QLayout. The current version is still under development and still have know issues, specially with impossible arrangements of items. You can expect improvements through the next month though.

Check the QGraphicsAnchorLayout header for its public API while documentation is not available. I’m going to post more about its usage soon as well.

Comments are always welcome!

We’ve just uploaded a new video showing our latest animated layout example.

You can check it at:
OpenBossa’s Youtube Channel

Or here:

Rather than showing how to animate from one layout to another, this example shows how could a Qt user create his/her own custom layout that uses QGraphicsLayoutProxies internally to animate its items.

From the usage point of view, once the layout is ready, all one has to do is to add or remove widgets to the layout or resize it to see them animating to the right places.

Enjoy!