Tag Archives: howto

Crisp Plasma dialogs borders

Graphics

Since yesterday The border of plasma dialogs like the clock popups have got rounded borders also when the composite is disabled, just like tooltips before,ok not a big deal.
But what is changed is that before tooltips shape was an hardcoded rounded rectangle with a fixed shape and an also hardcoded white border and that kinda sucked…

A second problem connected to that was when compositing was active the windows only faked a non rectangular shape, but they still were stupid rectangles, so for instance you couldn’t click on a totally transparent area to make the popup go away.

Now the window shape is computed from the alpha channel of the background svg, it means now the windows have a shape similar to the one you would expect seeing the fancy transparent svg.

And it causes another problem if not well-managed, because if you use a fancy svg with cool antialiased borders, without composite you will get something awful like that (here zoomed 2x):

ugly borders

See that two black pixels on each edge? and if the radius is bigger the problem gets worse.
This because the semi-transparent pixels will become fully opaque. Fortunately the way Plasma::Theme works comes to rescue, because when compositing is not active it will load a different set of svgs when available (they are all the files in the “opaque” folder in the theme path), so for instance with tooltips when compositing is disabled it will load the following svg (here with an huge zoom):

good borders

Here you can see that the outer borders are made of big blocks that will be rendered with a size of exactly one pixel and will make the illusion of a perfectly round line, while the inner border is still round and antialiased.
So if you will make a sexy plasma theme don’t forget to provide an “opaque” version of the relevant svgs, that at the moment are widgets/tooltip.svg and dialogs/widget.svg (probably in the future there will be also krunner.svg).
these svgs must not have semi-transparent areas and they must have a pixelated border, There are some nice tutorials around on how to make a convincing pixel-based path, like this one.

What? very 90’s or eve 80’s you say? Eh, true, this is where the desktop without compositing comes from πŸ˜€

Hacking la fonera… part III

BlaBla

La fonera, that fully tivo-ified (as rms would say :)) wifi accesspoint by fon was hacked two (now three:)) times, and it has always been patched very quickly.
The last one that was discovered here with a nice tutorial here,
was fixed on the 0.7.1 version of their firmware, but there is still a very similar hole in the webform still about unescaped evil characters…
Just replace “/usr/sbin/iptables -I INPUT 1 -p tcp –dport 22 -j ACCEPT” and “/etc/init.d/dropbear” in step1.html and step2.html with “$(/usr/sbin/iptables -I INPUT 1 -p tcp –dport 22 -j ACCEPT)” and “$(/etc/init.d/dropbear)”
Once done this follow the instructions of the last method straightforward…
Now, it will be surely fixed in the next version and you know what? I hope that it will be fixed, because it’s a very serious security problem, but it’s very sad that everything it’s becoming more and more broken by design, so pleeeeease fon, open that ssh by default and we will all looove you πŸ™‚

Fighting against Qt designer grid layout

Software

The work for KDE4 HIG is on te way and let’s see if KDE4 it’s gonna be the most useable environment out there.

Some days ago I’ve read on el’s blog about her work on the guidelines around the configuration dialogs. At the moment the work is around tweaking prototypes made on Qt designer, as you can see in this example, this is a quite complex dialog and the main difference between this type of dialog and the current kde ones is that the layout is centered, the labels are right aligned and the main widgets are exactly aligned and have the same width, giving the dialog a lot less cluttered aspect and seems simpler, even if it has the same number of widgets than a traditional dialog.

The main problem of doing a layout like this is convincing Qt designer to align the widgets as you have in mind and not being too smart…

For the few times I had to use Qt designer, I’ve come with a love/hate relationship with it. Love because it’s one of the most powerful tools for creating a GUIs around here, for example, I still remember with horror how impossible it was to create a decent looking layout with Delphi (an ancient version when I was still trying to use it, looong ago :D). Hate because sometimes it really tries being way too smarter than the user, and especially when using the grid layout it puts the widgets in the most improbable places, and the impulse of beginning to edit the ui file with a text editor becomes so strong :-P.

In this article I will point out some veeery empirical guidelines on how to design a form without getting mad. It will be based mainly on the this dialog used in el’s blog entry, both because i’t a quite complex example and because I’m not expert in usability, so all the tips will be on how to make it in the easier way than in the most useable way and oh, also because of lazyness πŸ™‚

The grid layout

Qt has that neat feature of the grid layout and is the type you probably want to use for almost every dialog more complicate than a simple pile of widgets, but unfortunately is one of the most difficult to work with, being essentially a table and if you have worked a little bit with html or word processors you know that they tend to be wery tricky to work with :-).

So let’s see how a grid layout is done in the Designer’s ui XML files (that has a very straightforward translation in the generated c++) let’s start with this very stupid dialog:
4 buttons

And the source code of the interesting part is:

  <layout class="QGridLayout" >
   <property name="margin" >
    <number>9</number>
   </property>
   <property name="spacing" >
    <number>6</number>
   </property>
   <item row="1" column="1" >
    <widget class="QPushButton" name="pushButton_4" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="1" column="0" >
    <widget class="QPushButton" name="pushButton_3" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="0" column="1" >
    <widget class="QPushButton" name="pushButton_2" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="0" column="0" >
    <widget class="QPushButton" name="pushButton" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
  </layout>

As you can see every item of the layout has the row/column coordinates that determines how the table is done; a quite different method from for example HTML.

But there is one part that is very similar to HTML and that is responsible for most problems. The following dialog has only three buttons, but the right one is in the middle.
3 buttons
The source code is:

 <layout class="QGridLayout" >
   <property name="margin" >
    <number>9</number>
   </property>
   <property name="spacing" >
    <number>6</number>
   </property>
   <item rowspan="2" row="0" column="1" >
    <widget class="QPushButton" name="pushButton_2" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="0" column="0" >
    <widget class="QPushButton" name="pushButton" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="1" column="0" >
    <widget class="QPushButton" name="pushButton_3" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
  </layout>

the property rowspan=”2″ tells the right cell to expand in two rows.
In the same way the property colspan expand the cell of the given columns.

This is a very powerful property that lets you draw very complex layouts, but usually you can’t force Designer to use it where you want, it always guess from the layout you have drawn, so you always must very precise; for example in this particularly bad drawn form wrong layout in theory you could expect a result like that right layout but if you click on the grid layout button you get that monstruosoty: wronger layout that correspond to this table: wronger layout table As you can see there are three empty cells (the bottom two resulted from the wrong vertical alignment of the right spacer) and a text label with rowspan=2 where it shouldn’t be.

This is a simple example, but in more complex dialogs this phenomenon could be very subtle and hard to spot.

Constructing a dialog

Let’s start with the bare dialog of the above example and we will progressively populate it with more widgets.

First of all, when you place the widgets, you must be very precise, in order to avoid the above problem. You should give to the dialog the very same aspect that you plan for the final one; usually the Qt tutorials emphasize that you don’t have to be very precise and will be designer that line up the layout, but thrust me, you have πŸ™‚
In this example, the left and right spacers must be exactly aligned with the label and the textbox, in order to avoid unneeded empty cells and the labels should be aligned well with the corresponfig text boxes.

Hint: for the most delicate parts (here the two spacers and the textbox) you can make an horizontal layout and then break it, only for obtaining the components placed well.

When you ‘re done you will obtain the structure of the following table:
right layout table
I always find a great help thinking about what structure of table, and what rowspan/colspan are needed in order to achieve a particular result (I know: HTML wreaks mind :D).

Adding things that breaks the flow

You may have guessed that the hard part of this article is making all the layout always centered and keeping the ideal line between the text labels and the line edits (or other kinds of widgets) continuous. So what happens when we introduce some titles that are aligned to the left that makes impossible to still use only two spacers, like this image?
grid with titles

You have to consider the layout broken in different logic “blocks” separed by the item that is not centered (in our case that bold labels), and then use one and only one spacer for every separate “block”.

Adding complex groups of widgets instead of a bare line edit

In this step we end up with this dialog:
almost complete
Nothing particular here, in order to avoid to render the main table too complex and avoiding ugly surprises, I suggest to grup the groups of widgets with an horizontal layout.

If there are widgets without label could be helpful to put a vertical spacer instead of the text label just to make sure that designer understand that cell should be void; it’s not necessary, but if you modify the layout designer could screw things up.

Adding multiline grids in the layout

Sometimes you have two or more lines containing more widgets that are almost identical and should be aligned in a grid, otherwise they would look very bad. In this case you will end up with a multiline block that will have a rowspan of 2 (or how many lines you will need) with the text labels (as many as the rowspan) aligned on the left of the group.

If you want a layout like this ugly grid I would say that a grid too big should be avoided (as usual, this is not a tip about usability, but only about what is simpler to do). The ugly thing is that you have no way to align items in a grid if there is a title in the middle that breaks the layout.
The only way is to align them into the main grid, but you can use this trick only one time, because another grid of different items would break down everything.

And there it is the final result, with the sources πŸ™‚ complete

Playing with a phone: Nokia 6630 and Linux

BlaBla

I’m playing with my new toy: it’s a Nokia 6630 (I know it’s quite old, but I wanted the s60 phone with more affordable price I could find :P).

Of course I still think the perfect Uber-Geek telephone of my dreams is this, but I fear such devices will remain to be low availability geeky devices unless the various linux phone manufactures will agree to some standard and interoperable platform…

By the way Symbian is truly a very nice little OS, the only pity It’s that it’s not so open, BTW Nokia offers a quite decent SDK, that supports only windows but is based on gcc, cygwin and Perl, I find this a true delirium, but is there some way to set up a working SDK also on Linux/OSX.

So I hope to be able to write something useful for it in the near future, maybe a tool for making a SMS backup without the uberevil PC-Suite (see below) and some themes, because all the futile things are the most important ones πŸ™‚ (and the nice thing is that both the apps and the themes are compatible with all S60v2 based phones, so stay tuned even if you have a model slightly different).

Getting it to play nice with Linux

The most important thing I want from it of course making it to play nicely with Linux, if only for the ugliness of the Nokia tool (PC-Suite, of course Windows only) that is an obtrusive, slow, buggy and bad looking thing πŸ™‚

In this section I will point to some very useful how-tos I found around here

So the things I would like to be able to do with it are:

  • Synchronizing addressbook, calendar and notes (works)
  • Transfer files with OBEX (works)
  • Reading/synching SMSes (still didn’t manage it to work)
  • Using the telephone as GPRS modem (works)
  • More perverse, using the computer as a modem for the telephone (works)

Of course all these things should work on both bluetooth and with the more convenient USB DKU-2 cable bundled with it.

Available tools

The tools I have tried in my journey are:

KMobileTools
It’s a really nice piece of work (of course the most decent UI on the whole lot :D), but unfortunately at the moment isn’t of much help because at the moment it only supports the old AT protocol that is very crippled on Symbian devices (there is an early Gammu support but unfortunately also Gammu isn’t of much help). All you can do is to see the battery and the signal levels and make outgoing calls.
Gnokii
It’s a tool specific for Nokia phones that (on S60 devices) features a “server” application called Gnapplet that runs on the phone. It should allow to access the addressbook and the SMS archive from the PC. I managed to access the addressbook, but when I try to download a SMS Gnapplet crashes (It also have been reported to crash on Nokia 6600).
Gammu
Gammu is a fork of Gnokii, but as KMobileTools I only managed to access the battery and signal levels with it.
OpenObex
It’s a tool to perform OBEX filetransfers between the phone and the PC, and it works flawlessly.
OpenSync
It’s a relatively new tool (and IMHO the most promising one) to synchronize the addressbook, the notes and the calendar between the phone and the PC, it supports various backends, from simple plaintext ones to integration within Kontact and Evolution. The installation was a little bit tricky but it works quite well.
Gnubox
It basically forces the phone to use its Tcp/ip stack over bluetooth. It installs into the phone and lets you share the internet connection of the PC with the phone.

Synchronizing addressbook, calendar and notes

A very complete how-to on configuring OpenSync can be found at http://blog.dukanovic.com/?p=5. As I said the installation was a little bit tricky because there are needed the most recent version of the tools downloaded form SVN. Only a little note: when he says to download wbxml2 version 0.9.0 and patch it, please do it! Even if the 0.9.2 version has integrated that patch, it doesn’t work (at least with that phone).

Transfer files with OBEX

The how-to can be found at http://wiki.splitbrain.org/nokia_6630. Once you have gotten Openobex working, you can access it via the command line based obexftp client or with an ugly Tcl/Tk interface called ObexTool, there is also a KDE kio-slave, but it doesn’t support an usb connection and I didn’t manage it to work neither on bluetooth. A most promising method is a fuse based filesystem called obexfs, but at the moment also it doesn’t seem to work very well.

Getting obexftp and obextool to work with bluetooth is more straightforward, in order to get them working with the USB cable is necessary to use a very recent version of openobex and obexftp and obextool needs to be patched.

Reading/synching SMSes

Unfortunately I still hadn’t managed it to work. AFAIK the only tool that can be used to access the SMSes is Gnokii (Wammu doesn’t seems to work), but as i said it accesses correctly the address book but Gnapplet keeps crashing when it downloads a SMS (I will seek in the gnapplet source code if I can find the cause but the code seems very cryptinc to me πŸ™ ). A basic gnokii setup is also covered on http://wiki.splitbrain.org/nokia_6630.

Using the telephone as GPRS modem

The how-to can be found at http://bitubique.com/content/view/26/42/. I still hadn’t tried it too much because it costs a butt-load of cash πŸ™‚

More perverse, using the computer as a modem for the telephone

notmart.org on Opera for S60

Because accessing the internet with the GPRS connection of your phone is soooo costly you may be interested to connect the phone to the internet sharing the connection of the PC. a good how-to can be found at http://www.rlachenal.com/bluetooth-6600-linux/. It’s for the Nokia 6600 but the procedure it’s nearly the same, there are only few minor things to account:

  • Download the right version of gnubox specific for the 6630 (gnubox_6630_80_81.sis)
  • In gnubox configuration set “2Box Bluetooth” to “Lan Access Server” (instead if you use in under Windows you must set it to “serial”. A good How-to for Windows xp can be found at http://web.singnet.com.sg/~kinston/Bluetooth%20Internet.htm)
  • After you have started dund and before actually trying to connect your phone to the internet you must go in the gnubox menu to debug->”bring up IF”
  • For Nokia phones it works only with Bluetooth, only for Sony Ericsson it can be used also over usb cable
  • Make sure that the shell script used here uses the right interface names, i.e. you create the interface from your PC to the internet (ppp0) before creating the interface from the phone to the PC (ppp1), otherwise you can change the interface names in that script. If you are connected to the internet behind an ethernet adsl router you may want to substitute “ppp0” with eth0.
  • the built in applications seems not to support the bluetooth provider, you must install 3rd party apps and configure them accordingly. On gnubox site there is a screenshot showing the configuration for Opera for S60
  • When the bluetooth connection is lost it stops working and it for some reasons can’t make a new one. The only way to fix it seems to reboot the phone (LOL :D)