Thieving Bastards

Why reinvent the wheel when you can have a flying start from the tech that others already have created.

SharePoint:
The amazing community behind PNP created an awesome template that we have decided to use for the intranet.

Power Automate:

Working with Power Automate connected to Dataverse is almost impossible without the great tools of XRMToolbox and Jonas Rapps FetchXML Builder!

This tool has saved the “lives” of som many Dataverse/Dynamcis Consultants.

We also have used a community connector for the OpenAI that returns pirate name from contacts that are entered.

PCF:
Even though we are not going to use our Model driven app for the end result, we imported a PCF controll from pcf.gallery just for the purpose of making it look better:)

The Pirates 365 Recruit Terminal – Glossy pixels & Thieving Bastards

Shiny, glossy user interfaces would earn this badge, it won’t break on small screens right?

So, at the request of the judges, we will shed some more light on our app, its UI and super glossy pixels.

The app is made in vue.js and contains three main components:

  • The ThreeD component, responsible for rendering our 3d parrot
  • The FormUI component, responsible for rendering text and input
  • The Camera component, responsible for gathering camera input, object detecting and debug interface

The ThreeD Component

In this component we use troisjs and three to setup a scene containing camera, lights, our parrot model, and positioning this to match the rest of the UI.

As the model we are using contains all the different animations inside on animation sequence, we have to split it up into different actions, like idle, scream, takeoff etc.

The FormUI Component

Adhering to the shadow first(tm) principle

In this component we use vue template logic in combination with CSS and stolen borrowed texture to create the interface for providing instructions and gather inputs. We also managed to sneak in the actual font borrowed from The Secret of Monkey Island, after battling with getting ttfs converted to woff🐶.

The Camera component

The camera component is not seen on the screen and does not directly contribute to the UI. However when for debugging we’ve build a little UI to show the detected objects.

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 🙂