Did someone yarr-cuse us of having a static interface? Well, not anymore. We Power Usered UP to add a little fire and electricity to the user experience of battling other ships at sea using the ultimate Power User tool: PowerPoint. Outcome varies depending on our strength and resources vs. the defenses of the booty ship we’re going after. But in the end we either lose:
Or preferably win (which we’ll leave as a goodie to be seen at the judges show and tell today)
Claiming Glossy Pictures:
We asked AI to create a pirate color theme:
Here is a color palette that would work well for a pirate-themed app:
These colors work well together to create a cohesive and visually appealing palette that captures the essence of the pirate theme.
Based on the colors we drew a logo free hand using Microsoft Whiteboard and added the colors from the color profile.
The logo should appear everywhere to create cohesive branding.
We updated the brand guide based in feedback from our pirates and this is what the new logo looks like:
All good brands with some selfrespect has special fonts that is designed to give the user crafted associations. Never underestimate the effect of a good font.
We use two fonts in our designs.
Headers and body text we use Lato Hairline in Canvas Apps and Lato Thin wherever this font is too thin.
Lato on Google Fonts:
https://fonts.google.com/specimen/Lato
For decorative contrast we use the font “Dancing Script”.
Dancing Scripts on Google Fonts:
https://fonts.google.com/specimen/Dancing+Script
OF course we also checked that having that dark grey background with white text is accessible, and it is.
We used these graphics in our app that capture new pirates into our system:
Tap the chest to reveal your new pirate self.
Our main solution is an app for the Pirates to use on their phone when they are out on their raids. So, it might not be a shock that we will claim the bagde for an App. But, of course it needs to be shiny and glossy as well. We are here to create the besgt user experience for the Pirate as we ca, and even if pirates come out as rough and hard-core, they still want their tools to be as easy and up-to-date as they can đ
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
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
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.
When we need new pirates on our crew we have an app where we can take their picture, and the app send the picture to a server that uses AI to piratefy your face.
The app is a Canvas App with a camera control on the first screen
When user click the camera control they navigate to the next screen where they will see their picture.
They can go back and take a new picture if they are not happy, or move on to “Piratefy me”.
If user click the “Pratefy me” button a power automate flow is triggered. We pass the image base64 value as a value and store the reply value in a variable.
The flow is “Me as a Pirate”
The trigger is a power apps trigger.
First we initiate reusable variables
We grab the image value from the Power Automate
Passing the image over to the CLIP service powered by Stable Diffusion at the Frogner/Oslo datacenter we annotate images to mostly correct the gender or non-gender of the person in the photo. This is our responsible way to ensure the pirate representation of the person is not turning the most beautiful guy and girl into something they definitely don’t identify with.
We parse the response we get
Next we pass in the captured photo, and overlay it with some serious pirate’y prompting to ensure our new crew mates meats the bar (and also the real bar when port-side).
We need to modify the image string to make it the right format for the Ai to handle.
We trigger a child flow (documented further down)
We gather the reponse and send it back to the Power App.
The flow triggered as a Child flow is called “get Crew Member Data – PirateGDP”
The core API in out solution is PirateGPT, a large language model fully capable assigning awesome pirate names and corresponding ships, with the identifiable traits of the pirate. Which we as a responsible HR ship keep fully secure and up to date as needed. When you have seven John’s on one ship, it’s quite important to distinguish them by traits such as red beard or cock farmer.
We PARSE the results we get for get the right format
Respond with the values to the “parent” flow
The Power App
Back in the Canvas App the user will see the newly created name and their picture Piratified:
It also navigate to the next screen where they will see the pirate name they are given and their picture Piratified.
If this isnt glossy and extreme business value, I don’t know what is?
Imagine this being a manager taking pictures of new employees. We all know that Gen Z are used to looking at themselves with prettifying filters. This way the old middle manager can take pictures of their new employees and let Open AI add the familiar filters so that when the Gen Z employee see their own new profile picture they will actually recognize themselves.
Badges
Glossy Pixels – because pirates are beautiful.
Go with the Flow – because it’s all flowing left and right
The Existential Risk – Who knew LLM could be used to generate schematized JSON data structures, and who knew all those crazy internet pics would be the basis for pirate faces of 2023?
ACDC Craftman – All API’s are tested and documented in a shared Postman collection, all is ran over https (not from the beginning) to avoid photo snooping, and API keys are used as the extra layer. No one wants to be the next TMZ victim!
Perhaps you saw our resent post about colors and broken screens? If not the joke was the pixel pusher was given the broken screen. But as true entrepreneurs of the Seven Seas, we put our ripped flag feature front for all to behold. Introducing Plundrr, with pre cracked screen as part of the brand guide.
If you like cool looking and also super confusing things, this is the outline of how we create the cracked screen ripples using vectors. The scull and swords icon are also hand crafted using bezier curves: The mathematical way of describing how lines in vector graphic should bend.
This is every pirate’s best friend and a must have!! Loaded with awesome features this killer app should be installed on the mobile phone of all pirates in your organization.
Targets
Get a quick overview of your targets. Once a ship has been become a target in Dynamics 365, you will be able to see it in your mission overview. This is perfect when you have a long day of plundering i front of you and need to know which ones to do next.
Rumglasses
Have you ever been too deep in the rum bottle and close to do something stupid with what you believed to be a mermaid out on the seven seas? Or maybe you actually did and are now in for a hard time facing your mates with humiliation and regret?
Not anymore! Rumglasses let you take a picture of your believe-to-be mermaid and tells you if you are right or not. By training an AI to recognize and distinguish manatees from mermaids you can now relax.
My Ship
A map showing your location when out on the seven seas. You will se both your ship on the map and all other ships in the area. This is how you know you are close to your target when out on a plunder. The best part is that military or law enforcement ships will occur on the map as well so you can wait until the right moment before attacking the target.
Bottle Mail
Communicate with your mates by using bottle mail – a feature for sending email when you are on the fly. It suggests recipients in you address book or you can write to a pirate outside your organization. This way, you don’t have to switch to another app (email client) to send messages to your crew.
Pollybot
You are not a real pirate unless you have a parrot. Unfortunately (or luckily) there are laws about how to treat your animals today that did not exist in the old glory days. It might not be appropriate to bring it with you on a raid :/ This is where Pollybot comes to the rescue! Your own digital parrot who you can talk to, ask questions and keep you with company. As a real parrot, it sometimes answer your questions, but most of the time you will get an insult or just nonsense in return. But that doesn’t matter! Where a real parrot will fly away to save itself, Pollybot will always stay close.
Mayday, Mayday
When Jack Sparrow was stranded on a desert island, he managed to escape by tying his back hair together and catch a couple of sea turtles who gave him a ride back home. As fun and comfortably that sounds, not all pirates are equipped with back hair that long. However, most of us got their phone in their pockets at all times!
Whether you are stranded at a desert island, your ship is about to sink or you are stuck in a safe full of treasure, this feature will save you.
When using the mayday function your coordinates are then sent to a email address monitored by you crew so they can come and pick you up. If your mates prioritize your request is however another matter.
Because of the fancy design, the use of AI and the huge amount of useful features in this app, we hereby claim the Glossy pixels, Existential Risk and Feature Bombing badges. We also claim the Power user Love because the app is created in Power Platform đ #ProCodeNoCodeUnite
Recruitment is an important, and integrated part of Pirates 365, to acquire the best talent for our crew. To help us with this we have developed The pirate recruitment terminal (PRT). This solution provides us with a visually appealing and an engaging experience to gather new recruits.
PRT User flow
Since pirate recruits normally arenât that familiar with modern interfaces, we have chosen a living parrot to help and guide the user and provide a smooth user experience.
When a pirate is detected, our engaging parrot approaches the pirate and presents the sign-up option. We collect personal details and complete the process by taking a picture. The collected data is then sent into the platform for future processing.
The Pirate recruitment terminal technology stack
PRT The app is running on the vue.js progressive javaScript framework with Pinia🍍 for state management. For the 3d animated parrot🦜 we are using three.js and TroisJS with WebGL rendering. For AI vision👁️ and object detection🤠 we are running tensorflow under the hood. If available the model is running on GPU, if not we fall back to CPU.
Images, 3d model, fonts is stolen captured on the internetsea.
Everything is running in the local browser🤓
Eyyrr mates!!!
Captain Black Bart, is planning a big raid, Oslo is the target and according to ChatGPT the loot potential is #awsome.
Invitation is sent to all chosen crewmates using top of the art “Power Automate flows”.
Crewmates are free to Accept or Decline the raid invitation.
When it’s time for the raid, we requires all crew members who have accepted the raid to check in, using their RFID card or phone.
If the crewmate have accepted more than one raid, he/she can choose to check in using our Raid Planning App
With the help of Midjourney AI, https://docs.midjourney.com/, we generated the app design component by asking the AI to provide us witht the latest & greates piracy themes.
The RFID data for all potential crewmates is stored in Azure AD using the “Postal Code” field, pretty “Nasty Hack” according to our “bosun”.
This data is imported to Dataverse “AAD User” virtual table for our app.
Let’s raid mates.Â
During the last 24 hours, we have all learned to love the magic of Power Pages.
But with some custom CSS and a webpage instead of a modal window, we can change the dour and uninspiring look from the standard out of the box âI work in corporate accountingâ-look.Â
Change from a modal window:
To a nice, classical scorecard for all our important pirate skills, just like the ones we got from school back in the 80s
The dread pirate Gaute is good at sailing but sucks at fighting.
As for displaying the form values as columns, if it is stupid but it worksâŚ
