SAP HANA & Canvas - Exp:1

[shahid]

This application uses Canvas, Animation Functions, XSJS services to Controlling the drawing of a squares.

Information will be saved/retrieved from HANA DB, based on the current positions of the squares. 

The BLUE square in the demo is controlled by the information stored in configuration tables in HANA.

Demo Video:

http://www.youtube.com/watch?v=oZou6tMIb14

.INDEX.HTML: Code to draw the TRACK

.VIEW.JS : Code to draw the squares and its movement

.CONTROLLER.JS: Calling methods

Draw a TRACK for defining moving path for the squares.

Alternately you can upload a picture of the TRACK using commands like                 

1. img.src = "http://www......sample.gif";

INDEX.HTML

<canvas id="myCanvas" width="1500" height="400"></canvas>

<script>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var width = 1000;

var height = 150;

var x = 140;

var y = 100;

var radius = 50;

var color = "rgb(196, 171, 254)";

1. ctx.beginPath();
2. ctx.moveTo(x + radius, y);
3. ctx.lineTo(x + width - radius, y);
4. ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
5. ctx.lineTo(x + width, y + height - radius);
6. ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
7. ctx.lineTo(x + radius, y + height);
8. ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
9. ctx.lineTo(x, y + radius);
10. ctx.quadraticCurveTo(x, y, x + radius, y);
11. ctx.lineWidth = 60;
12. ctx.strokeStyle = color;
13. ctx.fillStyle = "rgba(255, 255, 0, .5)";
14. ctx.stroke();
15. ctx.closePath();

</script>

<script>

1. sap.ui.localResources("race");

var view = sap.ui.view({id:"idrace1", viewName:"race.race", type:sap.ui.core.mvc.ViewType.JS});

• view.placeAt("content");

</script>

.VIEW.JS

Code in CreateContent : function(oController)

1. window.requestAnimFrame = (function(callback) {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

function(callback) {

1. window.setTimeout(callback, 1000 / 60);

};

})();

// square one

function drawRectangle(myRectangle, context) {

1. context.beginPath();
2. context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
3. context.fillStyle = '#8ED6FF';
4. context.fill();
5. context.lineWidth = myRectangle.borderWidth;
6. context.strokeStyle = 'black';
7. context.stroke();

}

function animate(myRectangle, canvas, context, startTime) {

// the below numbers are the position coordinates - x-axis & y-axis of the squares

// these numbers can be dynamically picked from HANA DB

// the below condition defines the speed, direction, and postion of the square.

// applied same logic to control the square movement, few more if statements

// repeated the same logic for SQUARE 2

if (myRectangle.x >= 145 & myRectangle.x <=1116 & myRectangle.y >= 100 & myRectangle.y <= 233 ) {

var spd =              oResult.getText();

1. myRectangle.x = Number(myRectangle.x + (spd*1) );    

$(function(oEvent){

if (spd == 'null' || spd==null || spd === 'null' || spd === null ||spd.length === 0 || typeof spd === "undefined")

{

var Movobj = 'SQ1';

• oController.onLiveRace1(Movobj); // this call is used to set the speed of the SQUARE

} //if

});  //end of func

…

…

….

// requesting frame

requestAnimFrame(function() {

animate2(myRectangle2, canvas, context, startTime);

});

} //end

//Drawing squares

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var myRectangle = {

x: 145,

y: 100,

width: 12,

height: 12,

borderWidth: 1

};

drawRectangle(myRectangle, context);

var myRectangle2 = {

x: 400,

y: 100,

width: 12,

height: 12,

borderWidth: 1

};

drawRectangle2(myRectangle2, context);

// wait one second before starting animation

setTimeout(function() {

var startTime = (new Date()).getTime();

animate(myRectangle, canvas, context, startTime);

}, 1000);

// wait one second before starting animation

setTimeout(function() {

var startTime = (new Date()).getTime();

animate2(myRectangle2, canvas, context, startTime);

}, 1000);

.CONTROLLER.JS

Methods are used

• To define the default speed, speed at the corners for a square from the configuration tables
• Calculating the distance between the two square using X/Y co-ordinates
• Sending the real-time information to BLUE Square for speed revisions

Sending X,Y Co-ordinates Information of both the squares.

                     var aUrl = '../../../session/services/MultiplyTest.xsjs?cmd=speed'+'&x1='+x1+'&y1='+y1+'&x2='+x2+'&y2='+y2;

                     jQuery.ajax({

                           url: aUrl,

                           method: 'GET',

                           dataType: 'json',

                           success: this.onCompleteSpeed,

                           error: this.onErrorCall });

              },

                     var aUrl = '../../../session/services/MultiplyTest.xsjs?cmd=race1'+'&Movobj='+Movobj;

                     jQuery.ajax({

                            url: aUrl,

                           method: 'GET',

                           dataType: 'json',

                           success: this.onCompleteMultiply,

                           error: this.onErrorCall });

              },

.XSJS

Below are the sample codes to retrieve the data by

• by calling a PROCEDURE
• select statement from the table

function performSpeed(){

var body = '';

var x1 = $.request.parameters.get('x1');

var y1 = $.request.parameters.get('y1');

var x2 = $.request.parameters.get('x2');

var y2 = $.request.parameters.get('y2');

try {

var query = 'CALL "amohas97.session.models::get_speed"(?,?,?,?,? )';

$.trace.debug(query);

var conn = $.db.getConnection();

var cstmt = conn.prepareCall(query);

1. cstmt.setString(1, x1);
2. cstmt.setString(2, y1);
3. cstmt.setString(3, x2);
4. cstmt.setString(4, y2);
5. cstmt.execute();

body += cstmt.getDecimal(5) + "\n";

} catch (e) {

$.response.status = $.net.http.INTERNAL_SERVER_ERROR;

$.response.setBody(e.message);

return;

}

$.response.setBody(body);

$.response.status = $.net.http.OK;

}

function performRace1(){

var body = '';

var Movobj = $.request.parameters.get('Movobj');

try {

var query =

'select "Defaults" FROM "WRK_SCH"."amohas97.session.data::sdyn" WHERE "Movobj" = ? ';

$.trace.debug(query);

var conn = $.db.getConnection();

var pstmt;

var rs;

pstmt = conn.prepareStatement(query);

1. pstmt.setString(1, Movobj);

rs = pstmt.executeQuery();

while (rs.next()) {

body += rs.getNString(1) + "\n";

//var answer = '0';

//body = answer.toString();

}

} catch (e) {

$.response.status = $.net.http.INTERNAL_SERVER_ERROR;

$.response.setBody(e.message);

return;

}

//num2 - num1;

$.response.setBody(body);

$.response.status = $.net.http.OK;

}