GNOME.org
 

[gnome-devel-docs] Ran through Photo Wall demo

commit 086adb20604bc5f96df022ac0d527c9b4a37d0c0
Author: P. F. Chimento <philip chimento gmail com>
Date:   Wed Mar 23 00:13:50 2011 +0100

    Ran through Photo Wall demo

 platform-demos/C/photo-wall.c.page       |   88 +++++++++++++++---------------
 platform-demos/C/photo-wall/photo-wall.c |   22 ++++----
 2 files changed, 56 insertions(+), 54 deletions(-)
---
diff --git a/platform-demos/C/photo-wall.c.page b/platform-demos/C/photo-wall.c.page
index 75a8804..d1ca94d 100644
--- a/platform-demos/C/photo-wall.c.page
+++ b/platform-demos/C/photo-wall.c.page
@@ -22,10 +22,10 @@
 <synopsis>
   <p>For this example we will build a simple image viewer using Clutter. You will learn:</p>
   <list>
-    <item><p>How to size and position <code>ClutterActors</code> </p></item>
+    <item><p>How to size and position <code>ClutterActor</code>s </p></item>
     <item><p>How to place an image in a <code>ClutterActor</code> </p></item>
     <item><p>How to do simple transitions using Clutter's animation framework</p></item>
-    <item><p>How to make <code>ClutterActor</code>'s respond to mouse events</p></item>
+    <item><p>How to make <code>ClutterActor</code>s respond to mouse events</p></item>
     <item><p>How to get file names from a directory</p></item>
   </list>
 </synopsis>
@@ -48,7 +48,7 @@
     <p>Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.</p>
     </item>
     <item>
-    <p>Choose <gui>Gtk+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Forward</gui>, and fill-out your details on the next few pages. Use <file>photo-wall</file> as project name and directory.</p>
+    <p>Choose <gui>Gtk+ (simple)</gui> from the <gui>C</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>photo-wall</file> as project name and directory.</p>
    	</item>
     <item>
     <p>Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will
@@ -60,7 +60,7 @@
        <em>clutter-1.0</em> from the list to include the Clutter library in your project.</p>
     </item>
     <item>
-    <p>Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.c</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:</p>
+    <p>Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.c</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:</p>
     <code mime="text/x-csrc"><![CDATA[
 #include <config.h>
 #include <gtk/gtk.h>]]></code>
@@ -82,7 +82,7 @@
 <section>
   <title>Initial setup</title>
   <p>
-    The following code segment contains many of the defines and variables we will be using in the following sections. Use this as a reference for later sections. Copy this code to the beginning of the <file>src/main.c</file>:
+    The following code segment contains many of the defines and variables we will be using in the following sections. Use this as a reference for later sections. Copy this code to the beginning of <file>src/main.c</file>:
   </p>
 <code mime="text/x-csrc" style="numbered"><![CDATA[
 #include <clutter/clutter.h>
@@ -137,15 +137,15 @@ main(int argc, char *argv[])
 
     load_image_path_names();
 
-    int row = 0;
-    int col = 0;
+    guint row = 0;
+    guint col = 0;
     for(row=0; row < ROW_COUNT; ++row)
     {
         for(col=0; col < COL_COUNT; ++col)
         {
             GSList *img_path_node = g_slist_nth(img_path_list, (row * COL_COUNT) + col);
             ClutterActor *actor = clutter_texture_new_from_file((gchar *)(img_path_node->data), NULL);
-            initialize_actor(actor, &row, &col);
+            initialize_actor(actor, row, col);
             clutter_container_add_actor(CLUTTER_CONTAINER(stage), actor);
             actor_list = g_slist_prepend(actor_list, actor);
         }
@@ -158,16 +158,15 @@ main(int argc, char *argv[])
     clutter_main();
 
     return 0;
-}]]>
-  </code>
+}]]></code>
   <list>
     <item><p>Line 4: <code>ClutterColor</code> is defined by setting the red, green, blue and transparency (alpha) values. The values range from 0-255. For transparency a value of 255 is opaque.</p></item>
     <item><p>Line 7: You must initialize Clutter. If you forget to do this, you will get very strange errors. Be warned.</p></item>
-    <item><p>Lines 9-11: Here we get the default <code>ClutterStage</code> that was provided by <code>clutter_init</code>. We then set the size using the defines from the previous section and the address of the <code>ClutterColor</code> we just defined.</p>
-      <note><p>A <code>ClutterStage</code> is the top-level <code>ClutterActor</code> onto which other <code>ClutterActor</code> are placed.</p></note>
+    <item><p>Lines 9&#x2012;11: Here we get the default <code>ClutterStage</code> that was provided by <code>clutter_init</code>. We then set the size using the defines from the previous section and the address of the <code>ClutterColor</code> we just defined.</p>
+      <note><p>A <code>ClutterStage</code> is the top-level <code>ClutterActor</code> onto which other <code>ClutterActor</code>s are placed.</p></note>
 </item>
     <item><p>Line 12: Here we call our function for getting the image file paths. We'll look at this in a bit.</p></item>
-    <item><p>Lines 14-26: This is were we setup up the <code>ClutterActor</code>s, load the images and place them into their spot in the image wall. We will look at this in detail in the next section.</p></item>
+    <item><p>Lines 14&#x2012;26: This is where we set up the <code>ClutterActor</code>s, load the images and place them into their spot in the image wall. We will look at this in detail in the next section.</p></item>
     <item><p>Line 29: Show the stage and <em>all its children</em>, meaning our images.</p></item>
     <item><p>Line 32: Start the Clutter main loop.</p></item>
   </list>
@@ -186,7 +185,7 @@ for(row=0; row < ROW_COUNT; ++row)
     {
         GSList *img_path_node = g_slist_nth(img_path_list, (row * COL_COUNT) + col);
         ClutterActor *actor = clutter_texture_new_from_file((gchar *)(img_path_node->data), NULL);
-        initialize_actor(actor, &row, &col);
+        initialize_actor(actor, row, col);
         clutter_container_add_actor(CLUTTER_CONTAINER(stage), actor);
         actor_list = g_slist_prepend(actor_list, actor);
     }
@@ -194,16 +193,16 @@ for(row=0; row < ROW_COUNT; ++row)
 ]]>
 </code>
 <list>
-  <item><p>Line 5: Here we want to get the path at the nth location in the <code>GSList</code> that is holding our image path names. The nth position is calculated based on the row and col. The return value is a pointer to a <code>GSList</code> which is just a node in the list. We will use this to get the actual path in the next line. The first parameter is a pointer to the head of the list.</p>
+  <item><p>Line 5: Here we want to get the path at the <var>n</var>th location in the <code>GSList</code> that is holding our image path names. The <var>n</var>th position is calculated based on <code>row</code> and <code>col</code>. The return value is a pointer to a <code>GSList</code> which is just a node in the list. We will use this to get the actual path in the next line. The first parameter is a pointer to the head of the list.</p>
   </item>
   <item><p>Line 6: This is where we actually create the <code>ClutterActor</code> and place the image into the actor. The first argument is the path which we access through our <code>GSList</code> node. The second argument is for error reporting but we are ignoring that to keep things short.</p>
   </item>
   <item><p>Line 7: We'll look at this function in a later section.</p>
   </item>
-  <item><p>Line 8: This adds the <code>ClutterActor</code> to the stage, which is a container. It also assumes ownership of the <code>ClutterActor</code> which is something you'll want to look into as you get deeper into GNOME development. See the <code>GObject</code> documentation for the gory details.</p>
+  <item><p>Line 8: This adds the <code>ClutterActor</code> to the stage, which is a container. It also assumes ownership of the <code>ClutterActor</code> which is something you'll want to look into as you get deeper into GNOME development. See the <link href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html";><code>GObject</code> documentation</link> for the gory details.</p>
   </item>
   <item><p>Line 9: This adds our <code>ClutterActor</code> to a <code>GSList</code> so that we can later iterate over the <code>ClutterActor</code>s.</p>
-<note><p>Interesting to note is that we want to prepend the <code>ClutterActor</code>s rather than append so that we avoid traversing the list upon each insertion. You will often see <code>g_slist_prepend</code> followed by <code>g_slist_reverse</code> because it faster than inserting many objects to the end of the list.</p></note>
+<note><p>Interesting to note is that we want to prepend the <code>ClutterActor</code>s rather than append so that we avoid traversing the list upon each insertion. You will often see <code>g_slist_prepend</code> followed by <code>g_slist_reverse</code> because it faster than inserting many objects at the end of the list.</p></note>
   </item>
 </list>
 </section>
@@ -228,45 +227,45 @@ load_image_path_names()
     const gchar *filename = g_dir_read_name(dir);
     while(filename)
     {
-        gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
-        img_path_list = g_slist_prepend(img_path_list, path);
+        if(g_str_has_suffix(filename, ".jpg") || g_str_has_suffix(filename, ".png")) 
+        {
+            gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
+            img_path_list = g_slist_prepend(img_path_list, path);
+        }
         filename = g_dir_read_name(dir);
     }
-}]]>
-  </code>
+}]]></code>
   <list>
     <item><p>Lines 5 and 12: This opens our directory or, if an error occured, returns after printing an error message.</p></item>
-    <item><p>Lines 14-20: The first line gets another file name from the <code>GDir</code> we opened earlier. If there was a file in the directory we proceed to prepend the image directory path to the filename and prepend that to the list we set up earlier. Lastly we attempt to get the next path name and reenter the loop if another file was found.</p></item>
+    <item><p>Lines 14&#x2012;23: The first line gets another file name from the <code>GDir</code> we opened earlier. If there was an image file (which we check by looking at its extension, ".png" or ".jpg") in the directory we proceed to prepend the image directory path to the filename and prepend that to the list we set up earlier. Lastly we attempt to get the next path name and reenter the loop if another file was found.</p></item>
   </list>
 </section>
 
 <section>
-  <title>Setup the actors</title>
+  <title>Set up the actors</title>
   <p>
      We now take a look at the sizing and  positioning of <code>ClutterActor</code>s and also readying the <code>ClutterActor</code> for user interaction.
   </p>
   <code mime="text/x-csrc" style="numbered"><![CDATA[
-/* This functions handles setup and placing the rectangles. */
+/* This function handles setting up and placing the rectangles. */
 static void
-initialize_actor(ClutterActor *actor, guint *row, guint *col)
+initialize_actor(ClutterActor *actor, guint row, guint col)
 {
     clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE);
-    clutter_actor_set_position(actor, (*col) * THUMBNAIL_SIZE, (*row) * THUMBNAIL_SIZE);
+    clutter_actor_set_position(actor, col * THUMBNAIL_SIZE, row * THUMBNAIL_SIZE);
     clutter_actor_set_reactive(actor, TRUE);
 
     g_signal_connect(actor,
                      "button-press-event",
                      G_CALLBACK(actor_clicked_cb),
                      NULL);
-}
-]]>
-  </code>
+}]]></code>
   <list>
     <item>
       <p>Line 7: Setting an actor reactive means that it reacts to events, such as <code>button-press-event</code> in our case. For Photo Wall, all <code>ClutterActor</code>s in the wall should initially be reactive.</p>
     </item>
     <item>
-      <p>Line 9-12: Now we connect the <code>button-press-event</code> to the <code>actor_clicked_cb</code> callback which we will look at next.</p>
+      <p>Line 9&#x2012;12: Now we connect the <code>button-press-event</code> to the <code>actor_clicked_cb</code> callback which we will look at next.</p>
     </item>
   </list>
   <p>At this point we've got a wall of images that are ready to be viewed.</p>
@@ -316,34 +315,33 @@ actor_clicked_cb(ClutterActor *actor,
     is_focused = !is_focused;
 
     return TRUE;
-}]]>
-  </code>
+}]]></code>
   <list>
-    <item><p>Lines 1-4: We have to make sure our callback function matches the signature required for the <code>button_clicked_event</code> signal. For our example, we will only use the first argument, the <code>ClutterActor</code> that is actually clicked. </p></item>
+    <item><p>Lines 1&#x2012;4: We have to make sure our callback function matches the signature required for the <code>button_clicked_event</code> signal. For our example, we will only use the first argument, the <code>ClutterActor</code> that is actually clicked.</p>
 <note>
-  <p>A few words on the arguments we are not using in this example. The <code>ClutterEvent</code> is different depending on what event is being handled. For example, a key event produces a <code>ClutterKeyEvent</code> from which you can get the key being pressed among other information. For mouse click events you get a <code>ClutterButtonEvent</code>s from which you can get the <code>x</code> and <code>y</code> values. See the Clutter documentation for other <code>ClutterEvent</code> types.</p>
+  <p>A few words on the arguments we are not using in this example. The <code>ClutterEvent</code> is different depending on what event is being handled. For example, a key event produces a <code>ClutterKeyEvent</code> from which you can get the key being pressed among other information. For mouse click events you get a <code>ClutterButtonEvent</code> from which you can get the <code>x</code> and <code>y</code> values. See the Clutter documentation for other <code>ClutterEvent</code> types.</p>
   <p>
     The <code>user_data</code> is what one uses to pass data into the the function. A pointer to any data type can be passed in. If you need multiple data to be passed into the callback, you can place the data into a struct and pass its address in.
   </p>
-</note>
-    <item><p>Line 7 : We set up a static flag to track which state we are in: wall mode or focus mode. We start out in wall mode so no image has focus. Thus, we set the flag to FALSE initially.</p></item>
+</note></item>
+    <item><p>Line 7: We set up a static flag to track which state we are in: wall mode or focus mode. We start out in wall mode so no image has focus. Thus, we set the flag to <code>FALSE</code> initially.</p></item>
     <item><p>Line 9: This line of code runs a custom function, <code>foreach_set_focus_state</code>, for each element in our <code>actor_list</code>, passing it the address to the <code>is_focused</code> flag. We'll see the definition of the <code>foreach_set_focus_state</code> function in the next section.</p></item>
-    <item><p>Lines 13-19: Reaching this code means that one image currently has focus and we want to return to wall mode. The <code>clutter_actor_animate</code> function is used to animate a <code>ClutterActor</code>'s property or properties from the current state(s) to the specified state(s). The arguments are as follows:</p>
+    <item><p>Lines 13&#x2012;19: Reaching this code means that one image currently has focus and we want to return to wall mode. The <code>clutter_actor_animate</code> function is used to animate a <code>ClutterActor</code>'s property or properties from the current state(s) to the specified state(s). The arguments are as follows:</p>
 <list type="numbered">
   <item><p>The address of the <code>ClutterActor</code> to animate</p></item>
   <item><p>The animation mode to use. Here we use <code>CLUTTER_LINEAR</code> so that we have a constant speed for animation.</p></item>
-  <item><p>The duration of the animation in milliseconds. I've chosen 500ms for this example.</p></item>
+  <item><p>The duration of the animation in milliseconds. I've chosen 500 ms for this example.</p></item>
   <item><p>The remaining arguments are property/value pairs. Here we want to set the <code>x</code> value to the starting <code>x</code> value this <code>ClutterActor</code> was at before being brought into focus.</p></item>
-  <item><p>The last argument must always be NULL to indicate that there are no more properties to be set.</p></item>
+  <item><p>The last argument must always be <code>NULL</code> to indicate that there are no more properties to be set.</p></item>
 </list>
 <note><p>The <code>depth</code> property needs a little more explaining. We need to raise the focused image so that it doesn't slide behind other <code>ClutterActor</code>s. In this section we are returning it to the same depth as the others on the wall.</p>
 <p>Depth also determines which <code>ClutterActor</code>s receive events. A <code>ClutterActor</code> with a higher depth value receives the click events and can choose whether the event gets sent to <code>ClutterActor</code>s under it. We'll see how that works in a few steps.</p></note>
     </item>
     <item><p>Line 24: Reaching this line of code means we are currently in the wall state and are about to give a <code>ClutterActor</code> focus. Here we save the starting position so that we can return to it later.</p></item>
-    <item><p>Line 25: Setting the <code>ClutterActor</code>'s <code>reactive</code> property to TRUE makes this <code>ClutterActor</code> react to events. In this focused state the only <code>ClutterActor</code> that we want to receive evente will be the <code>ClutterActor</code> being viewed. Clicking on the <code>ClutterActor</code> will return it to its starting position. </p></item>
-    <item><p>Lines 27-33: This is similar to the above block of code. Notice that we are setting the the depth to raise it above the other images.</p></item>
+    <item><p>Line 25: Setting the <code>ClutterActor</code>'s <code>reactive</code> property to <code>TRUE</code> makes this <code>ClutterActor</code> react to events. In this focused state the only <code>ClutterActor</code> that we want to receive events will be the <code>ClutterActor</code> being viewed. Clicking on the <code>ClutterActor</code> will return it to its starting position. </p></item>
+    <item><p>Lines 27&#x2012;33: This is similar to the above block of code. Notice that we are setting the the depth to raise it above the other images.</p></item>
     <item><p>Line 37: Here we toggle the <code>is_focused</code> flag to the current state.</p></item>
-<item><p>As mentioned previously, the <code>ClutterActor</code>s with higher <code>depth</code> value receive events but can allow <code>ClutterActor</code>s below them to also receive events. Returning <code>TRUE</code> will stop events from being passed down, while <code>FALSE</code> will pass events down.</p>
+<item><p>As mentioned previously, the <code>ClutterActor</code>s with higher <code>depth</code> values receive events but can allow <code>ClutterActor</code>s below them to also receive events. Returning <code>TRUE</code> will stop events from being passed down, while <code>FALSE</code> will pass events down.</p>
  <note>
    <p>Remember, however, that to receive events the <code>ClutterActor</code>s must be set <code>reactive</code>.</p>
  </note>
@@ -362,14 +360,16 @@ foreach_set_focus_state(gpointer data, gpointer user_data)
     clutter_actor_set_reactive(actor, is_reactive);
 }]]></code>
 <list>
-  <item><p>Lines 2-5: The signature of this function requires two <code>gpointers</code>. The first is a pointer to the <code>ClutterActor</code> that our <code>GSList</code> holds and the other is the <code>is_focused</code> flag that we've passed in the previous section. We want to cast these and store them for easy use.</p></item>
+  <item><p>Lines 2&#x2012;5: The signature of this function requires two <code>gpointer</code>s. The first is a pointer to the <code>ClutterActor</code> that our <code>GSList</code> holds and the other is the <code>is_focused</code> flag that we've passed in the previous section. We want to cast these and store them for easy use.</p></item>
   <item><p>Line 7: Depending on which boolean value is passed in, the <code>ClutterActor</code> will be set to respond to events or not.</p></item>
 </list>
 </section>
 
 <section>
   <title>Build and run the application</title>
-  <p>All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Run</gui></guiseq> to start the application.</p>
+  <p>All of the code should now be ready to go. 
+  All you need now is some pictures to load. By default, the pictures are loaded from a <file>berlin_images</file> directory. If you want, you can change the <code>#define IMAGE_DIR_PATH</code> line near the top to refer to your photo directory, or create a <file>berlin_images</file> directory by clicking <guiseq><gui>Project</gui><gui>New Directory...</gui></guiseq> and creating a <file>berlin_images</file> directory as a subdirectory of the <file>photo-wall</file> directory. Make sure to put at least twelve images in the directory! <!--You can download the example images <link href="photo-wall/berlin_images/">here</link> (<link href="photo-wall/CREDITS">credits</link>).--></p>
+  <p>When you have done that, click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.</p>
   <p>If you haven't already done so, choose the <file>Debug/src/photo-wall</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!</p>
 </section>
 
diff --git a/platform-demos/C/photo-wall/photo-wall.c b/platform-demos/C/photo-wall/photo-wall.c
index 64c53e1..63fc045 100644
--- a/platform-demos/C/photo-wall/photo-wall.c
+++ b/platform-demos/C/photo-wall/photo-wall.c
@@ -30,7 +30,7 @@ static Position origin = {0, 0};
 static void
 load_image_path_names()
 {
-    /* Insure we can access the directory. */
+    /* Ensure we can access the directory. */
     GError *error = NULL;
     GDir *dir = g_dir_open(IMAGE_DIR_PATH, 0, &error);
     if(error)
@@ -43,9 +43,11 @@ load_image_path_names()
     const gchar *filename = g_dir_read_name(dir);
     while(filename)
     {
-        gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
-
-        img_path_list = g_slist_prepend(img_path_list, path);
+        if(g_str_has_suffix(filename, ".jpg") || g_str_has_suffix(filename, ".png")) 
+        {
+            gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
+            img_path_list = g_slist_prepend(img_path_list, path);
+        }
         filename = g_dir_read_name(dir);
     }
 }
@@ -99,12 +101,12 @@ actor_clicked_cb(ClutterActor *actor,
     return TRUE;
 }
 
-/* This functions handles setup and placing the rectangles. */
+/* This function handles setting up and placing the rectangles. */
 static void
-initialize_actor(ClutterActor *actor, guint *row, guint *col)
+initialize_actor(ClutterActor *actor, guint row, guint col)
 {
     clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE);
-    clutter_actor_set_position(actor, (*col) * THUMBNAIL_SIZE, (*row) * THUMBNAIL_SIZE);
+    clutter_actor_set_position(actor, col * THUMBNAIL_SIZE, row * THUMBNAIL_SIZE);
     clutter_actor_set_reactive(actor, TRUE);
 
     g_signal_connect(actor,
@@ -127,15 +129,15 @@ main(int argc, char *argv[])
 
     load_image_path_names();
 
-    int row = 0;
-    int col = 0;
+    guint row = 0;
+    guint col = 0;
     for(row=0; row < ROW_COUNT; ++row)
     {
         for(col=0; col < COL_COUNT; ++col)
         {
             GSList *img_path_node = g_slist_nth(img_path_list, (row * COL_COUNT) + col);
             ClutterActor *actor = clutter_texture_new_from_file((gchar *)(img_path_node->data), NULL);
-            initialize_actor(actor, &row, &col);
+            initialize_actor(actor, row, col);
             clutter_container_add_actor(CLUTTER_CONTAINER(stage), actor);
             actor_list = g_slist_prepend(actor_list, actor);
         }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]