Skip to content
Jul 20 09

Drawing polygons using Raphaël

by Ofir

I’ve created a simple plug-in for the fantastic JavaScript vector graphics library Raphaël, to add the possibility to create regular and irregular polygons in a simple way.

The plug-in adds two methods to the Raphaël’s namespace, polygon and regularPolygon. They accept the following parameters:

Raphael.polygon(params, points)

  1. params: object Attributes for the resulting polygon as described in the Raphaël’s attr reference.
  2. points string [optional] Points data in SVG polygon string format.

Raphael.regularPolygon(x, y, radius, sides, params)

  1. x: number X coordinate of the centre
  2. y: number Y coordinate of the centre
  3. radius: number: Circumradius of the polygon
  4. sides: number Number of sides
  5. params: object Attributes for the resulting polygon as described in the Raphaël’s attr reference.

Here’s an example of what can be done. Take a look at the source to see how it’s been implemented:

pentagon pentagon_animated

There is one small drawback though, well maybe two. First, this only works on SVG-enabled browsers, so no IE, I’m sorry I don’t have the will to make it work with VML, and second, there’s one little thing I had to add to the Raphael source, in order to be able to access the drawing object and methods in the plugin.

...
R.Element = Element;
R.setFillAndStroke = setFillAndStroke;
...

You may download the plug-in and the tweaked Raphaël library from here:
Polygon plugin
Tweaked Raphaël

I hope someone will find this useful.

Jun 24 09

How to re-route the Django admin homepage

by Ofir

It’s very easy to change the default homepage of the Django admin to show any other page you have already defined. For this example I’ll use the now famous “poll” application described in the Django documentation.

Assuming you already have setup the admin interface for the Poll model, your polls/admin.py file should look something like this:

from mysite.polls.models import Poll
from django.contrib import admin
 
admin.site.register(Poll)

and your urls.py file might be something like this:

from django.conf.urls.defaults import *
from django.contrib import admin
 
admin.autodiscover()
 
urlpatterns = patterns('',
    (r'^admin/', include(admin.site.urls)),
)

Now, what if we wanted to show the list of Polls after the user logs in, instead of the default homepage showing the list of installed applications? This is how it’s done:

from mysite.polls.models import Poll
from django.conf.urls.defaults import *
from django.contrib import admin
 
admin.autodiscover()
 
urlpatterns = patterns('',
    (r'^admin/$', admin.site.admin_view(admin.site._registry[Poll].changelist_view)),
    (r'^admin/', include(admin.site.urls)),
)

Notice we’re adding an extra pattern to the urls.py file where we define the changelist_view as the view for the homepage. It is important to call admin.site.admin_view method so all the redirection rules work right.

That’s it!

May 21 09

Iframe resizing across subdomains

by Ofir

A few weeks back I had a problem: an application I’d installed on a subdomain of interalia.net, which is the domain name of the company I work for, was going to be contained inside an iframe in another application, which happened to be on a different subdomain of the interalia.net domain, and the requirement was that the iframe had to be dynamically resized to fit its contents.

Due to browser security restrictions it’s not allowed to access the properties of a document from a different domain, but fortunately, I found a little trick to work around this issue, it consists on setting both the containing and the contained page to the same base domain, in this case ‘interalia.net’. Like this:

<script type="text/javascript">document.domain = 'interalia.net';</script>

The only condition here is that both applications must live inside a common base domain.

Then, just add the necessary JavaScript code to resize the iframe to the containing page:

<script type="text/javascript">
function resize(iframe)
{
    iframe.height = iframe.contentWindow.document.body.scrollHeight + 30;
}
</script>

We also have to add the onload attribute to the iframe tag, so our function gets triggered as soon as the inner page is loaded:

<iframe onload="resize(this);" ... />
Nov 9 08

Converting SVG to PDF

by Ofir

I recently had the need to dynamically create PDF files based on Adobe Illustrator (*.ai) files created by a talented artist. The application allowed the user to embed his name on the resulting pdf file, and I had to make sure the quality of the drawing wasn’t lost, since it was going to be used for printing. Therefore I turned to SVG, a wonderful XML-based file format for vector images.

XML files are relatively easy to work with on the server, so by converting the AI file to SVG I was able to edit the drawing dynamically. But it turned out converting SVG to PDF on the fly wasn’t as straightforward as I thought. Fortunately a colleague at work found out a very nice way to do it by using an application called Inkscape. It was a bit hard to get the dependencies working on the RHEL server we had, but he finally managed to get it going.

If you’re using Ubuntu, there’s nothing to worry about, Inkscape is as easy to install as running the following on your command line:

sudo apt-get install inkscape

Inkscape has an option for using it as a command-line tool, this is what you must run in order to convert SVG to PDF:

inkscape -z --file=original.svg --export-pdf=converted.pdf

For it to work properly you have to make sure you have the latest Cairo libraries installed.

Here’s an example of the result:

tiger.svg tiger.pdf

This process also embeds the necessary fonts defined in the SVG into the PDF file.

Hope this is useful to someone.