Robo Van Gogh

Integrate Mulesoft with Real Time Robot
Architecture
Webpage Script
Paint Canvas (Webpage)
Design Center - RAML
Postman
Experience API
System API
System
Mule Flow
Result

“It is good to love many things, for therein lies the true strength, and whosoever loves much performs much and can accomplish much, and what is done in love is well done.” -Vincent Van Gogh

Introduction

Painting is my passion and Integration is my preferred profession. I wanted to see the magic of my hands via Integration. Thanks to Mulesoft for this opportunity. This project enabled me to broaden my skills.

We know that Mulesoft has the power to combine powerful technologies. Using this iPaas solution, along with the API Management system, we can seamlessly connect many systems. I love how RPA along with mulesoft is creating a composable future.

Objective

Mulesoft and Software RPA is a hot topic now. As we push the envelope of innovation, why not make it more interesting by integrating mulesoft with a real Hardware Robot ;)

The goal of this project is to make the Robot mimic the painting which is drawn on a paint canvas.

Introduction

As we know, the process of combining two or more things together is known as Integration. So, when a business can bring in multiple systems together and operate in collaboration allowing information to be shared between the connected systems, it's a big win for the organization. Imagine when such dynamic or brilliant data is routed across multiple hardware robots via Mulesoft?!!!

mule flow

Architecture Diagram

architect

Implementation

For this project, I created a webpage to use as the paint canvas. An Html page styled with CSS and javascript is leveraged for this purpose.

<body onload="init()">
    <div class = "container">
        <div class="top">
            <h1><u><img src="proxy.php?url=logo.png" class="logo"/><em>Robo</em> Van Gogh</u></h1>
        </div>
        <div class="middle">
            <canvas id="can" width="535" height="400" style="border:2px solid;"></canvas>
            <img id="canvasimg" style="display:none;">
        </div>
        <div class="bottom">

            <button class="button" style="vertical-align:middle" onclick="Send()"><span>Send </span></button>
            <button class="button" style="vertical-align:middle" onclick="Clear()"><span>Clear </span></button>
        </div>
    </div>
</body>

Webpage

Next, I created a mule Experience API which is exposed to the above webpage.

raml

Once a drawing is made on the canvas, the paint coordinates are sent to mulesoft.

experience API

This data is now sent to system API where the Robots are called using Robot Web Services,. Here the data is first encoded to the server in the URL, also known as form data. Now, using one of my favorite and highly efficient mulesoft components, “Scatter-Gather”, the message is routed to multiple robots concurrently.

system

sysapi

Error Handling:

An until-successful scope can be placed at HTTP Requesters to retry the connections.
In case of a data issue, the user can be notified by an email alert setup at the API level.

Challenges Faced

Connecting to the Robots was a tough exercise. Working with real robots would have been a bit easier than the virtual robots. Postman, a testing tool, was very helpful in the debug process. Once the connectivity was established via postman, HTTP requesters on the anypoint studio were configured.

postman

A document that was helpful for Robot web services : RobotStudio

Result

Our Robo Van Gogh mimics the painting as is. Seeing all the three robots trace the patterns simultaneously is a treat to the eyes :)

result

Conclusion

Manufacturing Industry that uses massive robots knows how tedious and time-consuming it is to configure and tune the performance of a single robot. This project shows how mulesoft can be used to connect and transfer data seamlessly between real-world robots, thus decreasing complexities and increasing the efficiency of the industry.