diff --git a/.gitignore b/.gitignore index 24b81f1..91a4897 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ insertfunc.rb makehtml.rb pickoutfunc.rb +src/img.rb diff --git a/lib/lib_src2md.rb b/lib/lib_src2md.rb index 2720cc0..936cfb1 100755 --- a/lib/lib_src2md.rb +++ b/lib/lib_src2md.rb @@ -62,7 +62,7 @@ def src2md srcmd, md n += 1 end else - md_buf << line + md_buf << line.gsub(/(!\[[^\]]*\])\(..\/([^\)]*)\)/, "\\1(\\2)") end end IO.write(md,md_buf.join) diff --git a/sec1.md b/sec1.md index adf4df6..3dc167a 100644 --- a/sec1.md +++ b/sec1.md @@ -200,7 +200,7 @@ And GtkWidget is a base object from which all the GUI objects derive. GtkWindow includes GtkWidget at the top of its object. -![GtkWindow and GtkWidget](window_widget.png) +![GtkWindow and GtkWidget](image/window_widget.png) The function `gtk_window_new` is defined as follows. @@ -251,7 +251,7 @@ Save the program as `pr3.c` and compile and run it. A small window appears. -![Screenshot of the window](screenshot_pr3.png) +![Screenshot of the window](image/screenshot_pr3.png) Click on the close button then the window disappears and the program finishes. @@ -280,6 +280,6 @@ So you don't need to call `gtk_window_set_application` any more. The program sets the title and the default size of the window. Compile it and run `a.out`, then you will see a bigger window with its title "pr4". -![Screenshot of the window](screenshot_pr4.png) +![Screenshot of the window](image/screenshot_pr4.png) Up: [Readme.md](Readme.md), Next: [Section 2](sec2.md) diff --git a/sec10.md b/sec10.md index d5a9673..6ab5908 100644 --- a/sec10.md +++ b/sec10.md @@ -226,7 +226,7 @@ The buttons are Cancel and Save. - 1-15: `saveas_dialog_response` signal handler. - 5-13: If the response is `GTK_RESPONSE_ACCEPT`, which is set to the argument when the user has clicked on Save button, then gets a pointer to the GFile object, set it to `tv->file`, assign TRUE to `tv->changed`, emits "change-file" signal then call `tfe_text_view_save` to save the buffer to the file. -![Saveas process](saveas.png) +![Saveas process](image/saveas.png) When you use GtkFileChooserDialog, you need to divide the program into two parts. They are a function which generates GtkFileChooserDialog and the signal handler. @@ -317,7 +317,7 @@ In Gtk3, `gtk_dialog_run` function is available. It simplifies the process. However, in Gtk4, `gtk_dialog_run`is unavailable any more. -![Caller and TfeTextView](open.png) +![Caller and TfeTextView](image/open.png) 1. A caller get a pointer `tv` to TfeTextView by calling `tfe_text_view_new`. 2. The caller connects the handler (left bottom in the diagram) and the signal "open-response". diff --git a/sec14.md b/sec14.md index b97aaa7..eaa4698 100644 --- a/sec14.md +++ b/sec14.md @@ -6,7 +6,7 @@ Up: [Readme.md](Readme.md), Prev: [Section 13](sec13.md), Next: [Section 15](se Users often use menus to tell the command to the computer. It is like this: -![Menu](menu.png) +![Menu](image/menu.png) Now let's analyze the menu above. There are two types of object. @@ -19,7 +19,7 @@ They are called "menu". Menu is an ordered list of items. They are similar to arrays. -![Menu structure](menu_structure.png) +![Menu structure](image/menu_structure.png) - Menubar is a menu which has three items, which are "File", "Edit" and "View". - The menu item labeled "Edit" has a link to the submenu which has two items. @@ -209,8 +209,8 @@ The structure of the menu is shown in the diagram below. - 30: Set GtkApplicationWindow to show the menubar. - 31: Show the window. -![menu and action](menu1.png) +![menu and action](image/menu1.png) -![Screenshot of menu1](menu1_screenshot.png) +![Screenshot of menu1](image/menu1_screenshot.png) Up: [Readme.md](Readme.md), Prev: [Section 13](sec13.md), Next: [Section 15](sec15.md) diff --git a/sec15.md b/sec15.md index b9c5952..fdc7a6d 100644 --- a/sec15.md +++ b/sec15.md @@ -204,7 +204,7 @@ It is the string "s" given at the generation time. The following code includes stateful actions above. This program has menus like this: -![menu2](menu2.png) +![menu2](image/menu2.png) - Fullscreen menu toggles the size of the window between maximum and non-maximum. If the window is maximum size, which is called full screen, then a check mark is put before "fullscreen" label. diff --git a/sec16.md b/sec16.md index 226a184..8074702 100644 --- a/sec16.md +++ b/sec16.md @@ -58,7 +58,7 @@ So, we usually prefer the former ui file style. The following is a screenshot of the sample program in this section. Its name is `menu3`. -![menu3](menu3.png) +![menu3](image/menu3.png) The following is the ui file of the menu in `menu3`. diff --git a/sec2.md b/sec2.md index c4f921e..6cb6b00 100644 --- a/sec2.md +++ b/sec2.md @@ -48,7 +48,7 @@ Then compile and run it. A window with a message "Hello." appears. -![Screenshot of the label](screenshot_lb1.png) +![Screenshot of the label](image/screenshot_lb1.png) There's only a little change between `pr4.c` and `lb1.c`. Diff is a good program to know the difference between two files. @@ -144,7 +144,7 @@ So, if `btn` is clicked, the function `on_click` is invoked. Name the program `lb2.c` and save it. Now compile and run it. -![Screenshot of the label](screenshot_lb2.png) +![Screenshot of the label](image/screenshot_lb2.png) A window with the button appears. Click the button (it is a large button, you can click everywhere inside the window), then a string "Clicked." appears on the shell terminal. @@ -225,7 +225,7 @@ The following procedure shows the way to add two buttons in a window. After this, the Widgets are connected as following diagram. -![Parent-child relationship](box.png) +![Parent-child relationship](image/box.png) Now, code it. @@ -302,7 +302,7 @@ The next function fills a box with children, giving them equal space. After that, two buttons `btn1` and `btn2` are generated and the signal handlers are set. Then, these two buttons are appended to the box. -![Screenshot of the box](screenshot_lb4.png) +![Screenshot of the box](image/screenshot_lb4.png) The handler corresponds to `btn1` changes its label. The handler corresponds to `btn2` destroys the top-level window and the application quits. diff --git a/sec3.md b/sec3.md index 32b7ab8..d038246 100644 --- a/sec3.md +++ b/sec3.md @@ -69,7 +69,7 @@ In line 30, `tv` is set to `win` as a child. Now compile and run it. -![GtkTextView](screenshot_tfv1.png) +![GtkTextView](image/screenshot_tfv1.png) There's an I-beam pointer in the window. You can add or delete any character on GtkTextview. diff --git a/sec4.md b/sec4.md index 7f3b111..c9a0e8c 100644 --- a/sec4.md +++ b/sec4.md @@ -151,7 +151,7 @@ Then compile and run it. $ comp tfv3 $ ./a.out tfv3.c -![File viewer](screenshot_tfv3.png) +![File viewer](image/screenshot_tfv3.png) Now I want to explain the program `tfv3.c`. First, the function `main` changes in only two lines. @@ -198,7 +198,7 @@ If it fails, it outputs an error message and destroy the window. GtkNotebook is a container widget that contains multiple children with tabs in it. -![GtkNotebook](screenshot_gtk_notebook.png) +![GtkNotebook](image/screenshot_gtk_notebook.png) Look at the screenshots above. The left one is a window at the startup. diff --git a/sec5.md b/sec5.md index 2cb40e9..17dbc14 100644 --- a/sec5.md +++ b/sec5.md @@ -40,7 +40,7 @@ What we are thinking about now is "child object". A child object includes its parent object. And a child widget object derives everything from the parent widget object. -![Child widget of GtkTwxtView](child.png) +![Child widget of GtkTwxtView](image/child.png) We will define TfeTextView as a child widget object of GtkTextView. It has everything that GtkTextView has. diff --git a/sec6.md b/sec6.md index 9026137..a1234c1 100644 --- a/sec6.md +++ b/sec6.md @@ -10,7 +10,7 @@ It is better to make "New", "Open", "Save" and "Close" buttons. This section describes how to put those buttons into the window. Signals and handlers will be explained later. -![Screenshot of the file editor](screenshot_tfe2.png) +![Screenshot of the file editor](image/screenshot_tfe2.png) The screenshot above shows the layout. The function `on_open` in the source code `tfe2.c` is as follows. diff --git a/sec8.md b/sec8.md index 69a3821..25662ca 100644 --- a/sec8.md +++ b/sec8.md @@ -92,7 +92,7 @@ This is very important. It guarantees a child widget to derive all the features from ancestors. The structure of `TfeTextView` is like the following diagram. -![The structure of the instance TfeTextView](TfeTextView.png) +![The structure of the instance TfeTextView](image/TfeTextView.png) ## Generate TfeTextView instance @@ -349,7 +349,7 @@ Override is rewriting ancestors' class methods in the child class.) TfeTextViewClass includes its ancsestors' class in it. It is illustrated in the following diagram. -![The structure of TfeTextView Class](TfeTextViewClass.png) +![The structure of TfeTextView Class](image/TfeTextViewClass.png) ## Destruction of TfeTextView @@ -365,7 +365,7 @@ At this moment, no object refers C and the reference count of C is zero. This means C is no longer useful. Then C destructs itself and finally the memories allocated to C is freed. -![Reference count of B](refcount.png) +![Reference count of B](image/refcount.png) The idea above is based on an assumption that an object refered by nothing has reference count of zero. When the reference count drops to zero, the object starts its destruction process. @@ -409,7 +409,7 @@ Look at the following diagram. There are four classes -- GObjectClass (GInitiallyUnownedClass), GtkWidgetClass, GtkTextViewClass and TfeTextViewClass. Each class has its own dispose handler -- `dh1`, `dh2`, `dh3` and `tfe_text_view_dispose`. -![dispose handers](dispose_handler.png) +![dispose handers](image/dispose_handler.png) Now, look at the `tfe_text_view_dispose` program above. It first releases the reference to GFile object pointed by `tv->file`. diff --git a/src/sec1.src.md b/src/sec1.src.md index 8e0ae36..1bc4173 100644 --- a/src/sec1.src.md +++ b/src/sec1.src.md @@ -162,7 +162,7 @@ And GtkWidget is a base object from which all the GUI objects derive. GtkWindow includes GtkWidget at the top of its object. -![GtkWindow and GtkWidget](window_widget.png) +![GtkWindow and GtkWidget](../image/window_widget.png) The function `gtk_window_new` is defined as follows. @@ -213,7 +213,7 @@ Save the program as `pr3.c` and compile and run it. A small window appears. -![Screenshot of the window](screenshot_pr3.png) +![Screenshot of the window](../image/screenshot_pr3.png) Click on the close button then the window disappears and the program finishes. @@ -234,5 +234,5 @@ So you don't need to call `gtk_window_set_application` any more. The program sets the title and the default size of the window. Compile it and run `a.out`, then you will see a bigger window with its title "pr4". -![Screenshot of the window](screenshot_pr4.png) +![Screenshot of the window](../image/screenshot_pr4.png) diff --git a/src/sec10.src.md b/src/sec10.src.md index 7ebc2fa..a56f61a 100644 --- a/src/sec10.src.md +++ b/src/sec10.src.md @@ -106,7 +106,7 @@ The buttons are Cancel and Save. - 1-15: `saveas_dialog_response` signal handler. - 5-13: If the response is `GTK_RESPONSE_ACCEPT`, which is set to the argument when the user has clicked on Save button, then gets a pointer to the GFile object, set it to `tv->file`, assign TRUE to `tv->changed`, emits "change-file" signal then call `tfe_text_view_save` to save the buffer to the file. -![Saveas process](saveas.png) +![Saveas process](../image/saveas.png) When you use GtkFileChooserDialog, you need to divide the program into two parts. They are a function which generates GtkFileChooserDialog and the signal handler. @@ -153,7 +153,7 @@ In Gtk3, `gtk_dialog_run` function is available. It simplifies the process. However, in Gtk4, `gtk_dialog_run`is unavailable any more. -![Caller and TfeTextView](open.png) +![Caller and TfeTextView](../image/open.png) 1. A caller get a pointer `tv` to TfeTextView by calling `tfe_text_view_new`. 2. The caller connects the handler (left bottom in the diagram) and the signal "open-response". diff --git a/src/sec14.src.md b/src/sec14.src.md index 0718f50..7a41a83 100644 --- a/src/sec14.src.md +++ b/src/sec14.src.md @@ -5,7 +5,7 @@ Users often use menus to tell the command to the computer. It is like this: -![Menu](menu.png) +![Menu](../image/menu.png) Now let's analyze the menu above. There are two types of object. @@ -18,7 +18,7 @@ They are called "menu". Menu is an ordered list of items. They are similar to arrays. -![Menu structure](menu_structure.png) +![Menu structure](../image/menu_structure.png) - Menubar is a menu which has three items, which are "File", "Edit" and "View". - The menu item labeled "Edit" has a link to the submenu which has two items. @@ -162,7 +162,7 @@ The structure of the menu is shown in the diagram below. - 30: Set GtkApplicationWindow to show the menubar. - 31: Show the window. -![menu and action](menu1.png) +![menu and action](../image/menu1.png) -![Screenshot of menu1](menu1_screenshot.png) +![Screenshot of menu1](../image/menu1_screenshot.png) diff --git a/src/sec15.src.md b/src/sec15.src.md index 5b9047b..f0d0ed3 100644 --- a/src/sec15.src.md +++ b/src/sec15.src.md @@ -196,7 +196,7 @@ It is the string "s" given at the generation time. The following code includes stateful actions above. This program has menus like this: -![menu2](menu2.png) +![menu2](../image/menu2.png) - Fullscreen menu toggles the size of the window between maximum and non-maximum. If the window is maximum size, which is called full screen, then a check mark is put before "fullscreen" label. diff --git a/src/sec16.src.md b/src/sec16.src.md index 56e580b..e31dfca 100644 --- a/src/sec16.src.md +++ b/src/sec16.src.md @@ -57,7 +57,7 @@ So, we usually prefer the former ui file style. The following is a screenshot of the sample program in this section. Its name is `menu3`. -![menu3](menu3.png) +![menu3](../image/menu3.png) The following is the ui file of the menu in `menu3`. diff --git a/src/sec2.src.md b/src/sec2.src.md index 63322aa..cd080d6 100644 --- a/src/sec2.src.md +++ b/src/sec2.src.md @@ -19,7 +19,7 @@ Then compile and run it. A window with a message "Hello." appears. -![Screenshot of the label](screenshot_lb1.png) +![Screenshot of the label](../image/screenshot_lb1.png) There's only a little change between `pr4.c` and `lb1.c`. Diff is a good program to know the difference between two files. @@ -68,7 +68,7 @@ So, if `btn` is clicked, the function `on_click` is invoked. Name the program `lb2.c` and save it. Now compile and run it. -![Screenshot of the label](screenshot_lb2.png) +![Screenshot of the label](../image/screenshot_lb2.png) A window with the button appears. Click the button (it is a large button, you can click everywhere inside the window), then a string "Clicked." appears on the shell terminal. @@ -114,7 +114,7 @@ The following procedure shows the way to add two buttons in a window. After this, the Widgets are connected as following diagram. -![Parent-child relationship](box.png) +![Parent-child relationship](../image/box.png) Now, code it. @@ -134,7 +134,7 @@ The next function fills a box with children, giving them equal space. After that, two buttons `btn1` and `btn2` are generated and the signal handlers are set. Then, these two buttons are appended to the box. -![Screenshot of the box](screenshot_lb4.png) +![Screenshot of the box](../image/screenshot_lb4.png) The handler corresponds to `btn1` changes its label. The handler corresponds to `btn2` destroys the top-level window and the application quits. diff --git a/src/sec3.src.md b/src/sec3.src.md index 33e4d68..d43c1a4 100644 --- a/src/sec3.src.md +++ b/src/sec3.src.md @@ -23,7 +23,7 @@ In line 30, `tv` is set to `win` as a child. Now compile and run it. -![GtkTextView](screenshot_tfv1.png) +![GtkTextView](../image/screenshot_tfv1.png) There's an I-beam pointer in the window. You can add or delete any character on GtkTextview. diff --git a/src/sec4.src.md b/src/sec4.src.md index 48653c7..c93b008 100644 --- a/src/sec4.src.md +++ b/src/sec4.src.md @@ -95,7 +95,7 @@ Then compile and run it. $ comp tfv3 $ ./a.out tfv3.c -![File viewer](screenshot_tfv3.png) +![File viewer](../image/screenshot_tfv3.png) Now I want to explain the program `tfv3.c`. First, the function `main` changes in only two lines. @@ -142,7 +142,7 @@ If it fails, it outputs an error message and destroy the window. GtkNotebook is a container widget that contains multiple children with tabs in it. -![GtkNotebook](screenshot_gtk_notebook.png) +![GtkNotebook](../image/screenshot_gtk_notebook.png) Look at the screenshots above. The left one is a window at the startup. diff --git a/src/sec5.src.md b/src/sec5.src.md index 554bc65..714c468 100644 --- a/src/sec5.src.md +++ b/src/sec5.src.md @@ -39,7 +39,7 @@ What we are thinking about now is "child object". A child object includes its parent object. And a child widget object derives everything from the parent widget object. -![Child widget of GtkTwxtView](child.png) +![Child widget of GtkTwxtView](../image/child.png) We will define TfeTextView as a child widget object of GtkTextView. It has everything that GtkTextView has. diff --git a/src/sec6.src.md b/src/sec6.src.md index 424ba16..24d2bcf 100644 --- a/src/sec6.src.md +++ b/src/sec6.src.md @@ -9,7 +9,7 @@ It is better to make "New", "Open", "Save" and "Close" buttons. This section describes how to put those buttons into the window. Signals and handlers will be explained later. -![Screenshot of the file editor](screenshot_tfe2.png) +![Screenshot of the file editor](../image/screenshot_tfe2.png) The screenshot above shows the layout. The function `on_open` in the source code `tfe2.c` is as follows. diff --git a/src/sec8.src.md b/src/sec8.src.md index 378f31e..3ba29e8 100644 --- a/src/sec8.src.md +++ b/src/sec8.src.md @@ -91,7 +91,7 @@ This is very important. It guarantees a child widget to derive all the features from ancestors. The structure of `TfeTextView` is like the following diagram. -![The structure of the instance TfeTextView](TfeTextView.png) +![The structure of the instance TfeTextView](../image/TfeTextView.png) ## Generate TfeTextView instance @@ -189,7 +189,7 @@ Override is rewriting ancestors' class methods in the child class.) TfeTextViewClass includes its ancsestors' class in it. It is illustrated in the following diagram. -![The structure of TfeTextView Class](TfeTextViewClass.png) +![The structure of TfeTextView Class](../image/TfeTextViewClass.png) ## Destruction of TfeTextView @@ -205,7 +205,7 @@ At this moment, no object refers C and the reference count of C is zero. This means C is no longer useful. Then C destructs itself and finally the memories allocated to C is freed. -![Reference count of B](refcount.png) +![Reference count of B](../image/refcount.png) The idea above is based on an assumption that an object refered by nothing has reference count of zero. When the reference count drops to zero, the object starts its destruction process. @@ -241,7 +241,7 @@ Look at the following diagram. There are four classes -- GObjectClass (GInitiallyUnownedClass), GtkWidgetClass, GtkTextViewClass and TfeTextViewClass. Each class has its own dispose handler -- `dh1`, `dh2`, `dh3` and `tfe_text_view_dispose`. -![dispose handers](dispose_handler.png) +![dispose handers](../image/dispose_handler.png) Now, look at the `tfe_text_view_dispose` program above. It first releases the reference to GFile object pointed by `tv->file`.