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/.

Bombshell Updating recent posts

Her er de postene som vi har oppdatert og kommet med nye. Please review

Tieving Bastards Thieving shellbombs | Arctic Cloud Developer Challenge Submissions (acdc.blog)
Glossy pixels Glossy pixels – Bombshells rebranding | Arctic Cloud Developer Challenge Submissions (acdc.blog)
Sharing is caring Sharing is caring | Arctic Cloud Developer Challenge Submissions (acdc.blog)
Stairway To Heaven Straight up and away! | Arctic Cloud Developer Challenge Submissions (acdc.blog)
Chameleon Dashes and numbers | Arctic Cloud Developer Challenge Submissions (acdc.blog)

SOME blogging from the interwebs

The turtle’s IT department, named Pizza Time, is hard at work showcasing their awesome setup. To make it easy to follow what happens we’ve brought the blog posts back into the intranet.

Setup consists of crawling the ACDC blog, for Pizza Time posts only via Graph Connectors.

Graph Connector Crawl Setup

To show these back on the home site we use the PnP Modern Search web parts (https://microsoft-search.github.io/pnp-modern-search/) with Graph connector support. The display is using a custom handle bars template matching the ACDC blog schema.

The custom template uses HTML5 content tags for proper screen reading and navigation.

How it looks in Teams

Viva Connections and a nasty hack – because UX frigging matters!

When our turtles aren’t swinging around New York City or munching on their favorite past time food of pizza’s – they are checking in on the TMNT HQ Intranet to see what’s happening, or chatting with other crime fighting colleagues in Teams.

Using a Home site via Viva Connections is the best way to do this, but unfortunately there’s a bug where the home site shines thru the navigation menu and breaks the user experience.

Quickest way to solve this? Contact Pizza Times trusted member Mikael and have him install the swizz army knife off all time – https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor. With a simple accessibility script in place, things are back to normal.

Script to fix the order of business

(Thieving bastard badge is attributing to other 3rd party usage in the solution – API’s etc)

Stealing with pride

MaMNT have travelled around the internets and found clever, ready-for-use third party solutions to aid them in the development process. The list below shows all the third party solutions they have proudly stole from other hard-working individuals and companies to lighten their own load.

  • gRPC (Google): two-way communication between the mobile app and backend
  • Discord: collaboration and integration with GitHub: events are posted to the MaMNT Discord server
  • XrmToolbox: managing plugins
  • Level up for Dynamics 365: Debugging and configuration

Badges claimed:

Thieving shellbombs

Data er selve oljen. Ettersom Bombshells har samlet inn mer data har de innsett at veien til å forhindre kriminalitet og jobbe prevantivt mot mutantene er å gå på miljøproblematikken og heller fjerne årsaken til at mutantene dukker opp.

Bombshells har derfor valgt å fokusere på å samle inn data om miljøet, samt mulighet til å varsle hvis uheldige hendelser blir avdekket i våre sensorer. De har derfor implmentert en rekke integrasjoner. Vi ønsker å trekker frem følgende:

  1. Sende SMS med varsel:

2. Innhenting av værdata fra https://frost.met.no

3. Hente data om lavvann/ høyvann for en gitt lokasjon

http://api.sehavniva.no

En, to, mange 😉

Progressive web app – Submit your problem from any where

This is a form that you can report an issue from anywhere. Its responsive, works on both desktop and mobile screens.

It could be hosted any way. It is a progressive web app build with react, node.js

Citizens can report the issue by specifing title, description, take a photo of what the see and tag a location to help the turtles resolving the issue faster.

Desktop screen
Mobile screen
What is the issue with Sondre 🙂

We gonna contnuie build this to add administration functionalities and gather new batched. Update will come 🙂

The real nasty hacker

  1. When visiting www.elskling.no we used Fiddler to decrypt the HTTPS traffic to find the API they are using to get data. And turned it into our own custom connector.

2. We came above another API that gets both historical and today’s spot price in Norway. This could be filtered with “NO1” and so on, based on where in Norway you want to get a price from.

After getting some errors using the API, we needed an API key. After submitting an email to the email listed we received an API Key. After some more research, we could see that this is an API created by a “hacker” who abuses another public API that requires payment. We think that this is the ultimate candidate for “Thieving bastard”.

We are using this API to visualize today’s spot price and to create a local history in our database to create forecasts on prices with AI in the future.

3. The last API we are using is to get each day’s weather forecast, this is going to be combined with historical spot prices to forecast future prices on electricity. These prices are very much based on weather, and that’s why it is very relevant to include this in our library of apis.

Skumle lyder

Ved å bruke Microbit sound sensor, makecode-rammeverket Microsoft MakeCode for micro:bit (microbit.org) og Azure functions registerer vi lyder fra mutanter som romsterer rundt i fjæra.

Vi snakker med Azure functions gjennom Microbit-rammeverket via Wifi

Lydsensor koblet mot Microbit

Vi kobler sammen hovedkort og IoT-modulen til Microbit. I tillegg har vi koblet på lydsensoren for å registrere lyder innenfor et bestemt lydnivå.

Inne i makecode konfigurerer vi IoT-modulen til å snakke med Wifi. Dette gir oss mulighet til å snakke med skyen.

Videre viser vi også lokalt på tilkoblet led-skjerm på Microbitmodulen indikasjon på registrert lyd for å verifisere at vi tar i mot data lokalt.

Ved å sende lyddata fra sensoren til Azure function så registerer vi dataene i Dataverse.

Vil claimer Thieving Bastards og Nasty Hacker for denne