Slik laget vi en ekte progress bar

Inspirert av det spinnende ventehjulet på PC’en var idéen ganske enkel: Få logoen til å «spinne» når noen tar seg ei øl i baren på kontoret, utenfor arbeidstid må vite – kun i festlige lag.

Kreative Appex’ere har hatt det gøy – montert sensor i tappetårnet, loddet LED-dioder inn i Appex-stjerna, programmert trigger og «spinning» av diodene, koblet det hele til et webkamera som kjører ansiktsgjenkjenning og returnerer med en avslørende post på Slack! …og ikke nok med det, samtidig som du tapper kommer det en disco-kule ned fra taket og kontorene fylles med musikk!

Er ikke det en bedre opplevelse, så vet ikke vi! Se filmen eller scroll lenger ned for plenty med bilder, videosnutter og detaljer.

Hva er en Hackathon?

Ordet Hackathon er satt sammen av «hack» og «marathon» og er et arrangement der målet er å produsere programvare eller prøve ut teknologi og teknikker i løpet av noen hektiske kvelds- og nattetimer. Ikke bare for gøy, men også for å kunne dra nytte av det man lærer i jobb-sammenheng. Seansen involverer både utviklere, designere, produkteiere og drift.

I denne hackathon’en (som ble til to) lærte vi utrolig mye, både rundt styring av enheter og ansiktsgjenkjenning, som vi helt sikkert får bruk for i kundeprosjekter senere.

Med primus motor Kjetil og våre elektronikkeksperter Hein André og Andreas i spissen, var vi en god gjeng som gikk noenlunde systematisk til verks med lodding, kabling, programmering, liming, saging og boring – og som seg hør og bør også litt fussball, pizza, snacks og drikke :)

1. Planleggingen

Vi er så heldige å ha vår egen bar på kontoret. Den har vi kalt The Appex Progress Bar og baren benyttes helst etter arbeidstid. Enhver bar med respekt for seg selv har sin egen logo, og vår henger på veggen i bakkant. Vi tenkte det hadde vært kult om vi i tillegg kunne fått den til å «spinne» – slik som en ekte progress-bar! :)

Vi ble fort enige om hvordan dette kunne løses, og begynte prosessen med å handle inn utstyr. En periode kom det jevnlig inn pakker både fra USA, Kina, Bulgaria og flere lokale butikker. En stor takk til våre venner i Assist som hjalp til med å få laget stjerne-kassen.

2. Montering av sensoren

Planen vår var å bruke en proximitysensor til å oppdage når noen tok hånden under tappetårnet. Proximitysensoren gjør dette ved å gi signaler som indikerer hvor langt det er til nærmeste gjenstand. En Raspberry Pi spør så sensoren hvert sekund om det er noe i nærheten.

Vi måtte plassere proximitysensoren inne i selve tappetårnet, og alle kabler måtte selvsagt skjules godt.

Kjøleskap og tappetårn ble skrudd fra hverandre, og etter å ha ødelagt fem bor klarte vi omsider å få hull. Neste utfordring var å få plassert inn sensoren, og med pølsefingrene våre var det enklere sagt enn gjort. Litt MacGyver-løsninger og noen banneord senere steppet heldigvis Cathrine opp og fikk sensoren på plass!

3. Lodding og elektronikk

Appex-stjernekassen som LED-lysene skulle monteres i er spesiallaget i Bulgaria, og for at lysene skulle lyse opp i riktig posisjon laget vi i tillegg en nøyaktig tilskåret gipsplate, med hull til hver LED.

12 LED-lys ble deretter møysommelig loddet fast til en LED-driver, før de ble limt fast i gipsplaten og koblet til Raspberry Pi’en.

4. Programmering av LED-lys

På grunn av avstanden mellom tappetårnet og lysene måtte vi bruke to Raspberry Pi, men den ene kaller bare opp den andre via HTTP når proximitysensoren oppdager bevegelse. Lys Pi’en kjører en liten HTTP-server, som via et lite python script sender signaler for å slå av og på LED-lysene vekselvis… i mønster.

Beta-versjonen av lysalgoritmen laget vi med JavaScript/CSS, før vi skrev den om til Python og overførte til Raspberry Pi’en.

5. Fysisk installering

Så var det dags for montering. Strøm og øvrige kabler ble skjult inne i veggen i Appex Amfi, og Jon Arnold måtte for anledningen gjenoppta «planking» for å holde fast utstyret mens Andreas koblet alt sammen!

6. Ansiktsgjenkjenning med Azure og posting på Slack

Vi ville også finne ut hvem som tapper øl i baren. Nyttig? Neppe, men kjekt å prøve ny teknologi som det fort kan vise seg å bli behov for i andre prosjekter.

For å få til dette satte vi opp en ASP.Net-applikasjon som kjører en forespørsel til et webkamera montert i baren. Bildet sendes til Azure Face API, som kan kjenne igjen ansikter. For at det skal fungere trenger den imidlertid litt «opplæring» – og til det valgte vi å bruke chatteprogrammet Slack.

Via et API sendes det en chattemelding hver gang et bilde blir tatt. Dersom vedkommende ikke blir gjenkjent kan Appex’erne dermed hjelpe programmet til å bli klokere ved å fortelle hvem som er på bildet. Machine-learning i praksis.

Programmet vårt gir uansett mange hint basert på bildet og treffer bra på både humør, alder, kjønn, og mye annet som progressbarbot’en øser om seg i mer eller mindre morsomme meldinger på kanalen :)

7. Disco og musikk!

Og ikke nok med det. Vi har også koblet disco-kula vår til opplegget slik at det virkelig blir svung i baren når noen tar seg ei øl. Kula kommer ned fra taket og lyses opp av spot’er samtidig som det spilles musikk på anlegget :)

Nice!

Spenningen var til å ta og føle på når alt av utstyr og programvare var på plass og første test skulle kjøres en sen nattetime!

Og resultatet? Vel, se selv – smashing og kult er i alle fall vår dom :-) Vi hører gjerne hva du synes i kommentarfeltet nedenfor.