Transferring Images to SCP - Part 2

[pranav_kandpal]

In the previous blog post , I covered the part of sending images as BLOB to SCP instance . In-case you missed it out please check out the below link :

https://blogs.sap.com/2018/05/15/transferring-images-to-scp-part-1/

In this post , I will cover how to retrieve this data and show the blob as an image in the front-end  !

Lets create a UI5 application from the WebIDE and tackle this situation in a more step wise approach.Please note , I wont be covering in detail the creation of UI5 application and its components . I will just try to touch base the relevant aspects which would enable us to ensure we meet our desired requirement .

 

Step 1 : Creating a sample UI5 application from Template

Create a Sample UI5 application from the template and give it a name you desire .



 

Also please maintain the destination of your Service URL and add the same to the neo-app.json file just in case you want to refer to a specific Destination Name ( Not covering this aspect in detail as its a very common scenario ) .

Step 2 : Adding the image tag to the View.XML of the APP

Add an xml tag for Image with an ID and specify other properties as needed . We would need the ID later so please pay heed to the name you use here .

<Image id="image_01" width ="650px" />

Step 3: Updating the controller of the APP

Now since we need to update the Image of an element we have already specified we will code our changes in the OnAfterRendering function .

Please add the below function to start with the changes

onAfterRendering: function() {  }

Now the next task for us would be to update the OnAfterRendering function . I will try to fill in the logical flow of the method below now .

onAfterRendering: function()

{

Retrieve the latest entry from SCP IoT Table using the Odata services which has the binary array

Convert the binary array to a byte format ( since the retrieved value will be a string )

Make a Blob from the bytes(which is acceptable by the javascript to convert to a URL )

Convert to a ObjectURL

Set the src of the image DIV

}

Now lets take a look at each aspect in detail

 

Part 1 : Retrieving the data from the IoT Table

The below piece of code can be used to retrieve the top most entry from the IoT Table in the SCP instance .

var data_Odata;
var sServiceUrl = "Name of your Service URL";
var qModel = new sap.ui.model.odata.ODataModel(sServiceUrl);
var qstring = "Name_Of_Table/?$orderby=G_CREATED%20desc&$top=1";
qModel.read(qstring,
null,
null,
false,
function(oData) {
data_Odata = oData;});
var data = data_Odata.results[0].C_B_ARRAY;

 

Please note from the first blog , the field C_B_ARRAY stores the Binary array which is sent from the Python script .

By now , we have the latest entry from the IoT Table in the variable data .

 

Part 2  : Convert String to Byte

From the Part 1 of this series of blog , if you can recall we converted the byte and decoded it to a string array which could be sent over  IoT to SCP . In this part we would convert it to Byte ( all the data format returned by the Odata services will be in String format , hence the string to byte conversion )

// Convert the string to bytes

var bytes = new Uint8Array(data.length / 2);
for (var i = 0; i < data.length; i += 2) {
bytes[i / 2] = parseInt(data.substring(i, i + 2), 16);}

Part 3: Creating a blob from the bytes to create a URL

// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/jpeg'});

Part 4 : Create a URL for the image which can be linked to the SRC of the DIV

var img_url = URL.createObjectURL(blob);

Part 5 : Set the Source

var image = this.getView().byId("image_01");

image.setSrc(img_url);

Please note : the ID used here is the same as mentioned in the XML file of the view .

 

Step 4 : Execute the Application and view the image in the browser 😉 !

So send and retrieve the images and play along with them as you like .

I hope in these simple 4 steps you can easily create an application which can retrieve the binary array from the SCP instance and convert it to a image which can be viewed over the frontend .

 

Fun Fact : You can convert the byte also to a file format which can be send as a form data to other APIs ( Image detection API of foundry for instance )  . Mentioned below is the code but this is just for further playing around once you have the image 😉 !

var file = new File([bytes],'T1.jpg', {type:'image/jpg',lastModified: Date.now()});

 

I will try to cover up some the topic for image compression and retrieval of the original image in another blog which would be helpful in sending images with lower size and later on the retrieval from the Odata services would be quicker as well due to the small size and the quality of the image can be enhanced in the javascript coding post the retrieval of image .

Untill then Happy learning !