10.3. Gtk2::Gdk - On Screen Clock

10.3.1. Classes new to us.

In the tables above there are classes new to us. This section will briefly list each one plus their use in our application.

Gtk2::Style: Almost every displayable Gtk2 widget has a style associated to it. You can modify or use certain methods from a widget's associated style class.

Gtk2::Pango: This is used especially for internationalization purposes. It also allows you to modify how text will be presented on screen

Gtk2::DrawingArea: We will use this as a simple canvas to draw pango text upon. It can also be used to draw lines, dots, colors etc upon.

Gtk2::Gdk::Pixbuf: This is like the word says, a buffer of pixels. These pixels can be sourced from various places, the Gtk2::Gdk::Pixbuf is used on the X client where the Gtk2::Gdk::Pixmap is used on the X server. The pixels can be modified.(read image manipulation) We can change certain colors to a alpha channel. Scaling is also possible.

Gtk2::Gdk::Colormap: Colormaps are used to store the mappings between the RGB values you ask for and the actual, hardware-dependent values used to display those colors. We will use the default system colormap.

Gtk2::Gdk::Drawable: This class allows you to use the Gtk2::DrawingArea and the Gtk2::Gdk::Pixmap as a canvas, by supplying various drawing methods. Both of them are subclasses of Gtk2::Gdk::Drawable

10.3.2. Discussion on the program.

The program will be implemented as follows:

• We create a Gtk2::Window of type "popup", add a Gtk2::VBox to it.

• We create a Gtk2::EventBox and add a Gtk2::Image to it, then we add it to the Gtk2::VBox and make them all visible.

• Now we create a Gtk2::DrawingArea and, since it does not have any size, we have to allocate quite a large size to it, to make sure we do not run out of space when we draw upon it. This is added the Gtk2::VBox but only realized, and not shown, since we will only use it as a workspace.

• We also implement a timeout that will run a sub every second.

• We fetch the local Gtk2::Gdk::Colormap from the system, and we create a pango layout from the Gtk2::DrawingArea.

We will now look what the sub that gets called every second does.

• We fetch the text that needs to be displayed. In our sample, we get the local time, and we format it using the pango markup language. This is added to the created pango layout.

• Get the size of the newly formatted pango layout.

• Create a Gtk2::Gdk::Pixmap the size of this pixmap, draw the pango onto the Gtk2::Gdk::Pixmap.

• Create a Gtk2::Gdk::Pixbuf and fetch the text from the Gtk2::Gdk::Drawable. Mask out the background to an alpha channel.

• Project this Gtk2::Gdk::Pixbuf with transparent background onto a Gtk2::Image.

• Change the shape of the Gtk2::Window.

10.3.3. The program's interface.

10.3.4. The Code

The program can be found here: 'OSD Clock'

	
 #!/usr/bin/perl -w
 
 use strict;
 use Glib qw/TRUE FALSE/;
 use Gtk2 '-init';
 
 #add a timer to run each second
 Glib::Timeout->add (1000,\&new_screen);
 
 #create a popup window -> this allow us to modify its shape to 
 #that of a Gtk::Gdk::Pixmap class.
 my $window= Gtk2::Window->new('popup');
 
 	
 	#standard packing widget
 	my $vbox = Gtk2::VBox->new(FALSE,0);
 
 		my $eventbox = Gtk2::EventBox->new();
 		$window->signal_connect('button-press-event' => sub{ exit(0);});
 		#create an image containing nothing, this will be set each time 
 		#the &new_screen sub runs
 		my $img = Gtk2::Image->new_from_pixmap (undef, undef);
 		
 		$eventbox->add($img);
 	
 	$vbox->pack_start($eventbox,FALSE,FALSE,0);
 	
 $window->add($vbox);
 
 $window->set_position('center-always');
 #show all BEFORE we add $drawing_area - we do not want to show the drawing
 #area, we only use it as a working surface.
 $window->show_all();
 
 	#Create a drawing area, and set is big enough to hold the maximum size our 
 	#text will ever be.
 	my $drawing_area = Gtk2::DrawingArea->new;
 	$drawing_area->set_size_request (1600, 1600);
 	$vbox->pack_start($drawing_area,FALSE,FALSE,0);
 	
 	#realize it, since it will not be displayed, but we need to 
 	#get hold of the Gdk classes that needs it to be either shown,
 	#or realized
 	$drawing_area->realize;
 		#create a new pango layout for this drawing area 
 		#this is a method from the Gtk2::Widged class
 		my $pango_layout = $drawing_area->create_pango_layout("");
 		#get the defalt colormap (will be needed later on)
 		my $colormap = Gtk2::Gdk::Colormap->get_system;
 	#initial paint of screen
 	&new_screen;
 
 Gtk2->main;
 	
 sub new_screen {
 
 	#this sub will get a new value of text, and display it on the screen in a shaped 
 	#window, to get there needs a few steps
 
 	#get the text that we want to display on the screen.
 	my $ts = ret_time();
 	
 	#Set our pango layout, to reflect the text and format that we want.
 	#NOTE We deliberately set the background to a certain color to convert 
 	#that color to a alpha channel, that will give us the "clear" background. 
 	$pango_layout->set_markup("<span background = '#000000' foreground = '#FF0000' size = '20000' weight ='heavy'>Exact time:\n</span><span background = '#000000' foreground= '#00FF00' size='30000' weight = 'ultralight'><i><u>$ts</u></i></span>");
 	
 	#Get the size of this layout after the text was set.
 	my($pango_w,$pango_h)=$pango_layout->get_pixel_size;
 	
 	#Now we have the size, we can create a pixmap that will be the
 	#'Gtk2::Gdk::Drawable' that we will draw upon
 	my $pixmap = Gtk2::Gdk::Pixmap->new ($drawing_area->window,
                                     $pango_w,
                                     $pango_h,
                                     -1);
 	#Draw a black block on $pixmap the size of the pango text.
 	#This allow us to use newlines in the pango text, just make sure the pango
 	#background is also black, as to convert all the black to a alpha channel			    
 	$pixmap->draw_rectangle ($drawing_area->style->black_gc,
                         TRUE,
                         0, 0,
                         $pango_w,
                         $pango_h);
 			
 	#draw the pango layout on the drawable.
 	$pixmap->draw_layout($drawing_area->style->white_gc,0,0,$pango_layout);
 	
 	#create a Gtk2::Gdk::Pixbuf that we will use to grab the pango text from the
 	#drawable (Gtk2::Gdk::Pixmap which is a Gtk2::Gdk::Drawable) 
 	my $pixbuf = Gtk2::Gdk::Pixbuf->new ('rgb', TRUE, 8, $pango_w, $pango_h);
 	
 	#here we get create a pixbuff from the drawable, this is where we need the colormap
 	$pixbuf->get_from_drawable ($pixmap, $colormap, 0, 0, 0,0, $pango_w, $pango_h);
 		
 		#Remove the background (we use the color we specified as the pango text's
 		#background
 		$pixbuf = $pixbuf->add_alpha (TRUE, 0, 0 , 0);
 		
 		#create a pixmap and mask from the Gtk2::Gdk::Pixbuf
 		my ($pm, $m) = $pixbuf->render_pixmap_and_mask (255);
 	#shrink our window to make sure the mask and pixmap will be on the same spot.
 	$window->resize(4,4);
 	#replace the old $img with the new pixmap and mask
 	$img->set_from_pixmap ($pm, $m);
 	
 	#shape our window accordingly
   	$window->shape_combine_mask ($m, 0, 0);
   	
 	return TRUE;
 	
 }
 
 
 sub ret_time {
 	#sub to return a string containing the time
 my($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst)= localtime(time+3600);
   	my @lst =("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
   	my $thisday =$lst[$wday];
   	$year = $year + 1900;
   
   	($sec =~ m/\d{2}/)||($sec = "0".$sec);
   	($min =~ m/\d{2}/)||($min = "0".$min);
   	($hour =~ m/\d{2}/)||($hour = "0".$hour);
   	$mon = $mon +1;
   	#print("\n");
   	my $ts = "$thisday $mday/$mon/$year $hour:$min:$sec";
 	
 	return $ts;
 }