61924.nl

Status Report #1

2012-01-19T16:13:00-08:00

In a week or two most of the work at school will be done and I’ll be able to work more on my projects again. And after this semester I’ll start with my (academic) minor, Digital Arts. I’m sure it won’t take up all my time.

It’s not hard to work on something and forget about the other thing you’re working on. And some scribbles in my notebook aren’t going to prevent that. So I’ll put a status report on my blog so I won’t forget about it. It also kinda forces me to be less lazy, because I post this in a public place. And forces me to do stuff.

Thrift

I’m working on a Thrift client for Tornado. It took a bit longer to get started than expected, but I’ve figured out how it works (mostly) now and started to document the binary protocol.

After the documentation is done I’ll start with making a client that communicates with the Thrift server in the tutorial code. Once that’s done and once I figured out how everything should be structured I’ll start with a IDL compiler.

I haven’t thought out that last one yet, but after looking through the Python code that Thrift generates I saw that it wasn’t easy to make it work for Tornado. So I guess I’ll have to make something that generates TOrnado friendly code. Luckily the IDL doesn’t look to complex.

Misaka

All functionality of 1.0.0 is done, but it hasn’t been tested completely and the documentation needs to be updated. There’s probably also need for a separate Python 2 and 3 package, because the C code that Cython generates is different for 2.X and 3.X.

Momoko

I think it’s time for 0.4.1 soon. There are not a lot of changes, but recovery from closed connections is a nice one. I’m going to look into a minor issue regarding error handling and then 0.4.1 will be released.

FluxBB/php-utf8

There are some tickets assignment to me and I’ll have to update a number of things in php-utf8.

Franz converted all unit tests to PHPUnit and I added namespaces to everything. I’ll now have to reformat all code according to the code formatting guidelines (I like neatly formatted code). And while I’m at it I’ll have to check the code too.

I’m also thinking of making all of php-utf8’s documentation in Sphinx. It works perfectly for Python-based projects. So why not for PHP-based projects?

Momoko 0.4.0

2011-12-15T09:30:00-08:00

A new release of Momoko! This time it’s 0.4.0. It took a while, but it’s done now. Here are the changes:

Reorganized classes and files.
Renamed momoko.Client to momoko.AsyncClient.
Renamed momoko.Pool to momoko.AsyncPool.
Added a client and pool for blocking connections, momoko.BlockingClient and momoko.BlockingPool.
Added PoolError to the import list in __init__.py.
Added an example that uses Tornado’s gen module and Swift.
Callbacks are now optional for AsyncClient.
AsyncPool and Poller now accept a ioloop argument. [fzzbt]
Unit tests have been added. [fzzbt]

Grab it from PyPi or from Github!

Misaka 1.0.0 Beta 1

2011-12-08T13:45:00-08:00

It’s been a while. Like a few months. And I’ve been working on duplicating Redcarpet’s functionality. I think everything should work now, but I still need to test everything properly and that’s why I’m releasing a beta. And the API documentation is also lacking, but the the code itself is understandable enough.

My understanding of C is still limited, but thanks to Redcarpet’s source code I figured out how to implement everything. Not everything is in C. The largest part is actually done in Cython. Which is a great tool. I’ve also included the C code that’s generated by Cython, so you don’t have to install Cython to compile Misaka. Only when you want to regenerate the C code (in that case you use setup_cython.py).

Besides the big API change, Misaka now also accepts Unicode strings, but the side effect is that it’s faster in Python 3. And Python 2 is a lot slower in the benchmark, but you won’t really notice it (if you’re not parsing a large document 10,000 times).

Here’s a small example (the old API is also available).

from misaka import Markdown, HtmlRenderer, SmartyPants

class BleepRenderer(HtmlRenderer, SmartyPants):
    pass

md = Markdown(BleepRenderer())
print(md.render('Some "stuff" here'))
# <p>Some &ldquo;stuff&rdquo; here</p>

The classes are located in misaka.pyx and all the callbacks you can implement in your own renderer are listed in wrapper.c. That’s quite unfriendly documentation at the moment, but I’m planning to change that.

For now just fetch the code from the Github repository. If something is not working, please report it.

Have fun.

Momoko 0.3.0

2011-08-07T14:10:00-07:00

Today I present a new release of Momoko, version 0.3.0. It’s been a while ago since I released 0.2.0 (three months ago). I’ll blame on school and my vacation. ;)

The following changes have been made:

Renamed momoko.Momoko to momoko.Client.
Programming in blocking-style is now possible with AdispClient.
Support for Python 3 has been added.
The batch and chain fucntion now accepts different arguments. See the documentation for details.

The nicest addition is that you can now query the database without using callbacks. This is possible by using adisp. Here are some examples:

cursor = yield self.db.execute('SELECT 42, 12, 40, 11;')

cursors = yield self.db.batch({
    'query1': ['SELECT 42, 12, %s, %s;', (23, 56)],
    'query2': 'SELECT 1, 2, 3, 4, 5;',
    'query3': 'SELECT 465767, 4567, 3454;'
})

cursors = yield self.db.chain((
    ['SELECT 42, 12, %s, 11;', (23,)],
    'SELECT 1, 2, 3, 4, 5;'
))

As you can see there is a yield keyword. You also need to put an extra decorator on your get/post/somethingelse function, momoko.process. That’s all.

View the updated documentation on momoko.61924.nl and download the new release from PyPi.

Have fun.

Renamed Pantyshot to Misaka

2011-07-03T15:42:00-07:00

Today I have renamed the Python binding for Upskirt, Pantyshot, to Misaka. Yesterday and today I received some messages from people who had a problem with the name I chose for my Python package. And I also found out that Steve Holden wrote a blogpost about it.

I chose the name, because I thought it was funny. I also talked to some people to check if it wasn’t offensive or plain weird (they thought it was funny too). The name followed the same theme as the library I used, Upskirt. I did not mean to cause people problems with the name I had chosen.

It surprised me was that people who had problems with the name didn’t contact me about it. Instead I saw the blogpost after someone emailed me about it. And after I commented on that blogpost I received two more messages.

In response to the last two messages I changed the name as soon as possible. And everything is alright now and both sides learned something. I should not let my perverted mind create project names and think how it might influence other people. And the other people should now know that they should communicate directly about problems.

Pantyshot 0.2.1

2011-06-05T12:30:30-07:00

Last month I noticed Upskirt on Github and since I also started with C on school around the same time I decided to make a Python extension/binding. It’s not much more than a simple wrapper that has almost the same API as the C library.

Go to the Pantyshot website for documentation and downloads.

I’ve also included a little benchmark in this release, but I forgot to mention it in the changelog. All the latest versions (at the time of writing) of the Markdown parsers that I could find on PyPi are included. Here are the results:

Pantyshot: 0.040000
Markdown: 4.900000
markdown2: 7.350000
cMarkdown: 0.090000
discount: 0.160000

That’s the output in seconds from Pythons' time.clock().

Pantyshot and cMarkdown are both bindings for Upskirt, but Pantyshot is twice as fast. This is because cMarkdown hasn’t been updated since April and lots of things has been changed in Upskirt since then. That probably causes the difference.

Markdown and markdown2 are both fully implemented in Python. discount is written in C. These three are slower than the Upskirt-based extensions.

The benchmark script and data can be found in the Github repository. The following versions of the Markdown extensions were used:

Pantyshot 0.2.1
Markdown 2.0.3
markdown2 1.0.1.17
cMarkdown 0.1.1
discount: 0.2.1STABLE

I ran the benchmark with Python 2.7.1 on Arch Linux.

Momoko 0.2.0

2011-04-30T06:37:50-07:00

A new version of the asynchronous Psycopg wrapper for Tornado. Here is the list of changes for this release:

Removed executemany from Momoko, because it can not be used in asynchronous mode.
Added a wrapper class, Momoko, for Pool, BatchQuery and QueryChain.
Added the QueryChain class for executing a chain of queries (and callables) in a certain order.
Added the BatchQuery class for executing batches of queries at the same time.
Improved Pool._clean_pool. It threw an IndexError when more than one connection needed to be closed.

And some documentation has been put online at momoko.61924.nl. Momoko can be downloaded from PyPi and Github.

Why BBCode?

2011-04-25T05:30:50-07:00

Why is BBCode used on (almost) all forums? It was initially some kind of safe form of HTML so the layout of the forum wouldn’t be disrupted and their wouldn’t be any danger of XSS attacks, but it is unreadable as hell in its unconverted form. It’s just HTML with square brackets instead of less- and greater-than brackets.

It surprises me that BBCode is still used on forum. There are other lightweight markup languages that are much nicer and are also readable in their unconverted form. So why not use Markdown, reStructuredText or Textile instead?

All of the markup languages I named have implementations in multiple languages (e.g. Python, PHP, .NET, Ruby, Perl). So let’s get rid of this ugly thing, called BBCode.

Ubuntu 10.10

2011-04-11T06:23:50-07:00

Three weeks ago I installed Ubuntu 10.10 on my laptop, because I was having problems again with NetworkManager again on Arch Linux. I wanted something that didn’t require me fixing programs that don’t give me a decent error message, because I only use my laptop for work and school.

It took an hour or two (or three) to install and configure everything. Replacing programs, choosing a GTK theme, looking for a nice wallpaper. Almost no command-line actions were required. Only when I wanted to add some new software sources and a kernel with the CK patchset. I don’t mind doing things with a terminal, it even goes faster, but non-technical users like GUIs so I guess it’s a good thing.

There are some things that I don’t like. Like Nautilus. It takes a while before it appears and on top of that it’s ugly. I haven’t been able to find a PPA for Thunar 1.2, but it looks like it is included in Ubuntu 11.04, so I’ll wait for that one.

It’s not as responsive as the previous Arch Linux installation and the start up time is also longer, but I’m pretty happy with it besides that. Look at that nice screenshot.

(Click for larger image)

I’ll keep Arch Linux on my desktop PC since it’s much easier to change things, it’s faster (depends on what you install ofcourse), the AUR is awesome and I have the time to configure stuff.

Async Psycopg for Tornado

2011-03-09T05:23:50-08:00

Update: I’ve made a repositoryon Github: github.com/FSX/momoko.

Since last week I’ve been trying to get asynchronous Psycopg working with Tornado after I got some good help on the mailinglist. I’ve put the code in a gist on Github. An example is also included.

This should be considered alpha software since I didn’t test it extensively. And I’ll put it in a library when it gets bigger.

Here’s a small fragment of an example application:

from async_psycopg2 import Pool

class BaseHandler(tornado.web.RequestHandler):
    @property
    def db(self):
        if not hasattr(self.application, 'db'):
            self.application.db = Pool(1, 20, 10, **{
                'host': 'localhost',
                'database': 'somedatabase',
                'user': 'someuser',
                'password': 'password',
                'async': 1
            })
        return self.application.db

class MainHandler(BaseHandler):
    @tornado.web.asynchronous
    def get(self):
        self.db.execute('SELECT 42, 12, 40, 11;', callback=self._on_response)

    def _on_response(self, cursor):
        self.write('Query results: %s' % cursor.fetchall())
        self.finish()

I was considering trying to add a way to run multiple asynchronous queries in one request, but I’ll wait with that untill I need it in the project I’m working on.

Cheap Hosting

2011-01-24T14:06:02-08:00

I decided to close my Webfaction account and search for a cheaper alternative since I wasn’t using it that much and the numbers on my bank account were getting smaller. Webfaction is still a very good shared host. And they have a great helpdesk.

My domain has been moved from Idotz to Nedlinux. This saves me about 10 euros and I also have whois protection + full DNS control. And till now their service is good.

Google Apps is used for email. I haven’t been able to find a email client, web- or desktop-based, that beats the Gmail interface. And it makes it even more awesome after I found a blog post that explains how to enable multiple sign-ins.

All the content and code is hosted on Github. Once I push new changes, Jekyll generates fresh HTML and stuff and my website is updated. And since it doesn’t make sense to store images in Git that won’t change, the images are stored on Dropbox. Besides that it’ll probably fill my Github account faster than I want.

And this saves about 100 euros a year and the only thing I have to pay now is 15 euros a year for the domain. Yay!

I Don't Need Window Titlebars

2011-01-24T11:19:30-08:00

Why? Because they waste space and I rarely use them.

There are only three buttons (sometimes an extra button for the window menu) and a title on this bar. The close button is probably used the most, but all of the functionality that resides in the titlebar can be integrated into the taskbar or some keyboard shortcuts.

The window title can be displayed in the taskbar item of the window. A right-button mouse click can close the window or show a menu with some options. Scroll-down and scroll-up can minimize and restore the window. With some keyboard shortcuts you can do the same.

Action	Shortcut
Close	Super + c
Maximize	Super + d
Fullscreen	Super + f
Move	Alt + Left mouse button
Resize	Alt + Right mouse button
Browse windows	Alt + Tab

Some examples in the above table. Super is the Windows key. It’ll probably make you faster in handling your windows.

I think in most standalone window managers you can disable the title bar and configure some keyboard shortcuts, but getting rid of the titlebars in Xfce and Gnome wasn’t easy. The only way I could find was editing the theme. It’s too much work when you want to use an other theme. Not cool.

That’s one way to get 10-15px extra screen space. Another way to get ~30px more space is putting your taskbar on the left or right side on your screen. Most displays are widescreen these days and you’ll have more vertical space that way.

Tint2 is a good taskbar. It’s very easy to configure. I placed it on the right side of my display and it displays all workspaces with all running applications displayed as icons.

I also like Apple’s taskbar. The program menu (file, edit, etc.) is integrated into the taskbar and with the Finder menu you can select a running application if I remember it correctly. It’s been more than 4 years ago since I used a Mac. At my old school they used Mac OS X.

Hmm, I guess that’s it.

randwp

2010-11-03T14:23:08-07:00

Edit 19 Nov 2010: Dcop only works on KDE3.

randwp is a small CLI script that downloads a random wallpaper from the toplist on Wallbase and sets the wallpaper to the desktop background. It’s written in Python 3 and works on Linux, Windows 7 and it should also work on Mac OS X.

A classmate figured out how the URL paramaters worked and how to get Json back from the server. And I worked it into a nice little script while I was visiting a friend.

Installation

This script needs Python 3. It can easily be modified to work on Python 2.*, but Python 3 is the future and it’s the default Python in Arch Linux now.

Windows users need to install pywin32 and Mac OS X users py-appscript. Otherwise the script can’t set the wallpaper to the background. Both modules work with Python 3.

Windows probably needs a reboot after installing Python and pywin32.

After you’ve installed all the required software, grab the code from Gist 641377 on Github and put it into a file called randwp.py. You might need to replace python with python3 on the first line (the Shebang line) if your Linux distro doesn’t have Python 3 as the default one.

Where the script is located doesn’t really matter. You can put it in the $PATH and make it execable or somewherein your home directory. As long as you know where it is.

Usage

The first thing you do after you installed it is:

$ python randwp.py --help

It’ll show a list with options. Read this and try them all. The only option that is required is -s, or --bg-setter, where to specify which background setter you want to use.

win32 should be used on Windows, macosx on Mac OS X and on Linux you can specify a command that will set your background. Like feh. Here’s an example:

$ python randwp.py -s 'feh --bg-tile "%path%"'

%path% is replaced with the path to the wallpaper.

Some more examples:

$ python randwp.py -s 'feh --bg-tile "%path%"' -r 1920x1080 --sketchy -p 1..50
$ ./randwp.py -s 'feh --bg-tile "%path%"' -r 1366x768 --no-sfw --nsfw

For Windows:

C:\Python31\pythonw.exe C:\path\to\randwp.py -s win32 -r 1366x768 -p 1..5

For GNOME you can use one of these two:

$ ./randwp.py -s 'gconftool-2 --type string --set /desktop/gnome/background/picture_filename %path%'
$ ./randwp.py -s 'gconftool-2 -t string -s /desktop/gnome/background/picture_filename %path%'

For KDE3 you can use:

./randwp.py -s 'dcop kdesktop KBackgroundIface setWallpaper %path% 4'

And for Xfce ypu can use this:

$ ./randwp.py -s 'xfconf-query -c xfce4-desktop -p /backdrop/screen0/monitor0/image-path -s %path%'

It’s simple. :)

Extras

To let the wallpaper change every X minutes on Linux you can put the following snippet in your ~/.xinitrc file. Don’t forget to modify it first.

while :; do
    python /path/to/randwp.py -s 'youbackgroundsetter "%path%"'
    sleep 20m
done &

On Windows you can use the task scheduler. Note that pythonw.exe has been used, because you’re get a ugly DOS box when the script runs when you use python.exe. In the Triggers tab you can make a schedule for the script.

(Click for larger image)

I don’t know about Mac OS X, but it probably has something similar.

Uhm…

That’s all. If you got suggestions, want to add support for Gnome or KDE or report that something is broken — just send me a mail. You can find my email address on the About page.

Switched to Jekyll

2010-10-31T14:00:00-07:00

This website is now generated by Jekyll and hosted on Github. It takes too much time to make a decent application for myself and that’s partly because of the lack of motivation. Making a simple blog application isn’t very exciting. I can spend that time on other projects that are more important.

I first tried Posterous, but it didn’t really work out. Didn’t like the WYSIWYG editor and the syntax highlighter couldn’t process certain pieces of code.

Anyway, Jekyll (+ Github) was the winner.

Whoosh!

2010-08-19T11:32:50-07:00

A few days ago I found Whoosh. It is a fast, featureful full-text indexing and searching library implemented in pure Python. And it doesn’t require a lot of code to get something useful.

In this post I’ll show you how to make a simple search engine, which could be used on a website like I do. I’ll put everything into a simple class, a thin wrapper around Whoosh, and add a piece in each example. The ... is a replacement of a piece of code from the previous example and is not needed in the current example. Module imports will only be shown once per example. Just add the imports from the previous examples to the one you’re looking at.

Install Whoosh with easy_install Whoosh or pip install Whoosh. Or clone the Mercurial repository with hg clone http://bitbucket.org/mchaput/whoosh.

First we need a schema that specifies the fields of a document in an index. Take a look at Designing a schema from the Whoosh documentation for more information.

import whoosh.fields

class SearchEngine(object):
    schema = whoosh.fields.Schema(
        url=whoosh.fields.ID(unique=True, stored=True),
        title=whoosh.fields.TEXT(stored=True, phrase=False),
        content=whoosh.fields.TEXT())

That’s the same one I use for this website. We’ll only use content to search through. url and title are going to be used to display the search results. url is unique, becuase it’ll be possible to update/re-index documents later.

import os, os.path
import whoosh.index

class SearchEngine(object):
    ...
    def __init__(self, index_path):
        self.path = index_path
        if not os.path.exists(index_path):
            os.makedirs(index_path)

    def create_index(self):
        whoosh.index.create_in(self.path, self.schema)
        self.open_index()

    def open_index(self):
        self._index = whoosh.index.open_dir(self.path)
        self._writer = self._index.writer()

    def index_exists(self):
        return whoosh.index.exists_in(self.path)

    def add_document(self, url, title, content):
        self._writer.add_document(
            url=unicode(url),
            title=unicode(title),
            content=unicode(content))

    def update_document(self, url, title, content):
        self._writer.update_document(
            url=unicode(url),
            title=unicode(title),
            content=unicode(content))

    def delete_document(self, url):
        self._index.delete_by_term('url', unicode(url))

    def commit(self):
        self._writer.commit(optimize=True)

    def cancel(self):
        self._writer.cancel()

Now the class has everything to create and modify the index. Start the search engine with SearchEngine('./somepath'). The only argument you need to give is the path where the index files are stored. If the directory does not exist it will be created automatically. Call create_index or open_index to create or open an index. One of these two must be called before you call add_document, update_document and delete_document. After some documents have been added, updated or deleted you can call commit or cancel if the changes don’t need to be stored.

Something that needs to be mentioned is that you need to strip the HTML from your documents before you index them. Otherwise it gets indexed too and you might get strange results. I use the following two functions to clean my data.

import re

RE_GIST_JS = re.compile('<script(?: type="text\/javascript")? src="'
    'http:\/\/gist.github.com\/([0-9]+)\.js"><\/script>')
def replace_gist_js(text):
    return RE_GIST_JS.sub(
        '<a href="http://gist.github.com/\1">[Gist \1]</a>', text)

REGEX_HTML_TAG = re.compile('<[^<]*?/?>')
def strip_html_tags(text):
    return REGEX_HTML_TAG.sub('', text)

Here’s an example. Store the code in searchengine.py and put a __init__.py in the same directory then start a Python shell and change the working directory to the one where you stored searchengine.py.

>>> from searchengine import *
>>> search = SearchEngine('./index')
>>> search.create_index()
>>> search.add_document('http://example.org/somedocument',
    'The document title', 'The content of the document')
>>> search.commit()

Now we can create the function that does the searching for us. You should know how to use this function.

import whoosh.qparser

class SearchEngine(object):
    ...
    _queryparser = whoosh.qparser.QueryParser('content', schema=schema)
    def find(self, querystring):
        s = self._index.searcher()
        return s.search(self._queryparser.parse(
            unicode(querystring)), limit=50)

Put this function in the SearchEngine class and put it in searchengine.py. Start up the Python console, just like earlier.

>>> from searchengine import *
>>> search = SearchEngine('./index')
>>> search.open_index()
>>> search.add_document('http://example.org/somedocument_2',
    'Number 2', 'There is some content here.')
>>> search.add_document('http://example.org/somedocument_3',
    'Nothing...', 'But there\'s nothing here. :(')
>>> search.add_document('http://example.org/somedocument_4',
    'Fantastic Four', 'Some stuff here!')
>>> search.add_document('http://example.org/somedocument_5',
    'Johnny Five', 'Pew pew pew!')
>>> search.commit()
>>> results = search.find('content')
>>> results
<Top 2 Results for Term('content', u'content') runtime=0.0002169609>

It looks like it found 2 documents. We want to see those!

>>> for result in results:
...     print result
...
{'url': u'http://example.org/somedocument',
    'title': u'The document title'}
{'url': u'http://example.org/somedocument_2',
    'title': u'Number 2'}

And now with a score!

>>> for i, result in enumerate(results):
...     print '%s - %s: %s' % (results.score(i),
...         result['title'], result['url'])
...
0.694600288045 - The document title: http://example.org/somedocument
0.534820030092 - Number 2: http://example.org/somedocument_2

Well, that’s it. Now you should be able to use Whoosh for basic stuff, but I recommend looking through the documentation and the source code. And this class doesn’t have any error reporting or search query filtering, so don’t using it without adding those two first.

All the code from this post can be found at Gist 538415.

Gravatar for FluxBB 0.1.2

2010-07-24T09:39:54-07:00

Just added Gravatar for FluxBB 0.1.2 to the FluxBB modification repository. This is a tiny mod that gives you the possibility to use your Gravatar on a FluxBB forum. It can be downloaded at the modification repository.

(Click for larger image)

ImgBrowz0r 0.3.7

2010-07-22T12:39:45-07:00

A bit late, but it’s here, ImgBrowz0r 0.3.7. Even though this is a minor release I added some new features. Like caching, sort by Exif date and a crop mode for thumbnails. And also some other stuff. Here’s the changelog:

Added “sort by EXIF DateTimeOriginal.” Patch provided by bc.
Replaced scandir() with DirectoryIterator.
The timezone configuration option now accepts a valid TZ database timezone or false. When false is used the timezone setting will be skipped.
The enable_dst configuration option has been dropped.
Do not check if GD is enabled anymore.
Renamed the imgbrowz0r class to ImgBrowz0r.
Added small, optional, replaceable caching class.
A better pagination function.
Use P tags instead of DIV tags to wrap the breadcrumbs, pagination and statistics.
All files in the cache are now writeable by everyone. This ensures you can remove the cache files generated by the PHP/Apache user with your FTP client.
Added crop mode. This mode crops a random part of the image. (experimental)

First “crop mode.” I couldn’t think of a cooler name, but it is cool. Instead of resizing the whole image to a thumbnail it cuts out a random piece of the image and uses that to create the thumbnail. It’s not working perfectly yet (with smaller images), but it works fine with normal photo-size images. Here’s an example:

(Click for larger image)

Second, sorting with Exif data. ImgBrowz0r uses the Exif PHP extension to extract the necesarry data from Jpeg images and uses DateTimeOriginal to sort the images. When Exif is not available the timestamp from the filesystem will be used.

Third. Timezones can now be configured with the time_zone option and accepts a TZ timezone which can be found in the List of tz database time zones. This should also take care DST.

And the last one, the cache. You won’t notice any difference with small galleries, but with larger galleries you will. The cache is optional and, if you want, you can also use you own caching class.

Information and install/update/usage instructions can be found in the tarball which can be downloaded from the download page.

Extending PHP Software

2010-05-13T13:58:00-07:00

A while ago an idea popped into my head while thinking about Fluxbb 2.0. The current Fluxbb (1.2/1.4) don’t have an extension system and requires the core code to be edited when you install a modification.

Modified core code causes more work when the forum owner needs to upgrade to a newer version of Fluxbb and it’s not easy to keep track of the changes in the code (maybe a VCS could help with this).

Fluxbb 1.3 did have an extension system which made it possible to install, upgrade and remove extensions. But this version was dropped by the developers, because they were not happy with the extension system.

It’s (almost) certain that Fluxbb 2.0 is going to have an extension system. So I thought about one that could be used, but I don’t know if it’s practical to use. At the moment, it’s just food for discussion.

My idea is …

… to use a script/application, lets call it the Extension Manager, that merges the extension code right into the core code (basically a code generator). This script should also take care of extension updates and core updates. With such a system, there’s no need for an extension system that loads all the extensions at runtime.

I hear you thinking “doesn’t take make it less easy to install/remove extensions? And what about developing extensions?” Well, yes, but only a bit. Let me explain it.

In the source code of the project (in this case Fluxbb) there are markers/hooks. These are PHP comments formatted in a certain way. The extension manager scans the source code for these markers and will know all the points where code can be inserted.

Here’s an example of a marker (seb = start extension block, eeb = end extension block):

# seb: extension_block_id_or_name
# eeb: extension_block_id_or_name

The extension code will be inserted between these two comments and the extension code will also have its own markers so the extension manager can identify all the extensions, which makes it possible to update extentions.

Here’s an example of code inserted into an extension block:

# seb: extension_block_id_or_name
# start_extension: foreach_loop
$numbers = array(1, 2, 3, 4, 5);
foreach ($numbers as $n)
{
    echo $n;
}
# end_extension: foreach_loop
# eeb: extension_block_id_or_name

The extension manager will be able to scan the source code and extension blocks and identify all the installed extensions. This makes it possible to update extensions by replacing certain code blocks.

Developing extensions will be fairly simple. The idea is that extensions are written in a vanilla installation (no extensions installed). Extension code can be added between the markers. Once the extension is done, one can use the extension manager to extract the extension code into a single file, which can be used to distrobute the extension.

The disadvantage of this method is that it isn’t possible to install/remove extensions with one click on the button. You’ll first have to (un)select the extensions in the extension manager and regenerate the code. But how often do you do that? Only when you prepare your forum for production use and maybe to try a new extension once in a while.

That’s it. Feel free to comment.

AtomParser

2010-04-24T06:33:00-07:00

Someone needed a way to parse Atom feeds, since SimplePie was spitting out errors in PHP 5.3. So I offered to write a small library to parse Atom feeds (it should work with other XML stuff too).

It’s a really simple PHP class that takes in a filepath (or URL) and gives you an array back. And it also caches the result if you want that. The code can be downloaded from Gist 377548.

Here’s an usage example:

try
{
    $p = new AtomParser('fluxbb.atom');

    print_r($p->parse());
}
catch (AtomParserException $e)
{
    echo $e->getMessage(), "\n\n";

    print_r($e->get_libxml_errors());
}

Now, let’s make it a bit more exciting by combining multiple feeds. First choose some Atom feeds, put then in an array and parse them.

error_reporting(E_ALL);
header('Content-Type: text/plain; charset=utf-8');

require 'atomparser.php';

$feedsurls = array(
    'fluxbb-news' => 'http://fluxbb.org/forums/feed/atom/forum/1/posted/',
    'fluxbb-dev' => 'http://gitorious.org/fluxbb.atom',
    'fluxbb-discussion' => 'http://fluxbb.org/forums/feed/atom/forum/14/last_post/'
    );

// Fetch and parse all the feeds
$feeds = array();
foreach($feedsurls as $n => $u)
{
    $tmp = new AtomParser($u);
    $feeds[$n] = $tmp->parse();
}
unset($tmp);

After that we’ve got to merge the entries from all the feeds and change the date in the updated tag into a timestamp to make the sorting of all the entries easier.

$entries = array();
foreach ($feeds as $n => $f)
{
    foreach ($f['entry'] as $index => $entry)
    {
        $f['entry'][$index]['website'] = $n;
        $f['entry'][$index]['updated'] = strtotime($entry['updated']);
    }

    $entries = array_merge($entries, $f['entry']);
}

The sorting of the entries with PHP’s multisort.

foreach($entries as $res) $sort_entries[] = $res['updated'];
array_multisort($sort_entries, SORT_NUMERIC | SORT_DESC, $entries);

And display some data.

foreach ($entries as $e)
{
    echo 'Website: ', $e['website'], "\n";
    echo 'Title: ', $e['title'], "\n";
    echo 'Date: ', date('jS, F Y - H:i:s', $e['updated']), "\n\n";
}

The code of this example can be found at Gist 378363. Feel free to use it in any way you want. For example: combine all your social media Atom feeds and display them on your website.

Medit Gist Tool

2010-04-23T12:36:00-07:00

A small tool for Medit to create Gists on Github. It uses Pygist to create the Gist and Gxmessage/Xmessage to display the URL.

First install Pygist (AUR) and Gxmessage. Gxmessage is optional though. If Gxmessage isn’t found, Xmessage will be used.

Then start Medit, open the Preferences windows and go the the Tools tab. Create a new tool, Gist, and use the following code (and settings):

Or take a look at the screenshot:

(Click for larger version)

The Gist tool can now be accessed via Tools > Gist in the menu. After 2 or 3 seconds you’ll get a dialog with the URL:

Random wallpapers

2010-03-24T11:45:00-07:00

A simple bash/dash script for setting a random wallpaper (at startup).

I initially made something with Python, but someone pointed out that it could be done much easier. After modifying it a bit, the following was the result:

set_random_wp

#!/bin/dash

if [ ! -f ~/.wpdb ]
then
    update_wpdb
fi

feh --bg-center "$(cat ~/.wpdb | shuf -n1)"

update_wpdb

#!/bin/dash
find /home/frank/Images/Wallpapers -type f > ~/.wpdb

Note: Replace #!/bin/dash with #!/bin/bash or #!/bin/sh if you don’t have or don’t want to use dash.

Put the above two scripts in /usr/bin or in an other directory from $PATH. And put the following code in .xinitrc (above the exec <window manager> line) or in an other startup script.

while :; do
    set_random_wp
    sleep 20m
done &

It’ll set a random wallpaper each 20 minutes.

ImgBrowz0r 0.3.6

2010-02-16T11:17:00-08:00

Update September 27th, 2009: Another vulnerability was found in 0.3.5. Please upgrade to 0.3.6. The download link in this post has been updated.

This release has fixed a directory traversal vulnerability and has some speed improvements (~15% on my development server).

Here is the changelog:

Renamed index.php to example.php.
Fixed directory traversal vulnerability. Fixed by bc.
sort_order options need different values. See example.php for information.
Some small optimizations (e.g. scandir instead of readdir).
Removed the filesize_limit option. This slowsdown everything and a user should be able to check his/her photos or other images before he puts them online.
Fixed directory traversal vulnerability (again). Reported by Secunia Research.

The latest release can be downloaded from the downloads page on Github.

Jsimgbox 2.0

2010-02-10T06:21:00-08:00

I’t finally done. Well, it was already done last week, but it didn’t work in Internet Explorer for some reason.

It looks like (still) IE doesn’t support getElementsByClassName(), while all the other browsers support it. I don’t know what the reason for that decision is, but it’s quite annoying.

Jsimgbox is a really simple Lightbox clone. It just shows an image and that’s it. And it’s only 1.552KB when it’s compressed with YUI Compressor.

It doesn’t need a Javascript library like jQuery or Mootools. The old version, 0.2, does need Mootools, but the current version, 2.0, doesn’t.

This script has been tested in:

Chromium 4.0.249.78 (36714) (Linux)
Swiftfox 3.6 (Linux)
Midori 0.2.2 (GTK+ 2.18.5, WebKitGTK+ 1.1.15) (Linux)
Opera 10.20 Alpha 1 (Build 4744) (Linux)
Internet Explorer 8 (Windows ?)

Click here to download Jsimgbox 2.0 or here to visit the Git repository.

The installation instructions can be found in the README file.

Setting up a web development environment

2010-01-15T15:15:30-08:00

This Monday I was planning to cleanup and reorganize my web development server. Everything was dumped in my home directory and I used some simple scripts to start the services I needed (manually, each time I booted my server). So it was time for some spring cleaning.

I’m using Arch Linux and you’ll need it to follow this article. Unless you know how to do everything on other GNU/Linux distros. If you don’t use Arch Linux just hook up an old computer and start reading the Beginners' Guide and install Arch Linux. After you’ve done that install SSH.

Software

There’s some software we need that is only available on the AUR. So install packer, yaourt or any other tools you like.

Here are the packages you need:

nginx-unstable
mysql
php
php-cgi
phpmyadmin

Install these packages. I’ll explain how you can configure these later in the article. php-cgi only has to be installed and doesn’t need any further configuration.

I’m not going to explain how to configure MySQL, because I’m just using the default configuration from the ArchWiki. Just follow the instructions on that wiki article.

Users & Groups

It’s not really safe to run the webserver and PHP as root. We’ll make a new user and usergroup, both are called www, which is going to be used for PHP and Nginx.

Run the following commands as root:

$ groupadd www
$ useradd -g www www
$ chmod +w /srv/http/nginx
$ chown -R www:www /srv/http/nginx

Make sure www is the owner of all the files and directories inside /srv/http/nginx.

Subdomains

Medorion helped me with this one. He knows a lot about this kind of stuff.

To use subdomains you’ll have to edit the hosts file of the the client. The client is the computer you use to connect to the server, that means you shouldn’t touch the hosts file of the server.

Make sure you know the IP address and the hostname of your server. Then open /etc/hosts and add the subdomains you would like to use. In Windows the hosts file is located at %SystemRoot%\system32\drivers\etc\ and at /private/etc/hosts for Mac OS X.

Here’s an example of my hosts file:

#
# /etc/hosts: static lookup table for host names
#

#<ip-address>   <hostname.domain.org>   <hostname>
127.0.0.1               localhost.localdomain   localhost

# Subdomains for isamu
192.168.1.72    isamu
192.168.1.72    php.isamu
192.168.1.72    static.isamu

# These are optional
192.168.1.72    61924.isamu
192.168.1.72    medorion.isamu
192.168.1.72    shinobu.isamu
192.168.1.72    imgbrowz0r.isamu
192.168.1.72    fluxbb.isamu
192.168.1.72    anime.isamu
192.168.1.72    hg.isamu

# This one is required
192.168.1.72    phpmyadmin.isamu

# End of file

You can decide by yourself which subdomains you want, but the phpmyadmin subdomain is required, because we’ll be configuring phpMyAdmin later in this article. Just replace the IP address and isamu with the IP address and hostname of your machine.

Restart your computer or reconnect to your network (/etc/rc.d/network restart) after you have added the subdomains.

Virtual hosts in Nginx

Go to your server (or use SSH) and go to /srv/http/nginx. Create a bunch of directories for your subdomains and move the index.html and 50x.html into a directory called default (create it if it doesn’t exist).

$ mkdir php static 61924 medorion shinobu imgbrowz0r fluxbb anime hg
$ ls default/
50x.html  index.html
$ ls -F
61924/  anime/  default/  fluxbb/ hg/  imgbrowz0r/  medorion/  php/  shinobu/  static/

And now we will make the needed changes to the Nginx configuration file, which is located at /etc/nginx/nginx.conf.

Here’s a part of the configuration file:

user  www www; # The user and group that Nginx uses (important)
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile           on;
    keepalive_timeout  65;
    gzip               on;

    # Default: isamu
    server {
        listen       80;
        server_name  isamu;

        root /srv/http/nginx/default;
        access_log  /var/log/nginx/isamu.access.log  main;
        autoindex on;

        location / {
            index  index.html;
        }

        # Redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root /srv/http/nginx/default;
        }
    }

    # static.isamu
    server {
        listen       80;
        server_name  static.isamu;

        root /srv/http/nginx/static;
        access_log  /var/log/nginx/static.isamu.access.log  main;
        autoindex on;

        location / {
            index  index.html;
        }

        # Redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root /srv/http/nginx/default;
        }
    }
}

I’ve only added one subdomain as you can see. You can just copy the server section of static.isamu and change the server_name, access_log and root to create all the other sections for the subdomains you want.

Here’s an example:

# php.isamu
server {
    listen       80;
    server_name  php.isamu;

    root /srv/http/nginx/php;
    access_log  /var/log/nginx/php.isamu.access.log  main;
    autoindex on;

    location / {
        index  index.html;
    }

    # Redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root /srv/http/nginx/default;
    }
}

Do this for all the subdomains you want and start (or restart) Nginx to test your subdomains.

$ /etc/rc.d/nginx start
:: Starting Nginx                                               [DONE]

PHP

At the moment Nginx can only serve static content. So we’ll use PHP to make life a bit more exciting.

First we will add an init script which I got from the ArchWiki. I’ve edited the script a bit, because there’s a chance that we will need to run more Fastcgi daemons.

Add the following init script to /etc/rc.d and call it php-fastcgi.

#!/bin/bash

. /etc/rc.conf
. /etc/rc.d/functions

case "$1" in
    start)
        stat_busy 'Starting PHP Fastcgi Server'
        if su www -c '/usr/bin/php-cgi -b 127.0.0.1:9000' &
        then
            add_daemon php-fastcgi
            stat_done
        else
            stat_fail       fi
        fi
        ;;
    stop)
        stat_busy 'Stopping PHP Fastcgi Server'
        [ -e /var/run/daemons/php-fastcgi ] && kill $(pidof php-cgi) &> /dev/null;
        if [ $? -gt 0 ]; then
            stat_fail
        else
            rm_daemon php-fastcgi
            stat_done
        fi
        ;;
   restart)
        $0 stop
        $0 start
        ;;
   *)
        echo "Usage: $0 {start|stop|restart}"
esac

Now open /etc/nginx/nginx.conf again and add the following in each server block where you want to use PHP.

# PHP
location ~ \.php$ {
    fastcgi_pass   127.0.0.1:9000;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    include        fastcgi_params;
}

Now you’re able to start and use PHP, but I recommend that you read through /etc/php/php.ini to configure certain settings (look for display_errors and the extensions). The file contains alot of comments that will explain everthing.

Now you can start PHP with the following command:

$ /etc/rc.d/php-fastcgi start
:: Starting PHP Fastcgi Server                                  [DONE]

And you’re done if you don’t have any other PHP extensions to configure (Xdebug, APC, Memcache).

I didn’t bother to use PHP-FPM, because I would have to patch and build PHP myself and that would take more time. Maybe another time. You can take a look at php-fpm.org if you want PHP-FPM instead of the method I used.

phpMyAdmin

phpMyAdmin will be used to manage all the MySQL databases.

Make sure the section for the phpMyAdmin subdomain looks like the following and put it in /etc/nginx/nginx.conf.

# phpmyadmin.isamu
server {
   listen       80;
    server_name  phpmyadmin.isamu;

    root /usr/share/webapps/phpMyAdmin;
    access_log  /var/log/nginx/phpmyadmin.isamu.access.log  main;
    autoindex on;

    location / {
        index  index.php index.html index.htm;
    }

    # PHP
    location ~ \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }

    # Redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root /srv/http/nginx/default;
    }

    location ~ /\.ht {
        deny  all;
    }
}

Then open /etc/php/php.ini and add :/usr/share/webapps/:/etc/webapps to open_basedir so it will look like:

open_basedir = /srv/http/:/home/:/tmp/:/usr/share/pear/:/usr/share/webapps/:/etc/webapps

After you’ve done that open /etc/webapps/phpmyadmin/config.inc.php and configure everything. There are helpful comments everywhere so you shouldn’t have any problems.

$ /etc/rc.d/nginx restart && /etc/rc.d/php-fastcgi restart
:: Checking configuration                                       [BUSY]
the configuration file /etc/nginx/nginx.conf syntax is ok
configuration file /etc/nginx/nginx.conf test is successful
                                                                [DONE]
:: Stopping Nginx                                               [DONE]
:: Starting Nginx                                               [DONE]
:: Stopping PHP Fastcgi Server                                  [DONE]
:: Starting PHP Fastcgi Server                                  [DONE]

More information about phpMyAdmin can be found at:

Daemons

To let MySQL, Nginx and PHP startup when your server starts up you can add mysqld, nginx and php-fastcgi to the daemons list in /etc/rc.conf.

DAEMONS=(syslog-ng network netfs crond sshd postgresql mysqld nginx php-fastcgi)

This is optional, but makes things a bit easier.

That’s it

Yup. I also wanted to include PostgreSQL and phpPgAdmin in this article, but for some reason PostgreSQL doesn’t work. Maybe I’ll add that later after I get it working.

If you have questions, suggestions or just want to say something, feel free to send me a mail.

AnimeList 0.2-beta1

2009-12-22T07:30:39-08:00

Finally! I have been working on this for a while. Also because I rewrote it two times. I’m still not really statisfied, but it can’t be perfect on the first release, right?

This first beta only includes (anime) list management and search plugin. I scrapped the torrent plugin and plugin system (well, it’s just hidden), because I couldn’t make them really useful. It/I needs some more time.

I know there’s another similar project that uses Python and PyGTK (in the future wxPython), but I wasn’t really satisfied with it. The whole GUI froze when certain actions are done and you can’t search for anime. At that time I didn’t really know Python or PyGTK so it was easier to start something myself.

Information, manuals and downloads can be found at the project page. Have fun.

Oh, here are some old screenshots. The first one is a screenshot of my first try and the second one is the unreleased 0.1.

How to Create Inset Typography in Gimp

2009-09-24T15:50:50-07:00

Update September 27th, 2009: This tutorial is now also available at the Gimptalk forum.

I found a tutorial for this effect on Sixrevisions for Photoshop. And because it was a beginners level tutorial — it wouldn’t be too hard to “port” it to Gimp.

So the credits go to the guy who wrote the tutorial on Sixrevisions.

Notes:

I’m using the development version of Gimp (2.7) so some things can look a bit different.
Select > Invert means that you have to go the the Select menu and click Invert.
Original tutorial: How to Create Inset Typography in Photoshop

Step 1

Make a new image and draw a linear gradient (color codes: #016edf, #024f80).

(Click for larger version)

Step 2

Make a new text layer and put this in the center of the canvas. It’s best to use a big or bold font.

Then make three new layers called: ‘Text highlight’, ‘Text inner-shadow’ and ‘Text background’.

(Click for larger version)

Step 3

Now select the text layer and do Text to selection. Then select the Text background layer and fill the background with a gradient, a darker one than the background.

Don’t delete/undo the selection. We need it for the next step. :)

(Click for larger version)

Step 4

Select Text highlight, make the selection one pixel smaller (with Select > Shrink) and invert the selection with Ctrl+i or Select > Invert. Now fill the Text highlight layer with a white color.

After you’ve done that you invert the selection again, make it one pixel bigger (with Select > Grow), invert the selection again and press delete or Edit > Clear.

You can clear the selection with Select > None or Ctrl+Shift+A.

You’ll get something like you see in the following image. We don’t use Select > Border, because it won’t look that good.

(Click for larger version)

Step 5

Select the text layer again and do Text to selection. Now select the Text inner-shadow layer, make the selection two pixels smaller, invert it and fill it with a black color.

Now invert the selection again, make it 2 pixels bigger, invert it again and press delete or Edit > Clear. You should have a black border now that’s behind the white border.

(Click for larger version)

Invert the selection again (yes… again…), open the Gaussian Blur dialog (Filters > Blur > Gaussian Blur) and apply the settings you see in the following image.

(Click for larger version)

You can clear the selection now.

Step 6

Select the Text highlight layer and apply Gaussian Blur on it with the blur radius set to one. Then move the layer below the Text background layer and move it one pixel the the right and one pixel to the bottom.

(Click for larger version)

Select the Text inner-shadow layer and move it one pixel the the right and one pixel to the bottom.

Now select the text layer again and do Text to selection, select the the Text inner-shadow layer again, invert the selection and press delete or Edit > Clear.

(Click for larger version)

Step 7

Now we have to fine-tune it to make it look good. You can copy some layer, adjust the opacity settings, add some highlights or patterns (hint: layer masks are useful for this).

(Click for larger version)

Extending ImgBrowz0r

2009-09-13T06:50:50-07:00

Adding titles and descriptions for images and directories. This might be useful for people who use ImgBrowz0r for their portfolio and not for an image dump.

A user ~~on the forum (Pat)~~ already made a similar mod, which uses an XML file. I’m going to use a normal PHP array to store all the information, which is faster and you can easily attach a database on it.

Note: This article/guide has been made with ImgBrowz0r 0.3.4. I can’t guarantee it works with older version of ImgBrowz0r.

Installation

Below you can find a step-by-step guide on how to install this mod. And below that you can find some usage examples and screenshots.

Change the following part of your CSS from:

#imgbrowz0r .img-directory span.img-dir-name,
#imgbrowz0r .img-directory span.img-thumb-date { display: block }
#imgbrowz0r .img-directory span.img-dir-name { font-weight: bold;font-size: 1.2em }

#imgbrowz0r .img-column-1 { clear: left }

#imgbrowz0r .img-thumbnail,
#imgbrowz0r .img-directory { float: left;padding: 1.5em 0;width: 25%;text-align: center }

To:

#imgbrowz0r span.img-dir-name, #imgbrowz0r span.img-name,
#imgbrowz0r span.img-thumb-desc { display: block }
#imgbrowz0r span.img-dir-name,
#imgbrowz0r span.img-name { font-weight: bold;font-size: 1.2em;word-wrap: break-word }

#imgbrowz0r .img-thumbnail,
#imgbrowz0r .img-directory { float: left;margin-left: 2.6%;padding: 1.5em 0;width: 23%;text-align: center }

#imgbrowz0r .img-column-1 { clear: left;margin-left: 0 }

This will create some space between the thumbnails.

Open imgbrowz0r.php and replace the following code at line 37:

protected $config, $cur_directory, $cur_page, $files, $page_count,

With:

protected $config, $cur_directory, $cur_page, $files, $page_count, $info=array(),

Replace the following code on line 180:

public function init()

With:

public function init($info=array())

The init() function now accepts an optional parameter. We will use this to pass the titles/descriptions of all the directories/images to ImgBrowz0r.

Add the following code on line 173:

$this->info = $info;

After:

$this->count_files = count($this->files);

Replace the following code that starts at line ~197 and ends at line ~235:

if ($file[0] === 1)
{
    $image_cache_dir = md5($this->cur_directory);
    $image_thumbnail = $image_cache_dir.'/'.$file[3].'_'.$file[1]; // The name of the thumbnail

    if (!is_dir($this->config['cache_dir'].'/'.$image_cache_dir))
        mkdir($this->config['cache_dir'].'/'.$image_cache_dir, 0777);

    if (!file_exists($this->config['cache_dir'].'/'.$image_thumbnail))
        $this->make_thumb($this->cur_directory, $file[1], $image_thumbnail);

    echo "\t\t", '<div class="img-thumbnail img-column-', $row_count, '"><a href="', $this->config['images_url'],
         '/', $this->cur_directory, $file[1], '" style="background-image: url(\'', $this->config['cache_url'], '/', $image_thumbnail, '\')" title="', $file[1],
         '">&nbsp;</a><span>', $this->format_time($file[3]),
         '</span></div>', "\n";
}
else
{
    if ($this->config['dir_thumbs'] === true)
    {
        $dir_hash = md5($this->cur_directory.$file[1].'/');
        $dir_thumbs = $this->read_cache($dir_hash, $this->cur_directory.$file[1].'/');

        $dir_thumbnail = isset($dir_thumbs[0]) ? ' style="background-image: url(\''.$this->config['cache_url'].'/'.
                         $dir_hash.'/'.$dir_thumbs[($this->config['random_thumbs'] === false ? 0 : mt_rand(0, count($dir_thumbs)-1))].'\')"' : null;

        echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
             str_replace('%PATH%',  $this->cur_directory.$file[1].'/1', $this->config['main_url']), '"',
             $dir_thumbnail, ' title="', $file[1], '">&nbsp;</a><span class="img-dir-name">', $file[1],
             '</span><span class="img-thumb-date">', $this->format_time($file[3]), '</span></div>', "\n";
    }
    else
    {
        echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
             str_replace('%PATH%',  $this->cur_directory.$file[1].'/1', $this->config['main_url']),
             '" title="', $file[1], '"><span>', $file[1], '</span></a><span>', $this->format_time($file[3]),
             '</span></div>', "\n";
    }
}

With:

$key = $this->cur_directory.$file[1];
if (isset($this->info[$key]))
{
    $title = $this->info[$key]['title'];

    if (isset($this->info[$key]['desc']))
        $desc = $this->info[$key]['desc'];
    else
        $desc = $this->format_time($file[3]);
}
else
{
    $title = $file[1];
    $desc = $this->format_time($file[3]);
}

if ($file[0] === 1)
{
    $image_cache_dir = md5($this->cur_directory);
    $image_thumbnail = $image_cache_dir.'/'.$file[3].'_'.$file[1]; // The name of the thumbnail

    if (!is_dir($this->config['cache_dir'].'/'.$image_cache_dir))
        mkdir($this->config['cache_dir'].'/'.$image_cache_dir, 0777);

    if (!file_exists($this->config['cache_dir'].'/'.$image_thumbnail))
        $this->make_thumb($this->cur_directory, $file[1], $image_thumbnail);

    echo "\t\t", '<div class="img-thumbnail img-column-', $row_count, '"><a href="', $this->config['images_url'],
         '/', $this->cur_directory, $file[1], '" style="background-image: url(\'', $this->config['cache_url'], '/', $image_thumbnail, '\')" title="', $file[1],
         '">&nbsp;</a><span class="img-name">', $title, '</span><span class="img-thumb-desc">', $desc, '</span></div>', "\n";
}
else
{
    if ($this->config['dir_thumbs'] === true)
    {
        $dir_hash = md5($this->cur_directory.$file[1].'/');
        $dir_thumbs = $this->read_cache($dir_hash, $this->cur_directory.$file[1].'/');

        $dir_thumbnail = isset($dir_thumbs[0]) ? ' style="background-image: url(\''.$this->config['cache_url'].'/'.
                         $dir_hash.'/'.$dir_thumbs[($this->config['random_thumbs'] === false ? 0 : mt_rand(0, count($dir_thumbs)-1))].'\')"' : null;

        echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
             str_replace('%PATH%',  $this->cur_directory.$file[1].'/1', $this->config['main_url']), '"',
             $dir_thumbnail, ' title="', $title, '">&nbsp;</a><span class="img-dir-name">', $title,
             '</span><span class="img-thumb-desc">', $desc, '</span></div>', "\n";
    }
    else
    {
        echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
             str_replace('%PATH%',  $this->cur_directory.$file[1].'/1', $this->config['main_url']),
             '" title="', $title, '"><span>', $title, '</span></a><span class="img-thumb-desc">', $desc,
             '</span></div>', "\n";
    }
}

This adds the code that checks if the image or directory has a title or description. It also changes some CSS classes and adds a title to the image thumbnails.

Replace the following code at line 288:

if (isset($path_parts[0]))
    foreach ($path_parts as $k => $part)
        $output[] = '<a href="'.str_replace('%PATH%',  implode('/', array_slice($path_parts, 0, ($k+1))).'/1' , $this->config['main_url']).'">'.$part.'</a>';

return '<div class="img-breadcrumbs"><span>Breadcrumbs: </span><a href="'.str_replace('%PATH%',  '0/1', $this->config['main_url']).'">Root</a>'.
       (isset($output) ? ' / '.implode(' / ', $output) : null).'</div>';

With:

if (isset($path_parts[0]))
{
    foreach ($path_parts as $k => $part)
    {
        $key = implode('/', array_slice($path_parts, 0, ($k+1)));
        if (isset($this->info[$key]))
            $title = $this->info[$key]['title'];
        else
            $title = $part;

        $output[] = '<a href="'.str_replace('%PATH%',  $key.'/1' , $this->config['main_url']).'">'.$title.'</a>';
    }
}

return '<div class="img-breadcrumbs"><span>Breadcrumbs: </span><a href="'.str_replace('%PATH%',  '0/1', $this->config['main_url']).'">'.
       (isset($this->info['/']) ? $this->info['/']['title'] : 'Root').'</a>'.
       (isset($output) ? ' / '.implode(' / ', $output) : null).'</div>';

This code shows the correct title in the breadcrumbs.

Replace the following code on line 335:

// Display description of the current directory
// Html tags are stripped from the description except the following tags:
// <p>, <strong>, <em>, <a>, <br />, <h1>, <h2> and <h3>
public function description()
{
    if (file_exists($this->full_path.'.desc'))
        return '<div class="img-description">'.
        strip_tags(file_get_contents($this->full_path.'.desc'), '<p><strong><em><a><br><h1><h2><h3>').
        '</div>';
}

With:

// Returns a description of the current directory
public function description()
{
    $key = trim($this->cur_directory, '/');

    if (empty($key))
        $key = '/';

    if (isset($this->info[$key]))
        $desc = $this->info[$key]['desc'];
    else
        $desc = null;

    return $desc;
}

We replace the orginal description function with a new one that uses our $info variable to show a description. So there’s no need for those .desc files anymore.

Add the following code after the description function you just replaced:

// Returns the current category name
public function current_category()
{
    $key = trim($this->cur_directory, '/');

    if (empty($key))
        $key = '/';

    if (isset($this->info[$key]))
        $title = $this->info[$key]['title'];
    else
        $title = $key != '/' ? basename($key) : 'Root';

    return $title;
}

And you’re done.

Usage examples and screenshots

To make use of the new feature you just installed you just have to make a variable that contains an array with the right information and add it to $gallery->init() as an argument. Like this:

[ ... code ... ]

$info = array(

    // A slash represents the root
    '/' => array(
        'title' => 'Index',
        'desc' => 'This is a gallery with various images.'),

    'BigTest' => array(
        'title' => 'Big image test',
        'desc' => 'Some big images that are used to test if ImgBrowz0r can resize big images properly.'),

    'Test2' => array(
        'title' => 'Test 2',
        'desc' => 'This directory has no images.')
    );

$gallery->init($info);

[ ... code ... ]

// This is used to display the title and/or description of the current directory
echo '<h1>', $gallery->current_category(), '</h1>';
echo '<p>', $gallery->description(), '</p>';

[ ... code ... ]

And the result will be something like this.

(Click for larger image)

You can use $gallery->current_category() and $gallery->description() to display the title and/or description of the current directory.

Here’s another example:

$info = array(

    'Characters' => array(
        'title' => 'Characters',
        'desc' => 'A list of characters from various animes.'),

    'Characters/72552.jpg' => array(
        'title' => 'Guts',
        'desc' => 'Guts (ガッツ, Gattsu) is a fictional character of the anime and manga franchise Berserk by mangaka Kentaro Miura. He is the main protagonist of the story.'),

    'Characters/194495.jpg' => array(
        'title' => 'Porco',
        'desc' => 'An Italian World War I fighter ace, now living as a freelance bounty hunter chasing "air pirates" in the Adriatic Sea. The man has been cursed, and has been transformed into a pig.'),

    'Characters/177250.jpg' => array(
        'title' => 'Ippo Makunouchi',
        'desc' => 'Ippo is a classic in-fighter and is well known for his Peek-a-Boo style of boxing and hard punches including three signature punches: a rib-cracking Liver blow, Gazelle punch (an uppercut variant), and the Dempsey roll technique.'),

    'Characters/174552.jpg' => array(
        'title' => 'Yoko Littner',
        'desc' => 'Yoko is a girl from Jeeha\'s neighboring village Ritona, who had been chasing the Gunmen which entered Jeeha village. She wields an extensive range of firearms which include a long range sniper rifle.'),

    [ ... code ... ]

    );

And the output is something like this:

(Click for larger image)

The same thing can be done for all directories and images at all levels of nesting. It’s really easy. :)

ImgBrowz0r 0.3.4

2009-09-10T03:10:50-07:00

It’s done and it was actually not much work. And this will be the last release of the 0.3 branch. I will fix bugs for 0.3 until I released 0.4.

Here are the things that are fixed/changed/added:

Replaced strreplace() with pregquote() for regex escaping.
Added separate sorting options for images and directories.
Made private methods/variables protected to make extending easier.
Added filesize limit option.
Added (preview) thumbnail generation for directories.
Changed markup for thumbnails. It’ll be easier to style it with CSS.
Added memory peak usage to the example page (index.php). Now you can see how much memory GD (not ImgBrowz0r) uses.

Not that much, but there’s not much to add anyway. ;)

Downloads can be found at the Github downloads page.

PyGTK Volume slider

2009-09-08T13:34:20-07:00

Update July 26th, 2009: Made some changes to the code. re and webbrowser modules are removed. And changed some other small things.
Update September 8th, 2009: Cleaned up some code. :)

I couldn’t find a volume slider that sits in the systemtray. Or I’m just blind. It’s made with Python and PyGTK and uses amixer to adjust the volume. That means it only works on alsa.

Let me know if you got suggestions. Here’s the code.

#!/usr/bin/env python

#
#  Volume Conctrol, made by Frank Smit, http://61924.nl
#  Volume Control is a simple tool to adjust your Master volume.
#  It uses "amixer" from alsa to set and get the volume.
#

import subprocess
import gtk

class VolumeControl(gtk.StatusIcon):

    name = 'Volume Control'
    version = '0.1.2'
    position = (0, 0)
    vol_adjust = range(0, 26)

    def __init__(self):

        # Icons/systemtray
        gtk.StatusIcon.__init__(self)
        self.set_from_stock(gtk.STOCK_MEDIA_RECORD)

        # Menu
        menu_about = gtk.ImageMenuItem(gtk.STOCK_ABOUT)
        menu_quit = gtk.ImageMenuItem(gtk.STOCK_QUIT)

        menu = gtk.Menu()
        menu.append(menu_about)
        menu.append(menu_quit)

        # Events
        self.connect('activate', self.__activate_icon)
        self.connect('popup-menu', self.__tray_popup, menu)
        menu_about.connect('button-press-event', self.show_about_dialog)
        menu_quit.connect('button-press-event', gtk.main_quit)

        # Create window
        self.slider_window()

    #
    # The volume slider window
    #
    def slider_window(self):

        # Slider
        slider = gtk.VScale()
        slider.set_inverted(True)
        slider.set_range(0, 100)
        slider.set_increments(1, 10)
        slider.set_digits(0)
        slider.set_size_request(34, 160)
        slider.set_value_pos(gtk.POS_BOTTOM)
        slider.set_value(self.__get_master_volume())

        # Events
        slider.connect('value-changed', self.__update_master_volume)

        # Add widgets
        fixed_slider = gtk.Fixed()
        fixed_slider.put(slider, 3, 5)

        # Frame
        frame = gtk.Frame()
        frame.set_border_width(1)
        frame.add(fixed_slider)

        # Window
        self.window = gtk.Window(gtk.WINDOW_POPUP)
        self.window.set_size_request(44, 171)
        self.window.add(frame)

    #
    #  Tray icon click
    #
    def __activate_icon(self, widget, data=None):

        if self.window.get_property('visible'):
            self.window.hide()
        else:
            self.__set_window_position()
            self.window.move(self.position[0], self.position[1])
            self.window.show_all()
            self.window.present()

    #
    #  System tray menu
    #
    def __tray_popup(self, widget, button, time, data = None):

        if button == 3:
            if data is not None:
                data.show_all()
                data.popup(None, None, None, 3, time)

    #
    #  Set master volume
    #
    def __update_master_volume(self, widget):

        val = widget.get_value()

        if (val / 4) in self.vol_adjust:
            proc = subprocess.Popen('/usr/bin/amixer sset Master ' + str(val) + '%', shell=True, stdout=subprocess.PIPE)
            proc.wait()

    #
    #  Set window position (just above the system tray icon)
    #
    def __set_window_position(self):

        staticon_geometry = self.get_geometry()[1]

        if staticon_geometry.y <= 200:
            y_coords = staticon_geometry.y
        else:
            y_coords = staticon_geometry.y-180

        self.position = (staticon_geometry.x-13, y_coords)

    #
    #  Get Master volume
    #
    def __get_master_volume(self):

        proc = subprocess.Popen('/usr/bin/amixer sget Master', shell=True, stdout=subprocess.PIPE)
        amixer_stdout = proc.communicate()[0].split('\n')[4]
        proc.wait()

        find_start = amixer_stdout.find('[') + 1
        find_end = amixer_stdout.find('%]', find_start)

        return float(amixer_stdout[find_start:find_end])

    #
    #  About dialog
    #
    def show_about_dialog(self, widget, data=None):

        about = gtk.AboutDialog()
        about.set_program_name(self.name)
        about.set_version(self.version)
        about.set_comments('Volume Control is a simple tool to adjust your Master volume. '
            'It uses "amixer" from alsa to set and get the volume.\n\nWritten by Frank Smit - http://61924.nl/')
        about.run()
        about.destroy()

if __name__ == '__main__':
    VolumeControl()
    gtk.main()

Firefox userChrome.css

2009-07-29T04:46:10-07:00

Some nice CSS for the userChrome.css file in Firefox. It enables you to customize the Firefox interface.

I found this on Lifehacker and added some of my own rules and stuff I found on the Arch Linux forum (only tested with the default Firefox UI):

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Active tab */
.tabbrowser-strip {  }
.tabbrowser-tab { -moz-appearance: none !important;margin-right: 5px !important;padding: 0 5px !important;-moz-border-radius: 0px !important }
.tabbrowser-tab[selected="true"] { background-color: #ddd !important;margin-bottom: 1px !important }

/* Hide show all tabs button */
/* .tabs-alltabs-button { display: none !important } */

/* Remove new tab button */
/* .tabs-newtab-button { display: none } */

/* Remove close button from active tab */
.tabbrowser-tab[selected="true"] > .tab-close-button { display: none !important }

/* Remove magnifying glass button from search box */
.search-go-button-stack { display: none !important }

/* Remove the Edit and Help menus
   Id's for all toplevel menus:
   file-menu, edit-menu, view-menu, go-menu, bookmarksMenu, tools-menu, helpMenu */
#bookmarksMenu, #helpMenu { display: none !important }

/* Remove Home button */
#home-button { display: none }

/* Remove go button */
#go-button { display: none !important; }

/* Remove the bookmark star */
#star-button { display: none !important }

/*Remove magnifying glass button from search box*/
.search-go-button { display: none !important; }

/* Remove forward button drop down arrow */
#back-forward-dropmarker { display: none !important; }

/* Get rid of dropdown indicator in url bar */
#urlbar > dropmarker { display: none !important; }

/* Remove Web Search from Tools Menu */
menuitem[label="Web Search"] { display: none; }
menuitem[label="Web Search"] + menuseparator { display: none; }

There are is no documentation for it, but you can go to your Firefox directory and unzip classic.jar that’s located in the chrome directory. A .jar is just a zip archive with an other extension. After you unzipped it go to the unzipped contents, go to ./skin/classic/browser and open browser.css. In this file you can find all the CSS for the default Firefox UI.

Javascript image box

2009-05-10T11:15:00-07:00

I wrote a simple “lightbox” script for Mootools that doesn’t need extra images or CSS, but it doesn’t have those fancy efects.

I couldn’t find something simple (I’m lazy. I don’t want to add extra images and CSS each time) so I tried to write something myself. And thanks to some guys at #mootools (freenode) this thing works now. :D

It only needs the Mootools 1.2.2 core and is easy to use.

Like this:

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/jsimgbox-0.1.js" type="text/javascript"></script>

<script type="text/javascript">
window.addEvent('domready', function()
{
    new Jsimgbox('.img-thumbnail a');
});

Jsimgbox (Javascrip image box) can be downloaded from files.61924.nl. And a demo can be found at: images.61924.nl.

It’s only tested in Opera 9.64 and Firefox 3.0.10 on Xubuntu 9.04. If would be cool if someone could test this in some other browsers. :)

ImgBrowz0r 0.3 Stable!

2009-04-30T14:35:00-07:00

Yup, a stable release of ImgBrowz0r. And lots of things are improved and fixed since the beta.

Here’s the list of changes:

The functions that generate the navigation are removed from imgbrowz0r::display() and are now public functions.
Fixed a small bug in the url check part.
Added the random thumbnails again.
“Random thumbnails” can also be disabled now. Instead the same thumbnail will be shown each time or nothing at all.
Added a “read limit” that limits the amount of thumbnails that are used for the random thumbnail fucntion (this can speed things up).
Thumbnails are now refreshed if the orginal image has changed.
The supported file types are now stored in a variable.
Fixed a bug in imgbrowz0r::get_ext().
Fixed a bug in directory check in imgbrowz0r::make_thumb().
Directory statistics now in a separate function, imgbrowz0r::statistics().
Removed check if GD extension is loaded. gd_info() function check is enough.
Removed imgbrowz0r::output_style().
Cleaned up page navigation generator.
Replaced some hard-coded values for the thumbnail height and width with variables in imgbrowz0r::make_thumb().

ImgBrowz0r can he download here. I’m planning to make some script and articles related to ImgBrowz0r in the future.

ImgBrowz0r 0.3 Beta

2009-04-22T13:35:00-07:00

After almost 7 months it’s almost here, ImgBrowz0r 0.3. I’m now releasing a beta version which already has a lot of improvements.

I was already working on 0.3 last year, but the code got messy and I was also working on Shinobu. I’ve started working on ImgBrowz0r again in March when I saw how much it was downloaded (+400 times!).

Well, here’s the list of changes:

Most of it is rewritten.
Categories are called directories now.
Images can be dropped into the root gallery directory directly.
All thumbnails are now stored in a centralized cache.
The table based layout is replaced with a div based layout.
The sorting order of images and directories can now be set in the configuration.
The images and cache can now be placed on different locations/domains on a server.
Dropped base64 encoding for the category location in the url.
Improved quality of GIF thumbnails.
Improved page navigation.
Improved for environments that use url rewriting.
Added support for unlimited nesting of categories (directories).
Added support for daylight saving time (DST).
Added support for uppercase file extensions.
Added support for .jpeg, .jpe, .jif, .jfif and .jfi file extensions.
Added breadcrumbs navigation.
Added imgbrowz0r::output_style() to output a style for the div based layout.

The beta can be download here.

I hope everyone likes it. And let me know if you found a bug.

Pre-compress CSS and JS files

2009-03-11T07:12:50-07:00

I once wrote a small article about serving gzipped CSS and Javascript files with Apache. Now Lighttpd is added to the list as well. :)

The intro of the old article:

There are a number of methods for this, with PHP or with the Apache Gzip module. To enable Gzip compression for PHP pages you have to set zlib.output_compression to On, but that doesn’t work on CSS and javascript files. For those files you could use the Apache Gzip module, but what if you don’t have that module, because you have shared hosting (like me)?

Well, this doesn’t really make sense anymore. You can use mod_deflate for Apache and mod_compress for Lighttpd. So pre-compressing your files isn’t really needed anymore, but this method could still be useful in some cases. So here we go!

Step 1

Get the files you would like to compress and compress them. I have a copy of the Mootools Javascript library and one of the 960gs CSS grid, 8KB and 95.8KB.

 8169 2009-03-11 07:26 960c.css
98067 2009-03-11 07:21 mootools-1.2.1-core-nc.js

After compressing the files with gzip the files now have a filesize of 1.8KB and 25.6KB. That’s a huge improvement.

You can find a list of archivers that support Gzip here at Wikipedia.

 1841 2009-03-11 08:06 960c.cgz
26174 2009-03-11 08:06 mootools-1.2.1-core-nc.jgz

I’ve also renamed the file extensions: .cgz = CSS Gzip and .jgz = Javascript Gzip.

Step 2

Now we have to make sure that the server sends the right headers to the browser. If you use Apache you can put the following code in a .htaccess file or your server config file:

# Compressed javascript files
AddEncoding x-gzip .jgz
AddType application/x-javascript .jgz

# Compressed css files
AddEncoding x-gzip .cgz
AddType text/css .cgz

And for Lighttpd you can use this code (paste this in your Lighttpd config file):

$HTTP["url"] =~ "\.(cgz|jgz)" {
        setenv.add-response-header = ("Content-Encoding" => "gzip")
        mimetype.assign = (
               ".cgz"    => "text/css",
               ".jgz"    => "application/x-javascript"
        )
}

Note: be sure to activate mod_setenv othterwise you’ll get a bunch of crap on your screen.

Step 3

There is no step 3! This was all. It’s pretty simple. :)