March 31st, 2010

SiteGrinder 3: A CL-powered Photoshop plugin

Chris Perkins wrote a fascinating message to the LispWorks mailing list about a new release of a neat product:

We released a new version of our flagship product yesterday. It is a Photoshop plugin called SiteGrinder 3.

In previous version of SiteGrinder we used a lisp (xlisp) that was embedded directly into the C Photoshop plugin. But this version has a very different architecture and the C Photoshop plugin communicates with a separate CAPI LispWorks application over a socket. We used CAPI for the simple interface in the application, but the main UI used in the Photoshop plugin and in the browser was done with OpenLaszlo.

The Common Lisp application was developed by just one person (myself), though I used quite a few libraries, so I guess I wasn't totally alone. The rest of our team worked on the C and javascript and OpenLaszlo sides.

Thanks to the LispWorks team for making a great product. Being able to deliver cross platform is fantastic. And, it goes without saying, that being able to develop in Common Lisp is priceless.

I emailed him and asked for a little more info, and this is what he shared:

SiteGrinder 3 Description
SiteGrinder 3 converts Photoshop designs into working websites. For a user the basic workflow is to start the "design phase" and to place hints on some of their layernames (like -button or -text) so SiteGrinder knows how to output the elements of the pages. The user then clicks "Build", Photoshop is automated to slice up and output the graphics and SiteGrinder outputs all the necessary CSS, HTML and javascript.

Then, in the browser, the user can continue to make more modifications to the page. Setting animation settings, advanced CSS settings that have no analog in Photoshop (visited, hover, click states), play with form alignment and more. After doing this the user might return to Photoshop and make more changes, build again, repeat.

When they are happy with a design, they "deploy" it to a site directory and start the "content phase". In the content phase they have a CMS that lets them edit text, set links, configure ecommerce controls and more. They can also upload the site. If they've configured the site with our Control Add-on then the CMS follows them to their server and remains editable even without having SiteGrinder or Photoshop installed.

SiteGrinder Anatomy
About 60 or 70 percent of the entire code base is in Common Lisp. It forms the 'SiteGrinder 3 Engine', which is the central application for SiteGrinder 3.

The Photoshop plugin itself is written in C, but it is just a wrapper that displays the UI, controls Photoshop, communicates with the Engine, and does what the Engine commands it to do. There is no application logic in the plugin itself.

The user interface is mostly done in OpenLaszlo. This is a data driven interface. So the Engine produces the XML that determines what UI controls are shown the user. There are several OpenLaszlo user interfaces: one in Photoshop, and nearly a dozen that run in the browser alongside the web page that is being developed. As much as possible we tried to keep application logic out of the OL code.

The Engine scans the Photoshop file, looks for hints, makes decisions on how to output the file, passes commands to Photoshop via the C plugin, and outputs the HTML and CSS, etc. The Engine is also a web server (using s-http-server) and it displays the pages after they are built as well as serves the OpenLaszlo interface controls alongside and on top of the page so users can adjust the page design or adjust its content. The Engine can also output a PHP version of the CMS. There is as-yet-undocumented ability to create plugins for something called xmedia layers and those plugins are written in a psuedo-lisp and compiled into PHP (if needed) by the Engine.

The PHP version of the CMS probably represents about 5 or 10% of the code base. We also have a javascript/xml plugin architecture for handling image galleries, and there have been quite a few of those developed.

So, for your pie chart

Common Lisp: 60-70%.
C: 10-15%
OpenLaszlo: 15-20%
PHP: 5-10%
Javascript: 2-5%

This is code we wrote and does not include any libraries used.

Hope this helps,



update Chris sent along this screenshot of the "About" dialog, which I'm too vain to keep to myself: