<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>The world (and word) of jaymz &#187; open source</title>
	<atom:link href="http://jaymz.eu/category/open-source/feed/" rel="self" type="application/rss+xml" />
	<link>http://jaymz.eu</link>
	<description></description>
	<lastBuildDate>Tue, 17 Jan 2012 21:42:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Automatic superusers via Active Collab for django</title>
		<link>http://jaymz.eu/2011/02/automatic-superusers-via-active-collab-for-django/</link>
		<comments>http://jaymz.eu/2011/02/automatic-superusers-via-active-collab-for-django/#comments</comments>
		<pubDate>Mon, 21 Feb 2011 21:20:42 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[django]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[active-collab]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=553</guid>
		<description><![CDATA[Two things I use a lot at work &#8211; Django and Active Collab. One is the python framework we build everything on and the other is a project management tool that we use &#8211; think a local install of Basecamp roughly. It can get annoying when we create development versions of things we&#8217;re working on [...]]]></description>
			<content:encoded><![CDATA[<p>Two things I use a lot at work &#8211; <a href="http://www.djangoproject.com/">Django</a> and <a href="http://www.activecollab.com">Active Collab</a>. One is the python framework we build everything on and the other is a project management tool that we use &#8211; think a local install of Basecamp roughly.</p>
<p>It can get annoying when we create development versions of things we&#8217;re working on and have to go and create test users for people; so I thought since writing an auth backend for django is so easy why not just use that to allow any user with a valid Active Collab account to login to the dev admin.</p>
<p><a href="http://jaymz.eu/wp-content/uploads/2011/02/ac-authbackend.jpg"><img class="aligncenter size-full wp-image-560" title="ac-authbackend" src="http://jaymz.eu/wp-content/uploads/2011/02/ac-authbackend.jpg" alt="" width="525" height="295" /></a></p>
<p>The <a href="https://github.com/jaymzcd/django-acollabauth">code is on github</a> and will automatically create a superuser in django&#8217;s auth table. Users can then login with their active collab emails &amp; passwords without having to pass around test accounts. It also means users wont suddenly lose access when you nuke the database for imports saving you some earache. Just add your base active collab url to the <em>AC_URL</em> variable in settings.py and add &#8216;<em>acollabauth.backends.ActiveCollabBackend</em>&#8216; to your AUTHENTICATION_BACKENDS tuple.</p>
<p>I have also blogged about this <a href="http://www.u-dox.com/blog/2011/02/22/using-active-collab-to-authenticate-django-sites/">over at udox</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2011/02/automatic-superusers-via-active-collab-for-django/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Active Collab library in Python</title>
		<link>http://jaymz.eu/2011/02/active-collab-library-in-python/</link>
		<comments>http://jaymz.eu/2011/02/active-collab-library-in-python/#comments</comments>
		<pubDate>Wed, 16 Feb 2011 12:31:23 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[active-collab]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=537</guid>
		<description><![CDATA[We use active collab at work to manage our various projects and track issues on sites we&#8217;re building. It comes complete with a REST API which returns results in XML. So I&#8217;ve written some code that abstracts out the process of making a request and displaying the returned data. It&#8217;s, predictably, on github. Here&#8217;s an example [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://jaymz.eu/wp-content/uploads/2011/02/ac-library.jpg"><img class="aligncenter size-full wp-image-538" title="ac-library" src="http://jaymz.eu/wp-content/uploads/2011/02/ac-library.jpg" alt="" width="525" height="295" /></a></p>
<p>We use active collab at work to manage our various projects and track issues on sites we&#8217;re building. It comes complete with a REST API which returns results in XML. So I&#8217;ve written some code that abstracts out the process of making a request and displaying the returned data. It&#8217;s, predictably, on <a href="https://github.com/jaymzcd/pyacollab">github</a>.</p>
<p>Here&#8217;s an example based on the 0.2.0 code which is simply outputting data for now allowing me to check on open tickets easily from code. Remember, to enable write methods to work (setting a ticket to complete for example) you need to have <em>Write Access</em> enabled <a href="http://www.activecollab.com/docs/manuals/developers/api/api-status">via the config.php</a> file.</p>
<div id="wpshdo_1" class="wp-synhighlighter-outer"><div id="wpshdt_1" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_1"></a><a id="wpshat_1" class="wp-synhighlighter-title" href="#codesyntax_1"  onClick="javascript:wpsh_toggleBlock(1)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_1" onClick="javascript:wpsh_code(1)" title="Show code only"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_1" onClick="javascript:wpsh_print(1)" title="Print code"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://jaymz.eu/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_1" class="wp-synhighlighter-inner" style="display: block;"><pre class="python">In <span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span>: <span class="kw1">from</span> activecollab.<span class="me1">library</span> <span class="kw1">import</span> ACRequest
&nbsp;
In <span class="br0">&#91;</span><span class="nu0">2</span><span class="br0">&#93;</span>: req = ACRequest<span class="br0">&#40;</span><span class="st0">'projects'</span><span class="br0">&#41;</span>
&nbsp;
In <span class="br0">&#91;</span><span class="nu0">3</span><span class="br0">&#93;</span>: req.<span class="me1">execute</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="nu0">34</span>: AC <span class="nu0">101</span>: http://my.<span class="me1">ac</span>-<span class="kw3">site</span>.<span class="me1">com</span>/projects/<span class="nu0">34</span>
<span class="co1"># More results trimmed</span>
&nbsp;
In <span class="br0">&#91;</span><span class="nu0">4</span><span class="br0">&#93;</span>: req = ACRequest<span class="br0">&#40;</span><span class="st0">'projects'</span>, item_id=<span class="nu0">34</span>, subcommand=<span class="st0">'tickets'</span><span class="br0">&#41;</span>
&nbsp;
In <span class="br0">&#91;</span><span class="nu0">5</span><span class="br0">&#93;</span>: req.<span class="me1">execute</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="nu0">2208</span>: ie6 error when zooming on <span class="kw2">map</span>: http://my.<span class="me1">ac</span>-<span class="kw3">site</span>.<span class="me1">com</span>/projects/<span class="nu0">34</span>/tickets/<span class="nu0">1</span>: <span class="nu0">1</span>
<span class="nu0">2216</span>: <span class="kw3">new</span> <span class="kw3">user</span> accounts <span class="kw1">for</span> testing: http://my.<span class="me1">ac</span>-<span class="kw3">site</span>.<span class="me1">com</span>/projects/<span class="nu0">34</span>/tickets/<span class="nu0">3</span>: <span class="nu0">3</span></pre></div></div>
<p>I&#8217;ve also blogged about this over at our udox <a href="http://www.u-dox.com/blog/2011/02/16/python-library-for-active-collab/">company site</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2011/02/active-collab-library-in-python/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Redirecting users in django based on client IP</title>
		<link>http://jaymz.eu/2011/02/redirecting-users-in-django-based-on-client-ip/</link>
		<comments>http://jaymz.eu/2011/02/redirecting-users-in-django-based-on-client-ip/#comments</comments>
		<pubDate>Tue, 15 Feb 2011 10:34:55 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[django]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[geocoding]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=541</guid>
		<description><![CDATA[geoip-redirect is available on my github page.]]></description>
			<content:encoded><![CDATA[<p><a href="http://jaymz.eu/wp-content/uploads/2011/02/redirect-vans.jpg"><img class="aligncenter size-full wp-image-542" title="redirect-vans" src="http://jaymz.eu/wp-content/uploads/2011/02/redirect-vans.jpg" alt="" width="525" height="295" /></a><a href="https://github.com/jaymzcd/geoip-redirect"></a></p>
<p><a href="https://github.com/jaymzcd/geoip-redirect">geoip-redirect</a> is available on my github page.</p>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2011/02/redirecting-users-in-django-based-on-client-ip/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Geocoding and radial search of data for django apps</title>
		<link>http://jaymz.eu/2010/12/geocoding-radial-search-django/</link>
		<comments>http://jaymz.eu/2010/12/geocoding-radial-search-django/#comments</comments>
		<pubDate>Sun, 05 Dec 2010 16:28:14 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[django]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[geocoding]]></category>
		<category><![CDATA[google maps]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=527</guid>
		<description><![CDATA[Something that I&#8217;ve had need of more than once the past while is placing lots of address data on google maps. For a few places it&#8217;s easy to manually handle that but I&#8217;ve been having to work with databases with thousands and thousands of samples &#8211; many in an unclean form with fields missing. I&#8217;ve [...]]]></description>
			<content:encoded><![CDATA[<p>Something that I&#8217;ve had need of more than once the past while is placing lots of address data on google maps. For a few places it&#8217;s easy to manually handle that but I&#8217;ve been having to work with databases with thousands and thousands of samples &#8211; many in an unclean form with fields missing.</p>
<p>I&#8217;ve ended up with a small django based library over at <a href="https://github.com/jaymzcd/django-geosearch">github</a>. For the data I had to work with much of the complications where the mis-matching of city/town level names &#8211; for example as well as <em>London</em> many items had the actual area listed instead, e.g. <em>Camden</em> or <em>Westminster</em>. When doing queries we wanted to be able to return items within certain areas but without having to manually clean everything up, so the model code provides a <em>within_radius</em> method which will return matching enteries that fall within the radial bounds given.</p>
<p>Within the scripts folder there&#8217;s an example of how I decided to work with an existing django based site that I then installed the geosearch code to.</p>
<div id="wpshdo_2" class="wp-synhighlighter-outer"><div id="wpshdt_2" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_2"></a><a id="wpshat_2" class="wp-synhighlighter-title" href="#codesyntax_2"  onClick="javascript:wpsh_toggleBlock(2)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_2" onClick="javascript:wpsh_code(2)" title="Show code only"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_2" onClick="javascript:wpsh_print(2)" title="Print code"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://jaymz.eu/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_2" class="wp-synhighlighter-inner" style="display: block;"><pre class="python"><span class="co1">#!/usr/bin/python2.7</span>
<span class="co1"># -*- coding: utf-8 -*-</span>
&nbsp;
<span class="co1"># To run this you'll need to set two environment variables. Could probably do this</span>
<span class="co1"># as a management command but seems a bit messy since it's a very specific thing...</span>
<span class="co1">#</span>
<span class="co1"># export PYTHONPATH=/home/jaymz/development/www/vansemea</span>
<span class="co1"># export DJANGO_SETTINGS_MODULE=settings</span>
<span class="co1">#</span>
<span class="co1"># Obviously you'll need to change that path if you want to run it yourself</span>
&nbsp;
<span class="kw1">from</span> locator.<span class="me1">models</span> <span class="kw1">import</span> Dealer, City
<span class="kw1">from</span> geosearch.<span class="me1">models</span> <span class="kw1">import</span> GeoEntry
<span class="kw1">from</span> base.<span class="me1">models</span> <span class="kw1">import</span> Country
<span class="kw1">from</span> django.<span class="me1">db</span>.<span class="me1">models</span> <span class="kw1">import</span> Count
&nbsp;
MAX_TOP_CITIES = <span class="nu0">30</span> <span class="co1"># how many of our &quot;has the most dealers&quot; to bin the others into</span>
BOUNDRY_RADIUS = <span class="nu0">25</span> <span class="co1"># number of *miles* from our source point to include</span>
CTYPES = <span class="br0">&#123;</span>
    <span class="st0">'dealer'</span>: <span class="nu0">32</span>,
    <span class="st0">'city'</span>: <span class="nu0">29</span>,
<span class="br0">&#125;</span>
&nbsp;
<span class="kw1">for</span> country <span class="kw1">in</span> Country.<span class="me1">objects</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="br0">&#41;</span>:
    <span class="kw1">try</span>:
        cities = Dealer.<span class="me1">objects</span>.<span class="me1">values</span><span class="br0">&#40;</span><span class="st0">'city__pk'</span>, <span class="st0">'city__name'</span><span class="br0">&#41;</span> \
            .<span class="kw2">filter</span><span class="br0">&#40;</span>country=country<span class="br0">&#41;</span>.<span class="me1">annotate</span><span class="br0">&#40;</span>Count<span class="br0">&#40;</span><span class="st0">'city'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> \
            .<span class="me1">order_by</span><span class="br0">&#40;</span><span class="st0">'-city__count'</span><span class="br0">&#41;</span><span class="br0">&#91;</span>:MAX_TOP_CITIES<span class="br0">&#93;</span>
    <span class="kw1">except</span> <span class="kw2">IndexError</span>:
        <span class="kw1">print</span> <span class="st0">&quot;No data for %s&quot;</span> % country.<span class="me1">name</span>
&nbsp;
    <span class="kw1">print</span> <span class="st0">&quot;Working out cities for %s<span class="es0">\n</span>&quot;</span> % country
&nbsp;
    <span class="kw1">for</span> city <span class="kw1">in</span> cities<span class="br0">&#91;</span>::<span class="nu0">-1</span><span class="br0">&#93;</span>:
        <span class="co1"># Look up the GeoEntry for this city. If we have one then we'll get</span>
        <span class="co1"># back a list of other enteries which are within BOUNDRY_RADIUS miles</span>
        <span class="kw1">print</span> <span class="st0">&quot;<span class="es0">\n</span>Getting db places within %dmiles of %s...<span class="es0">\n</span>&quot;</span> % <span class="br0">&#40;</span>BOUNDRY_RADIUS, city<span class="br0">&#91;</span><span class="st0">'city__name'</span><span class="br0">&#93;</span><span class="br0">&#41;</span>
&nbsp;
        <span class="kw1">try</span>:
            primary_city = City.<span class="me1">objects</span>.<span class="me1">get</span><span class="br0">&#40;</span>pk=city<span class="br0">&#91;</span><span class="st0">'city__pk'</span><span class="br0">&#93;</span>, country=country<span class="br0">&#41;</span>
            primary_city.<span class="me1">primary_city</span> = primary_city
            primary_city.<span class="me1">save</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
        <span class="kw1">except</span>:
            <span class="st0">&quot;Could not find city matching %d and country id %d&quot;</span> % <span class="br0">&#40;</span>city<span class="br0">&#91;</span><span class="st0">'city__pk'</span><span class="br0">&#93;</span>, country.<span class="me1">pk</span><span class="br0">&#41;</span>
            <span class="kw1">continue</span>
&nbsp;
        <span class="kw1">try</span>:
            city_geoentry = GeoEntry.<span class="me1">objects</span>.<span class="me1">get</span><span class="br0">&#40;</span>content_type__pk=CTYPES<span class="br0">&#91;</span><span class="st0">'city'</span><span class="br0">&#93;</span>,
                object_id= city<span class="br0">&#91;</span><span class="st0">'city__pk'</span><span class="br0">&#93;</span><span class="br0">&#41;</span>
        <span class="kw1">except</span> GeoEntry.<span class="me1">DoesNotExist</span>:
            <span class="kw1">print</span> <span class="st0">&quot;No geoentry for %s&quot;</span> % city<span class="br0">&#91;</span><span class="st0">'city__name'</span><span class="br0">&#93;</span>
            <span class="kw1">continue</span>
&nbsp;
        radial_results = GeoEntry.<span class="me1">within_radius</span><span class="br0">&#40;</span>
            <span class="br0">&#91;</span>city_geoentry.<span class="me1">latitude</span>, city_geoentry.<span class="me1">longitude</span><span class="br0">&#93;</span>,
            BOUNDRY_RADIUS
        <span class="br0">&#41;</span>
&nbsp;
        <span class="co1"># Trim off our source point, reverse and update our source cities</span>
        <span class="co1"># (we need to reverse it to have it assign by most populated last)</span>
        <span class="kw1">for</span> point <span class="kw1">in</span> radial_results<span class="br0">&#91;</span><span class="nu0">1</span>:<span class="br0">&#93;</span><span class="br0">&#91;</span>::<span class="nu0">-1</span><span class="br0">&#93;</span>:
            <span class="kw1">if</span> point<span class="br0">&#91;</span><span class="st0">'content_type'</span><span class="br0">&#93;</span> == CTYPES<span class="br0">&#91;</span><span class="st0">'city'</span><span class="br0">&#93;</span>:
                source_city = City.<span class="me1">objects</span>.<span class="me1">get</span><span class="br0">&#40;</span>pk=point<span class="br0">&#91;</span><span class="st0">'object_id'</span><span class="br0">&#93;</span><span class="br0">&#41;</span>
                source_city.<span class="me1">primary_city</span> = primary_city
                source_city.<span class="me1">save</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
                <span class="kw1">print</span> <span class="st0">&quot;Set %s as primary city for %s&quot;</span> % <span class="br0">&#40;</span>primary_city, source_city<span class="br0">&#41;</span></pre></div></div>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2010/12/geocoding-radial-search-django/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress plugin to post to Facebook wall and Twitter feed</title>
		<link>http://jaymz.eu/2010/10/wordpress-to-facebook-and-twitter/</link>
		<comments>http://jaymz.eu/2010/10/wordpress-to-facebook-and-twitter/#comments</comments>
		<pubDate>Thu, 21 Oct 2010 16:29:36 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=515</guid>
		<description><![CDATA[We&#8217;ve recently had to do some automatic posting of content to facebook from a wordpress blog. I did find this wordbook plugin but it apparently has broke recently and people have been complaining it no longer works (27 out of 27!). So I&#8217;ve rolled my own. It&#8217;s in a very early stage but the code [...]]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve recently had to do some automatic posting of content to facebook from a wordpress blog. I did find this <em><a href="http://wordpress.org/extend/plugins/wordbook/">wordbook</a></em><em> </em>plugin but it apparently has broke recently and people have been complaining it no longer works (27 out of 27!). So I&#8217;ve rolled my own. It&#8217;s in a very early stage but the code seems to work ok.</p>
<p><a href="http://jaymz.eu/wp-content/uploads/2010/10/wordpress-fb-post.png"><img class="aligncenter size-full wp-image-516" title="wordpress-fb-post" src="http://jaymz.eu/wp-content/uploads/2010/10/wordpress-fb-post.png" alt="" width="561" height="198" /></a></p>
<p>Instructions (you&#8217;ll need to create a new application and then authorize that for your user) and code are all <a href="http://github.com/jaymzcd/wp-twacepost">over at github</a>. I can&#8217;t really tell if I&#8217;m &#8220;doing it right&#8221; but it&#8217;s working and is a start. Fork and be happy&#8230;</p>
<p><a href="http://jaymz.eu/wp-content/uploads/2010/10/twacepost-options.png"><img class="aligncenter size-full wp-image-525" title="twacepost-options" src="http://jaymz.eu/wp-content/uploads/2010/10/twacepost-options.png" alt="" width="480" height="414" /></a></p>
<p><em><strong>Updated </strong><span style="font-style: normal;">I&#8217;ve now added in support to push the title to twitter. I&#8217;m currently working on hooking in Bit.ly support to add the short URL to the tweet. Code is pushed to GH.</span></em></p>
<p><strong><em>More updates </em><span style="font-weight: normal;">The twitter posting now uses the post tile + a bit.ly link to your blog permalink. I&#8217;ve decided it&#8217;s now worthy of v0.2!</span></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2010/10/wordpress-to-facebook-and-twitter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Integrating ooyala in django (or just python)</title>
		<link>http://jaymz.eu/2010/07/integrating-ooyala-in-django-or-just-python/</link>
		<comments>http://jaymz.eu/2010/07/integrating-ooyala-in-django-or-just-python/#comments</comments>
		<pubDate>Wed, 14 Jul 2010 11:34:26 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[django]]></category>
		<category><![CDATA[ooyala]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=495</guid>
		<description><![CDATA[Ooyala is a feature rich video hosting platform. Something I needed recently was some way to link the data over at ooyala into a django site I&#8217;m building. So I wrote myself a library. It&#8217;s available over at github and it&#8217;s called (predictably) django-ooyala. Currently there is a management command syncooyala to pull in all [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://jaymz.eu/wp-content/uploads/2010/07/django-ooyala-logo.png"><img class="aligncenter size-full wp-image-497" title="django-ooyala-logo" src="http://jaymz.eu/wp-content/uploads/2010/07/django-ooyala-logo.png" alt="" width="350" height="133" /></a></p>
<p>Ooyala is a feature rich video hosting platform. Something I needed recently was some way to link the data over at ooyala into a django site I&#8217;m building. So I wrote myself a library. It&#8217;s available over at github and it&#8217;s called (predictably) <em><a href="http://github.com/jaymzcd/django-ooyala">django-ooyala</a>.</em> Currently there is a management command <strong>syncooyala</strong> to pull in all the data using the Backlot Query API. These imported items are then linked to a specific URL. Finally in your templates there is a <em>ooyala_video</em> tag which when given the current path (via request.path) returns the &lt;script&gt; tags needed for it to render.</p>
<p>Expect some updates as I flesh it out into the front end over the next few days.</p>
<p><strong><em>Updated (11th August): <span style="font-weight: normal;">I have added in analytics support. You can now make requests for video stat&#8217;s for a given account or video. The facebook SDK has also been added with a new template tag to output the headers in your template for a given video. Remember to request whitelisting from facebook for SWF embeds to work.</span></em></strong></p>
<div id="wpshdo_3" class="wp-synhighlighter-outer"><div id="wpshdt_3" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_3"></a><a id="wpshat_3" class="wp-synhighlighter-title" href="#codesyntax_3"  onClick="javascript:wpsh_toggleBlock(3)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_3" onClick="javascript:wpsh_code(3)" title="Show code only"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_3" onClick="javascript:wpsh_print(3)" title="Print code"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://jaymz.eu/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_3" class="wp-synhighlighter-inner" style="display: block;"><pre class="python"><span class="kw1">from</span> django.<span class="me1">http</span> <span class="kw1">import</span> HttpResponse
<span class="kw1">from</span> ooyala.<span class="me1">library</span> <span class="kw1">import</span> OoyalaAnalytics
<span class="kw1">from</span> ooyala.<span class="me1">constants</span> <span class="kw1">import</span> OoyalaConstants as O
<span class="kw1">from</span> ooyala.<span class="me1">models</span> <span class="kw1">import</span> OoyalaItem
&nbsp;
<span class="kw1">def</span> backlot_query<span class="br0">&#40;</span>request<span class="br0">&#41;</span>:
    req = OoyalaAnalytics<span class="br0">&#40;</span>video=OoyalaItem.<span class="me1">objects</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span>.<span class="me1">embed_code</span>, \
        method=O.<span class="me1">ANALYTIC_METHODS</span>.<span class="me1">VIDEO</span><span class="br0">&#41;</span>
    ooyala_response = req.<span class="me1">process</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
    <span class="kw1">return</span> HttpResponse<span class="br0">&#40;</span>ooyala_response.<span class="me1">toprettyxml</span><span class="br0">&#40;</span><span class="br0">&#41;</span>, mimetype=<span class="st0">&quot;text/xml&quot;</span><span class="br0">&#41;</span></pre></div></div>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2010/07/integrating-ooyala-in-django-or-just-python/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google Blogger to Django integration</title>
		<link>http://jaymz.eu/2010/06/google-blogger-to-django-integration/</link>
		<comments>http://jaymz.eu/2010/06/google-blogger-to-django-integration/#comments</comments>
		<pubDate>Wed, 30 Jun 2010 21:45:57 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[blogger]]></category>
		<category><![CDATA[django]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=447</guid>
		<description><![CDATA[I&#8217;ve been working a lot on Vans recently and they have a large number of blogs that are currently hosted on the blogger platform. This works really well for them, they have a straightforward &#38; easy to use blog platform that does what they need it to do.  The sites themselves work great as they [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been working a lot on <a href="http://www.vans.com">Vans</a> recently and they have a large number of blogs that are currently hosted on the blogger platform. This works really well for them, they have a straightforward &amp; easy to use blog platform that does what they need it to do.  The sites themselves work great as they are but the integration into the main site isn&#8217;t quite as nice.</p>
<p>If you go to the <a href="http://www.vans.com/vans/teamblog.asp">blogs section</a> on vans as it stands it will pull in an XML feed of all the current blogs and display them on one giagantic page. It can take a fair bit of time to load and its hard to see how each different blog gets displayed as its really one big list. For now it&#8217;s not so easy to pull in bits of content from the various blogs without someone having to mess with files or copy &amp; paste, with the build in django I wanted to create a much cleaner &amp; easier way to work with this content.</p>
<p><a href="http://github.com/jaymzcd/django-blogger"><img class="aligncenter size-full wp-image-460" title="blogger-django-logo" src="http://jaymz.eu/wp-content/uploads/2010/06/blogger-django-logo.png" alt="" width="100" height="99" /></a></p>
<p>For this I introduce <a href="http://github.com/jaymzcd/django-blogger">django-blogger</a>, a django application which will integrate Google Blogger blogs via their RSS feeds. As it is it will import the blogs for a given profile id and then sync up with the latest data via their RSS feeds. These can be <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&amp;answer=97933">enabled easily</a> for your given blogs. When you first install it comes with some admin actions which will all ow you to sync up the blogs manually all at once. There is also a management command, <em>syncblogs,</em> which is more suited to scheduling an update via cron (if you&#8217;re going to use cron you might be interested in <a href="http://code.google.com/p/django-crontab/">django-crontab</a>).</p>
<p><a href="http://jaymz.eu/wp-content/uploads/2010/06/djangoblogs-syncing-command.png"><img class="aligncenter size-full wp-image-451" title="djangoblogs-syncing-command" src="http://jaymz.eu/wp-content/uploads/2010/06/djangoblogs-syncing-command.png" alt="" width="514" height="252" /></a></p>
<p>This works on the feeds and not an archive, so it doesn&#8217;t require authentication, just access to the feed URL. A basic template is included to show how to render out the blog posts &amp; blogs as a menu, I override these myself for the format I need. The app itself now lets me pull content from any of the blogs and use it within the rest of the django based site cleanly &amp; easily. Rather than directly reading and displaying via the feed URL I&#8217;m creating actual objects for each post and blog so it&#8217;s easily extendible also, say to return posts in various formats or pulling images from each blog post to create blog galleries automatically.</p>
<p><img src="http://jaymz.eu/wp-content/uploads/2010/06/blogs-4.png" alt="" /></p>
<p>The code is available from <a href="http://github.com/jaymzcd/django-blogger">GitHub</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2010/06/google-blogger-to-django-integration/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Using stochastic processes to generate paint type effects in processing.org</title>
		<link>http://jaymz.eu/2010/06/using-stochastic-processes-to-generate-paint-type-effects/</link>
		<comments>http://jaymz.eu/2010/06/using-stochastic-processes-to-generate-paint-type-effects/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 13:38:01 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[graphics]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[java]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=413</guid>
		<description><![CDATA[I very much like to play with processing.org when I&#8217;ve got some downtime. I&#8217;ve wrote a small particle engine a while back in the framework and this time I thought I&#8217;d try and do something a little more arty from the outset. My inspiration for this &#8220;sketch&#8221; was the many splatter paintings by Jackson Pollock. [...]]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste">I very much like to play with <a href="http://processing.org" target="_blank">processing.org</a> when I&#8217;ve got some downtime. I&#8217;ve wrote a small particle engine a while back in the framework and this time I thought I&#8217;d try and do something a little more arty from the outset. My inspiration for this &#8220;sketch&#8221; was the many splatter paintings by Jackson Pollock. I can remember going to see some of his work at the Tate modern in London quite a long time ago. I had always thought it a bit poor as &#8220;art&#8221; when I was a kid but later on I developed an appreciation for the format. If you have no idea what I&#8217;m talking about, this is an example:</div>
<div style="text-align: center;"><a href="http://jaymz.eu/wp-content/uploads/2010/06/large_pollock8.jpg"><img class="aligncenter size-full wp-image-416" style="margin-top: 10px; margin-bottom: 10px;" title="large_pollock8" src="http://jaymz.eu/wp-content/uploads/2010/06/large_pollock8.jpg" alt="" width="453" height="337" /></a></div>
<div>Now my sketches don&#8217;t look much like this but I did capture some of that splattering chaotic effect that I wanted. The basic process is very simple, a class called a <em>Walker</em> will randomly make its way across the canvas. As it moves the vector distance of each step is calculated. If the step is big enough it causes a burst of circles to be drawn, each with a slightly random position &amp; varied alpha to give it some texture. To avoid it becoming a little too busy I&#8217;ve limited it to a set palette at runtime which can be regenerated as walkers are added.</div>
<div><a href="http://jaymz.eu/wp-content/uploads/2010/06/pollock-3.png"><img class="aligncenter size-full wp-image-418" style="margin-top: 10px; margin-bottom: 10px;" title="pollock-3" src="http://jaymz.eu/wp-content/uploads/2010/06/pollock-3.png" alt="" width="441" height="332" /></a></div>
<p>I was quite happy with the random scatter effect as different pools of colour made their way through the canvas space. I thought it would be a nice addition to add in some basic boundary conditions so I added a quick polygon class and added in an array of those. A few functions later and I could click around the screen defining new polygons. Using the well known <a href="http://en.wikipedia.org/wiki/Jordan_curve_theorem">Jordan Curve</a> <span style="color: #551a8b;"><span style="color: #000000;">theorem</span></span> we can tell if the walker is currently within an arbitrary polygon (without holes of course). Here&#8217;s an example video of it in action. Heart&#8217;s seem pretty easy to draw compared to anything crazy complex and give a good idea of the effect:</p>
<div align="center" style="margin-top:10px;margin-bottom:10px;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="350" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.youtube.com/v/Pa7tAKXAKF0" /><embed type="application/x-shockwave-flash" width="425" height="350" src="http://www.youtube.com/v/Pa7tAKXAKF0"></embed></object></div>
<div>I&#8217;ve added quite a few options to the code now allowing me to switch on &amp; off the boundaries as well as add an arbitrary number of polygons. If the vertices overlap then the way the &#8220;point in polygon&#8221; algorithm works it will flag each &#8220;contained&#8221; area as a solid.</div>
<div align="center" style="margin-top:10px;margin-bottom:10px;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="350" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.youtube.com/v/ISikETUOUZ8" /><embed type="application/x-shockwave-flash" width="425" height="350" src="http://www.youtube.com/v/ISikETUOUZ8"></embed></object></div>
<div>Finally here is a nicely captured heart shape. It gives a nice idea of the kind of effect when combined with a boundary. I think playing around with the way the walkers are coded could be fun, for example doing a neighbour check and tweaking the randomised movement accordingly could create a weak flocking style system with Brownian motion driving it.</div>
<div><a href="http://jaymz.eu/wp-content/uploads/2010/06/pollock-heart.png"><img class="aligncenter size-full wp-image-432" style="margin-top: 10px; margin-bottom: 10px;" title="pollock-heart" src="http://jaymz.eu/wp-content/uploads/2010/06/pollock-heart.png" alt="" width="570" height="450" /></a></div>
<div style="text-align: left;">If you&#8217;re interested in checking the code out you can <a href="http://github.com/jaymzcd/processing-grafwalker">find it over on github</a>. It should run for you ok out of the box within your processing environment.</div>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2010/06/using-stochastic-processes-to-generate-paint-type-effects/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google Chrome extension for TFL data</title>
		<link>http://jaymz.eu/2010/05/google-chrome-extension-for-tfl-data/</link>
		<comments>http://jaymz.eu/2010/05/google-chrome-extension-for-tfl-data/#comments</comments>
		<pubDate>Tue, 18 May 2010 00:38:47 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=353</guid>
		<description><![CDATA[I have been coding in java for about a week now (when I&#8217;m not coding in Python of course) and I fancied a break away from it. I&#8217;m not entirely sure why but I decided to take a look at coding chrome extensions. These are in fact very, very easy to make. The tube status [...]]]></description>
			<content:encoded><![CDATA[<p>I have been coding in java for about a week now (when I&#8217;m not coding in Python of course) and I fancied a break away from it. I&#8217;m not entirely sure why but I decided to take a look at coding chrome extensions. These are in fact very, very easy to make. The tube status thing below took me just over an hour to get how I wanted. If you&#8217;re running chrome you can get the installer here. I think I&#8217;ll do some more work on it to add customization &#8211; that was my initial motivation to do this, the first one I installed from the current extension gallery just showed the little panel of status&#8217; from the site and I wanted to just pick a few lines &amp; tweak the output.</p>
<p><a href="https://chrome.google.com/extensions/detail/mholkbelnpdjcfleagoeomkcojplfngn"><img class="aligncenter size-full wp-image-360" title="data" src="http://jaymz.eu/wp-content/uploads/2010/05/data.png" alt="" width="416" height="556" /></a></p>
<p>In the end it&#8217;s easier to just code my own. It makes use of the excellent <a href="http://tubeupdates.com/">REST api</a> provided by <a href="http://www.bendodson.com/">Ben Dodson</a>. Creating such an extension is trivial. You can make your life a bit easier if you just include jquery from the google ajax api&#8217;s. Then its really just a collection of a few html files (in this case just the one popup.html). All my HTML is doing is making an AJAX request for the JSON data from Ben&#8217;s api. That comes back and it simply renders out a few div&#8217;s with the colors set and based on the status a unicode entity to add some fun to it.</p>
<p>The <a href="http://code.google.com/chrome/extensions/overview.html">method of making extensions</a> on chrome really is a breeze and the documentation is plentiful, so hats off to google yet again for making me happy to be an open source, linux loving  developer. The extension is now in the chrome gallery and <a href="https://chrome.google.com/extensions/detail/mholkbelnpdjcfleagoeomkcojplfngn">available here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2010/05/google-chrome-extension-for-tfl-data/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Building CSS sprites with Bash &amp; Imagemagick</title>
		<link>http://jaymz.eu/2010/05/building-css-sprites-with-bash-imagemagick/</link>
		<comments>http://jaymz.eu/2010/05/building-css-sprites-with-bash-imagemagick/#comments</comments>
		<pubDate>Mon, 03 May 2010 16:38:44 +0000</pubDate>
		<dc:creator>jaymz</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[graphics]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[bash]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[imagemagick]]></category>

		<guid isPermaLink="false">http://jaymz.eu/?p=312</guid>
		<description><![CDATA[I&#8217;ve been rebuilding the Crooked Tongues forum and one of the things we&#8217;ve been mindful of is trying to stick to some good practises with regards optimzing the site for fast loading. One of the easy ways to decrease your page load times is to use CSS sprites. This is just stiching together all your [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been rebuilding the <a href="http://www.crookedtongues.com">Crooked Tongues</a> forum and one of the things we&#8217;ve been mindful of is trying to stick to some good practises with regards optimzing the site for fast loading. One of the easy ways to decrease your page load times is to use CSS sprites. This is just stiching together all your common images into one big one and then using background positions &amp; width/heights in CSS to offset and &#8220;crop&#8221; the big image. This way you only get the one HTTP request made to request it.</p>
<p style="text-align: center;"><a href="http://jaymz.eu/wp-content/uploads/2010/05/sprite-bad.png"><img class="aligncenter size-full wp-image-328" title="sprite-bad" src="http://jaymz.eu/wp-content/uploads/2010/05/sprite-bad.png" alt="" width="554" height="310" /></a></p>
<p>If you&#8217;ve got hundreds of small images it can really speed up your page. A prime candidate for sprites are typically your buttons, header images and in the case of a forum, emoticons. Crooked uses lots of custom designed icons and when writing them out as individual images for the post toolbar really slowed down the page. There was no chance I was going to do it manually so I turned to a stable of my web development toolset &#8211; <a href="http://www.imagemagick.org/script/convert.php">Imagemagicks convert</a>.</p>
<p>Convert can do a lot. I&#8217;ll show you two such ways it made my life easier and cut down on the time I had to spend doing grunt work. First, here&#8217;s how the toolbar looks:</p>
<p style="text-align: center;"><a href="http://jaymz.eu/wp-content/uploads/2010/05/emoticons-output.png"><img class="aligncenter size-full wp-image-314" title="emoticons-output" src="http://jaymz.eu/wp-content/uploads/2010/05/emoticons-output.png" alt="" width="584" height="231" /></a></p>
<p>I wrote some bash to basically loop over a folder of images and then using convert to pull the width &amp; height info, I use that to write the CSS file. Finally I loop over the images once more using the append command to output one big, long image. (<a href="http://gist.github.com/342399">gist</a>)</p>
<div id="wpshdo_4" class="wp-synhighlighter-outer"><div id="wpshdt_4" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_4"></a><a id="wpshat_4" class="wp-synhighlighter-title" href="#codesyntax_4"  onClick="javascript:wpsh_toggleBlock(4)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_4" onClick="javascript:wpsh_code(4)" title="Show code only"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_4" onClick="javascript:wpsh_print(4)" title="Print code"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://jaymz.eu/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_4" class="wp-synhighlighter-inner" style="display: block;"><pre class="bash"><span class="re3">#!/bin/bash</span>
&nbsp;
<span class="re3"># uses imagemagick to stich together all images <span class="kw1">in</span> a folder and</span>
<span class="re3"># <span class="kw1">then</span> writes a css <span class="kw2">file</span> with the correct offsets along with a</span>
<span class="re3"># <span class="kw3">test</span> html page <span class="kw1">for</span> verification that its all good</span>
&nbsp;
<span class="kw1">if</span> <span class="br0">&#91;</span> <span class="re4">$#</span> -gt <span class="nu0">0</span> <span class="br0">&#93;</span>
<span class="kw1">then</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#91;</span> $<span class="nu0">3</span> <span class="br0">&#93;</span>
    <span class="kw1">then</span>
        <span class="re2">ext=</span><span class="st0">&quot;.&quot;</span>$<span class="nu0">3</span>; <span class="re3"># the extension to iterate over <span class="kw1">for</span> input files</span>
    <span class="kw1">else</span>
        <span class="re2">ext=</span><span class="st0">&quot;.gif&quot;</span>; <span class="re3"># the extension to iterate over <span class="kw1">for</span> input files</span>
    <span class="kw1">fi</span>
&nbsp;
    <span class="re2">name=</span>$<span class="nu0">1</span>; <span class="re3"># output will be placed <span class="kw1">in</span> a folder named this</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#91;</span> $<span class="nu0">2</span> <span class="br0">&#93;</span>
    <span class="kw1">then</span>
        <span class="re2">classname=</span>$<span class="nu0">2</span><span class="st0">&quot;-sprite&quot;</span>;
    <span class="kw1">else</span>
        <span class="re2">classname=</span>$<span class="nu0">1</span><span class="st0">&quot;-sprite&quot;</span>;
    <span class="kw1">fi</span>
    <span class="re2">css=</span><span class="st0">&quot;$name/$classname.css&quot;</span>;
    <span class="re2">html=</span><span class="st0">&quot;$name/test.html&quot;</span>;
&nbsp;
    <span class="kw2">rm</span> -fr <span class="re1">$name</span>;
    <span class="kw2">mkdir</span> <span class="re1">$name</span>;
    <span class="kw2">touch</span> <span class="re1">$css</span> <span class="re1">$html</span>;
&nbsp;
    <span class="kw3">echo</span> <span class="st0">&quot;Generating sprite file...&quot;</span>;
    convert *<span class="re1">$ext</span> -append <span class="re1">$name</span>/<span class="re1">$classname</span><span class="re1">$ext</span>;
    <span class="kw3">echo</span> <span class="st0">&quot;Sprite complete! - Creating css &amp; test output...&quot;</span>;
&nbsp;
    <span class="kw3">echo</span> -e <span class="st0">&quot;&lt;html&gt;<span class="es0">\n</span>&lt;head&gt;<span class="es0">\n</span><span class="es0">\t</span>&lt;link rel=<span class="es0">\&quot;</span>stylesheet<span class="es0">\&quot;</span> href=<span class="es0">\&quot;</span>`basename $css`<span class="es0">\&quot;</span> /&gt;<span class="es0">\n</span>&lt;/head&gt;<span class="es0">\n</span>&lt;body&gt;<span class="es0">\n</span><span class="es0">\t</span>&lt;h1&gt;Sprite test page&lt;/h1&gt;<span class="es0">\n</span>&quot;</span> &gt;&gt; <span class="re1">$html</span>
&nbsp;
    <span class="kw3">echo</span> -e <span class="st0">&quot;.$classname {<span class="es0">\n</span><span class="es0">\t</span>background:url('$classname$ext') no-repeat top left; display:inline-block;<span class="es0">\n</span>}&quot;</span> &gt;&gt; <span class="re1">$css</span>;
    <span class="re2">counter=</span><span class="nu0">0</span>;
    <span class="re2">offset=</span><span class="nu0">0</span>;
    <span class="kw1">for</span> <span class="kw2">file</span> <span class="kw1">in</span> *<span class="re1">$ext</span>
    <span class="kw1">do</span>
        <span class="re2">width=</span>`identify -format <span class="st0">&quot;%[fx:w]&quot;</span> <span class="st0">&quot;$file&quot;</span>`;
        <span class="re2">height=</span>`identify -format <span class="st0">&quot;%[fx:h]&quot;</span> <span class="st0">&quot;$file&quot;</span>`;
        <span class="re2">idname=</span>`<span class="kw2">basename</span> <span class="st0">&quot;$file&quot;</span> <span class="re1">$ext</span>`;
        <span class="re2">clean=</span>$<span class="br0">&#123;</span>idname// /-<span class="br0">&#125;</span>
        <span class="kw3">echo</span> <span class="st0">&quot;.$classname#$clean {&quot;</span> &gt;&gt; <span class="re1">$css</span>;
        <span class="kw3">echo</span> -e <span class="st0">&quot;<span class="es0">\t</span>background-position:0 -${offset}px;&quot;</span> &gt;&gt; <span class="re1">$css</span>;
        <span class="kw3">echo</span> -e <span class="st0">&quot;<span class="es0">\t</span>width: ${width}px;&quot;</span> &gt;&gt; <span class="re1">$css</span>;
        <span class="kw3">echo</span> -e <span class="st0">&quot;<span class="es0">\t</span>height: ${height}px;<span class="es0">\n</span>}&quot;</span> &gt;&gt; <span class="re1">$css</span>;
&nbsp;
        <span class="kw3">echo</span> -e <span class="st0">&quot;&lt;a href=<span class="es0">\&quot;</span>#<span class="es0">\&quot;</span> class=<span class="es0">\&quot;</span>$classname<span class="es0">\&quot;</span> id=<span class="es0">\&quot;</span>$clean<span class="es0">\&quot;</span>&gt;&lt;/a&gt;<span class="es0">\n</span>&quot;</span> &gt;&gt; <span class="re1">$html</span>;
&nbsp;
        <span class="kw3">let</span> offset+=<span class="re1">$height</span>;
        <span class="kw3">let</span> counter+=<span class="nu0">1</span>;
        <span class="kw3">echo</span> -e <span class="st0">&quot;<span class="es0">\t</span>#$counter done&quot;</span>;
    <span class="kw1">done</span>
&nbsp;
    <span class="kw3">echo</span> -e <span class="st0">&quot;&lt;h2&gt;Full sprite:&lt;/h2&gt;<span class="es0">\n</span>&lt;img src=<span class="es0">\&quot;</span>$classname$ext<span class="es0">\&quot;</span> /&gt;&quot;</span> &gt;&gt; <span class="re1">$html</span>;
    <span class="kw3">echo</span> -e <span class="st0">&quot;&lt;/body&gt;<span class="es0">\n</span>&lt;/html&gt;&quot;</span> &gt;&gt; <span class="re1">$html</span>;
&nbsp;
    <span class="kw3">echo</span> -e <span class="st0">&quot;<span class="es0">\n</span>Complete! - $counter sprites created, css written &amp; test page output. ~jaymz&quot;</span>;
&nbsp;
<span class="kw1">else</span>
&nbsp;
    <span class="kw3">echo</span> -e <span class="st0">&quot;There should be at least 1 argument!<span class="es0">\n</span><span class="es0">\t</span>buildSprite.sh output_folder classname input_extension&quot;</span>
&nbsp;
<span class="kw1">fi</span></pre></div></div>
<p>The script outputs the names incrementing by one, I&#8217;ve gone over myself and turned them into &#8220;nice&#8221; names. All in all its taken maybe 10 minutes to convert it all into a sprite and nice CSS file. If you were using a primary key field like 1, 2, 3&#8230; etc then you could probably fudge it to not even have to name the id&#8217;s &#8220;nicely&#8221;.<br />
<a href="http://jaymz.eu/wp-content/uploads/2010/05/sprite-css.png"><img class="aligncenter size-full wp-image-319" title="sprite-css" src="http://jaymz.eu/wp-content/uploads/2010/05/sprite-css.png" alt="" width="480" height="366" /></a></p>
<p>Imagemagicks convert can also do some modification of your files. It can for example convert your image to a black &amp; white copy. It&#8217;s not a great deal of work to then loop over a set of images, create b&amp;w versions in a temporary folder and then stitch the two versions together to get a color→b/w sprite for hovers. I&#8217;ve actually seen people do this manually and spend an age at it, with this method you output them once then sit back for the 30 seconds or so whilst the computer does the work.</p>
<div id="wpshdo_5" class="wp-synhighlighter-outer"><div id="wpshdt_5" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_5"></a><a id="wpshat_5" class="wp-synhighlighter-title" href="#codesyntax_5"  onClick="javascript:wpsh_toggleBlock(5)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_5" onClick="javascript:wpsh_code(5)" title="Show code only"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_5" onClick="javascript:wpsh_print(5)" title="Print code"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://jaymz.eu/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://jaymz.eu/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_5" class="wp-synhighlighter-inner" style="display: block;"><pre class="bash"><span class="kw1">for</span> <span class="kw2">file</span> <span class="kw1">in</span> *.jpg; <span class="kw1">do</span> convert -colorspace Gray <span class="re1">$file</span> bw/<span class="re1">$file</span>; <span class="kw1">done</span>
<span class="kw1">for</span> <span class="kw2">file</span> <span class="kw1">in</span> *.jpg; <span class="kw1">do</span> convert <span class="re1">$file</span> bw/<span class="re1">$file</span> -append sprites/<span class="re1">$file</span>; <span class="kw1">done</span></pre></div></div>
<p><a href="http://jaymz.eu/wp-content/uploads/2010/05/alexone_.jpg"><img class="aligncenter size-full wp-image-323" title="alexone_" src="http://jaymz.eu/wp-content/uploads/2010/05/alexone_.jpg" alt="" width="220" height="266" /></a></p>
<p>It&#8217;s times like this that I am reminded of just how much time you can save with a little shell script and the right command line tools. Not everthing needs point &amp; click.</p>
]]></content:encoded>
			<wfw:commentRss>http://jaymz.eu/2010/05/building-css-sprites-with-bash-imagemagick/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

