Kategoriarkiv: Programmering

Diverse programmeringsrelaterede artikler

Click tracking

Vi har installeret CrazyEgg click tracking på hinnerup.net.

CrazyEgg er et værktøj til at visualisere brugernes færden på ens site, og indeholder smarte funktioner som: Click-overlay, Heatmap og Confetti.

Man indsætter en enkelt linje kode på de sider der skal trackes:

Derefter opsættes de sider der skal trackes i CrazyEgg:

Efter nogle dage begynder statistikken at være på plads.

Her er de forskellige overlays.

Standard overlay:

Heatmap:

Confetti:

Standard overlayet giver os mulighed for at se hvor mange clicks et givet link har fået. Heatmap er rimeligt selvforklarende – den viser os hvor “populært” et link eller anden detalje er. Den mest interessante er Confetti, som har følgende indstillings-muligheder:

Alle disse overlays skulle sammenlagt give ens hjemmesidedesigner mulighed for at designe en mere brugervenlig oplevelse.

Strukturel processering af billeder

Når billeder skal processeres programmatisk anvendes en matematisk metode der kaldes morfologiske transformationer (morphological transformations), mønster genkendelse (pattern recognition) og/eller egenskabs ekstraktion (feature extraction).

Her i juletiden har mange været påvirket af huller i asfalten langs eksempeltvist Vejle fjordbroen. Hvis vi begiver os ud i et tankeeksperiment er det med relativt simple billedbehandlingsalgoritmer “nemt” at detektere en betydelig andel af opbyggende huller og dermed kunne man forebyggende iværksætte udbedrende vejarbejde før et problem opstår.

Et eksempel kunne være anvendelse af thresholding, erosion og dilation på en stribe billeder taget af asfaltoverfladen på udvalgte vejstrækninger. For resten af denne artikel antages det, at sådanne billeder er tilgængelige.

Herunder vises en række billeder af asfaltoverflader hvor der er opstået minimale huller og sprækker, samt hvor alvorlige slaghuller forekommer og er delvist udbedrede. Ligeledes vises en normal asfalt overflade. Under hvert billede vises en morfologisk behandlet udgave, der har været underlagt den samme algoritme for samtlige billeder. Givet disse resultatbilleder er det relativt simpelt at afgøre hvorvidt et behandlet resultatbillede udgør en kandidat til manuel inspektion eller ej.

Klik på billedet for at se en stor udgave.

“Proof-of-concept” algoritmen benyttet på resultatbillederne herover er skrevet i .NET C#, og ser overordnet således ud:

Bitmap input = new Bitmap(filename);
Bitmap output =
  Dilate(
    Dilate(
      Threshold(
        Dilate(
          Dilate(
            Dilate(
              Dilate(
                Grayscale(input)
              )
            )
          )
        ), 70
      )
    )
  );

output.Save(
  Path.GetFileNameWithoutExtension(filename) +
  ".processed" + Path.GetExtension(filename));

Tankeeksperimentet skal naturligvis føres videre ud før det bliver praktisk anvendeligt.

Det er klart at der vil være tale om mange tusinde billeder og adskillige terrabytes data, hvorfor system arkitekturen bag processeringssystemet bør være baseret på en skalerbar multiserver/multikerne teknologi. Et eksempel på en gratis open-source arkitektur kunne være AMD’s Framewave eller nVidia’s CUDA.

Ligeledes vil der være særlige elementer i billederne der skal tages særlig hånd om, f.eks. vejstriber og overgange mellem forskellige belægningstyper med videre.

Video afspilning på iPhone

Hvis man som udvikler gerne vil afspille film i en af sine iPhone apps, har Apple stillet MPMoviePlayerController klassen i MediaPlayer frameworket til rådighed.

MPMoviePlayerControlleren gør at vi som udviklere kan abstrahere fra hvilket format filmen ligger i, om den ligger lokalt på iPhonen eller skal tilgås gennem en URL og om filmen skal streames eller hentes helt før afspilning starter.

Trinene for at afspille film fra vores iPhone app er derfor ganske simple.

  1. Tilføj frameworket MediaPlayer til Xcode projectet.
  2. Alloker plads til MPMoviePlayerControlleren og initialiser denne med en URL eller en sti til en film.
  3. Fortæl afspilleren at den skal starte afspilningen.

Et kode eksempel kan ses her

MoviePlayerInit

Og voila! App’en kan nu åbne iPhonens medieafspiller og via denne afspille film.

Det var jo dejligt nemt så vi kan hurtigt gå videre til at kigge på nogle af de lidt mere avancerede ting, der stilles til rådighed med MPMoviePlayerController.

Det første vi vil kigge på er at tilpasse afspilleren til vores behov. Som udgangspunkt bruger afspilleren iPhonens standardinstillinger, så det er op til brugeren om filmen skal afspilles i fullscreen tilstand, om han vil have mulighed for at spole i filmen og ændre på volumen.

Hvis vi selv vil kunne styre dette, for eksempel bestemme at filmen skal afspilles i fullscreen og uden mulighed for at spole, kan dette også klares med et par linjers kode.

MoviePlayerSettings

Og nu til noget mere avanceret. Afspilleren har mulighed for at underrette os når den skifter tilstand, som for eksempel når den har loadet filmen, afspilning er færdig eller skærmen liver resized. Herunder ses et eksempel på brugen af disse notifications hvor vi deallokerer afspilleren når den er færdig.

Først skal vi fortælle iPhonens notification center at vi gerne vil observere meddelelser af typen MPMoviePlayerPlaybackDidFinishNotification og når der kommer en af disse skal funktionen moviePlaybackFinished kaldes.

MoviePlayerAddObserver

Dernæst skal vi have skrevet funktionen moviePlaybackFinished som bare skal deallokerer afspilleren.

MoviePlayerFinishedSelector

Og til sidst skal vi for en god ordens skyld huske at fjerne observeren når applikationen er færdig.

MoviePlayerRemoveObserver

Observers kan også bruges til at initialisere overlays, GUI elementer
der ligger hen over filmen, når filmen er færdig med at loade eller
meget andet. Herunder ses et eksempel på en film med undertekster.

YouCanDoIt