maemo.org - Talk - Maemo 5 touch lists

maemo.org - Talk (https://talk.maemo.org/index.php)

- Development (https://talk.maemo.org/forumdisplay.php?f=13)

- - Maemo 5 touch lists (https://talk.maemo.org/showthread.php?t=33145)

Unknown Maemo 5 Touch lists - How do we make these?

I'm trying to figure out how to make the list style below. Yerga suggested the use of GTK TreeView, which I tried, but sadly it doesn't come out anything like this.

So we need to identify:

What collection of widgets produces the style of list below.
How it works.

http://www.mobile-review.com/review/.../scr/scr33.jpg

If we're going to make apps that include lists which arent just a big ladder of hildon buttons, we need to know what this is and how it's done.

Any ideas? :confused:

Edit: see also:

http://www.mobile-review.com/review/...cts/cont04.jpg

and

http://www.mobile-review.com/review/...cts/cont08.jpg

Re: Maemo 5 touch lists

I've been chatting to tigert in #maemo and he's narrowed it down to Hildon Touch List.. Now we/i/someone just have to find it in the reference manuals..

Re: Maemo 5 touch lists

Quote:

Originally Posted by code177 (Post 352287)

I've been chatting to tigert in #maemo and he's narrowed it down to Hildon Touch List.. Now we/i/someone just have to find it in the reference manuals..

the "hildon touch list" is the ui specification term for the list. See Hildon 2.2 Widget UI Specification for the mapping between terms and implementation.

Read the details from the doc in the link, but essentially you want to use hildon_pannable_area_new() and put hildon_gtk_treeview_new() inside it.

the list item layout is done as normal for gtktreeview. For more elaborate stuff, you use CustomCellRenderer. See opensource Maemo 5 apps on how to use it, or look up in gtktreeview documentation.

Re: Maemo 5 touch lists

A example in Python code:

Code:

import hildon, gobject, gtk



class UI:



    def __init__(self):

        self.window = hildon.Window()

        self.window.connect("destroy", gtk.main_quit)



        parea = hildon.PannableArea()



        # gtk.HILDON_UI_MODE_NORMAL -> not selection in the treeview

        # gtk.HILDON_UI_MODE_EDIT -> selection in the treeview

        treeview = hildon.GtkTreeView(gtk.HILDON_UI_MODE_NORMAL)



        model = self.create_model()

        treeview.set_model(model)



        self.add_columns_to_treeview(treeview)



        parea.add(treeview)



        self.window.add(parea)

        self.window.show_all()



    def create_model(self):

        lstore = gtk.ListStore(gtk.gdk.Pixbuf, gobject.TYPE_STRING)



        data = ["Blue color", "Red color"]

        colors = ["blue.png", "red.png"]



        iconlist = []

        for i in range(len(colors))*10:

            iconlist.append([data[i], colors[i]])



        for item in iconlist:

            liter = lstore.append()

            lstore.set(liter, 1, item[0], 0, self.set_pix(item[1]))



        return lstore



    def set_pix(self, filename):

        pixbuf = gtk.gdk.pixbuf_new_from_file(filename)

        return pixbuf



    def add_columns_to_treeview(self, treeview):

        #Column 0 for the treeview

        renderer = gtk.CellRendererPixbuf()

        column = gtk.TreeViewColumn()

        column.pack_start(renderer, True)

        column.add_attribute(renderer, "pixbuf", 0)

        treeview.append_column(column)



        #Column 1 for the treeview

        renderer = gtk.CellRendererText()

        column = gtk.TreeViewColumn('title', renderer, text=1)

        column.set_property("expand", True)

        treeview.append_column(column)





if __name__ == "__main__":

    UI()

    gtk.main()

Put the blue and red squares in the same directory where the script and call them blue.png and red.png (or you can change the script to use your own images and data).

If you want put the images in a HildonTouchSelector, the code is a bit different than in the Treeview from the example. If you need it ask for it ;-)

Re: Maemo 5 touch lists

In order to get the correct text style for the secondary text (the font size and the color - see the browser bookmarks screenshot above), you can use functions from this module (in Python; for C, there's hildon-helper.c in the Hildon source code):

http://repo.or.cz/w/gpodder.git?a=bl...rmntl/style.py

An example of how I used this to get the correct style for a ListStore:

http://repo.or.cz/w/gpodder.git?a=bl...frmntl/opml.py

The final result can look like this:

http://khan.thpinfo.com/~thp/images/...text-style.png

Re: Maemo 5 touch lists

You guys are awesome! I'm going to try these out tonight and see if it works.

Re: Maemo 5 touch lists

Quote:

Originally Posted by thp (Post 352471)

There's a step I'm missing here, maybe somebody can point me in the right direction:

How do i turn output of "<span font_desc="Nokia Sans 18" foreground="<GdkColor at 0x9xx..." into Nicely-Formatted-Text-String?

Re: Maemo 5 touch lists

The solution to this:

Code:

set 

Gtk.TreeViewColumn('title', renderer, text=1)

to

Gtk.TreeViewColumn('title', renderer, markup=1)

and make sure the string you're appending is escaped (import cgi, cgi.escape) for bad characters.

Thanks!

Re: Maemo 5 touch lists

Although I have dabbled in python, it's my first time playing with anything GTK/GUI related.

I have created and populated a treeview no problems - mostly thanks to the info above (thanks!).

Are there any example of how to filter the treeview when the user types on the keyboard? Kind-of how the contacts list works. I hope its easy, as I am only just getting the hang of what I've done already!

Cheers!

Re: Maemo 5 touch lists

Quote:

Originally Posted by yerga (Post 352463)

A example in Python code:

(code snippet removed, see above)

Put the blue and red squares in the same directory where the script and call them blue.png and red.png (or you can change the script to use your own images and data).

If you want put the images in a HildonTouchSelector, the code is a bit different than in the Treeview from the example. If you need it ask for it ;-)

Thanks for your example. I'm coding a remote controller app for Squeezebox with python, and I need a window that can display the current playlist. I was prototyping the layout, and the one that I thought to use is a list with

- note symbol on the left showing the currently played track
- track name + "\n" + artist
- track duration

I can show note symbol and track name/artist, but not duration. On the column showing the duration I was get a copy of track name/artist column's content. Why this happens? What I'm doing wrong?

Code:

import hildon, gobject, gtk



class UI:



    def __init__(self):

        self.window = hildon.Window()

        self.window.connect("destroy", gtk.main_quit)



        parea = hildon.PannableArea()



        # gtk.HILDON_UI_MODE_NORMAL -> not selection in the treeview

        # gtk.HILDON_UI_MODE_EDIT -> selection in the treeview

        treeview = hildon.GtkTreeView(gtk.HILDON_UI_MODE_NORMAL)



        self.add_columns_to_treeview(treeview)



        model = self.create_model()

        treeview.set_model(model)





        parea.add(treeview)



        self.window.add(parea)

        self.window.show_all()



    def create_model(self):

        lstore = gtk.ListStore(gtk.gdk.Pixbuf, str, str)



        lstore.append([None, "6. Arie. Buss und Reu\n<small>Andreas Scholl</small>", "3:23"])

        lstore.append([self.set_pix("note.png"), "35. Arie. Geduld, Geduld!\n<small>Werner Gura</small>", "2:49"])



        return lstore



    def set_pix(self, filename):

        pixbuf = gtk.gdk.pixbuf_new_from_file(filename)

        return pixbuf



    def add_columns_to_treeview(self, treeview):

        #Column 0 for the treeview

        renderer = gtk.CellRendererPixbuf()

        column = gtk.TreeViewColumn()

        column.pack_start(renderer, False)

        column.add_attribute(renderer, "pixbuf", 0)

        column.set_min_width(40)

        treeview.append_column(column)



        #Column 1 for the treeview

        renderer = gtk.CellRendererText()

        column = gtk.TreeViewColumn("title", renderer, markup=1)

        column.set_property("expand", True)

        treeview.append_column(column)



        #Column 2 for the treeview

        renderer = gtk.CellRendererText()

        column = gtk.TreeViewColumn("times", renderer, markup=1)

        treeview.append_column(column)



if __name__ == "__main__":

    UI()

    gtk.main()

Screenshot below:
Attachment 7180

And here the note.png used by the code:
Attachment 7181