Controlling your buzzer and lights via SAPUI5 – Arduino Prototype

PS: Live Demo at the end!

Background

For a long time I have been thinking about making a complete end to end prototype from Hardware to Software. I was quite motivated by Wouter Lemaire blog post about Smart coffee machine. So finally decided to order by Arduino kit. Why Arduino why not Raspberrypi i believe being a beginner thought Arduino is easy:). So this blog post is going to be one of the series of posts where we will be interacting with Arduino sensors via SAPUI5 dashboard. Intent is to have full fledge SAPUI5 dashboard controlling it completely.

What we are planning to build?

We are planning to build a SAPUI5 dashboard which will controls the alarms and lights remotely!  We will have our Arduino board with an LED and a buzzer. Since we don’t have the Wifi or Bluetooth or GSM module of Arduino we will be using serial ports to interact with it.  We will have a python server which will be talking to Arduino via Serial port. This Python server will expose the API which will be consumed by our SAPUI5 Dashboard.

• Arduino Board with LED and Buzzer. Arduino IDE to do its programming
• Python to interact with the board via Serial port.
• SAPUI5 dashboard to control it.

What we are we waiting for let’s begin.

Arduino setup

So once you have the Arduino board you will need to install the Arduino IDE. Basically Arduino uses something they call as Sketch which is nothing but programming language for it. This is very similar to C language. So each sketch will have two functions one is set up which will only be called once the program is deployed or the board is reset and another is loop which is like an infinite loop.

void setup() {
  // put your setup code here, to run once:

}

void loop() {
  // put your main code here, to run repeatedly:

}

Now Arduino board has different pins to interact with. So for example in our case LED is on pin 8 and Buzzer is on 9. So we will be sending data or receiving it via these pins. So in our case switching on and off the light or buzzer is more like sending high or low value to the pin. If you look at the code we are using Serial object to interact with the board. Based on different value received by the board it will do different actions as below.

Now our code is waiting for inputs via serial port and accordingly will perform the action. We will deploy this code to arduino board via COM7 serial port as shown below

int ledpin=8;          
int buzzerPin = 9; 
void setup()
{
  Serial.begin(9600);   // opens serial port, sets data rate to 9600 bps
  pinMode(ledpin,OUTPUT);
  pinMode (buzzerPin, OUTPUT);
}
void loop()
{

       char receiveVal;                  // Defined receive data

        receiveVal = Serial.read();  //Save the serial data received 
       if(receiveVal == '1')          //Receive data is 1, lit LED lights    
       { 
           digitalWrite(ledpin,HIGH); //print out the value of the LED   
           Serial.println("led on"); //send data to the serial monitor
       }
       if(receiveVal == '0')          //Receive data is 0, off LED lights
       { 
           digitalWrite(ledpin,LOW);  //print out the value of the LED        
           Serial.println("led off");//send data to the serial monitor
      } 
             if(receiveVal == '2')          //Receive data is 1, lit LED lights    
       { 
           digitalWrite (buzzerPin, HIGH); 
           Serial.println("buzzer:ON"); //send data to the serial monitor
       }
       if(receiveVal == '3')          //Receive data is 0, off LED lights
       {  
            digitalWrite (buzzerPin, LOW);        
           Serial.println("buzzer off");//send data to the serial monitor
      } 

  delay(1000);                          
}

Interacting with Arduino via Serial Port using Python 

So now our Arduino setup is ready, all we need to do is how to send or receive data from the board. Sadly my Arduino kit did not include any Wifi, GSM or Bluetooth module so the only option left was to use the Serial port. I decided to use Python to interact with the ports. I could have used NodeJS also but decided to go with Python. While writing this post  a thought came i could have gone with Go programming language also, might be next time:)  So Python provides a packages like Serial which helps in interacting with serial port. I have used Flask framework for creation of REST api’s. I am using only get call which could have been enhanced.

import serial
import time
from flask import Flask, request
from flask_restful import Resource, Api
from sqlalchemy import create_engine
from json import dumps

app = Flask(__name__)
api = Api(app)

serialPort = serial.Serial(port = "COM7", baudrate=9600,
                           bytesize=8, timeout=2, stopbits=serial.STOPBITS_ONE)
serialString = ""                           # Used to hold data coming over UART
class Arduino(Resource):
    def get(self, indicator):
        #print("hello")
        serialPort.write(bytes(indicator, 'UTF-8'))
        while serialPort.inWaiting() > 0:
            out = serialPort.read()
            print(out)    
class Home(Resource):
    def get(self):
        print("Hello")               
api.add_resource(Arduino, '/Arduino/<indicator>') 
api.add_resource(Home, '/') 
if __name__ == '__main__':
     app.run(port='5002')

SAPUI5 Controlling the Arduino board

So now we have the API ready next step was to create our SAPUI5 application. I wanted to use UI5 local tooling. All you need to do have NodeJS and npm installed you are good to install UI5 locally. So my SAPUI5 application as of now has only two input element which are switches.

<Label text="LED's Status" />	
<Switch class="sapUiButtonEmphasizedBackground" state="false" change="onChangeLED">
	<layoutData>
		<FlexItemData growFactor="1" />
	</layoutData>
</Switch>
<Label text="Buzzer" />	
<Switch class="sapUiButtonEmphasizedBackground" state="false" change="onChangeBuzzer">
	<layoutData>
		<FlexItemData growFactor="1" />
	</layoutData>
</Switch>

Once we change the switch state i make an AJAX call(better options exist) to interact with the API’s

let url="<url>";
if ( evt.getParameters().state == true){
	url = url + '/2';
} else {
	url = url + '/3';
}
$.ajax({
	type: "GET",
	url: url ,
	dataType: "json",
	crossDomain: true,
	success: function(result) {
				MessageToast.show("Operation Successful!");
				},
	error: function(response) {
							}
});

So now we have our Application linked with the backend API which internally talks to the Arduino Demo Time!

Demo

Here is the final working demo, enjoy

Whats Next?

I think hardware + software gives altogether a different high. We have just scratched the surface. I plan to integrate many sensors, motor etc. and let them be controlled via SAPUI5 dashboard. In between i would like to experiment by bringing in SAP HANA analytics for stream data, Cloud platform and come with another mashup:). Before I complete this blog post I must request everyone to give this Hardware and Software together a try you will fall in love with it.