En blogg om studier, programmering, ambitioner och mindset
Programmering: projekt, tankar och tips
Här bjuder jag på hjälp och tips för nybörjare inom programmering. Hur börjar man programmera? Kod och förklaringar. Egna sidoprojekt för programmering av appar, spel och hemsidor.
Jag har samlat resultat från en kurs inom computer graphics som jag läste på Stanford förra året. Det är helt klart en av mina favoritkurser från utbildningen i och med kombinationen av kreativitet och klurighet. Kika gärna här!
.. med mera! De senaste veckorna av exjobb har bjudit på många nya tekniker och kluringar. Projektet innehåller många delar som ska kopplas samman (se detta inlägg) och vissa av dem har känts lite abstrakta fram tills nyss. Exempelvis så visste vi att det fanns en Axis-kamera på plats på Kolmården. Däremot visste vi inte riktigt vilken funktionalitet den hade och hur vi skulle kunna komma åt videoströmmen. När något känns abstrakt är det ju ibland också svårt att formulera de frågor man behöver svar på.. Nu är vi glada över att ha ersatt flera frågetecken med spännande resultat 😀
Förra veckan var vi iväg på två besök som gjorde saker och ting klarare för oss. Vi spenderade en heldag på Kolmården och fick lära oss om den hårdvara som används för projektet. Eftersom målet är att få ut kameran mitt på savannen så jobbas det på ett elskåp som drivs på solceller. Skåpet är fyllt med batterier, spänningsmätare, nätverksswitch m.m. och var också något som kändes abstrakt förut (iallafall för mig som inte har så bra koll på ellära hehe). Lyckligtvis fick vi en bra genomgång på Kolmården och närmare förståelse av kopplingen mellan kameran, skåpet och den Raspberry Pi som vår kod ska in på.
Att koppla upp till kameran var minsann klurigt ändå. Dels så behövde vi koppla upp oss via Kolmårdens VPN och därefter skicka en request för en specifik url för att komma åt videoströmmen via RTSP (Real Time Streaming Protocol) som inte var helt lätt att hitta. Tydligen så spelade det roll vilken webbläsare vi satt i och vart vi skrev vår kod, så ibland kunde vi tro att vi fastnat fast vi var på rätt väg.. tur att vi är envisa 💪
Dagen efter var vi på besök hos Axis Communications och fick mer koll på deras kameror och en del övriga tips. Hem från Linköping fick vi även med oss en Raspberry med kameramodul som vi kunde lägga in vår detektionsmodell på och testa i realtid på kontoret. I tidigare projekt där vi använt en Raspberry så har någon annan haft det ansvaret, så det var kul att vara med i trixandet den här gången och lära sig mer!
Ytterligare nytt är att vi börjat med Dropbox for Python SDK för att skicka vidare resultat från vår Raspberry och då vi testar livestreamen från Kolmården på datorn. Sedan (puh!) för att kunna detektera djur i videoströmmen i realtid så dök jag idag in i threading-djungeln. Kortfattat så skickar vi nu iväg en viss frame för detektion, och ser om den föregående är klar. Innan denna ändring så laggade videon då vår modell behöver ca 300 millisekunder att hitta eventuella objekt, medan nu upplevs det som att videoströmmen detekteras live.
Fler inlägg om exjobbet:
Exjobb Ngulia – Vad gör vi
Exjobbsstart
Reka exjobb i djurparken
Mina drömmars exjobb. händer det??
Grundläggande funktionalitet för nya Campuskost börjar falla på plats! Fram tills igår har t ex bilderna som används i recepten varit testbilder som legat i samma mapp som projektet. Nu kan en användare ladda upp en bild från sin mobil eller dator och den lagras istället på Firebase. Jag tänkte att det kan vara intressant att berätta lite mer om hur just Firebase kan användas. 🔥🧐
Via Firebase kan man bland annat skapa en databas för sitt projekt och lagra filer online. Deras molntjänster är gratis för mindre applikationer så det är perfekt att använda för att lära sig. Det finns alltså begränsningar i gratisnivån, t ex en maxgräns på att läsa data från databasen max 50 tusen gånger/dag och att lagra max 1 GiB filer totalt – men det räcker ju långt!
I bilden nedan har jag monterat ihop en bild av hur jag använder ett några av molntjänsterna som finns på Firebase för dig som är nyfiken. Funktionalitet för att skapa ett konto och logga in sköts av Firebase Authentication och de hanterar även lösenord. Än så länge har vi att man skapar konto med sin email med det ska också gå att ordna så att man kan logga in via Facebook eller sitt Google-konto, vilket ju känns proffsigt. Database är en NoSQL databas och dess struktur är som ett JSON-objekt, dvs en trädstruktur. I databasen kan man lagra dokument med ett antal datatyper att välja mellan, exempelvis strings, numbers, booleans och arrays. Bilder och andra filer däremot lagras med fördel i Storage. När man öppnar Storage ser det ut lite som en vanlig mappstruktur på sin dator.
En utmaning som jag arbetat med är att koppla ihop dessa tjänster. T ex att det ska skapas en nytt dokument i databasen när när en ny användare skapat ett konto. I databasen ska nämligen all information lagras om vilka recept en användare har, vilka recept som sparats, användarnamn och så vidare. Sen gällande att ladda upp ett nytt recept så lagras bilden i Storage medan listan av ingredienser, titel och annat lagras i Database. Då gjorde jag så att ett receptdokument i databasen har ett attribut, img_url, vilket kan kopplas till bilden i Storage. Detta fick jag lösa genom att i koden först ladda upp bilden till Storage och hämta vilken url den fick, för att sedan skapa dokumentet till databasen.
Snart är en betaversion redo för testning. Den första versionen innehåller troligen buggar och kan sakna vissa en del detaljer. Så vi kommer vilja att ett gäng börjar använda appen/hemsidan och meddelar oss alla buggar, samt önskemål eller förslag inför vidare utveckling. Hör gärna av dig till mig eller Ronja om du är taggad på detta! 😀
Läs mer om utvecklingen av Campuskost här:
– Lära sig koda ’Progressive Web Applications’
– Veckans kluring: Bästa sätt att driftsätta app och hemsida?
– Campuskost
Växlingen mellan att vara medveten om varje timme till att tappa koll på veckodag gick snabbt alltså. Vi har redan 3 av 20 veckor av exjobbet bakom oss men jag skulle också säga att vi kommit rätt långt på den tiden. Det lutar åt att vi åker till Kenya i mitten av maj, så ambitionen att ha ett fungerande system tills dess hjälper nog mycket!
Jag har inte förklarat tidigare exakt vad det är vi gör så här kommer en liten översyn på hur planen ser ut just nu. Tänken är alltså att kamerafällor utplacerade på savannen i Kenya ska kunna detektera noshörningar, ett antal andra stora djur och männniskor (potentiella tjuvjägare..). Om kameran upptäcker något intressant ska information om detta samt bilder på detta till en server. I jämförelse med att bara lagra allt som filmas på ett minneskort som kollas igenom långt senare så hoppas man kunna agera snabbt om en kritisk situation verkar vara på gång med detta system. En del i det hela är att skapa ett neuralt nätverk för objektdetektion, som upptäcker ifall en bild innehåller objekt av en viss klass och isåfall vart i bilden. Utöver det behöver vi hantera resultatet från alla enskilda bilder på ett vettigt sätt, då det inte är relevant att skicka upp hundratals bilder från samma tillfälle för att djuret syntes framför kameran i en längre stund. Vi vill alltså kunna avgöra om det är samma individ som syntes i de föregående bilderna, vilket brukar kallas object tracking (se t ex denna video). En annan utmaning är att vår objektdetektion ska köras på Raspberry Pi, och då har vi plötsligt många begränsningar angående RAM-minne och hur stor vår detektionsmodell kan vara. När vi tränar vår modell har vi däremot tillgång till TensorFlow och gott om GPU via Google Colaboratory.
I figuren med alla ikoner nedan har jag försökt att visualisera vår process och hittills kan man säga att vi har rört alla delar förutom de längst till höger. Vi har lagt en hel del tid på att samla bilder och förbehandlat+annoterat dem, för att sedan träna en modell med dessa. Denna del i arbetet är en iterativ process och vi kommer fortsätta träna om vår modell då och då när vi har mer/bättre träningsbilder och med olika inställningar. Just nu genererar den mestadels vettiga resultat men det finns helt klart utrymme för förbättring, t ex kan en människa med svart- och vitmönstrad tröja ge utslag för att vara en zebra. Vi hade ett par kämpiga dagar med dels att behöva göra om delar av förbehandlingen av bilderna samt att konvertera vår detektionsmodell till ett format som kan köra på just Raspberry Pi och andra små enheter. Men vi kämpade på och det känns som att vi tar oss framåt igen. När vi kodar i Colab så kan vi testa att ladda upp filmsnuttar eller bilder men för att kunna testa objektdetektionen i realtid (som när vi är på Kolmården) så har vi lagt in modellen i en Andorid-app. Det gick rätt smidigt att ladda ner denna kod som är open source från TensorFlow och exportera appen med vår modell från Android Studios.
Dagens tips: testa lite machine learning i Colab här (klicka på play-ikonen till vänster i alla celler) 💻
Här intill är en skärminspelning från mobilappen, riktad mot datorn där en video från Kolmården spelas – och ovan en gammal bild på mig som klarade testet!
Fler inlägg om exjobbet:
Exjobbsstart
Reka exjobb i djurparken
Mina drömmars exjobb. händer det??
Ni vet hur man kan känna sig helt uppjagad efter en dag av många nya intryck. Lite så har jag kännt mig nu de senaste dagarna, men nördigt värre så har intrycken handlat om kod. Igår hade jag signat upp mig på GDG East Sweden, ett meetup med syftet att lära sig mer om utvecklingsverktyg från Google. Visste inte riktigt vad jag skulle vänta mig men gick ändå och var glad för det sen! Lärde mig lite om programmeringspråket Go och blev taggad på att fortsätta. Först och främst längtar jag dock till att fortsätta programmera nya Campuskost vilket jag planerar ha tid med nästa vecka (yay!) och då är det React.js som gäller. Under dagarna blir det mycket Python och inför pass som labbassistent uppdaterar jag mina Javakunskaper.. vilken kombo. Det här med att vara exhalterad över kodandet verkar vara på gott och ont – när jag försöker somna så har det snurrat runt siffror och kodrader i huvudet (efter att ha sysslat med annotering i samband med exjobbet I guess) och sen vaknar jag tidigare än vanligt. Ändå lyxigt att få ägna sig så fokuserat åt programmering under en period, så jag ska njuta.
Dagens tips! här kan du testa Go i en interaktiv tutorial. 💻
Yaay så var även mitt sista kursprojekt klart! Jag som egentligen hade tänkt att vara klar innan nyår, men det var svårt att överge själva kodandet för att skriva på rapporten så det tog sin lilla tid. Nu i efterhand känns det bra att jag inte övergav min idé om att skapa en kameleont-textur som projekt i kursen Procedurella Metoder För Bilder, med det var minsann någon dag i början som det kändes lite överväldigande. Det blev ju kul!
Kortfattat: Låt mig presentera kameleonten Leon. Han bor i en virtuell 3D-miljö skapad i Unity och kan kamouflera sig till sin omgivning. Egentligen har han ingen färg eller något speciellt mönster, utan illusionen av höjdskillnader skinnet skapar jag genom kod. Detsamma gäller cellmönstret som styrs av matematiska funtioner.
Utförligt: För att slippa upprepa mig.. se https://procedural-chameleon.com 🦎👀
Tidigare inlägg från kursens gång:
Från och till kodar jag mycket i React.js vilket jag tycker är superkul. Från början lärde jag mig det inför att vara assistent i kursen Kommunikation och användargränssnitt på LiU – och sedan valde jag att fortsätta använda det på sommarjobb och i egna projekt. Nu är jag inne på en ny runda som assistent i samma kurs och satte ihop detta exempel i samband med det. Det är helt enkelt en liten utbyggnad av ett starterkit som React erbjuder, där jag har lagt till enkel routing samt datahantering med Redux. Själv tänkte jag spana in dessa starter-kits och fortsätta justera på en eller flera setups som passar mig bäst.
Nu när vi utvecklar en ny version av Campuskost frågade vi oss själva om vi ville börja med hemsidan eller mobilappen. Då tänkte vi oss apputveckling på de sätt som vi kände till, att programmera en native app (t ex i Java mot Android eller Objective-C alternativt Swift för iOS) eller en cross-platform App med webbspråk som HTML5, CSS, och Javascript. Det finns trade-offs mellan alla dessa val (läs t ex här) men för vårt projekt tänkte v att cross-platform passar bäst, i och med att smidig utvecklig är i prioritet för oss snarare än t ex skillnader i prestanda. Speciellt när vi fick höra om progressive web apps (PWA) så lät valet ännu mer självklart. Kortfattat så ser en sådan applikation ut som en mobilapp och körs i webbläsaren, men som kan sparas på hemskärmen och fungera offline, osv. Detta gör att den inte behöver laddas ner från t ex Google Play Store utan kan nås direkt via en sökmotor, och så fort vi uppdaterar koden på servern så uppdateras användarnas installerade applikationer också! Det här konceptet används tydligen av företag som Pinterest, Uber, Starbucks och Twitter. Jag kände mig först rätt förvirrad angående hur man får en app att bli en PWA så det innebar några timmar av att sätta mig in i det. Det handlar ju ofta om att hitta bra hemsidor som förklarar det på ett enkelt sätt, så jag har sparat några av de som gav mest här nedan. När det lilla meddelandet ”Lägg till Campuskost på startskärmen” dök upp på mobilen, och att det gick att använda appen utan uppkoppling, så var det en bekräftelse på att det fungerade. Så kul! Nu finns det mycket att jobba vidare på – bland annat att få push-notiser att fungera och att kunna ladda upp bilder från mobilen.
Några länkar som hjälpte att förstå konceptet och få till de praktiska steg som behövdes:
Här kommer lite mer praktiska detailjer om hur detta gick till. Vi programmerar vår frontend med React.js och som många andra använder jag nästan alltid modulen create-react-app vilket genererar en robust setup. Det är bara att byta ut deras standardinnehåll och börja med det roliga. Man får med några filer som jag förut inte förstått vad de är till för, t ex serviceWorker.js. Nu förstår jag att den filen finns där för att enkelt kunna göra appen till en PWA, det är den som exempelvis tillåter offline-läge samt cachar data så att appen kan ladda snabbare nästa gång. I index.js är det bara att ändra serviceWorker.unregister() till serviceWorker.register(). En annan fil som skapas via create-react-app är manifest.json som behöver specificera sådant som ikon och startsida. De krav som en applikation behöver uppfyllas för att vara en PWA finns listade via den sista länken ovan. Ett bra hjälpmedel är även Lighthouse (tillägg för webbläsaren) där man kan se vilka krav som uppfylls genom att inspektera en sida. Tips tips testa testa!
Läs mer om utvecklingen av campuskost här:
Vi fortsätter med shaderprogrammering i plugget och nu senast var det OSL shaders med i 3ds Max som gällde. Jag och Samuel gav oss på att göra ett hallon. Det visade sig vara klurigt att få till mönstret när vi jobbade med shaders i just 3D på en sfär så vissa av de små runda utbuktningarna blev mycket mindre. Men från en helrund sfär, till det taggiga första försöket, till något som iallafall kan tolkas som ett hallon så blev vi nöjda!
I helgen hittade jag en hemsida som såg ut att ha en massa roliga tutorials som jag blev taggad på att beta mig igenom! De handlar om shaders och programmering i C# för Unity vilket är passande för min kurs om procedurella bilder samtidigt. Först ut blev Constructing a Fractal och sedan Texture Distortion. Tips tips, de är bra! Nedan är mina resultat med lite egna små twistar.
