Return to 10to1.be

Under the Hat


Creating a Quick Look plugin

27 Jan 2012

I’ve been searching for some decent documentation on how to create a Quick Look plugin. It took me several months before I finally found a way to develop the plugin. With many thanks to a soon to be released book by The Big Nerd Ranch.

For those wondering on what Quick Look does, here is Apple’s explanation.

Setup your Xcode project

Now let’s start developing!

  • Create a new Quick Look project Quick Look Project

  • Change the extension for both GenerateThumbnailForURL.c & GeneratePreviewForURL.c to .m. (This allows you to use Objective-C code and frameworks in these files)

Support an extension

In this example I want to support the .10to1 extension so that I can preview this file as a text file.

Below is an example on what you have to add to the Info.plist to support the .10to1 extension.

<key>UTImportedTypeDeclarations</key>
<array>
  <dict>
    <key>UTTypeIdentifier</key>
    <string>be.10to1.quicklook</string>
    <key>UTTypeDescription</key>
    <string>10to1 document</string>
    <key>UTTypeConformsTo</key>
    <array>
      <string>public.data</string>
    </array>
    <key>UTTypeTagSpecification</key>
    <dict>
      <key>public.filename-extension</key>
      <array>
        <string>10to1</string>
      </array>
    </dict>
  </dict>
</array>	
<key>CFBundleDocumentTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>QLGenerator</string>
    <key>LSItemContentTypes</key>
    <array>
      <string>be.10to1.quicklook</string>
    </array>
  </dict>
</array>

Be aware, the default project template for a Quick Look plugin already has the following line of code included in the plist.

<key>CFBundleDocumentTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>QLGenerator</string>
    <key>LSItemContentTypes</key>
    <array>
      <string>SUPPORTED_UTI_TYPE</string>
    </array>
  </dict>
</array>

If you want to create a plugin for an existing UTI type, you just have to change SUPPORTED_UTI_TYPE string with for example public.png for a PNG image.

But if your plugin supports a non existing UTI type you have to define it in the plist under the UTImportedTypeDeclarations key. If you want to find out to what UTI type your file conforms to, just use the mdsl executable and you’ll find the UTI type(s) in key kMDItemContentTypeTree.

mdls FILENAME

More information can be found here.

Render the preview

This is the view shown after the space button is pressed. This will display the content of the .10to1 file.

  • Add the Cococa framework

  • Import <Cocoa/Cocoa.h> in the GeneratePreviewForURL.m file

  • Add some generation code inside the GeneratePreviewForURL function as done in this file

Render the thumbnail

This is the icon with a generated content that is shown in your Finder window.

  • Add the WebKit framework

  • Import <Cocoa/Cocoa.h> & <WebKit/WebKit> in the GenerateThumbnailForURL.m file

  • Add some generation code inside the GenerateThumbnailForURL function as done in this file

Debugging

But how do we debug a Quick Look plugin? You can’t just run it as an executable. Therefore we use qlmanage provided by Apple.

We first have to copy the plugin to ~/Library/QuickLook after a successfull build, otherwise your plugin will not run correctly with Xcode.

  • Add a New Copy Files build phase to your target

  • Select Absolute Path and enter ~/Library/QuickLook as the Subpath

  • Add the generated file to the files list

    Copy Files

Run the plugin using qlmanage.

  • Because you can’t select qlmanage in the Finder you have to copy the binary to your project root
cp /usr/bin/qlmanage PROJECT_ROOT/.
  • Edit your scheme and select the Run/Info tab

  • Select the qlmanage executable in your project root

    qlmanage

  • In the Run/Arguments tab you can add the folling Arguments Passed On Launch to render the preview:

-p dummy.10to1

Next up, run the application and the dummy.10to1 file will be used as the selected file.

To test the thumbnail generation you could to the same, add the same argument but with -t in the Arguments tab:

-t dummy.10to1

But this didn’t to the trick (I have no idea why…), so you can manually run this command in your Terminal in order to test the preview generation:

qlmanage -t dummy.10to1

Some utilities

  • Reload the Quick Look generator list
qlmanage -r
  • List the UTI types for the given file, very handy when defining your supported UTI format
mdls FILE

Reference

Wij engageren ons voor FLAME

26 Jan 2012

Een bedrijf is geen eiland. We kijken dan ook graag af en toe eens op van onze toetsenborden om te zien wat er leeft in de wereld rondom ons. Een aanrader!

Soms doen we zo inspiratie op, of leren we iets bij, en een enkele keer denken we: ‘Hm, hier kunnen we helpen…’. Dat laatste gebeurde toen we FLAME vzw leerden kennen. FLAME had nood aan een nieuwe website, en we zijn blij dat we een kleine bijdrage konden leveren door het design van de site op ons te nemen.

FLAME is een ngo die brandwondenzorg verleent in Burkina Faso. Wat begon als acute noodhulp in 2003 groeide uit tot een volwaardig en helaas uniek brandwondencentrum in Bobo Dioulasso. FLAME verzamelt financiële en materiële steun en gaat 3 keer per jaar ter plekke het lokale team opleiden en concrete hulp verlenen.

Maar lees het volledige en indrukwekkende verhaal vooral zelf op de gloednieuwe site die sinds vandaag online staat: www.ngoflame.be.

VillaSquare

04 Jan 2012

10to1 werkte samen met het uitstekende team van VRT-medialab aan een webapplicatie waarmee kijkers tijdens het TV-programma Villa Vanthilt konden reageren op de uitzending en op elkaar. De app is gebaseerd op Ruby on Rails, HTML5 en CSS3 en werd geoptimaliseerd voor de iPad.

VRT-medialab is de onderzoeksafdeling van de VRT en verricht onderzoek naar de creatie, het beheer en de distributie van mediacontent. Om een meerwaarde toe te voegen aan de traditionele media-ervaring wil VRT-medialab tweedeschermtoepassingen aanbieden.

Screenshot VillaSquare

Centraal staat de korte inhoud van de volgende aflevering, en een tag cloud op basis van reacties op de vorige aflevering.

Eens je geregistreerd bent, kan je aangeven dat je naar een aflevering gaat kijken of gekeken hebt, en kan je delen of je de aflevering leuk of niet leuk vond. Je kan het profiel van andere gebruikers bekijken en hen toevoegen aan je Vrienden.

De berichtenstroom aan de linkerzijde verzamelt alle reacties die via SMS, Facebook, Twitter of op de site zijn gedeeld. Je kan de berichten zo filteren dat je alleen de reacties van een bepaald netwerk of met bepaalde hashtags te zien krijgt. Of je kan enkel de reacties van je vrienden bekijken. Berichten van de officiële Villa Vanthilt-account hebben een blauwe achtergrond zodat ze duidelijk opvallen.

In het veld linksboven kan je zelf een reactie achterlaten. Als je dat wenst, wordt die meteen doorgepost naar je eigen Facebook- of Twitteraccount.

In geen tijd waren Jelle, Elise en Nick erg straf bezig. Ze hadden een no-nonsense attitude die goed aansloot bij onze manier van werken. Stap voor stap slaagden we erin de applicatie stabiel, gebruiksvriendelijk en schaalbaar te maken. Zo vormden we samen een ruw prototype om tot een afgewerkt product. En dat is voor een groot stuk te danken aan Jelle en Elise hun diepe kennis van het Rails framework en Nick zijn perfectionisme en liefde voor user interfaces.

Hendrik Dacquin, VRT-medialab

Oak For Life

16 Dec 2011

Elke 3 minuten sterft een kind aan de gevolgen van diarree. Malaria, aids en mazelen samen eisen zelfs een minder hoge tol. Daar krijgen wij het schijt van en daarom storten we de december-opbrengst van Oak gewoon door naar Music For Life.

Het jaareinde nadert, hoog tijd weer voor de gezamenlijke strijd van Studio Brussel en het Rode Kruis. Dit jaar binden ze met de opbrengst de strijd aan tegen diarree, wereldwijd doodsoorzaak nummer 1 bij kinderen jonger dan vijf.

Met drie glazen huizen wordt dit een memorabele editie waar veel over gepraat zal worden, IRL en op de social media. En net daar kunnen we helpen!

Oak is de snelste en eenvoudigste manier om een Tweet te versturen vanop je iPhone. Elke cent die Oak in december opbrengt gaat integraal naar Music For Life.

Download Oak in de App Store en Tweet sneller dan ooit tevoren. Handig als je dringend naar het toilet moet. Of beter: kan.

Leuke Deals

12 Dec 2011

Samen met Countdown ontwikkelden we Leuke Deals en de Franstalige tegenhanger Chouettes Affaires, websites die je interessante kortingen en aanbiedingen laten ontdekken.

Countdown is een gevestigde waarde als aanbieder van loyaliteitsprogramma’s, op Leuke Deals verzamelen ze de beste promoties in verschillende categorieën. Ben je steeds op zoek naar koopkrachtverhoging? Blijf dan als eerste op de hoogte van actuele deals via e-mail, RSS, Facebook of Twitter.

Screenshot Leuke Deals

De meest recente deals springen meteen in het oog op de homepage. De redactie van Leuke Deals zet steeds enkele aanbiedingen in de kijker en stelt ze wat uitgebreider voor. Wie op zoek is naar specifieke kortingen kan bovenaan een categorie kiezen of het zoekvak gebruiken.

De redactie voorziet via de back end elke aanbieding van een woordje uitleg en een afbeelding. Elke deal beschrijft hoe je van de korting gebruik kan maken.

Als je op een aanbieding wil ingaan klik je onderaan op de ‘Vind ik leuk’-button. Vervolgens vul je je naam en je e-mailadres in, en tenslotte ontvang je een persoonlijke voucher.

Door de integratie met Facebook hoef je je niet apart te registreren bij Leuke Deals: je meldt je gewoon aan op je Facebook-account om een voucher te kunnen genereren. De aanbieding verschijnt dan ook op je profiel en kan zo opgepikt worden door je vrienden.

We zijn bij 10to1 nogal fan van social media, de combinatie met Facebook maakte het voor ons dus extra leuk om onze tanden hier in te zetten.

Het team van 10to1 dacht met ons mee om de beste technische keuzes te maken voor het project. We kwamen tijdens het traject een aantal moeilijkheden tegen die steeds met de nodige creativiteit werden opgelost.
Voor ons was het een Leuke Deal: de samenwerking verliep vlot, de communicatie was steeds open en constructief, en de prijs was correct voor de geleverde kwaliteit.

Peter Plettinckx, Countdown


About this blog

You’re reading Under the Hat, a weblog written by 10to1.

Who’s got the mic?