Tag Archives: Glossy Pixels

Five badges in one poost?

Posted on by

Toad, a character widely recognized as Mario’s loyal companion, assumes a different role in our scenario. Instead of assisting Mario, Toad will be guiding Princess Peach through the perilous landscapes of the Mushroom Kingdom. Known for his extensive knowledge, Toad has documented everything in his personal wiki, which serves as a comprehensive guide to their world. In our application, Toad will utilize this knowledge to answer Princess Peach’s queries via a chat interface. This interactive feature will allow Princess Peach to navigate her journey with greater confidence and understanding.

Toad, an AI bot powered by Copilot Studio, learns from the web and adapts to new data. It uses advanced machine learning algorithms to understand and interpret information. This continuous learning makes Toad a versatile tool for tasks like data analysis, content creation, and problem-solving. It represents the next generation of AI, ready to assist with its ever-growing knowledge. (New text added here)

Live demo of Toad:

Who can resist the thrill of a captivating game? Our app takes you on an exhilarating journey, brimming with elements of gamification. It features a sophisticated scoring system for our beloved Princess Peach, tracking her progress throughout the game.

Live demo of score:

But that’s not all! Princess Peach has access to a dynamic Power BI dashboard, allowing her to review her progress and identify her strengths and areas for improvement. This interactive tool serves as a constant motivator, pushing her to strive for excellence

Last night, we celebrated a significant achievement as we won the award for ‘Excellent User Experience’ for Thursday. This accolade is a testament to the hard work of our experienced UX designer, who has crafted a fabulous Figma prototype to assist our developers. This victory leads us to the final chapter of our journey.

Last but not least, we invite you to step into the world of our application. Here, a vibrant pink palette, reminiscent of Peach’s dress, meets a shiny and glossy user interface, crowned with a touch of yellow, much like Peach’s crown. Our design choices, carefully considered for ease of navigation, make interacting with our app not just user-friendly, but a truly delightful experience. (New text added here)

Color palette from Figma

Live demo of shiny and glossy design (the design is not 100% complete in this video):

This post was edited 03.02 12:40

New text is marked with: (New text added here)

  • Added live demo of bot and some text
  • Added live demo of gamification
  • Added live demo of glossy design, picture and some text

Shiny static electricity!

Posted on by

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:

… and sometimes you l-o-s-e…

Or preferably win (which we’ll leave as a goodie to be seen at the judges show and tell today)

The Bastards Brand Guide

Posted on by

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:

  1. Deep Sea Blue (#0E4A7E) – This shade of blue represents the vast ocean that pirates roamed and the mysterious depths that lay beneath its surface.
  2. Sun-kissed Gold (#FFC72C) – Gold is a symbol of pirate wealth and adventure, and this shade of gold has a warm and inviting feel, like the sun shining down on a pirate’s treasure trove.
  3. Rusty Red (#7B2E16) – This color represents the worn and weathered elements of pirate life, such as old ships and rusted treasure chests.
  4. Weathered Wood (#6F5F3E) – This color is a nod to the wooden deck of pirate ships and the rough-hewn timbers used to build pirate hideouts.
  5. Sandy Tan (#D7C3A3) – This color represents the sandy beaches where pirates buried their treasure and the warm, sun-drenched environment of the Caribbean.
  6. Stormy Gray (#5E5E5E) – This color represents the stormy seas that pirates often had to navigate and the treacherous conditions they faced on their journeys.

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.

UPDATE!

We updated the brand guide based in feedback from our pirates and this is what the new logo looks like:

Font

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

Color contrast

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.

It’s all about that glossy app

Posted on by

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 🙂

The Pirates 365 Recruit Terminal – Glossy pixels & Thieving Bastards

Posted on by

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.

Capture new pirates

Posted on by

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!

👌 Make it a Feature, not a Bug 🐜

Posted on by

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.

Detailed screen grab of the faux broken screen in our app
Full screen grab of the mobile interface of Plundrr login screen. The logo is hand drawn and the faux cracked screen is created using mosaic patterns from multiple overlapping opace rectangles.

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.

Screen grab of how confusing it is to look at vector drawing with multiple overlapping paths as a wireframe

The Pirate Assistant

Posted on by

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

The Pirates 365 Recruit – Pirate recruitment terminal (PRT)

Posted on by

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.

Illustration of the Pirate recruitment terminal’s place within the Pirate 365 Recruitment module, along with the other modules.

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.

Sign-up form
Picture capture

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🤓

Mates Upcoming Raid…

Posted on by

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.