In our endeavor to create an immersive experience with the Sorting Hat, we have opted to use the Eleven labs to enrich the Hat’s voice, and personality. It can be grumpy at times, but you can trust it will make the correct placement into one of the houses.
The hat’s new and improved function also sends an SMS through our dearest sponsor platform Link Mobility, and notifies the student of the choice.
Our colleague’s dataset from Keggle with a lot of student data from previous years enriches our catalogue of students and makes our reports shine brighter.
During the student registration process, we leverage the Face API to automatically zoom in on the user’s face for precision and accuracy. For more details, you can refer to the GitHub repository: ACDC/registerimage at main · sindrejv/ACDC · GitHub.
Additionally, we’ve added a touch of fun to the experience by integrating the easter-egg-collection, which triggers random figures to pop up unexpectedly, keeping the process entertaining and unpredictable. Check out the GitHub repository here for more information: ACDC/eastereggpcf at registerimage · sindrejv/ACDC · GitHub.
In the world of wizardry and innovation, it’s not always about reinventing the wand; sometimes, it’s about knowing which enchanted tools to borrow. Enter the “Thieving Bastards” Badge, our tribute to leveraging third-party solutions—whether open-source or paid—that elevate our creation, the Dark Ledger, to legendary heights.
By embracing the ingenuity of others, we’ve seamlessly integrated powerful APIs and tools, proving that great magic often lies in collaboration. 🪄
Our Magical Arsenal of APIs
1. Google Maps API 🗺️✨
Purpose: Interactive map for tracking targets. We’ve styled Google Maps to match the dark and mysterious aura of the Dark Ledger, creating an immersive experience for users. With this:
See your current position and your target’s location.
Navigate the wizarding world (and beyond) with precision. Because even Death Eaters need directions sometimes. 🧭
2. HP-API 🧙♂️🔍
Purpose: Wizarding world data integration. Thanks to Beth and Kostas, the HP-API brings the wizarding world right into our ledger. Here’s what we can do:
Browse all characters or search by ID.
Filter by Hogwarts students, staff, or houses.
Explore a library of spells—from Expelliarmus to Avada Kedavra.
Bonus: No API key required—just pure, open-source magic! ✨ Check out their hp-api.onrender.com for more.
3. OneFlow API 🖋️⚡
Purpose: Document signing and collaboration. Gone are the days of parchment and quills! With OneFlow API, both Death Eaters and admins can:
Collaborate on contracts in real time.
Seamlessly sign documents from any device.
Modernize their dark dealings with cutting-edge digital agreements.
Because even Voldemort knows the importance of a signed contract. 📜
4. Azure Face API 🧠🖼️
Purpose: Target identity verification. When a target has been “handled,” proof is required. Sending a picture will prompt the Azure Face API, seamlessly integrated with Power Automate, to:
Analyze and verify a submitted photo.
Match the image against the target’s profile.
Confirm the deed with efficiency and accuracy.
It’s like a magical Polyjuice Potion for digital identity verification! 💀
The Power of Collaboration
By leveraging these tools, we’ve transformed the Dark Ledger into an unstoppable force of innovation.
Our solution would not be possible wihtout the hard work and dedication of our sponsors solutions, enabling magical abilities we would not be able to reproduce and transforming our solutions with wizardy love.
Link Mobility
Our first process is to send an Owl with the letter to invite prospective wizards and witches to their school. If the wizard is an area which doesn’t have good owl coverage, due to extreme weather conditions, muggle political infighting or just too far away, we send them a text with their invite
This is done via Link Mobility in Power Automate, utilising their API to send out an invite to our Static Web App Portal.
This is received by prospective sorcerors as a text message
Oneflow
Once the prospective candidate has filled out their details and qualified for the next stage, we need to get agreement from their parents or guardians to allow them to attend wizarding school, and ensure they agree to go to diagon alley to get the wizarding items to prepare the new wizard for school.
This is enabled by the Contract templates and capablities of Oneflow solution.
Firstly we set up a template, then using their API, create a contract based on that template. and sent to the parent of the prospective students.
The parents then get to sign in to Oneflow to enter their details as well as the students and confirm they agree to the terms, all seamless!
Resco
For Resco, we had an abundance of choice to use their PCF components. This control bring usability to the platform easily.
We embedded the multi attachment uploader into our applicaiton process, allowing uploading of many documents all at once in an easy and user friendly manner.
PCF Gallery
Finally, not content with just those 3, we have used a PCF control from the PCF Gallery. This control is a Tag Picker, which allows quick and easy association and disassociation of records via the many to many relationship.
We used this to allow a simple, user-friendly process to associate characteristics to our potential sorcerors.
New aspiring plumbers can now apply do get rank 1 certification through our certificatior app. If completed a badge will be generated on SharePoint in the users own folder!
Go with the flow clairification: Heres the code that runs the flow (second red line) to create a user folder in sharepoint with the corresponding badge.
First updating data verse from the cansvas app – then triggering the flow in context of the authenticated user The actual Power Automate flow
Retro badge statement: I mean, look at the apperal used…. nothing more retro than that!
Thieving, shameless… Using unsigned gamepad hax code component to fire up the (retro) controllers, happenly stolen from John Lius Github: GitHub – johnnliu/gamepad (Thanks John) In addition we have stole more than a few dozens of original super mario assest from the dark corners of the internet ( dont tell anyone)!
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:)
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.
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/.
