• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

GUI in C

User avatar
mikethedj4
VIP - Site Partner
Posts: 2577

GUI in C

Mon Oct 25, 2010 2:47 pm

In one of our past tutorials I show you guys how to make a simple gui application using glade, and python programming. Today were going to be making a gui application using C programming, and this time were not going to be using glade. Also let me point out this is merely just a learning process, and we won't be creating at insane apps anytime soon. Like I already said this is simply just to learn off of, and get better as time goes on.

For a better understanding of what does what go hit up GTK+ Reference Manual.

NOTE: I've only tested this on GNOME based distros, and I'm unaware if this will work on KDE based distros.

Now with that being said all will need for this project is a test editor, and your terminal, but will open up our terminal later as we don't need it now.

Lets begin by incorporating the gui into our program as that's what were going to be creating.

Code: Select all

#include <gtk/gtk.h>
Now I'm going to put down a simple code below which will be a simple program (when you read the code everything is pretty much self explanatory)

Code: Select all

#include <gtk/gtk.h>
 
int main (int argc, char **argv) {
  GtkWidget *window;
  gtk_init(&argc, &argv);
 
  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title (GTK_WINDOW (window), "Simple App");
  g_signal_connect (G_OBJECT (window), "delete-event", gtk_main_quit, NULL);
  gtk_widget_show_all (window);
 
  gtk_main();
  return 0;
}
So far this is what our app looks like.
simpleapp1.png
Now not much going on fairly boring, but a great start for a learning process. Now begin looking at the code, and seeing what does what.

Now that you get an idea of how C programming works, lets resize our app.

Code: Select all

  gtk_window_resize(GTK_WINDOW (window),400,250);
Notice each time you do something in C you haft to define what you're coding, in our case because were coding the gui in C with the window we haft to define were talking about the window, while were telling it to resize at the same time.

So the last code we put down make sure you add it above

Code: Select all

  gtk_widget_show_all (window);
Now lets say instead we want the app to be in fullscreen, we would replace the code we used to resize it with...

Code: Select all

  gtk_window_fullscreen (window);
If you want to change the opacity of the window you'd put down...

Code: Select all

  gtk_window_set_opacity(GTK_WINDOW (window),0.5);
Now if you want your program centered when started up, you'd put down...

Code: Select all

  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
So hopefully you have an easy understanding of how C programming in Linux works, if you're still confused go ahead and hit up the GTK+ Reference Manual. It's a great place to learn how to code, and get better at coding if you've gotten the fundamentals down.

Anyway here's our final code for our program.

Code: Select all

#include <gtk/gtk.h>
 
int main (int argc, char **argv) {
  GtkWidget *window;
  gtk_init(&argc, &argv);
 
  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title (GTK_WINDOW (window), "Simple App");
  g_signal_connect (G_OBJECT (window), "delete-event", gtk_main_quit, NULL);
  gtk_window_resize(GTK_WINDOW (window),400,250);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_widget_show_all (window);
 
  gtk_main();
  return 0;
}
If you'd like to hide the program from the taskbar, just add the following code below where you show the window.

Code: Select all

  static gboolean skip_taskbar = TRUE;
  g_print ("skip_taskbar %d\n", skip_taskbar);
  gtk_window_set_skip_taskbar_hint (window, skip_taskbar);
  skip_taskbar = !skip_taskbar;
Now if you ever wanna change the program's background color. Here's the same app as above, except I changed it's background color, but I didn't hide it from the taskbar.

Code: Select all

#include <gtk/gtk.h>
#include <gdk/gdk.h>

int main (int argc, char **argv) {
  GtkWidget *window;
    GdkColor color;
      color.red = 0;
      color.green = 0;
      color.blue = 65025;
  gtk_init(&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title (GTK_WINDOW (window), "Simple App");
  gtk_widget_modify_bg(window, GTK_STATE_NORMAL, &color);
  g_signal_connect (G_OBJECT (window), "delete-event", gtk_main_quit, NULL);
  gtk_window_resize(GTK_WINDOW (window),400,250);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_widget_show_all (window);

  gtk_main();
  return 0;
}
Now that we've gotten that done now save your program as simpleapp.c

We now need to compile our program so open up your terminal and navigate to the directory/folder in which your simpleapp.c file is located. In my case it was my desktop so I'd put down the following terminal command...

Code: Select all

cd Desktop
If you save it in your home folder you don't need to so anywhere, but remember capitalization matters when using the terminal.

Now put down the following terminal command to compile our application. (Note: If this doesn't work install the following dependencies, and that'll fix it. libgtk2.0-dev | libgtk2.0-doc | libglib2.0-doc)

Code: Select all

gcc -Wall -g -o SimpleApp simpleapp.c `pkg-config --cflags --libs gtk+-2.0` -export-dynamic
You will now create an executable application of your program, and you don't need the source code to run the program, so some may like that, and other may not. Just though you might wanna know :) However the file should automatically be set to executable, but just to be on the safe side lets check by putting down the following terminal command...

Code: Select all

ls
simpleappterminalcommands.png
Looks like it's set as an executable which means we'll be able to run it, and there you guys go you just created a simple gui application in C.

Now even though you've already compiled your application. I wanna point out that if you ever wanna hide the cursor for whatever reason, you would need to import the GDK headers. (click here to learn about what GDK is.)

Just so you have a better understanding of how to do this, here's the source on how you'd hide the cursor.

Code: Select all

#include <gtk/gtk.h>
#include <gdk/gdk.h>

int main (int argc, char **argv) {
  GtkWidget *window;
  GdkCursor *cursor = NULL;
  gtk_init(&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  cursor = gdk_cursor_new(GDK_BLANK_CURSOR);
  gtk_window_set_title (GTK_WINDOW (window), "Simple App");
  g_signal_connect (G_OBJECT (window), "delete-event", gtk_main_quit, NULL);
  gtk_window_resize(GTK_WINDOW (window),400,250);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_widget_show_all (window);
  gdk_window_set_cursor (GTK_WIDGET (window)->window, cursor);

  gtk_main();
  return 0;
}
As you can see it's pretty simple, you add in a cursor, state the cursor is blank, and you set the cursor for the window.

You can go ahead, and download the compressed zip file below to view the source code, as well as try out the executable app we created.

Anyway that's how you can create a very simple GUI in C using GTK+.
You do not have the required permissions to view the files attached to this post.
Image
Image

Post Reply

Return to “Programming”