how to display images in thumnail manner in a GtkTree view

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

hello everybody,
I am currently in a process of developing a gtk+ application for image viewing. I have developed a simple GUI using glade, it consists of a text filed(to enter the name of the image to search), few buttons(Search, Exit ) and a tree view widget(to display the image once found, is this right ? should i need to use another kind of widget to display images). Once the user has entered the name of the image in the text field and hit Search button the image should be appear in the tree view widget(image display area), actually I am not going to the do the searching part, I can assume image in my hand all I need to do is to view that image in that tree view widget.(or in any suitable wiget)
All I want to know is how can I display the images in the tree widget area) , I am thankful to you if you give me a code sample, a link of a tutorial etc..,
Thank you very much. I greatly appreciate your help

-danr

Micah Carrick · **Posted:** Tue Nov 06, 2007 3:29 pm

You could simply use a GtkImage. Check out:

gtk_image_new_from_file ()

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

Thank you very much Micah, I'll look into that.
-danr

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

hi again,
Once I have created a GtkImage using the above function can I display them(more than one images) in a thumnail manner in the TreeViewWidget , if so please help me to figure out how this can be done.
Thanks for the help.

-danr

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

hello every body,
I was able to develop an image viewer (it can display images in a GtkTreeView Widget) , but those images available one after the other in their original size. I want them to appear in a thumnail manner(in small scale), so that a user can select an image. Any body know how can I do this(Am i need to add a table (may be 3 x 3 one so that i can display 9 images in the treeview) type widget inside the treeview widget) ?
Please help me. Thanks in advane

-danr

openldev · **Posted:** Wed Nov 14, 2007 4:51 pm

You can find information about scaling images here: http://library.gnome.org/devel/gdk-pixb ... aling.html

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

Thanks!

-danr

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

hello again,
So far I was able to display images in the TreeView widget(in a resized manner) in the raw column format. But when I select an image in the TreeView area the whole raw get selected, I wanted to select only a one images in a raw. I mean those images should be selected separately, is there is something wrong with my model, please help me, I have attached the code for model and view of the TreeViewWidget.
Thanks in advance

Code:

GtkWidget*
create_main_window (void)
{
// more code here
GtkCellRenderer *renderer1, *renderer2, *renderer3;
    GtkTreeModel *model;
    GtkTreeViewColumn *col1, *col2, *col3, *col4;

    model = GTK_TREE_MODEL(create_liststore());
    treeview1 = gtk_tree_view_new_with_model(model);
    
    col1 = gtk_tree_view_column_new();
    gtk_tree_view_append_column(GTK_TREE_VIEW(treeview1), col1);
    renderer1 = gtk_cell_renderer_pixbuf_new();
    gtk_tree_view_column_pack_start(col1, renderer1, FALSE); 
    gtk_tree_view_column_set_attributes(col1, renderer1, "pixbuf", NULL);


    col2 = gtk_tree_view_column_new();
    gtk_tree_view_append_column(GTK_TREE_VIEW(treeview1), col2);
    renderer2 = gtk_cell_renderer_pixbuf_new();
    gtk_tree_view_column_pack_start(col2, renderer2, FALSE);
    gtk_tree_view_column_set_attributes(col2, renderer2, "pixbuf", NULL);


    gtk_tree_view_set_model(GTK_TREE_VIEW(treeview1), model);

    g_object_unref(model);
    return main_window;
}

GtkListStore *
create_liststore(void)
{
    GtkListStore *store;
    GtkTreeIter iter;
    GdkPixbuf *icon1, *icon2, *icon3, *icon4, *icon5;
    const GdkPixbuf *scale_icon1, *scale_icon2, *scale_icon3, *scale_icon4, *scale_icon5;
    GError *error = NULL;

    store = gtk_list_store_new(1, GDK_TYPE_PIXBUF);

    icon1 = gdk_pixbuf_new_from_file("1.jpg", &error);
    
    if (error)
    {
      g_warning ("Could not load icon: %s\n", error->message);
      g_error_free(error);
      error = NULL;
    }
    scale_icon1 = gdk_pixbuf_scale_simple(icon1, 150, 100,GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter,COL_ICON, scale_icon1,-1);

    icon2 = gdk_pixbuf_new_from_file("2.jpg", &error);
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon2 = gdk_pixbuf_scale_simple(icon2, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON, scale_icon2, -1);

    icon3 = gdk_pixbuf_new_from_file("3.jpg", &error);
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon3 = gdk_pixbuf_scale_simple(icon3, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON,scale_icon3, -1);
       
    icon4 = gdk_pixbuf_new_from_file("4.jpg", &error); 
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon4 = gdk_pixbuf_scale_simple(icon4, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON, scale_icon4, -1);

    icon5 = gdk_pixbuf_new_from_file("5.jpg", &error);
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon5 = gdk_pixbuf_scale_simple(icon2, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON, scale_icon5, -1);

    return store;
}

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

jakh wrote:

hello again,
So far I was able to display images in the TreeView widget(in a resized manner) in the raw column format. But when I select an image in the TreeView area the whole raw get selected, I wanted to select only a one images in a raw. I mean those images should be selected separately, is there is something wrong with my model, please help me, I have attached the code for model and view of the TreeViewWidget.
Thanks in advance

Code:

GtkWidget*
create_main_window (void)
{
// more code here
GtkCellRenderer *renderer1, *renderer2, *renderer3;
    GtkTreeModel *model;
    GtkTreeViewColumn *col1, *col2, *col3, *col4;

    model = GTK_TREE_MODEL(create_liststore());
    treeview1 = gtk_tree_view_new_with_model(model);
    
    col1 = gtk_tree_view_column_new();
    gtk_tree_view_append_column(GTK_TREE_VIEW(treeview1), col1);
    renderer1 = gtk_cell_renderer_pixbuf_new();
    gtk_tree_view_column_pack_start(col1, renderer1, FALSE); 
    gtk_tree_view_column_set_attributes(col1, renderer1, "pixbuf", NULL);


    col2 = gtk_tree_view_column_new();
    gtk_tree_view_append_column(GTK_TREE_VIEW(treeview1), col2);
    renderer2 = gtk_cell_renderer_pixbuf_new();
    gtk_tree_view_column_pack_start(col2, renderer2, FALSE);
    gtk_tree_view_column_set_attributes(col2, renderer2, "pixbuf", NULL);


    gtk_tree_view_set_model(GTK_TREE_VIEW(treeview1), model);

    g_object_unref(model);
    return main_window;
}

GtkListStore *
create_liststore(void)
{
    GtkListStore *store;
    GtkTreeIter iter;
    GdkPixbuf *icon1, *icon2, *icon3, *icon4, *icon5;
    const GdkPixbuf *scale_icon1, *scale_icon2, *scale_icon3, *scale_icon4, *scale_icon5;
    GError *error = NULL;

    store = gtk_list_store_new(1, GDK_TYPE_PIXBUF);

    icon1 = gdk_pixbuf_new_from_file("1.jpg", &error);
    
    if (error)
    {
      g_warning ("Could not load icon: %s\n", error->message);
      g_error_free(error);
      error = NULL;
    }
    scale_icon1 = gdk_pixbuf_scale_simple(icon1, 150, 100,GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter,COL_ICON, scale_icon1,-1);

    icon2 = gdk_pixbuf_new_from_file("2.jpg", &error);
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon2 = gdk_pixbuf_scale_simple(icon2, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON, scale_icon2, -1);

    icon3 = gdk_pixbuf_new_from_file("3.jpg", &error);
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon3 = gdk_pixbuf_scale_simple(icon3, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON,scale_icon3, -1);
       
    icon4 = gdk_pixbuf_new_from_file("4.jpg", &error); 
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon4 = gdk_pixbuf_scale_simple(icon4, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON, scale_icon4, -1);

    icon5 = gdk_pixbuf_new_from_file("5.jpg", &error);
    if(error)
    {
        g_warning("Could not load icon: %s\n", error->message);
        g_error_free(error);
        error = NULL;
    }
    scale_icon5 = gdk_pixbuf_scale_simple(icon2, 150, 100, GDK_INTERP_HYPER);
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, COL_ICON, scale_icon5, -1);

    return store;
}

If you need the whole fragment of code let me know.
Thnaks for any help.
-danr

jakh · **Joined:** Sun Nov 04, 2007 10:46 am **Posts:** 12

i was able to develop the viwer to select image by image using a GtkIconView wiget, using the guide

http://www.kksou.com/php-gtk2/articles/display-a-list-of-thumbnail-images-using-GtkIconView.php

help me to come up with the solution, I made a note here for information of others.

-danr

GTK+ Forums

how to display images in thumnail manner in a GtkTree view

Who is online