Author Archives: INtendo DS

Tubi or not to be – that is our solution

Posted on by

Link to our user journey is beautifully displayed on behance:
https://www.behance.net/gallery/190650075/Tubi

Demo of our solution

Our solution is built from multiple services and components. Our frontend is built with NodeJS and React with Typescript and SASS. These technologies make the user experience feel seamless and super quick in the browser.

The flow of the system starts with a user uploading their order request in our React frontend form which is then stored in our Azure Storage account. The plumbers receives the order and can start planning!

Only one click away, our customized Azure Custom Vision model is up-to-date on bathroom floor plans and maps out the coordinates of the different plumbing fixtures, sparing the plumber of tedious work.

Then, our custom made Azure Function App backend in C# Asp.net plans the piping based on the coordinates from the AI model, and draws the piping layout. The backend API then returns the piped-up floor plan to the frontend, drawing hot water and cold water pipes according to each of the bathroom components needs. The backend also calculates the equipment needed to build the bathroom, and provides a list of required equipment for the project. It also calculates a total project cost. Both the piping supplies and floor plan is saved in our Azure Blob Storage.

Because of this, the people working in the back office have instant interactive reports available to help them with filing and billing through Power BI.

The components of our architecture

It’s a wrap!

We had an amazing time at the Arctic Cloud Developer Challenge (ACDC) hackathon! Our team was so happy to work on a project that was both fun and challenging. We were able to create a plumbing planning system that was not only functional but also visually appealing

The judges were a group of highly experienced and knowledgeable people who were passionate about technology and innovation. We were impressed by their expertise and the valuable feedback they provided.

Overall, the ACDC hackathon was an incredible experience, and we learned a lot from it. We are grateful for the opportunity to participate and showcase our skills. We look forward to participating in future hackathons and continuing to develop our technical abilities!

Powering the office

Posted on by

By using Teams and Power BI, we can allow our office workers to handle new orders quickly, and easily. They will receive alerts through an channel of new orders, and to make sure they are handled quickly, a user will be tagged if not handled within 1 hour by using Power Automate

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

Feature bonanza

Posted on by

We’re claiming the feature bombing badge!

Our main page is packed with awesome features:

  • Floor plan image upload
  • Analyze image by using AI to detect the different components and generate hot and cold water piping (2 features in 1!)
  • Approve floor plan (sets the piping suggestion to: accepted)
  • Fetch order list based on piping suggestion (automatically)
  • Accept project (assign project to me)

Deep down in the pipes

Posted on by

ACDC Craftsman – Secure code and deployment

When connecting to as many services as we do (humblebrag), it’s extremely important to keep keys and access credentials secret. There are bots and such that continuously scan GitHub, picking up anything that resembles access keys or connection strings. Therefore, we have set up dependency injection in our Azure Function App, and we keep all our important keys in local.settings.json. These settings are loaded into program.cs and added to the function app via the Config class. This makes them easily accessible in all the files we need. We set the same settings in Azure, it just works!

Using Github Actions to deploy our React app to Azure with built-in es-lint and verification ensures us that only functional code is published to azure.

Git strategy

Using branches, commit messages, pull requests, static code analysis we are cruising through the waves with our git strategy. Keeping everyone on the team informed on our progress and the way forward.

HIP to the STER

Posted on by

Our dazzling frontend application is implemented with the coolest of the coolest technologies. React allows us to run our application seamlessly in the client’s browser. In addition to our static code analysis pipeline, these technologies make sure we are compliant and protects the privacy of the user.

We used:

  • React
  • Node.js
  • Typescript
  • SASS
  • Fluent UI for React

Not only are they hippety hip, they are third party libraries super useful for our application! Weehoo!

How to see without eyes?

Posted on by

Azure Custom Vision!

We had a problem. A huge problem. We needed to know where in our floor plan the different components are placed.

By training our own custom vision model based on training data of bathroom floor plans, we managed to obtain an AI model able to detect components such as:

  • Toilet
  • Shower
  • Bath tub
  • Sink
  • Main pipes
Bathroom components detection with our custom vision model
Model scores on the training data

The model was published and the API made available for our backend application in C# to consume.

Super easy!

Piping our way through the Azure Cloud

Posted on by

To make our amazing service Tubi work, a lot of cloud is needed. We aim to make the plumber’s job easier by recommending the best layout for where the pipes should go, and for that, we need AI. We have trained a model in Custom Vision to recognize all components in a bathroom that need water. So, when the plumber uploads a floor plan to our Static Web App, the image is sent to our Azure Function App backend in C# Asp.net through our own API. But both the image and the equipment list must be stored somewhere. Therefore, we have also connected to Azure Blob Storage. Then last but not at all least. The people working in the back office have instant interactive reports available to help them with filing and billing through Power BI and alerting the using an automated flow (Badges: Feature Bombing)

Sometimes it works, and that’s plenty

Databases are good, but sometimes it’s easier to just dump everything in one place until you need it again. Yes, it might not be very scalable or very normalized. SQL became too heavy, and we already needed a Blob storage to store the images, so we also dump the order data in the same blob storage as JSON files. It’s old fashioned way of serverstorage, and a bit dirty, but it works! (Badges: Nasty hacker, Retro badge)

Power the backoffice

As the final list of components are decided, they still have to be approved from the accounting team in the office. To make sure they have all the information they require, we have developed a Power BI dashboard to crawl through our registered data and make sure the orders are handled properly (Badges: Crawler, Dash it Out, Dataminer). And to make sure the orders are handled easy and fast, the dashboard is embedded into teams and an alert is automated by using a logic app to make sure the workers can receive and cooperate in realtime (Badges: Embedding Numbnuts, Go with the flow, Pug N’ Play, Power user love, Right Now, Stairway to heaven).

Happy Camper + Community Champion

Posted on by

Today we upgraded our camp with some homemade pennant, to keep our spirit on top for the rest of the hackathon. We are beyond happy with our outfits also, giving us the kindergarten employees and 80’s family look and feel <3

Our designer also helped SuperINtendo with their wireframes and design, going from zero to hero in just 30 minutes!