EN VISUELL ORGASME

Vi har vært på bloggkurs og har lært at det er viktig med clickbait-titler for å få clicks. Men jokes aside, vi har forsøkt å dra den visuelle identiteten til PowerAppen langt ut over normalen.

Vi har latt oss inspirere av Munch-museets visuelle identitet. Blant annet bruk av store kontraster, fete fonter og høy grad av asymetri.

En viktig del av arbeidet var å finne frem til former og symboler som kunne skape en futuristiskfølelse samtidig som vi tok vare på noe av det tradisjonelle som du finner i Munchs kunstnerskap. Det startet med en wireframing og idemyldring i Figma den første dagen, hvor vi la grunnlaget for designelementene som vi har bruk i appen. Se bildet under:

Vi innså raskt at PowerApps ikke har avrundede hjørner, men vi ville bevare samme felling, så vi lekte litt med vektorer for å skape samme uttrykket, bare motsatt vei:

Vi ønsket en high-end feeling i appen og for å oppnå det ville vi gjerne ha litt flere alternativer å vlege blant enn de standard fontene i PowerApps. Vi stjal derfor komponenten PowerFont fra pcf.gallery som lot oss laste inn alle fontene fra Google Fonts direkte i PowerApps: https://pcf.gallery/powerfont/

Etter å ha diskutert en del frem og tilbake landet vi på Fira Sans Condensed, da denne har et uttrykk som var likt nok, men samtidig hadde ok kontrast til Munch sin custom-brand font.

Etter å ha brukt mye tid på å lage svg.-filen til topp-logoen i appen bestemte vi oss for å stjele resten av ikonene. Disse lånte vi fra: https://www.svgrepo.com/

Sammen med ulike figurer og former tilsynelatende plassert «tilfeldig» på lerretet, oppnådde vi det abstrakte og figurative uttrykket i appen som vi var ute etter (merk: knappene får den sterke Munch-rødfargen når man fører pilen over). Vi har også gjenbrukt mange av de samme elementene i vårt Power BI-dashbord.

Vi ville også ha chatboten vår som en del av appen. For å embedde den stjal vi på nytt fra pcf-gallery. Denne gangen stjal vi komponenten PCF ChatBot for å få åpnet chatten direkte i appen: https://pcf.gallery/pcf-chatbot/.

Cant fight crime without darkmode and custom elements

Ever used light mode? If so, we do not envy you! We did a complete overhaul of the Power App implementing a new color base and custom components. The color scheme is based on dark mode, as to protect our crime fighting turtles and rat’s fragile eyes. As custom components go, we have a beautiful logo on our page and a majestic landing page cover photo!

color scheme, with turtle green as accent
color scheme
custom cover photo
logo

Power Automate

We are using our powerful end-user skills to create a logic trigger when the turtle (we simulate with our smartphone) is turned upside down. This is done in Power Platform and thus we are claiming Power User Love.

The video we upload yesterday show what happens when the turtle (smartphone) is turned upside downshow. Spoiler alert: Camera light turns ON.

Custom Connector plugged and played

Using a cloud flow we had the need of a custom connector to receive the data needed for our solution. We created a custom connector to get provider deals from elskling.no and populate dataverse with these data.

Leonardo also got the opportunity to be featured in this custom connector, we believe he shares personality with this connector.

This is the flow where we use this custom connector.

Crawling for those new deals

Since we are using a specific service to get deals, it could occur that our provider doesn’t give us all deals out there. That’s why we created a “Web Search API” in Azure. This allows us to create a flow that runs every day on bing for new deals and then notify us if our provider’s deal isn’t the best deal.

We started off by creating the Web Search API

We then created a scheduled flow to run every day, to get those deals we don’t catch in our providers API. In our query, we go for the keyword “Strømavtaler”.

Parsing the JSON allows us to structure the data and get it out. Now we can add each deal we find into a table inside Dataverse to create tasks to follow up on these.

We think this would be an excellent crawler because we are doing a search to bing each day for electricity deals. Then we are creating a record in dataverse for each deal we find, and follow up on these.

We also extended this flow, with another flow doing a search based on our library of electricity deals to see what the search engines give us if we run a search for each of our stored deals daily.

So based on our contract names, we are doing a search on bing each day, to see for possible better deals. We search based on the data we are capturing on www.elskling.no and then use this data to search on bing daily for updates on these contracts.

Designing minimalist apps

Sometimes you want to go all out with fancy effects and complex UI, other times you have to pull back and remove everything non-essential. We had to do the latter.

Our app is supposed to be used in emergencies and mostly older people. So designed our app to have large fonts and huge buttons so that the user always know what they have to press and what information is important.

It may seem simple, but creating custom layouts with .NET MAUI is hard. It’s still in preview and since it is cross platform it has to work on multiple devices. Pixels should be glossy, but also functional.

Here are some screens from our app running natively on Windows. It also runs on iOS, Android and macOS.

Power User Love – Love User Power

With great tools comes great responsibility to be productive. With the myriad of application surfaces today each individual has the option to use any app on any device to get the job done.

By providing functionality via native and PowerApps it’s super simple to provide entry points to needed functionality from most productivity tools in M365.

If you’re in a MetaOS Hub like SharePoint or Teams (more to come), Viva Connections with its Home Site functionality is fully integrated with a global entry point to the most useful apps. Develop ones, configure once, use all the time! Viva baby!

Throw in some Viva Learning, easily extendible with custom learning sources and you have learning at your fingertips as well.

Viva Learning – with custom content

For those who fancy typing and chatting – which might be harder for turtle flippers, we provide pizza ordering via a virtual agent chat bot (ok, this is mostly used my TMNT IT to order overtime pizza).

Chat up a pizza pie!

Ordering at your finger tips

Pizza Time app in Teams
Pizza Time app in Teams via Viva Connections
Pizza Time app via search navigation in office.com
Pizza Time app via public web search – linked from work
Pizza Time public web site ordering – inclusive for the old peeps

In the native pizza ordering app we have developed a custom component to calculate estimated delivery time of the pizza.

Bombshells saves the day, saves the fjord!

Virkeligheten er ikke helt slik vi ønsker at den skal være. Oslofjorden blir hver dag utsatt for ulike former for forurensning. I konteksten til ACDC illustrerer vi problematikken med at Ninja Turtles er naturens store beskyttere og skal finne måter å både å reagere på hendelser, og også å kartlegge tilstanden til fjorden ved å samle inn data over tid for at disse skal brukes i analyse. I fantasiverden oppstår det muterte skapninger som våre høye beskyttere skal verne oss for. I virkeligheten trenger vi systemer som varsler og kartlegger.

Oslofjorden

Oslofjorden er en fjord som går fra Skagerrak i omtrent rett nordlig retning inn til Oslo. Ytre Oslofjord går fra Færder fyr i sør til Hurumlandet, der fjorden deler seg i Drammensfjorden og Indre Oslofjord.

Ytre del av fjorden er 10–20 kilometer bred, og sør for Fulehuk fyr utenfor Nøtterøy er den nærmest et havstykke. I Indre Oslofjord, innenfor det rundt én kilometer brede sundet ved Drøbak, er fjorden bare tre-fem kilometer bred.

Visjon

Visjonen er både av miljøpolitisk art, men dekker også et forretningsbehov. For hvert tiltak i fjorden må aktører av ulike slag stille med sin ekspertise. Målene her kan både politisk og forretningsmessig sammenfattes slik.

  • Overvåke ved hjelp av sensorer Oslofjorden og kunne oppdage, lære og varsle om hendelser når de skjer samt predikere hva hendelser medfører.
  • Simulere og predikere hvordan tiltak påvirker Oslofjorden.

Gevinst

Gevinsten er primært av miljøpolitisk art, men har sekundære gevinster for både bedrifter som tilbyr utstyr og tjenester som må brukes for å nå målet.

  • En ren Oslofjord påvirker 1.6 millioner mennesker positivt
  • En ren Oslofjord sikrer artsmangfold for fremtidige generasjoner

Finansiering

Finansiering av tiltak for å drive miljøvern av det offentlige styres over statsbudsjettet. Samtidig finansierer staten innovasjons-tiltak som dette gjennom ulike former for tjenester gjennom Innovasjon Norge. I tillegg vil innovasjon og utvikling i det private markedet ha behov for private investorer.

Hackaton POC

Løsningen som Bombshells har skissert i løpet av ACDC har involvert bruk av sensorteknologi og innsamling av data fra disse. Dataene behandles og formes gjennom skytjenester og sendes videre til lagring før den brukes til varsling og analyse.

I modellen ovenfor kan man se sensoren som sender data til skyen og hvordan den går videre fra lagring til analyse og varsling.

Systemarkitektur og dataflyt

Diagrammet nedenfor generaliserer hvordan data fra ulike sensorer kontinuerlig sender data opp i skyen hvor den omformes til strukturerte data som kan lagres. I tillegg lagres de i en event hub som strømmer dataene rått videre til sanntid overvåkning.

De strukturerte dataene lagres i denne POC´en i Dataverse. I dette leddet brukes triggere til å plukke opp endringer i datatabellene og å plukke opp innholdet fra disse. Basert på innholdet brukes hele eller deler av endringen til å sende ut meldinger om hendelsen både til PowerApp, Teams og via SMS med støtte for eldre teknologi. Det lagrede innholdet oppdateres jevnlig inn i analysegrunnlaget for en rapport i PowerBI.

Sensor-teknologi

Lyd-sensor er en av typene sensorer som sender data opp i skyen. Spesifikt for lyd-sensoren sendes lydnivå som en del av datasettet. Sammen med dette sendes lys, temperatur, luftkvalitet, vannkvalitet, UV-stråling, tid og lokasjon til Azure. Recent data suggests a mega-mutant-monster has appeared!!! beskriver i mer detalj hvordan dette fungerer.

Registrerte hendelser

Hendelsene registereres fortløpende og formes om til strukturerte data i JSON-format som videresendes til en Dataverse-tabell.

{"eventType":"enviromental","latitude":"59.977874","longitude":"10.636827","soundlevel":"63","pirdirection":"e","soilhumidity":"37","temperature":"26","timestamp":"143449","sonardistance":"286","uvlevels":"73","dustlevels":"82","waterlevel":"1"}

Manuell rapportering

Det er også tatt høyde for manuell registrering og ikke bare automasjon, for å samle inn data. Ved å benytte en app kan brukere også rapportere hendelser manuelt inn i data til samme datalag som mottar data fra sensorene, og med de dataene som telefonen eller tableten kan tilby. Lokasjon er en naturlig ting å hente fra enheten som kjører appen, slik som beskrevet her – Natively saving the environment! (and thusly the world)

Integrasjon og utvikling

Dataene som sendes inn både manuelt og automatisk går gjennom et integrasjonslag som inkluderer event hub, et api gjennom Azure functions og Dataverse API. Utvikling en av dette kjøres gjennom pipelines i Devops (Shell is power!), og sørger for best practice deployment hvor infrastruktur og kode konfigureres, bygges og valideres før endringer rulles ut.

Dataverse

Hver hendelse registreres som en rad i tabellen. En PAF plukker opp hendelsen og trigger en varsling til PowerApps, Teams og SMS som beskrevet i tidligere blogpost – Flowbombing Dataverse

Datasett and PowerBI-rapport

For å bygge meningsfulle rapporter filterer vi ut data som ikke er relevante og endrer datatyper slik at de fremstilles riktig.

Kolonnene i datasettet bygger opp tabellen og brukes som filtreringsverdier inn mot de ulike diagrammene. Spesielt relevant i denne rapporten er fargekartet som viser temperaturene og lokasjon for hvor enkelthendelsene har skjedd. I Dashes and numbers demonstreres det nærmere hvordan dataene kan brukes for å fremheve viktig informasjon, også i ulike flater som krever responsive løsninger.

Bruk av AI

Som del av risikovurdering er arbeidet med å kartlegge hvilke elementer som er utsatt for risiko. Bombshells har trent opp en AI til å gjenkjenne bilder av tre ulike arter skillpadder, som beskrevet i denne posten – Bombshells face an eksistensial risk. Disse dataene er tenkt brukt til å bygge opp en base som kartlegger tilstedeværelsen av en art innenfor et geografisk område. Når man kombinerer dette med data om sårbarhet for typer forurensing vil man kunne beregne risikoen for en art ved en hendelse og velge tiltak i henhold med alvorlighetsgraden.

Varsling og reaksjon

Når en hendelse er registrert og kvalifiserer som en hendelse som må følges opp, skal systemet automatisk sende et varsel slik at tiltak kan iverksettes. Power User Love to the people! beskriver hvordan Power Automate henter ut informasjon om hendelsen som er registrert og basert på innholdet sender ut varsel gjennom PowerApps, Teams og SMS.

Viktigheten av å få riktig informasjon frem til riktig mottaker, og ikke minst at den presenteres på en brukervennlig og tilpasset måte er svært viktig. Satt i en kontekst hvor man må rykke ut for å håndtere et miljøproblem spiller tid en viktig rolle for å forhindre at ikke problemet blir større enn nødvendig. Viktigheten av at man fremhever nøkkelinformasjon riktig vil ha en direkte innvirkning på evnen til å begrense skaden.

Oppsummering

Et system som detekterer og sender ut varsel ved en hendelse er ikke noe revolusjonerende i seg selv. At en sensor trigger på en hendelse og sender en melding er ikke mer komplisert enn da vår venn Donatello monterte en snor fra godstolen foran TV og ut til kjøkkenet og monterte en bjelle i den andre enden slik at han kunne signalisere at han ville ha pizza uten å forlate rommet.

Det som derimot skiller systemet fra analogien er mengden data som samles inn, hvordan den rutes til riktig mottakere og hvordan ulik informasjon vises tilpasset mottaker og teknologien den formidles gjennom. Excellent user experience og Killer App løses ikke med glossy pixel perfect grensesnitt, men derimot gjennom hva du kan gjøre med informasjonen som vises i grensesnittet.

Oppgaven som brukeren av appen skal løse er å identifisere et rapportert problem, og handle i forhold til den informasjonen som formidles. Når et alvorlig utslipp i vann rapporteres er det relevant å se vannkvalitet, temperatur, fysisk lokasjon osv for å raskt gjøre en vurdering av risiko og alvorlighetsgrad. Når vi varsler om en hendelse og brukeren kan se PowerBI-visningen for mobil fremfor et helt dashbord som vil være naturlig på en operasjonssentral, hever vi kvaliteten og brukeropplevelsen. Most Extreme Business Value ligger først og fremst i dataene som samles inn, men selve gevinsten av dataene blir først tilgjengelig når visning i riktig kontekst er på plass.

Rock Solid Geeknes er i denne POC´en summen av alle komponentene som hver for seg har sin rolle, men som ikke gir gevinst før de kombineres i denne formen. Vi har koblet sammen ulike sensorer som samlet gir oss strukturerte data på et bredt område. Disse dataene spiller viktige roller hver for seg, men svært ofte spiller de en enda større rolle sett i sammenheng. Ved å kommunisere med skytjenester kan vi dekke et stort geografisk område og gi et situasjonskart som monitorerer og kartlegger data kostnadseffektivt og raskt.

Konklusjonen så langt er at det er mange faktorer som kan utgjøre trusler for miljøet og artene i Oslofjorden. Kunnskapen vi tilegner oss gjennom kontinuerlig overvåkning av hendelser og kartlegging av artsmangfoldet i gir oss verdifull informasjon som er svært viktig både for å reagere og å forutsi konsekvenser en fremtidig hendelse vil medføre.

Vi vet at en alvorlig hendelse med vannforurensing i Oslofjorden vil ha store konsekvenser for både miljø og arter. Paradoksalt nok vet vi også at et slikt utslipp ikke vil ha noen som helst konsekvenser for noen av skilpadde-artene. Det er nemlig ikke observert noen skilpadder i Oslofjorden. Og med det så claimer vi “Dooh”-badgen 😉

Skill Bombshells 2022