Rixstep
	`About \| ACP \| Buy \| Industry Watch \| Learning Curve \| News \| Products \| Search \| Substack`

Home » Learning Curve » ACP Guru

Autocoding Clipothèque

You can make this program do almost anything you want.

Get It

Try It

Clipothèque collects 'clips' of almost anything - HTML web pages, local images or media files, remote files such as YouTube clips, and so forth.

Now Clipothèque also collects Spotify user searches, Spotify music genres, Spotify artists, Spotify tracks, and Spotify albums. At least one of these collections is something even Spotify can't accomplish!

Despite needing three fields to complete a Clipothèque clip, adding new clips to Clipothèque is largely a matter of drag and drop. This facility is made possible through the Clipothèque autocode facility.

The autocode facility uses an embedded database in binary XML format ('autocodes') to correlate different types of URLs and paths. The file can be applicably edited as plain UTF-8 text with PlistEdit.

At time of writing the contents of Clipothèque's autocodes file are as follows.

<key>Autocodes</key>
<dict>
    <key>Formats</key>
    <dict>
        <key>Schemes</key>
        <dict>
            <key>spotify</key>
            <string><a href=%@><img border=0 height= src=http://spotify.com/wp-content/themes/spotify/images/logo.png width=></a></string>
        </dict>
        <key>Sites</key>
        <dict>
            <key>blip</key>
            <string><embed height= src="http://blip.tv/play/%@" type='application/x-shockwave-flash' width=></embed></string>
            <key>collegehumor</key>
            <string><embed height= src="http://collegehumor.com/moogaloop/moogaloop.swf?clip_id=%@" type='application/x-shockwave-flash' width=></embed></string>
            <key>joost</key>
            <string><embed height= src="http://joost.com/embed/%@" type='application/x-shockwave-flash' width=></embed></string>
            <key>spotify-album</key>
            <string><a href=spotify:album:%@><img border=0 height= src=http://spotify.com/wp-content/themes/spotify/images/logo.png width=></a></string>
            <key>spotify-artist</key>
            <string><a href=spotify:artist:%@><img border=0 height= src=http://spotify.com/wp-content/themes/spotify/images/logo.png width=></a></string>
            <key>spotify-genre</key>
            <string><a href=spotify:genre:%@><img border=0 height= src=http://spotify.com/wp-content/themes/spotify/images/logo.png width=></a></string>
            <key>spotify-search</key>
            <string><a href=spotify:search:%@><img border=0 height= src=http://spotify.com/wp-content/themes/spotify/images/logo.png width=></a></string>
            <key>spotify-title</key>
            <string><a href=spotify:title:%@><img border=0 height= src=http://spotify.com/wp-content/themes/spotify/images/logo.png width=></a></string>
            <key>spotify-user</key>
            <string><a href=spotify:user:%@:playlist:%@><img border=0 height= src=http://spotify.com/wp-content/themes/spotify/images/logo.png width=></a></string>
            <key>vimeo</key>
            <string><embed height= src="http://vimeo.com/moogaloop.swf?clip_id=%@" type='application/x-shockwave-flash' width=></embed></string>
            <key>youtube</key>
            <string><embed height= src="http://youtube.com/v/%@" type='application/x-shockwave-flash' width=></embed></string>
        </dict>
        <key>Types</key>
        <dict>
            <key>flash</key>
            <string><embed height= src="%@" type='application/x-shockwave-flash' width=></embed></string>
            <key>iframe</key>
            <string><iframe border=0 height= src="%@" width=></string>
            <key>img</key>
            <string><img border=0 height= src="%@" width=></string>
            <key>quicktime</key>
            <string><embed height= scale=tofit src="%@" type='application/quicktime' width=></embed></string>
        </dict>
    </dict>
    <key>Targets</key>
    <dict>
        <key>Schemes</key>
        <dict>
            <key>spotify</key>
            <array>
                <string>spotify:</string>
            </array>
        </dict>
        <key>Sites</key>
        <dict>
            <key>blip</key>
            <array>
                <string>http://blip.tv/play/</string>
                <string>http://www.blip.tv/play/</string>
            </array>
            <key>collegehumor</key>
            <array>
                <string>http://collegehumor.com/video:</string>
                <string>http://www.collegehumor.com/video:</string>
            </array>
            <key>joost</key>
            <array>
                <string>http://joost.com/</string>
                <string>http://www.joost.com/</string>
            </array>
            <key>spotify-album</key>
            <array>
                <string>http://open.spotify.com/album/</string>
            </array>
            <key>spotify-artist</key>
            <array>
                <string>http://open.spotify.com/artist/</string>
            </array>
            <key>spotify-genre</key>
            <array>
                <string>http://open.spotify.com/genre/</string>
            </array>
            <key>spotify-search</key>
            <array>
                <string>http://open.spotify.com/search/</string>
            </array>
            <key>spotify-title</key>
            <array>
                <string>http://open.spotify.com/track/</string>
            </array>
            <key>spotify-user</key>
            <array>
                <string>http://open.spotify.com/user/</string>
            </array>
            <key>vimeo</key>
            <array>
                <string>http://vimeo.com/</string>
                <string>http://www.vimeo.com/</string>
            </array>
            <key>youtube</key>
            <array>
                <string>http://youtube.com/watch?v=</string>
                <string>http://au.youtube.com/watch?v=</string>
                <string>http://ca.youtube.com/watch?v=</string>
                <string>http://br.youtube.com/watch?v=</string>
                <string>http://de.youtube.com/watch?v=</string>
                <string>http://es.youtube.com/watch?v=</string>
                <string>http://fr.youtube.com/watch?v=</string>
                <string>http://uk.youtube.com/watch?v=</string>
                <string>http://hk.youtube.com/watch?v=</string>
                <string>http://ie.youtube.com/watch?v=</string>
                <string>http://in.youtube.com/watch?v=</string>
                <string>http://it.youtube.com/watch?v=</string>
                <string>http://jp.youtube.com/watch?v=</string>
                <string>http://kr.youtube.com/watch?v=</string>
                <string>http://mx.youtube.com/watch?v=</string>
                <string>http://nl.youtube.com/watch?v=</string>
                <string>http://www.youtube.com/watch?v=</string>
            </array>
        </dict>
        <key>Types</key>
        <dict>
            <key>flash</key>
            <array>
                <string>swf</string>
            </array>
            <key>iframe</key>
            <array>
                <string>ab</string>
                <string>asp</string>
                <string>aspx</string>
                <string>mspx</string>
                <string>ece</string>
                <string>htm</string>
                <string>html</string>
                <string>pdf</string>
                <string>php</string>
                <string>shtml</string>
                <string>stm</string>
                <string>svd</string>
                <string>xht</string>
                <string>xhtm</string>
                <string>xhtml</string>
                <string>xml</string>
            </array>
            <key>img</key>
            <array>
                <string>ani</string>
                <string>apng</string>
                <string>bmp</string>
                <string>gif</string>
                <string>icns</string>
                <string>jp2</string>
                <string>jpe</string>
                <string>jpeg</string>
                <string>jpg</string>
                <string>pdf</string>
                <string>pict</string>
                <string>png</string>
                <string>psd</string>
                <string>sgi</string>
                <string>svg</string>
                <string>tif</string>
                <string>tiff</string>
                <string>tga</string>
            </array>
            <key>quicktime</key>
            <array>
                <string>mov</string>
                <string>mp3</string>
                <string>mp4</string>
                <string>mpeg</string>
                <string>mpg</string>
            </array>
        </dict>
    </dict>
</dict>

To better reveal its structure the file might be broken down into its constituents as follows.

<key>Autocodes</key>
<dict>
    <key>Formats</key>
    <dict>
        <key>Schemes</key>
        <key>Sites</key>
        <key>Types</key>
    </dict>
    <key>Targets</key>
    <dict>
        <key>Schemes</key>
        <key>Sites</key>
        <key>Types</key>
    </dict>
</dict>

It's now easy to see several things.

The file has its own 'magic': Autocodes.
The file is divided up into two top level categories: Formats and Targets.
Each of the top level categories has three subcategories: Schemes, Sites, and Types.

Schemes	Refers to URL schemes. Currently the only registered scheme is 'spotify:'.
Sites	Actual media providers. Currently blip, collegehumor, joost, vimeo, spotify, and youtube are defined.
Types	Groups of file extensions sorted by file type. Currently defined file types are flash, iframe, img, and quicktime.

The purpose in so categorising input becomes clear when it's remembered Clipothèque 'previews' your clips in a standard HTML rendering format. Image files need an 'img' tag; flash and quicktime need their own HTML code; and so forth.

How It Works

You'll see Clipothèque's autocoding in one of two ways.

By dropping a link on a Clipothèque document window.
By clicking the 'Autocode' button on the Clipothèque clip edit sheet.

The 'Targets' section is what Clipothèque searches to see if there's any applicable rendering format. If the search is successful Clipothèque drills down to the corresponding path in the 'Formats' section and picks up the formatting string needed to render your clip.

An example.

Drag the URL of an online image to the middle field of a Clipothèque 'data sheet'.
Click the 'Autocode' button. The 'code' field is filled in.
Click 'Save' to save the data and close the sheet.
The image is displayed in the preview window.

Another example.

Drag the URL of an online image to a Clipothèque document window.
The Clipothèque data sheet opens with the both the middle ('link') and bottom ('code') fields already filled in. Give the clip a title ('clip') and save.
The image is displayed in the preview window.

But how did that happen?

Clipothèque found the file type (extension) under Autocodes->Targets->Types->img.
Clipothèque found the paired format string under Autocodes->Formats->Types->img.
Clipothèque used the link to format the string and fill in the code field.

Another example.

Drag a YouTube URL to a Clipothèque document window.
The Clipothèque data sheet opens with the both the middle ('link') and bottom ('code') fields already filled in. Give the clip a title ('clip') and save.
The image is displayed in the preview window.

And how did that happen?

Clipothèque found the 'site' string Autocodes->Targets->Sites->youtube.
Clipothèque found the paired format string under Autocodes->Formats->Sites->youtube.
Clipothèque used the link to format the string and fill in the code field.

Yet another example.

Drag anything in Spotify to a Clipothèque document window.
The Clipothèque data sheet opens with the all three fields already filled in. The 'link' field contains a generic web link. Save and close.
A Spotify image is displayed in the preview window. Click the image to open the item in Spotify.

Yet another example.

Drag a Spotify URI (by holding down '⌥') to a Clipothèque document window.
The Clipothèque data sheet opens with the all three fields already filled in. The 'link' field contains a Spotify URI rather than a URL; the clip field will contain the item's title. Save and close.
A Spotify image is displayed in the preview window. Click the image to open the item in Spotify.

The above will also work with extension-less files if their URL prefixes are added to 'autocodes' in the 'Sites' sections.

An example.

'http://mysite.com/images' contains images saved without extension.
Create an entry under 'Targets'. [Don't forget the final slash character.]
```
<key>mysite</key>
<string>http://mysite.com/images/</string>
```

Create the counterpart in the 'Formats' section.

<key>mysite</key>
<string>&lt;img border=0 height= src=%@ width=&gt;</string>

The above works because in the one case the beginning of the URL is being parsed and in the other the end (extension) is being parsed. The code is complete: all you need is to understand how the system works and you can add what you want. The program Clipothèque need not be altered anymore in this regard - there are simply three ways to parse URLs: as schemes, as sites, or as types.

Clipothèque 2.0 Free Coming Real Soon Now

A new (and free) version of Clipothèque incorporating integration with Spotify will be released later this month.