How to create a GUI(Graphical User Interface) using C programming Language.. (part 2)

13 08 2011

Hi, this is the second part of the How to create a GUI(Graphical User Interface) using C programming Language..   post. In today’s post I’m going to tell you how to use Glade software to design a GUI for a C program. Now I think you have prepared your development environment :D.First we need to recognise the Glade environment..

  • Open glade, then you will a window like this. In the Top Levels tab of Palette select window and click on Editor.Then you will a Gray colour window on it. In the inspector view you can change the name of the window. To change the size and other properties go to properties.  This is not much smiler to Net-beans IDE, aligning component is much difficult. But this is much easier than hard coding :-).
  • Now we should add a container for the window to keep the other component on it. In the Containers tab of Palette select one of containers like Vertical Box then click on the Editor’s window.
  • Then It will look like this. But for example if you add a button component to one of this cell, it fills all overt the cell. But if you need you can further divide into more cells adding one or more containers. For example here I will add another table container into middle cell. Then it will look like this.
  • Ok now I’m going to add some component to it. Under Control and Display tab of the palette, find Button and Text Entry widgets(components), so add it the container.

Ok now Save the GUI you designed. In the Save or Save As menu, there are two options to save.

  1. GtkBuilder
  2. Libglade

Choose the File Format Libglade, and save it as hello_world.glade, because in this tutorial I work with libglade. If you just look at your .glade file by opening with Texteditor. You will see XML coding there.. Yes! of course .glade is XML file format. GtkBuilder file type also generates the same .glade file. But when taken in the file structure GtkBuilder and Libglage are different from each other.

Now I think you may wondering how to connect this Button signals(Actions) to a C program ??

Now click on the Button of your GUI, then click Signals tab under the Properties. Then find Clicked and select on_button1_clicked (Button’s name property is ‘button1’ , so the signal name become on_button1_clicked). Now Save changes.

After we set the signals in our GUI in the glade, we can simply call them (as example) like this.

void on_button1_clicked(GtkWidget *widget,gpointer *data){

// your custom code here!

}// end method

Ok in next post we will discuss how run a hello_world GUI program using C :D.

 

Thank you

Gihan De Silva





How to create a GUI(Graphical User Interface) using C programming Language..

12 08 2011

How to create a GUI(Graphical User Interface) using C programming Language???  That was a big problem to me when I’m in the University first year. I knew Java GUI Designing, but couldn’t find way to do it in C language. I spent many time to learn that. I think now it’s time to share those knowledge :D. But since there are lot to discuss on that topic, I’m going to spelt the whole tutorial into several posts.  In this post I’ll discuss how to set up the development environment.

Setting up the development environment for C language GUI designing.

Ok let’s begin. First we need to have several tools for that.

1) Code Blocks IDE

2) Glade IDE

3) Gtk+

4) Libglade library

So install those things on your computer. I’ll give a hint to get it much easier. If you are Ubuntu user, go to Ubuntu software center or Synaptic package manager. Find code blocks and install. Then Find for Glade and before install, check all the Add-ons then install. In this way it will automatically install gtk+ and libglade. So you don’t want to worry about that:D.

A screen shot of Code Blocks IDE..

Now you have to configure Compiler and Debugger settings in Codeblocks IDE.

  • Open Code Blocks–> goto Compiler and Debugger settings

  • Select Other options in Compiler settings tab and paste this.

            `pkg-config –cflags gtk+-2.0 gmodule-export-2.0`
            `pkg-config –cflags libglade-2.0`

  • Then select Other linker options in Linker settings tab and paste this.

           `pkg-config –libs gtk+-2.0 gmodule-export-2.0`
           `pkg-config –libs libglade-2.0`

A screen shot of Glade Interface designer…


But you always free to compile your program on the terminal too. If you wish to do so it should be like this.

gcc `pkg-config –cflags libglade-2.0 –libs gtk+-2.0“pkg-config –libs gtk+-2.0 gmodule-export-2.0` main.c

Ok thats all for now . In next post I’ll explain how to Design a GUI using Glade Interface Designer :D.

 

Thank you

Gihan Malan De Silva @ gihansblog.com





How to change the boot loader

4 08 2011

Hi, today I’m going to introduce an important windows software . The reason to talk about this software was an personal experience of me. Recently I had to install Win 7 on my Laptop to work with Photoshop CS5 for designing some graphics. So after I install the Win 7 suddenly I realise then my Ubuntu is no more functioning. That means Master Boot Record was changed. In that case , I used Easy BCD software to correct that boot records.

DOWNLOAD Easy BCD here!

Installing Win7 after Linux always happens this. So you have to change boot records after installing (only if you don’t see the boot menu).

To change the boot records with the dual boot system. Open Easy BCD

Then click Add New Entry . Then you will see a window like this.

Then click Linux BSD tab, change under type: as GRUB(Legacy)

Then reboot the computer, you will see your boot menu. That’s all 😀

In this post I would like to mention and say thanks to my friend Buddika for introducing EasyBCD to me.

Thanks

Gihan De Silva @ gihansblog.com





How to install Apache Tomcat server on Ubuntu 11.04

29 07 2011

Hi, Today I’m going to tell you how to install Apache tomcat server on your Ubuntu (Linux) computer. You can install and use it as a portable installation on your pen drive too.Apache tomcat server is used to run .jsp file (Java Server Pages). So first you need to download Apache Tomcat 7.0 from Apache site.

DOWNLOAD Apache tomcat here!..

Ok let’s do it. Now extract the downloaded apache-tomcat-7.0.19.tar.gz file into desktop or to your pen drive.

Then rename it as tomcat (only for our convenience)

Open Terminal window (Ctrl+Alt+T)

Then go to this folder using this command : cd Desktop/tomcat/bin ( assuming you extracted on your Desktop )

Then run this command(run startup.sh shell script) : ./startup.sh

Now open firefox go to this URL : http://localhost:8080/ . Then you should see it like this!

Now try a jsp script to test the installation.

If you want to, copy this code and save it into tomcat–>webapps–>ROOT as hello.jsp  Then run it http://localhost:8080/hello.jsp  😀

<html>
<head>
<title>JSP Test page.</title>
</head>
<body>
<p align=”center”><font color=”#009900″ size=”7″><%=”gihansblog.com”%></font></p>
<p align=”center”><font color=”#FF0000″ size=”6″><%=”Hello JSP World!”%> </font></p>
<p><%= new java.util.Date()%></p>
</body>
</html>

To shut-down the Tomcat server use this command(run shutdown.sh shell script) : ./shutdown.sh

Thanks

Gihan





Moving to a new domain name… gihansblog.com

28 07 2011

Hi, A little Announcement for all the readers of Gihan’s Blog. That is gihansblog.wordpress.com moving to gihansblog.com :D. Now it’s been around two months that I’ve started this blog. There are lot of people who give me strength to carry on this blog by commenting, discussing and saying ‘Hi’.And I appreciate all those things.

I got this domian name form GoDaddy.com. And I forwarded it into my old wordpress domain name through their forwarding facilities.  And anyone interesting on more info about getting a domain, masking ,forwarding or anything regarding this , I’d like to share my experience. 😀

Now you can find my Blog on http://gihansblog.com/ . 😀

Thank you

Gihan Malan De Silva @ gihansblog.com/





Java 7 Released… (watch the video)

19 07 2011

Good and very Important News for all. That is Java 7 had released on 7th July 2011. Ceremony speech was given by Adam Messinger, vice president of development Fusion Middleware. According to dream team of Java , in the new version of Java has a big different comparing than the other versions of Java. And this is the first release of Java with Oracle company.And they has made it as MOVING JAVA FORWARD!

With Oracle, Java’s future  has goes with  the  new technology, the community, the Java Community Process (JCP), and the entire ecosystem focused on moving Java forward.

And they has categorised new Technical Breakout of Java 7

  1. Making Heads and Tails of Project Coin, Small Language Changes in JDK 7
  2. Divide and Conquer Parallelism with the Fork/Join Framework
  3. The New File System API in JDK 7
  4. A Renaissance VM: One Platform, Many Languages

Java 7 Released… from Gihan on Vimeo.

Just watch it. It’s worth to watch…

Thanks

Gihan Malan De Silva





Rotate an image with java Buffered image class..

14 07 2011

Hi, today I’m going to show you another image enhancing technique with Java’s Buffered image class. That is rotating an image. To rotate an image with Java we use classes called AffineTransform and AffineTransformOp. And let’s see how to rotate an image. It is very easy as previous things.

In this post I’m not going to describe basics like creating an buffered image, display a buffered image on a JLabel..  etc .. but to describe methods I wrote in my program.

1). public void rescale() {}

2). private void rorateImg() {}

Let’s consider one by one..

public void rescale() {

        tx = new AffineTransform();
        tx.rotate(angel,w / 2, h / 2);//(radian,arbit_X,arbit_Y)

        op = new AffineTransformOp(tx,AffineTransformOp.TYPE_BILINEAR);
        bufferedImage=op.filter(bufferedImage,null);//(sourse,destination)

       }//end rescale()

Before rotating the image...

In rescale() method I’ve created an AffineTransform object then called the rotate() method.

tx = new AffineTransform();

double theta, double anchorx, double anchory parameters should be passed into the rotate() method. This method rotates an image around an anchor point which coordinates equals to anchorx,anchory . And the theta should be give in radians. And this procedure equal to these three operations.
translate(anchorx, anchory);      // final translation
rotate(theta);                                 // rotate around anchor
translate(-anchorx, -anchory);   // translate anchor to origin

double angel=Math.PI/2;

This Math.PI/2 equals to 90 degrees.

   int w;// width of buffered image
   int h;//height of buffered image

then Buffered Image’s getWidth() and getHeight() methods assigns image’s width and height into w and h.

  w= bufferedImage.getWidth();
  h=bufferedImage.getHeight();

tx.rotate(angel,w / 2, h / 2);

By assigning w/2 and h/2 into anchorx and anchory I made the image to rotate around it’s center point. Then AffineTransformOp object is created. When creating the object an AffineTransform object and Bilinear interpolation type are given as parameters.

op = new AffineTransformOp(tx,AffineTransformOp.TYPE_BILINEAR);

Then the filter() method is called with AffineTransformOp object. This public final BufferedImage filter(BufferedImage src, BufferedImage dst) method is more likely the filter() in RescaleOp which we discussed. And this method compares source and destination images then returns the filtered buffered image. 

bufferedImage=op.filter(bufferedImage,null);

After rotating the image...

private void rorateImg(){

        w= bufferedImage.getWidth();
        h=bufferedImage.getHeight();

        rescale();             

        icon = new ImageIcon(bufferedImage);          
        picLabel.setIcon(icon);

    }//end rotateImg()

In here I earlier discussed what happens with w= bufferedImage.getWidth(); and h=bufferedImage.getHeight(); . Then rescale() method is called and the other codes describes the displaying the buffered image on a JLabel. 😀 😀 ok that all.

And here is related Java docs.

1) AffineTransform

2) AffineTransformOp

Here is the source code of it and if you want you can DOWNLOAD my Netbeans project. And it has two classes Rotate.java and Main.java which is included the main method.

Main.java

/*
 * Main.java
 */
package rotate;

/**
 *
 * @author gihan
 */
public class Main {
     public static void main(String[] args) {
        Rotate obj=new Rotate();
    }

}

Rotate.java

/*
 * Rotate.java
 */
package rotate;

import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.awt.image.RescaleOp;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;

/**
 *
 * @author gihan
 */
public class Rotate extends JFrame{

    // globel variables

    BufferedImage bufferedImage;
    RescaleOp rescale;
    ImageIcon icon;
    AffineTransformOp op;
    AffineTransform tx;
    int w;// width of buffered image
    int h;//height of buffered image
    double angel=Math.PI/2; /** angle should be given in radian and
                                        * this program rotates the image in 90 degrees */
    String path=”/home/gihan/Pictures/nfs_bmw.jpg”;// image file path  
    JLabel picLabel=new JLabel();

    public Rotate(){

         JFrame jf=new JFrame();
         JPanel jp=new JPanel();        

         jf.add(jp);
         jp.add(picLabel);

            jf.setVisible(true);
            jf.setSize(487, 640);
            jf.setLocation(200,200);
            jf.setTitle(“Gihan’s Image Processing Test Area.. “);
            jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

            File file = new File(path);

        try {           
            bufferedImage = ImageIO.read(file); // create a buffered image
        } catch (IOException ex) {
            Logger.getLogger(Rotate.class.getName()).log(Level.SEVERE, null, ex);
        }
            rorateImg();

         icon = new ImageIcon(bufferedImage);          
         picLabel.setIcon(icon);
    }

    private void rorateImg(){//rotates 90 degrees

        w= bufferedImage.getWidth();
        h=bufferedImage.getHeight();

        rescale();             

        icon = new ImageIcon(bufferedImage);          
        picLabel.setIcon(icon);

    }

    public void rescale() {

        tx = new AffineTransform();
        tx.rotate(angel,w / 2, h / 2);//(radian,arbit_X,arbit_Y)

        op = new AffineTransformOp(tx,AffineTransformOp.TYPE_BILINEAR);
        bufferedImage=op.filter(bufferedImage,null);//(sourse,destination)

       }

}//end class Rotate

 

If you have any doubt, feel free to ask. :D
Thank you

Gihan Malan De Silva @ gihansblog.wordpress.com