The Orange Bandits’ fleet tracking

The Orange Bandits’ operation center is need for a mechanism to track vehicles to get more insights about ongoing looting operations. A raspberry pi with a tracking device is the first solution that comes in mind!

Yes, it is mobile! With a power bank it is!

Though, this is not a straightforward solution. Some Python code is due at this point. Unfortunately, The Orange Bandits owns an old Raspberry pi with an old SD card that doesn’t tolerate new updates; not retro enough! Well, we had to use an old version of Python to get this to work!

Hipster and retro 😉 😉
Oh yeah! That’s retro

Embedding a device that flip bytes is not an easy ride. We need to come with innovative ways to to keep it online and to keep the GPS tracker in the “Chinese” satellite signal range!

Here is proposed solution to keep the device connected
Here it is spitting location data (longitude and latitude)

The Existential Risk – using AI to detect potential recruits and giving them proper pirate names

Pirates 365 uses several AI components

TensionFlow

We are using Tensorflow to detect passing pirates

Tensorflow can run in the web browser, and is able to both detect persons and other objects like bottles.

Hooking up the webcamera with the frame analyzer
Detecting bottles and pirates

ChatGPT to create PirateNames

We have already blogged about how we are usting OpenAI’s DaVinci model to generate Pirate Names here

Here we use the following prompt

Create a creative and cool pirate name from the name "{firstname lastname}".  Do not use the word "captain". Answer only with the name - max 3 words. Only output text characters a-z, no special characters!

Hipster-ish technology

Making this we leveraged vue.js, pinia, three, troisjs, tensorflow, ChatGPT. The list goes on 😉. All pretty hip, (almost) non-ms technology.

Badges

We hope this sholud be sufficient for getting the AI- and Hipster badge 🏴‍☠️✌️🦜

The Pirates 365 Recruit – Pirate recruitment terminal (PRT)

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🤓

Quick Tip: Best Practice when making reusable Figma Components

Figma, the hippest UI kid on the block, has a setting for components called “properties”. They are intended to mimic how we use properties in frameworks like React. However when working with multiple components and when swapping components they grant some extra value to the design process.

Updating multiple instances of the same component

Having properties for the values makes it easier to update multiple values though-out your design.

Remembering override values when swapping components

But more importantly, when using variations of a component the component remembers its override-values even when switching to a variant that does not have the same values in the component, making updating your design that much easier.

Just trust me on this, it’s the best practise

– Every Developer ever, and now also a designer

New and existing tech 🤓

We have to think both new and traditional when we test our idea of a pirate-free world.
In order for us to be able to alert the authorities and ships about possible pirates at an early stage, we have to use tools that are already in place in addition to some new ones.

We think that Teams is a perfect channel to get notifications about newly discovered pirate ships, since it’s something we already have.
We have created a Teams app that gives us notifications in a Teams channel.
Here we have the opportunity to send detailed alerts on situations that arise and at the same time link to our PoS surface for a total overview.

The PoS surface is made in React.js, and the app is built with Vite instead of create-react-app as this is a much faster way to build. New and hip 😉

Bombs away hipsters!

Our customers in our pizza store seem to be bored, we have expanded our ordering-app in order to make their time fly and stuffed it with some fun and exciting features.

The first feature will display a fun fact about pizza’s and its history.
The second feature will introduce the whole staff in a slide show. Greetings ninjas!
The third feature will save the customer from the time-consuming task of having to read through the menu and choose that special pizza from the menu, let us decide!
The fourth feature let’s our ninja customers give suggestions on what we should put on the menu next, this will ensure the curious ones to return to see if their pizza has made it to the menu.
Last but not least, the customers coming in with a TMNT mask or outfit will be given a healthy discount! (made possible through AI Builder and a custom model).

COWABUNGA !!!

Hipsters rule the world!

For å skape en bedre applikasjon og en bedre brukeropplevelse har vi utviklet en SPA applikasjon med React og .NET Core 6. Applikasjonen lister ut matvarer som ikke er registret i kjøleskapet. Applikasjonen benytter Node.js og Bootstrap som er open source.
Bootstrap er benyttet for å skape en bedre brukeropplevelse for de gir bruker mulighet til å markere det de har handlet.
Backend gjør spørring mot Microsoft Dataverse og lister ut matvarer som mangler i en handleliste.

React
C# .NET Core 6

It’s cool, it’s hip, it’s open source!

We have used several open source and hip packages in our React app. Node.js with cors and express for api requests, reactstrap (the React GUI underdog) for page layout and root design and the react-webcam package for accessing the users camera. All open source, all hip, baby!

react-strap
node, cors, express
webcam component

Hipsters dreamworld

We are making some improvements in the solution with the help of 2 technologies that we think might be considered for he Hipsters badge. They are:

  1. Azure IoT central V3 (Preview) connector: This allows us to send commands back to the devices from IoT central. Perfect for the business flow.
  1. Metamask plugin for login: We are working in a solution for end users where they can log in to a page and see real time data flowing into graphs and maps. One of the possible ways to login is by using Metamask as a Web 3 platform to login to an hypothetical blockchain that could work as decentralized data repository for members of ZOOs. (read more here: https://docs.metamask.io/guide/). This feature is in an experimental phase, but the POC is working good.

Happy coding!

Preview <3

Since the tenant for our Demo environment is located in USA, we do get accsess to some functionality that is not yet available here at this side of the ocean.
Therefore, for us how embrace the LowCode/NoCode functionality, we just love the way you can write what you want to do directly in the PowerApp with AI-powered assistance, and the suggestion for the code that should be used pops up right under it!