Create  Edit  FrontPage  Index  Search  Changes  History  RSS  Login

tut-gtk2-dancr-intro

Introduction

(12.1)

Though, the emphasis in this chapter is going to be on Ruby Cairo graphics library, in order to gain sufficient command of Ruby graphics and GUI programming, we should really look at both the pure GTK as well as Cairo graphics features as they overlap in any serious GUI program. But to even begin to talk about the Cairo library functionality where it overlaps with the regular GUI programming, for instance such as, mixing user input within Cairo graphic context, i.e. drawing dots, lines, and other geometric shapes, undoing and redoing earlier drawing actions, as well as, dragging and dropping drawn graphic objects, we need to be sufficiently knowledgeable about both of these two graphic environments (libraries) before user starts interfering with them.

Up to this chapter, in this tutorial, we have become reasonably familiar with our Ruby GUI based on pure GTK. However, even in the area of pure GTK without the Cairo library, many things are still shrouded in mystery. Most noticeably, we are considerably inexperienced and lacking most of the details, of how any kind of drawing is stored in the memory, when only different parts of it should be removed and redone, and most importantly, how it changes with time, as a user draws or deletes parts of the larger drawing, graphic piece or image. Not surprisingly, we are also very poorly acquainted with the backgrounds onto which one draws or paints, as well as with understanding of what a drawing or an image is. For instance, is it an object on its own, or does the drawn item become a part of the background when finally drawn, painted, or rendered onto the 'drawable'? Therefor, when GTK was augmented with Cairo graphics library, which itself contains its own drawable backgrounds, it becomes necessary to learn what are the relationships between these drawable areas and drawn/painted images in either of these two environments.

The best way to get introduced to these issues is by trying to tackle the real life graphic programming issues related to background surfaces to which a user should be able to draw, paint or programmatically generate geometric shapes, and miscellaneous images, and most importantly from which he or she should also be able to remove drawings and/or images after they were drawn, painted or copied and rendered to the electronic surfaces and/or devices, most often, but not exclusively, the computer screens. This latest functionality in most GUI environments is dubbed "undoing" and/or "redoing".

We have indeed, just slightly, touched on these issues already in previous chapter in paragraph 11.1 "Drawing Widgets" discussing program called 'drawingareas.rb', suggesting you get familiar with the way user interactions may cause a drawing area to be redrawn (actually cleared, and how the programmer must make sure the drawn items do not get lost) when window is moved, resized, or even when focus is changed on widgets and windows. The program also implements the most basic "redo" functionality, by allowing user to clear the screen by pressing the Delete key.

Though, what is shown in chapter 11 in 'drawingareas.rb' program is far from what the full-blown "undo/redo" functionality would look like, understanding the two, namely, the manual clearing of the drawing area on the one hand, and on the other the automatic clearing/redrawing of the window when 'expose-event' is emitted, is absolutely required before you can attempt to implement stacked, partial "undo/redo" behaviours, usually triggered when user repeatedly presses the<Ctrl+Z>keys, which also reveal how copies of drawing area surfaces have to be stored by the programmer each time electronic pen, brush, or 'eraser' is applied to the drawing area. In fact the illusion of the phantom (non-existent) 'electronic eraser' is achieved, by repainting the drawing surfaces with the saved image of the drawing area before user made the latest changes to the surface. Subsequently pressing the "<Ctrl+Z>" key combination, repaints the drawing area with the image stored before the earlier re-stored image, ... (note, we are using the<Delete>key rather than "<Ctrl+Z>" key combination to clear the screen in our example programs here).


1201-DrwAreaWithStretchableBgImage-00.png We will delve into our investigation of drawing surfaces, by rewriting the 'drawingareas.rb' program from chapter 11, turning the plain single colour background surface into a background adorned with an arbitrary image you load from an image file on your disk.

Needless to say, the main feature in this new version of the above drawing program from paragraph 11.1 is the dynamically re-sizable background, responding to users' changing the size of the parent window containing the drawable area with any image you choose as the background. However, even more valuable aspect of this new 'drwar01-rsizble-stretched-pxb-bg.rb' program here, as well as the next 'drwar02-rsizble-tailed-pxb-bg.rb' program, is its exposure of the differences between the background surface and the drawings or 2D images user draws, paints or copies onto the background surface. In reality this distinction is rather fuzzy, namely, anything you draw or otherwise paint to the background can become a new background, nevertheless, in this, and in the next program, we are going to keep one and the same background (with its original image) throughout the duration of any one program execution.


1201-DrwAreaWithStretchableBgImage-both-s1.png


'rsizble-stretched-pxb-bg.rb' program example notes:

(12.1.1)

Let's now look at the program:

Programmer's Note:

(12.1.1.1) HikiGtk module can be viewed and copied from section: 10.2.1.1 [Time To Start Using Object-Oriented Programming Paradigm], however, as you will see after the next, not this (12.1.1), example, we are going to expand and upgrade ourHikiGtkmodule to include background manipulation functionality.

To run this program, indeed, you need the image file with which you wish to adorn your background. At the bottom of this article I include the image I am using in these examples. You should copy it into the directory (folder), in which your programs reside. File name should be:"FreeBSD-doc.jpg".



drwar01-rsizble-stretched-pxb-bg.rb



'rsizble-tailed-pxb-bg.rb' program example notes:

(12.1.2)

1201-rsizble-tailed-pxb-bg-S-s1.png1201-rsizble-tailed-pxb-bg-L-s2.png The other method to create or paint the background image is similar to 'wallpaper' or 'tails'. I prefer to call this method of creating the background image 'laying image tails', since a single image is laid across the background surface repeatedly until it covers the entire width and height. Again, you can supply any image you like, the size does not matter, except for the visual effect, for instance supplying much larger image than your average window does not make much sense.



Let's now look at the program:

Programmer's Note:

(12.1.2.1) HikiGtk module can be viewed and copied from section: 10.2.1.1 [Time To Start Using Object-Oriented Programming Paradigm], however, as you will see after this example program, we are going to expand and upgrade ourHikiGtkmodule to include background manipulation functionality.

To run this program, indeed, you need the image file with which you wish to adorn your background. At the bottom of this article I include the image I am using in these examples. You should copy it into the directory (folder), in which your programs reside. File name should be:"FreeBSD-doc.jpg".


drwar02-rsizble-tailed-pxb-bg.rb



(12.1.3)

To run the examples in this article download the following files into your program directory:
(12.1.3.1)
FreeBSD-doc.jpg ....... Name it: "FreeBSD-doc.jpg".
Last modified:2013/03/23 07:23:51
Keyword(s):
References:[tut-gtk2-dancr] [tut-gtk]