Learn how easy it is to sync an existing GitHub or Google Code repo to a SourceForge project! See Demo

Close

Commit [445a2b] Maximize Restore History

print style, renamed pages, welcome page

Behnam Tabatabai Behnam Tabatabai 2011-02-26

added css/print.css
changed images/hdr/sb-1-mini.png
changed images/hdr/sb-1-mini.xcf
changed images/hdr/sb-2-mini.png
changed images/hdr/sb-2-mini.xcf
changed images/hdr/sb-3-mini.png
changed images/hdr/sb-3-mini.xcf
changed prog/mkhtml.xsl
changed src/install-en.xml
changed src/master.xml
changed src/welcome-en.xml
changed Makefile
copied css/stylesheet.css -> css/screen.css
copied src/credits-en.xml -> src/references-en.xml
copied src/tutorial-en.xml -> src/examples-en.xml
css/print.css Diff Switch to side-by-side view
Loading...
images/hdr/sb-1-mini.png Diff Switch to side-by-side view
Loading...
images/hdr/sb-1-mini.xcf Diff Switch to side-by-side view
Loading...
images/hdr/sb-2-mini.png Diff Switch to side-by-side view
Loading...
images/hdr/sb-2-mini.xcf Diff Switch to side-by-side view
Loading...
images/hdr/sb-3-mini.png Diff Switch to side-by-side view
Loading...
images/hdr/sb-3-mini.xcf Diff Switch to side-by-side view
Loading...
prog/mkhtml.xsl Diff Switch to side-by-side view
Loading...
src/install-en.xml Diff Switch to side-by-side view
Loading...
src/master.xml Diff Switch to side-by-side view
Loading...
src/welcome-en.xml Diff Switch to side-by-side view
Loading...
Makefile Diff Switch to side-by-side view
Loading...
css/stylesheet.css to css/screen.css
--- a/css/stylesheet.css
+++ b/css/screen.css
@@ -1,95 +1,88 @@
 body {
-  width: 992px;
-  margin: 0px auto;
-  font-family: Geneva, Tahoma, sans-serif;
-  /* background-color: #ffd; */
-  /* font-family: Verdana, Arial, Helvetica, sans-serif; */
-  /* color: #555555; */
-}
-
-#the-global-div {
+    width: 992px;
+    margin: 0px auto;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 14px;
 }
 
 #the-title {
-  padding-top: 12px;
-  text-align: right;
+    padding-top: 12px;
+    text-align: right;
 }
 
 #the-title img {
-  border: 0;
+    border: 0;
 }
 
 #the-title .title {
-  float: left;
-  /* font-family: Verdana, Arial, Helvetica, sans-serif; */
-  font-size: 150%;
+    float: left;
+    font-size: 150%;
 }
 
-#the-content
-{
-  margin-left: 10px;
-  margin-right: 10px;
+#the-content {
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 #the-footer {
-  padding-top: 8px;
-  border-top: 1px solid #ccc;
-  text-align: right;
+    padding-top: 8px;
+    border-top: 1px solid #ccc;
+    text-align: right;
 }
 
 #the-footer img {
-  border: 0;
+    border: 0;
 }
 
 #the-footer .update-info {
-  float: left;
-  font-size: 90%;
-  color: #555;
+    float: left;
+    font-size: 90%;
+    color: #555;
 }
 
 #the-navi-menu {
-  padding: 8px;
-  border-bottom: 1px solid #ccc;
-  border-top: 1px solid #ccc;
+    padding: 8px;
+    border-bottom: 1px solid #ccc;
+    border-top: 1px solid #ccc;
 }
 
 #link-to-other-languages {
-  float: right;
+    float: right;
 }
 
 dl.formal-p dt
 {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 a:link,
 a:visited {
-  color: #69c;
+    color: #69c;
 }
 
 a:hover {
-  color: #a00;
+    color: #a00;
 }
 
 a.selected:link,
 a.selected:visited,
 a.selected:hover {
-  color: #6c9;
+    color: #6c9;
 }
 
 a.navi-link {
-  padding-right: 16px;
-  text-align: center;
-  font-weight: bold;
+    padding-right: 16px;
+    text-align: center;
+    font-weight: bold;
 }
 
 a.language-link {
-  font-weight: normal;
-  font-style: italic;
+    font-weight: normal;
+    font-style: italic;
 }
 
 .command,
@@ -98,46 +91,50 @@
 .lib,
 .option,
 .symlink {
-  font-family: monospace;
+    font-family: monospace;
 }
 
 div.figure {
-  display: inline-block;
+    display: inline-block;
 
-  /* For visualizing the borders uncomment this: */
-  /* border: 1px solid #ccc; */
+/* For visualizing the borders uncomment this: */
+/* border: 1px solid #ccc; */
 }
 
 img {
-  /* max-width: 100%; */
-  /* height: auto; */
+    vertical-align: top;
 }
 
 .caption {
-  padding-top: 0.5em;
-  text-align: center;
-  font-size: 90%;
-  width: 100%;
+    padding-top: 0.5em;
+    text-align: center;
+    font-size: 90%;
+    width: 100%;
+}
+
+.subcaption {
+    font-size: 90%;
+    padding-left: 1em;
 }
 
 .float-left {
-  float: left;
+    float: left;
 }
 
 .float-right {
-  float: right;
+    float: right;
 }
 
 .running-name {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .end-float {
-  clear: both; 
+    clear: both; 
 }
 
 .missing {
-  background-color: yellow;
+    background-color: yellow;
 }
 
 :lang(de)    { quotes:"\201E" "\201C" "\201A" "\2018"; }
src/credits-en.xml to src/references-en.xml
--- a/src/credits-en.xml
+++ b/src/references-en.xml
@@ -1,11 +1,11 @@
 <?xml version="1.0"?>
 
 <d:page xmlns:d="urn:gimp-plugin-image-reg:doc"
-        name="credits"
+        name="references"
         language="en">
 
-  <d:title>Credits</d:title>
-  <d:short-title>Credits</d:short-title>
+  <d:title>References</d:title>
+  <d:short-title>References</d:short-title>
 
   <d:toc level="2"/>
 
@@ -21,10 +21,8 @@
       A Unifying Framework: Part 1,</q> tech. report CMU-RI-TR-02-16, Robotics
       Institute, Carnegie Mellon University, July, 2002</blockquote>
 
-      <p>to be found at <a
-      href="http://www.ri.cmu.edu/publication_view.html?pub_id=4031">
-      http://www.ri.cmu.edu/publication_view.html?pub_id=4031</a></p>
-
+      <p>to be found at <d:link
+      href="http://www.ri.cmu.edu/publication_view.html?pub_id=4031"/>.</p>
 
       <p>I also learned much from Oleg Krivtsov's implementation of <a
       href="http://www.codeproject.com/KB/recipes/ImgAlign.aspx">Image
src/tutorial-en.xml to src/examples-en.xml
--- a/src/tutorial-en.xml
+++ b/src/examples-en.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0"?>
 
 <d:page xmlns:d="urn:gimp-plugin-image-reg:doc"
-        name="tutorial"
+        name="examples"
         language="en">
 
   <d:title>Using the Plug-in</d:title>
@@ -13,70 +13,73 @@
     <d:info>
 
       <p>In the following I demonstrate two examples of combining images in
-      which I use the image registration plug-in in a preparatory step to
-      align the images. In the first example I show how to create an <em>HDR
-      image</em> out of three exposure bracketed images taken without tripod.
+      which I use the <strong>image registration plug-in</strong> in a
+      preparatory step to align the images. In the first example I show how to
+      create an <em>HDR image</em> out of three exposure bracketed images.
+      The images are slightly out of alignment as I took them without tripod.
       The second example is about a white stripe which my old scanner puts
-      into the output image. I show how I eliminate this stripe by combining
-      two scans of the same object which I take by placing the object on
-      different positions on the scanner.</p>
-
-      <p>Common to both examples is the fact that the original images cannot
-      always be aligned by simply moving the images in some direction. What we
-      generally need in such situations is a combination of
+      into the output images. I show how I eliminate this stripe by combining
+      two scans of the same object.</p>
+
+      <p>Common to both examples is the fact that the 
+      images cannot be aligned by simply moving the images in some
+      direction. What we need in most cases is a combination of
       <em>translation</em> and <em>rotation</em>, and in some rare cases even
       <em>scaling</em> and <em>shearing</em>. This is where the plug-in comes
       handy and helps us fine-align the images before we go for the actual
       process of combining the images.</p>
 
-      <p>The images used in these examples can be downloaded from the project
-      download page under the following link:
-      <em class="missing">link-to-example-images</em>.</p>
+      <p>The images used in these examples can be downloaded from the
+      project download page under the following link: <d:link
+      href="http://sourceforge.net/projects/gimp-image-reg/files/examples/"/>.
+      </p>
 
     </d:info>
 
     <d:section image-dir="../images/hdr">
       <d:title>Example 1: Creating an HDR image</d:title>
 
-      <d:figure float="right">
-        <table><tbody valign="top">
+      <p>The photos serving as raw material for this example were taken on a
+      sunny October afternoon in Schlossberg, Graz, as a series of exposure
+      bracketed images with exposure values 0.0, -1.0, and +1.0:</p>
+
+      <d:figure>
+        <table><tbody>
           <tr>
             <td>
-              <d:image rel-src="sb-3-mini.png" w="390" h="300"/>
-            </td>
-            <td>
-              <p>
+              <d:image rel-src="sb-1-mini.png" w="318" h="246"/>
+            </td>
+            <td>
+              <d:image rel-src="sb-2-mini.png" w="318" h="246"/>
+            </td>
+            <td>
+              <d:image rel-src="sb-3-mini.png" w="318" h="246"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="subcaption">
+                <strong>sb-1.jpg</strong> <br/>
+                F-Number: f/16.0 <br/>
+                Exposure time: 1/6 sec <br/>
+                Exposure bias value: 0 EV
+              </div>
+            </td>
+            <td>
+              <div class="subcaption">
+                <strong>sb-2.jpg</strong> <br/>
+                F-Number: f/16.0 <br/>
+                Exposure time: 1/13 sec <br/>
+                Exposure bias value: -1 EV
+              </div>
+            </td>
+            <td>
+              <div class="subcaption">
                 <strong>sb-3.jpg</strong> <br/>
                 F-Number: f/16.0 <br/>
                 Exposure time: 1/3 sec <br/>
                 Exposure bias value: +1 EV
-              </p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <d:image rel-src="sb-2-mini.png" w="390" h="300"/>
-            </td>
-            <td>
-              <p>
-                <strong>sb-2.jpg</strong> <br/>
-                F-Number: f/16.0 <br/>
-                Exposure time: 1/13 sec <br/>
-                Exposure bias value: -1 EV
-              </p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <d:image rel-src="sb-1-mini.png" w="390" h="300"/>
-            </td>
-            <td>
-              <p>
-                <strong>sb-1.jpg</strong> <br/>
-                F-Number: f/16.0 <br/>
-                Exposure time: 1/6 sec <br/>
-                Exposure bias value: 0 EV
-              </p>
+              </div>
             </td>
           </tr>
         </tbody></table>
@@ -84,17 +87,12 @@
         +1.0.</d:caption>
       </d:figure>
 
-      <p>The photos serving as raw material for this example were taken on a
-      sunny October afternoon in Schlossberg, Graz, as a series of exposure
-      bracketed images with exposure values 0.0, -1.0, and +1.0:</p>
-
-      <d:end-float/>
 
       <p>The steps for creating a contrast enhanced image out of these photos
       will be the following:</p>
       <ul>
         <li>Load the images as layers into Gimp</li>
-        <li>Re-align the images to minimize the displacements</li>
+        <li>Align the images to minimize the displacements</li>
         <li>Combine the images using layer masks</li>
       </ul>
 
@@ -122,20 +120,20 @@
       </d:section>
       <d:section>
         <d:title>Aligning the images</d:title>
-        <p>We choose <q>Background</q> as our reference image and minimize the
-        displacements of the other images relative to it. For doing so we
-        apply the image registration plug-in separately to each of <q>sb-2</q>
-        and <q>sb-3</q>.</p>
 
         <d:figure float="right">
           <d:image rel-src="screen-shot-02.png" w="264" h="575"/>
           <d:caption>Deactivate <q>sb-2</q> and set the layer mode
           of <q>sb-3</q> to <em>Difference</em>.</d:caption>
         </d:figure>
-        <p>Let's start with <q>sb-3</q>. First, we make
-        <q>sb-2</q> invisible (by clicking off the <em>eye</em>
-        symbol to the left of layer's icon) and set the layer mode of
-        <q>sb-3</q> to <em>Difference</em>.</p>
+
+        <p>We choose <q>sb-1</q> (Background) as our <em>reference image</em>
+        and align <q>sb-2</q> and <q>sb-3</q> by applying the image
+        registration plug-in separately to each of them.</p>
+
+        <p>Let's start with <q>sb-3</q>. First, we make <q>sb-2</q> invisible
+        (by clicking off the <em>eye</em> symbol to the left of layer's icon)
+        and set the layer mode of <q>sb-3</q> to <em>Difference</em>.</p>
 
         <d:end-float/>
 
@@ -151,13 +149,6 @@
         the bright edges give very useful clues to how much the images are
         actually displaced.</p>
 
-        <d:end-float/>
-
-        <d:figure float="right">
-          <d:image rel-src="screen-shot-04.png" w="607" h="496"/>
-          <d:caption>Move the selected layer to reduce its displacement
-          relative to the reference image.</d:caption>
-        </d:figure>
 
         <p>As an optional intermediate step, we manually move <q>sb-3</q> and
         reduce its displacement relative to the reference image. It is not
@@ -177,24 +168,19 @@
 
         <d:end-float/>
 
-        <d:figure float="right">
-          <d:image rel-src="screen-shot-05.png" w="273" h="326"/>
-          <d:caption>You find the <q>Image Registration</q> plug-in as last
-          item in <q>Tools</q> menu.</d:caption>
+        <d:figure float="right" w="677">
+          <div>
+            <d:image rel-src="screen-shot-05.png" w="273" h="326"/>
+            <d:image rel-src="screen-shot-06.png" w="404" h="423"/>
+          </div>
+          <d:caption>Dialog for setting the image registration
+          parameters. <q>Reference Image</q> denotes the layer against
+          which we align the selected layer.</d:caption>
         </d:figure>
 
         <p>Now make sure that <q>sb-3</q> is still selected, and choose
         from <q>Tools</q> menu the <q>Image Registration</q> plug-in, which
         you find as the last item in this menu.</p>
-
-        <d:end-float/>
-
-        <d:figure float="right">
-          <d:image rel-src="screen-shot-06.png" w="404" h="423"/>
-          <d:caption>Dialog for setting the image registration
-          parameters. <q>Reference Image</q> denotes the layer against
-          which we align the selected layer.</d:caption>
-        </d:figure>
 
         <p>This will pop up a dialog for setting the parameters and starting
         the image registration. The reference image in this dialog denotes
@@ -211,8 +197,9 @@
         </d:figure>
 
         <p>After a certain number of iterations, the plug-in will transform
-        <q>sb-3</q> to minimize the remaining displacement with respect to the
-        reference image. The final result is shown in this screen shot:</p>
+        <q>sb-3</q> to minimize the remaining displacements with respect to
+        the reference image. The final result is shown in this screen
+        shot:</p>
 
         <d:end-float/>
 
@@ -252,9 +239,31 @@
 
       <d:section>
         <d:title>Combining the images</d:title>
-        <d:figure float="right">
-          <!-- Hack: Add a div to prevent the script from retrieving the
-               caption width from any of these images. -->
+
+        <p>As the last step, we combine the layers by attaching a layer mask
+        to each of <q>sb-2</q> and <q>sb-3</q>. Layer mask is a gray-scale
+        image determining the transparency of the image, with white making
+        the corresponding pixels in the image fully opaque, and black making
+        them fully transparent. Values in between produce an effect of
+        partial transparency.</p>
+
+        <p>What we aim to achieve in this example is to enhance the dynamic
+        range of the background image (EV=0) by taking</p>
+        <ul>
+          <li><em>dark</em> areas from the <em>overexposed</em> image (sb-3),
+          and </li>
+          <li><em>bright</em> areas from the <em>underexposed</em> image
+          (sb-2).</li>
+        </ul>
+        <p>We produce this effect by adding</p>
+        <ul>
+          <li>an <em>inverted</em> gray scale copy as layer mask to
+          <q>sb-3</q>, and</li>
+          <li>a simple, i.e. non-inverted gray scale copy as layer mask to
+          <q>sb-2</q>.</li>
+        </ul>
+
+        <d:figure float="right" w="632">
           <div>
             <d:image rel-src="screen-shot-14.png" w="316" h="378"/>
             <d:image rel-src="screen-shot-15.png" w="316" h="378"/>
@@ -264,47 +273,31 @@
           for the overexposed image.</d:caption>
         </d:figure>
 
-        <p>As the last step, we combine the layers by attaching a layer mask
-        to each of <q>sb-2</q> and <q>sb-3</q>. Layer mask is a gray-scale
-        image determining the transparency of the image, with white making
-        the corresponding pixels in the image fully opaque, and black making
-        them fully transparent. The values in between produce an effect of
-        partial transparency.</p>
-
-        <p>By adding layer masks we aim to attenuate</p>
-        <ul>
-          <li>bright areas in the <em>overexposed</em> image <q>sb-3</q>
-          and</li>
-          <li>dark areas in the <em>underexposed</em> image <q>sb-2</q></li>
-        </ul>
-
-        <p>We achieve this effect by adding</p>
-        <ul>
-          <li>an <em>inverted</em> gray scale copy as layer mask to
-          <q>sb-3</q>, and</li>
-          <li>a simple, i.e. non-inverted gray scale copy as layer mask to
-          <q>sb-2</q>.</li>
-        </ul>
-        
         <p>For doing so, go to layer panel, right-click on the layer, and
         select <q>Add Layer Mask���</q> in the context menu. The corresponding
         dialogs are shown in these screen shots.</p>
 
         <d:end-float/>
 
-        <d:figure>
-          <!-- Hack: Add a div to prevent the script from retrieving the
-               caption width from any of these images. -->
+        <!--
+        <d:figure w="811">
           <div>
             <d:image rel-src="screen-shot-17.png" w="607" h="496"/>
             <d:image rel-src="screen-shot-16.png" w="264" h="575"/>
           </div>
           <d:caption>The result of combining the images.</d:caption>
         </d:figure>
-
-        <p>This is the result of combining the exposure bracketed images. You
-        can achieve different results by deactivating any of <q>sb-2</q> or
-        <q>sb-3</q>, or by moving <q>sb-2</q> up to make it the top layer.</p>
+        -->
+
+        <d:figure float="right">
+          <d:image rel-src="screen-shot-17.png" w="607" h="496"/>
+          <d:caption>The result of combining the images.</d:caption>
+        </d:figure>
+
+        <p>This is the result of combining the exposure bracketed images.</p>
+        <p>You can achieve different results by deactivating any of
+        <q>sb-2</q> or <q>sb-3</q>, or by moving <q>sb-2</q> up to make it the
+        top layer.</p>
 
         <d:end-float/>
 
@@ -383,9 +376,9 @@
       <d:section>
         <d:title>Aligning the images</d:title>
 
-
         <d:figure float="right">
           <d:image rel-src="screen-shot-05.png" w="404" h="427"/>
+          <d:caption>FIXME. Add caption.</d:caption>
         </d:figure>
 
         <p>Make sure that <q>sc-2</q> is selected (white frame in the layer
@@ -484,8 +477,9 @@
         </d:figure>
 
         <p>The final result of combining the scans is shown in this
-        figure. For making this image, I slightly rotated the combined image
-        and trimmed the dark borders contained in the original scans.</p>
+        figure. For making this image, I have slightly rotated the combined
+        image and trimmed the dark borders contained in the original
+        scans.</p>
 
         <d:end-float/>