Tag Archives: Chameleon

Glossy Pixels + Mario badge + Chameleon

Posted on by

Before the hackathon we used some hours doing research, which included doing use research. Sofie on our team had experienced that renovating a bathroom includes a lot of back and forth between plumber, carpenter, project manager and several other people. It took more time then it needed to, to finish the bathroom due to bad communication, jo flere kokker, jo mere søl/Too many cooks spoil the broth.

We talked to two amazing plumbers, first asking a random question:

They, and their colleagues wanted:
– A pipe planner for when they renovate a bathroom
– Supply list with which pipes and other equipment
– Pipe (hehe)line for all the workers including in building a bathroom

Sofie wanted:
– Certificate of completion automatically …

We hade several calls with them before and during the hackathon, they gave us invaluable information and insight, and they have evaluated our solution each day.

This is our user journey

And of course, here is the user journey translated to Super Mario (please zoome in)
user journey mario

Late last night, after a couple of beers we finally found the perfect name for our plumber solution! Say hello to Tubi! We made a logo we are happy with, short and sweet!

Using Microsoft UI components, with a dash of Super Mario sprinkles on top, the UI is done.

Since this blog isn’t the best medium to showcase the design, please check it out at Behance

Use on every device

Posted on by

The Power App is repsonsive and can be used on all kinds off devices and screen resolutions.

We have use controls like the Containers that will adjust the content to the sizes on different parts of the screen.

We do recommend using the phones and pads in landscape mode to avoid white areas on the sides.

Here are some pictures of the app on different devices

Welcome to Mario Brothers Plumbing Service

Posted on by

Brand logo and brant theme

We have created a portal with user-friendly experience and a god and easy interface.

Used AI to generate picture and text to make the site fun.with a green mushroom as a favicon

Easy azure B2C loggin for the new customer.

The backen have the same look and field ad the customer have

We also focus on some oldscool pixels for fun – inn the Canvas app

Glossy Pixels / Chamelon

Posted on by

Glossy Pixels: For our app have we used Mario themed icons and Since we are Waken Koopa troopas have we choosen color-codes that represent Koopa Troopas colors. Green for their shell and yellow for their body.
Synne, being our lead designer, made sketches for our final design:

Our final design ended up quite close to the envisioned design:

We also have a minigame where you get to hunt as many Mario can, where we liberally use Mario inspired design language.

Chameleon
Our app is available both for desktop and mobile users. We also have built a responsive canvas app, however the minigame is only available in portrait mode so no one gets an unfair advantage 🙂

A Day of Triumph: Unlocking Multiple Badges in a Single Sprint !?

Posted on by

Streamlining Efficiency: The “Go with the Flow” Badge Achievement

In the pursuit of optimizing business productivity within our solution, the implementation of an ALM pipeline has been a game-changer. This automated transfer of solutions between environments not only saves significant time and effort but also ensures that both unmanaged and managed versioning packages of the solution are seamlessly transitioned. Furthermore, the integration of a Power Automate flow for the approval of deployments has elevated our operational efficiency, marking a significant milestone in our journey to “Go with the Flow.” This achievement underscores our commitment to leveraging workflow automation for enhanced productivity.

Uniting Power and Simplicity: The “Power User Love” Badge

Our solution showcases an exemplary blend of low-code platforms with pro-code customization, embodying the #ProCodeNoCodeUnite philosophy. By implementing a Power Pages site for user interface and login, coupled with a PCF component coded in React and TypeScript for a gamified course, we demonstrate the power of integrating professional coding standards with low-code solutions. This approach not only streamlines development but also opens up a realm of possibilities for creating robust, user-friendly applications.

Gamification at Its Best: Achieving the “Mario Badge”

Elevating user interaction through gamification, the implemented PCF component with interactive controllers to navigate through course levels. Each course represents a level, challenging users to advance and showcase their proficiency. This gamification aspect not only makes learning more engaging but also encourages users to level up their skills in a fun and interactive environment.

Visual Insights: The “Dash It Out” Badge

Our solution now features a Power BI report embedded within the Power Pages site, along with additional reports for user access to high scores and admins for an overview of active players and their progress. These reports, showcasing at least four graphs, gauges, or KPIs, highlight the business value of our dashboard. The integration of these visual insights ensures that both users and administrators have a comprehensive understanding of performance metrics at their fingertips.

Adaptive Excellence: Securing the “Chameleon” Badge

The responsiveness of the Power Page, adapting automatically to all devices and screen sizes, exemplifies our solution’s versatility. This inherent adaptability ensures that our application delivers a consistent and user-friendly experience across various platforms, earning us the “Chameleon” badge. It’s a testament to our dedication to creating solutions that are not only powerful but also universally accessible.

Princess Support Requests now simpler than ever! And more esthetically pleasing!

Posted on by

Badges to be claimed:

  • Glossy Pixels: We developed a custom Mario-themed UI for our Princess Self Services portal.
  • Chameleon: Our UI maintains it’s structure with the ever-changing screen size.

The backbone of our system is supporting whatever requests our princesses may have. With that in mind, one of the main objectives while planning for the princess-facing side of the system, we opted for simplicity and a fun user experience before all.

Our home page has only one button, so there is no confusion in their time of need. We went with the opposite logiq than the people that post recipes online.

Once the button is clicked, and the princess creates their profile, the next step is a simple form to gather the important information.

Once they are happy with their request details, and submit, they get redirected to a page listing all of their current and historical request.

Responsify all the things!

Posted on by

Adaptive solutions are always important as you no longer have any control on what kind of device the user is hacking along on.

Power Pages comes with pretty good responsive support out of the box

Responsiveness was once considered a kind of black art, but fortunately, most modern solutions now offer robust support right out of the box. However, when integrating Power Pages, bots, and canvas apps, seamless functionality from the start isn’t always guaranteed.

Embedding PlumbBot needed minimal adjustments to support responsiveness

What realy gave us a headacke was embedded canvas apps. Yes they do resize, but leaves a lot of uneeded blank space on the top of the page which makes the app “disapear” on a mobile device:

Unwanted spacing in the top


The solution might seem quite obvious to a seasoned frontend designer, but for those of us who are more accustomed to low-code plumbing, navigating through CSS, JS, IFRAMES oh my my…

So we spent the better part of the day chogging along, and finally, we arrived at a solution we were happy with.

No more wasted space in the top

How can so little code take so mutch time???

@media (max-width: 1200px) {
    #il1tn4 {
    	margin: 0px !important;
        padding: 0px !important;
    }

    #iebs75 {
        padding: 0px;
    }
}

@media (max-width: 992px) {
    #il1tn4 iframe {
        height: 420px !important;
    }    
}

@media (max-width: 767px) {
    #il1tn4 iframe {
        height: 170px !important;
    }  
}
Works in horizontal orientation

End users – The reason for why we are doing this!💰😀

Posted on by

We have mentioned little about our front end web solution so far. But here is some info.
The interface is made in React.js built with Vite. It is faster than Webpack.⏩

This is a page to be used by authorities, the coast guard or separate centers for shipping companies.
The website is used to scan areas on the map for ships. If a pirate ship is detected, an alarm can be sent to all other ships in the area.
In order to be able to be used on all surfaces, it is of course responsive 😉

Big Screen
Small screen

Sending an alarm from the web interface will trigger an alarm in Teams clients over on the ships, as well as cause the light on the bridge to flash red.

Maritime Mischief Manager (MMM) – A description

Posted on by

“MMM.. is the ultimate tool for pirate captains looking to maximize their raids. With our comprehensive system, you’ll be able to plan, organize, and execute the perfect plunder. No more manual logs, no more disorganized crew. Just a streamlined, efficient process for taking what you want from the high seas. Upgrade your pirate game today with Maritime Mischief Manager.”

Pirates are met with a friendly user interface where they can manage all aspects of pillaging.

Creating a Raid

Under the “New Raid” menu, pirates with the rank of Captain can take a look at possible raid prospects and get an overview of the best possible strategy and also an estimation of the loot potential in the selected location.

The results we are seeing above comes from a query against the ChatGPT API with the use of Power Automate.

Being satisified with the current target, the Captain selects the vessel for the raid, choose to create it and the raid enters planning mode.

Raid planning

From the raid list, piratescan view raids in the planning stage. Simple pirates can choose to join a raid if they want to, but Captains can also choose to invite his best men. Pirates receiving an invitation will have to accept/reject the invitation through their Teams account.

Once the pirate has received and accepted an invitation, they have to scan their provided RFID card when they board the ship. They will then enter the status of Checked in.

Once the RFID card is scanned at the ship, a HTTP request is sent to the raid check-in flow, the flow will update the crew status.


When the Captain is happy with his band of criminals, he chooses to start the raid. The app conveniently simulates the battle as well, together with some nifty battle music. This is of course to save the hassle of actually raiding a place.

Reporting

The pirate management team of course also have access to beautiful numbers of the entire operation

The Bi-Pirates :)

Posted on by

Once upon a time, in the world of Business Intelligence, there was a ship with 3 crew members, who were struggling to make ends meet. They would sail from port to port, hoping to find some treasure, but to no avail. That was until they discovered Power BI.

They were able to analyze data from different sources and turn it into valuable insights. They used Power BI’s interactive visuals and dashboards to identify the ports and ships with the most valuable cargo. No more guessing, no more wandering aimlessly. so were able to sail straight to the ports or ships with the most valuable treasures. 🙂

Mobil view

used jason file to use “shape map” in power BI https://github.com/deldersveld/topojson