b580d41048665bffe49a8d89bf380c63b64f2bb4
[booh] / www / advanced.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5   <title>Booh - The Web-Album of choice for discriminating Linux users</title>
6   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
7   <meta name="viewport" content="width=device-width"/>  
8 <style type="text/css">
9 body {
10         font-family: Verdana, Arial, Helvetica, sans-serif, monospace;
11         text-align: justify;
12 }
13 pre { background-color: #e0e0e0; }
14 tt { background-color: #e0e0e0; }
15 @media all and (orientation: landscape) {  
16     body {
17         margin-left: 15%;
18         margin-right: 15%;
19     }
20 }
21 </style>
22 </head>
23
24 <body bgcolor="#FFFFFF" text="#000000" link="#0000ee" vlink="#551a8b">
25
26    <table width="100%" cellspacing="0" cellpadding="0">
27      <tr>
28        <td width="25%" align="left" valign="top">
29          <a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://booh.org/"></a>
30        </td>
31        <td width="50%" align="center">
32          <img src="images/logo.png" alt="booh logo"/>
33        </td>
34        <td width="25%" align="right" valign="top">
35          <div style="display:inline-block; margin-bottom:0.2em"><img src="images/en.png" alt="this page is in english"/></div>
36          <div style="display:inline-block"><a href="advanced.fr.html"><img src="images/fr.png" alt="cette page en fran├žais"/></a></div>
37        </td>
38      </tr>
39    </table>
40
41    <h1 align="center">Booh</h1>
42
43    <p align="center">[ <a href="index.html">home</a> |
44                        <a href="themes/gradient/">example web-album</a> |
45                        <a href="video-demo.html">video demo</a> |
46                        <a href="tutorial.html">tutorial</a> |
47                        advanced |
48                        <a href="discuss.html">discuss</a> |
49                        <a href="download.html">download</a> ]</p>
50
51    <a name="performance"><h2>Performance - web-album creation</h2></a>
52
53    <p>To improve performance when creating thumbnails - a long and
54    painful step when creating web-albums - Booh takes advantage of
55    multi-processor machines.</p>
56
57    <p>The following figures were obtained on a P4 HT 2.8 GHz with
58    Linux 2.6.6 SMP 4G (note that this is not a real SMP machine) with
59    the same bunch of thumbnails to create:</p>
60
61 <pre>
62     Regular    2:10.81 elapsed
63     --mproc 2  2:01.44 elapsed  (0.928 Regular)
64 </pre>
65
66    <p>This is not bad, but clearly shows that an hyperthreading
67    P4 is not a real SMP machine by far! Now let's try with a
68    6-CPUs Pentium-3 Cascades 700 MHz:</p>
69
70 <pre>
71     Regular    2:58.07 elapsed
72     --mproc 2  1:32.48 elapsed
73     --mproc 3  1:03.34 elapsed
74     --mproc 4  0:49.12 elapsed
75     --mproc 5  0:40.86 elapsed
76     --mproc 6  0:39.03 elapsed  (0.219 Regular)
77 </pre>
78
79    <p>Now this multi-processor support Booh has is not a toy
80    feature.</p>
81
82    <p>More recent tests (not the same photos), on a Core i5
83    650 (dual core HT) 3.2 GHz with Linux 2.6.33.7 x86_64:</p>
84
85 <pre>
86     Regular    0:48.79 elapsed
87     --mproc 2  0:27.87 elapsed
88     --mproc 3  0:20.38 elapsed
89     --mproc 4  0:16.96 elapsed  (0.347 Regular)
90 </pre>
91
92    <p>More recent tests (not the same photos), on a Core i7
93    3770 (quad core HT) 3.4 GHz with Linux 3.3.4 x86_64:</p>
94
95 <pre>
96     Regular    1:18.21 elapsed
97     --mproc 2  0:39.82 elapsed
98     --mproc 3  0:27.49 elapsed
99     --mproc 4  0:20.95 elapsed
100     --mproc 5  0:17.88 elapsed
101     --mproc 6  0:15.77 elapsed
102     --mproc 7  0:13.93 elapsed
103     --mproc 8  0:12.70 elapsed  (0.162 Regular)
104     --mproc 9  0:12.66 elapsed
105 </pre>
106
107    <a name="classifierperformance"><h2>Performance - <i>booh-classifier</i></h2></a>
108
109    <p>
110      A test has been conducted on a p4 2.8 GHz with 1G of memory
111      running GTK+ 2.12.9: loading 134 3456x2304 photos coming
112      from a Canon EOS 350D, worth a total of 396 MB. After all
113      the files are in the file system's cache, the time to show
114      a thumbnail for all the photos is measured with
115      <i>booh-classifier</i> against other widely used programs:
116    </p>
117
118    <ul>
119      <li>booh-classifier 0.9.0: 18.9 seconds</li>
120      <li><a href="http://gthumb.sourceforge.net/">gthumb</a> 2.10.8: 22.5 seconds</li>
121      <li><a href="http://www.gnome.org/projects/eog/">eog</a> 2.22.0: 28 seconds</li>
122      <li><a href="http://www.konqueror.org/">konqueror</a> 3.5.9: 1
123      minute and 40 seconds (konqueror is apparently very slow for that
124      large photos, while it's reasonably fast for smaller photos)</li>
125    </ul>
126
127    <p>
128      Notice that also, gthumb and eog don't preload neighbourghood
129      photos (konqueror neither, but that's not applicable anyway); eog
130      is not capable of showing videos; and konqueror don't even show
131      portrait photos (containing the proper EXIF orientation)
132      correctly rotated - though I suspect it might be related to
133      something with the compilation or the configuration which I
134      wasn't able to locate.
135    </p>
136
137
138
139
140    <h2>Disk usage</h2>
141
142    <p>To reduce disk space usage, web-albums including the original
143    images use hard links between the original image in the source
144    directory and the destination directory. Of course, this requires
145    you use a single disk and partition for the source and destination
146    directories; if this is not the case, the image is simply copied
147    (that's fully transparent to the end-user).</p>
148
149
150
151
152    <h2>Architecture and data processing</h2>
153
154    <p>
155      The web-album generating is fully done by a CLI program called
156      <tt>booh-backend</tt>. It generates and/or manipulates an XML
157      file. Editing is done by a graphical front-end (using GTK+) called
158      <tt>booh</tt>. Therefore, one can generate a web-album with no
159      editing (and actually no human input)
160      <a href="tutorial.html#fastest">only with the CLI program</a> if
161      necessary, or opposedly, only use the graphical program if so
162      enclined (which is the easiest and recommended way). The use of
163      the XML file in between allows for easy "scripting" or
164      "extension" with any XML processing tool if needed. The XML file
165      has a straightforward DTD and actually comprises a tree of
166      elements similar to the filesystem tree of the web-album.
167    </p>
168
169
170
171    <h2>Internals</h2>
172
173    <p>The web-album generated by Booh makes heavy use of javascript in
174    order to be able to perform clever preloading of next/previous
175    images, and to show all images within a single HTML page (saves a
176    download and prevent from changing your scrolling position in the
177    browser). It should work fine with the broken insecure dominant
178    web-browser, but it has been developed using Galeon. Also, notice
179    that the generated album is perfectly viewable without javascript
180    (specific HTML pages are generated for that matter), hence
181    javascript is not mandatory to browse the albums (a browser with
182    javascript disabled will still be able to browse the albums).</p>
183
184    <p>The default theme, 'simple', has been written to be simple,
185    slick and could probably look better (submissions welcome). It has
186    several sizes of thumbnails and fullscreens, carefully crafted to
187    fit the most out of 800x600, 1024x748, 1280x1024, 1400x1050 and
188    1600x1200 displays (you can select the list of sizes you want for
189    your web-albums - then, when users browse the albums, a javascript
190    autodetection of the best size to fit the actual browser window
191    size is used). People interested in HTML/CSS are welcome to submit
192    new themes - check out the file THEMES in the tarball for
193    documentation about it.</p>
194
195    <p>If you want to create a new theme, or make local modifications
196    to a theme, just have them in your <tt>~/.booh-themes</tt>
197    directory (Booh version 0.9.2 and more recent). For example, to
198    hack off 'dark':
199    </p>
200
201 <pre>
202 # mkdir ~/.booh-themes
203 # cp -a /usr/share/booh/themes/dark ~/.booh-themes/mine
204 </pre>
205
206    <p>Use a different name than original theme names (here I picked
207    the dummy name 'mine', choose a better one).</p>
208
209    <p>
210      Currently available themes: <a href="http://booh.org/themes/simple/">simple</a> -
211                      <a href="http://booh.org/themes/gradient/">gradient</a> -
212                      <a href="http://booh.org/themes/cardu/">cardu</a> -
213                      <a href="http://booh.org/themes/dark/">dark</a> -
214                      <a href="http://booh.org/themes/sbs/">sbs</a>.
215    </p>
216
217
218
219
220    <h2>Translations</h2>
221
222    <p>
223      Booh has full internationalization support. Additionally, Booh
224      can generate web-albums with multi-languages navigation, so
225      that the web-albums automatically adapt to the language of the
226      user who's browsing! If missing, please contribute a
227      translation to your native language! Check the directory 'po'
228      in the download archive.
229    </p>
230
231    <table cellspacing="0" cellpadding="0">
232    <tr>
233      <td>
234        Booh is already available in french, german, japanese and
235        esperanto (beside english, of course).
236      </td>
237      <td align="right" width="1%">
238        <nobr>
239          <img src="images/en.png" alt="english flag"/>
240          <img src="images/fr.png" alt="french flag"/>
241          <img src="images/de.png" alt="german flag"/>
242          <img src="images/ja.png" alt="japanese flag"/>
243          <img src="images/eo.png" alt="esperanto flag"/>
244        </nobr>
245      </td>
246    </tr>
247    </table>
248
249
250 <p align="right"><font size="-1">Wed Jun  1 17:53:58 2011</font></p>
251
252 </body>
253
254 </html>