update with orientation ongoing

WOB/server/interfaces/Trajectoires.html

@@ -44,19 +44,12 @@
 
 
             <h1>Settings</h1>
-
-            <label> Undo: </label>
-            <div>
-                <a onClick="javascript:Traj.State.undo();" data-role="button" data-theme="a" data-icon="back" data-inline="true"></a> 
-            </div>
-
-            <label>Speakers Pos: </label>
-            <input type="number" id="speaker_dist" name="distHP" value="1" onchange="javascript:Traj.View.updateHpDistance()" data-inline="true" />
-
+             <label>Speakers Pos: </label>
+             <input type="number" id="speaker_dist" name="distHP" value="1" data-mini="true" onchange="javascript:Traj.View.updateHpDistance()" data-inline="true" />
 
             <form>
                 <label for="flip-curvesinback">Draw Curves in Background:</label>
-                <select name="flip-curvesinback" id="flip-curvesinback" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateDrawCurvesInBackground()">
+                <select name="flip-curvesinback" id="flip-curvesinback" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.View.updateDrawCurvesInBackground()">
                     <option value="off">No</option>
                     <option value="on" selected="selected">Yes</option>
                 </select>
@@ -64,14 +57,7 @@
 
             <form>
                 <label for="flip-loop">Loop Mode:</label>
-                <select name="flip-loop" id="flip-loop" data-role="slider" data-theme="b" onchange="javascript:Traj.Player.updateLoopMode()">
-                    <option value="off" selected="selected">Off</option>
-                    <option value="on">On</option>
-                </select>
-            </form>
-            <form>
-                <label for="flip-orientation">Stream Orientation:</label>
-                <select name="flip-orientation" id="flip-orientation" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateOrientationMode()">
+                <select name="flip-loop" id="flip-loop" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.Player.updateLoopMode()">
                     <option value="off" selected="selected">Off</option>
                     <option value="on">On</option>
                 </select>
@@ -79,7 +65,7 @@
 
             <form>
                 <label for="flip-timeSlider">Show Time Slider:</label>
-                <select name="flip-timeSlider" id="flip-timeSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateTimeSliderMode()">
+                <select name="flip-timeSlider" id="flip-timeSlider" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.Events.updateTimeSliderMode()">
                     <option value="off">Off</option>
                     <option value="on" selected="selected">On</option>
                 </select>
@@ -87,7 +73,7 @@
 
             <form>
                 <label for="flip-zSlider">Show Z Slider:</label>
-                <select name="flip-zSlider" id="flip-zSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateZSliderMode()">
+                <select name="flip-zSlider" id="flip-zSlider" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.View.updateZSliderMode()">
                     <option value="off" selected="selected">Off</option>
                     <option value="on">On</option>
                 </select>
@@ -130,6 +116,10 @@
             <div style="margin-top: 40px" unselectable="on" class="unselectable" >Hold to draw a new curve</div>
         </div>
 
+        <div id='feedbackDisplay' data-role="none">
+            <div style="margin-top: 40px" unselectable="on" class="unselectable" > </div>
+        </div>
+
         <div class="canvas-left-overlay" id="playDiv">
             <div data-role="controlgroup" data-type="horizontal" >
                 <a onClick="javascript:Traj.View.setCanvasZoom(0.8);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.7);"> - </a>
@@ -161,19 +151,25 @@
             <input type="hidden" class="timeSlider" value="0" />
         </div>
 
-        <div id="sessionDiv">
-            <a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
-            <div id="sessionDivOverCanvas">
-                <a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
-                <a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
-                <a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
-                <a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true"  data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+        <div id=footer data-role="footer">
+
+            <div id="sessionDiv">
+                <a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
+                <div id="sessionDivOverCanvas">
+                    <a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
+                    <a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
+                    <a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
+                    <a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true"  data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+                </div>
+            </div>
+
+              <div class="center" id="orientation">
+                <input type="button" value="On" id="onoff" onclick="onoff();">
             </div>
-        </div>
 
-        <div id=footer data-role="footer">
             <div class="right" id="options-div">
-                <a href="#" onClick="javascript:Traj.Session.exportCurrentCurve();" data-mini="true" data-role="button">Export</a>
+                <a href="#" onClick="javascript:Traj.Events.OrientationRecording();" data-inline="true" data-mini="true" data-role="button" id="OrientationButton" data-theme='c'>Set Orientation</a>
+                <a href="#" onClick="javascript:Traj.Session.exportCurrentCurve();" data-inline="true" data-mini="true" data-role="button">Send</a>
             </div>
         </div>
         <!-- /footer -->

WOB/server/interfaces/css/index.css

@@ -93,7 +93,6 @@ body {
     opacity: 0.7;
 }
 
-/* NEW */
 .sourceButton{
     margin : -3px;
     padding: 0;
@@ -147,6 +146,7 @@ body {
     position: absolute;
     width: 100%;
     bottom: 0;
+    height:40px;
 }
 
 .right {
@@ -166,8 +166,8 @@ body {
 .left {
     position: absolute;
     left: 0;
-    opacity: 0.8;
     z-index: 5;
+    margin: 0px;
 }
 
 a.curveMenuButton {
@@ -211,9 +211,7 @@ a.curveMenuButton {
 }
 
 #sessionDiv {
-    position: absolute;
     left: 0px; 
-    bottom :0;
     z-index: 4;
 }
 
@@ -240,10 +238,6 @@ a.curveMenuButton {
     padding-top: 5px;
 }
 
-#footer {
-    height:40px;
-}
-
 #spaceStretchDiv > input {
     width: 50px;
 
@@ -277,6 +271,18 @@ a.curveMenuButton {
     text-align: center;
 }
 
+#feedbackDisplay {
+    position: absolute;
+    background-color: rgba(250,250,250,0.6);
+    top:50px;
+    left:5px;
+    width:120px;
+    height: 20px;
+    z-index: 4;
+    font-size: 20px;
+    text-align: left;
+}
+
 #contextMenu{
     position:absolute;
     height: 30px;

WOB/server/interfaces/js/OSC.js

@@ -116,7 +116,7 @@ Traj.OSC = {
     sendOrientation : function(msg){
         Traj.OSC.sendSpatMessage(['source',Traj.Manager.currentSource, 'yaw', msg[0]]);
         //Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'pitch', msg[1]]);
-       // Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
+        //Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
     },
 
     sendNewTraj : function(msg){

WOB/server/interfaces/js/Player.js

@@ -24,21 +24,22 @@ Traj.Player = {
             yOld = curve.Y[0],
             z = curve.Z[0],
             counter = 0,
-            idx = 0,
-            idxOld = 0;
+            idx = 0;
 
         Traj.OSC.sendPlay("start");
 
         var begin = new Date().getTime();
 
-        var timeSliderPosition = Traj.Events.getSliderValue(); // check if the slider is not at the end (or mostly)
-        if (timeSliderPosition < lengthTime-100) {                           // if it is not, change the begin time (if it is, leave it to restart at the begining)
+        // check if the slider is not at the end (or mostly)
+        // if it is not, change the begin time (if it is, leave it to restart at the begining)
+        var timeSliderPosition = Traj.Events.getSliderValue(); 
+        if (timeSliderPosition < lengthTime-100) {
             begin -= timeSliderPosition;
         } 
         var now = new Date().getTime();
         pointCoord = Traj.Utils.interpolate(now-begin,curve);
-        xOld = pointCoord[1];
-        yOld = pointCoord[2];
+        xOld = pointCoord[0];
+        yOld = pointCoord[1];
 
         (function loop() {
             // get time for new frame
@@ -54,9 +55,9 @@ Traj.Player = {
             
             // [sourceNumber, X, Y, Z, t]
             pointCoord = Traj.Utils.interpolate(now,curve,idx);
-            x = pointCoord[1];
-            y = pointCoord[2];
-            z = pointCoord[3];
+            x = pointCoord[0];
+            y = pointCoord[1];
+            z = pointCoord[2];
 
             if (!isNaN(x)&&!isNaN(y)) {
 
@@ -69,11 +70,8 @@ Traj.Player = {
                 // clear dyn canvas = large point
                 Traj.View.dyn_repaint();
                 Traj.Player.repaintPoint(curve,[x,y]);  // paint point
-                xOld = x;
-                yOld = y;
 
-                Traj.Player.repaintCurve(curve,idx,idxOld); // paint large curve
-                idxOld = idx;
+                Traj.Player.repaintCurve(curve,idx,idx-1); // paint large curve
                 
                 Traj.Events.setZSliderValue(z);
             }
@@ -127,8 +125,7 @@ Traj.Player = {
                 idxOld = 0;
 
                 curveArray[k] = curve;
-                lengthTimeArray[k] = lengthTime;
-                pointCoordArray[k] = pointCoord;
+                        pointCoordArray[k] = pointCoord;
                 xArray[k] = x;
                 yArray[k] = y;
                 xOldArray[k] = xOld; 
@@ -139,26 +136,26 @@ Traj.Player = {
                
         }
 
-        Traj.OSC.sendPlay("start");
-        
         var begin = new Date().getTime();
 
-        // check si le curseur du player est à la fin ou non et ajuste le begin de lecture
-        var timeSliderPosition = Traj.Events.getSliderValue();
-        if (timeSliderPosition < lengthTime - 100) {
-            begin -= timeSliderPosition;
-        }
-
         // selection de la courbe la plus longue (pour le timeSlider)
         var longestCurveIdx = Traj.Manager.longestCurveIdxOfPlayedCurve(indexes);
         Traj.Manager.selectCurve(longestCurveIdx);
         var now = new Date().getTime();
         for (var k=0; k<curvesIdx.length;k++) {
             pointCoordArray[k] = Traj.Utils.interpolate(now - begin,curveArray[k]);
-            xOldArray[k] = pointCoordArray[k][1];
-            yOldArray[k] = pointCoordArray[k][2];
+            xOldArray[k] = pointCoordArray[k][0];
+            yOldArray[k] = pointCoordArray[k][1];
         }
 
+        // check si le curseur du player est à la fin ou non et ajuste le begin de lecture
+        var timeSliderPosition = Traj.Events.getSliderValue();
+        if (timeSliderPosition < lengthTime - 100) {
+            begin -= timeSliderPosition;
+        }
+
+         Traj.OSC.sendPlay("start");
+
         (function loopMulti() {
             // get time for new frame
             now = new Date().getTime() - begin;
@@ -174,8 +171,8 @@ Traj.Player = {
                 if (lengthTimeArray[k]) {
                     idxArray[k] = Traj.Utils.findPointIdx(now,curveArray[k]);
                     pointCoordArray[k] = Traj.Utils.interpolate(now,curveArray[k],idxArray[k]);
-                    xArray[k] = pointCoordArray[k][1];
-                    yArray[k] = pointCoordArray[k][2];
+                    xArray[k] = pointCoordArray[k][0];
+                    yArray[k] = pointCoordArray[k][1];
 
                     if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
                         //if (counter == 1) { 
@@ -282,8 +279,8 @@ Traj.Player = {
         var now = new Date().getTime();
         for (var k=0; k<curvesIdx.length;k++) {
             pointCoordArray[k] = Traj.Utils.interpolate(now - begin,curveArray[k]);
-            xOldArray[k] = pointCoordArray[k][1];
-            yOldArray[k] = pointCoordArray[k][2];
+            xOldArray[k] = pointCoordArray[k][0];
+            yOldArray[k] = pointCoordArray[k][1];
         }
 
         (function loopMulti() {
@@ -301,8 +298,8 @@ Traj.Player = {
                 if (lengthTimeArray[k]) {
                     idxArray[k] = Traj.Utils.findPointIdx(now,curveArray[k]);
                     pointCoordArray[k] = Traj.Utils.interpolate(now,curveArray[k],idxArray[k]);
-                    xArray[k] = pointCoordArray[k][1];
-                    yArray[k] = pointCoordArray[k][2];
+                    xArray[k] = pointCoordArray[k][0];
+                    yArray[k] = pointCoordArray[k][1];
 
                     if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
                         //if (counter == 1) { 

WOB/server/interfaces/js/TimedCurve.js

@@ -8,6 +8,7 @@ function TimedCurve(source) {
     this.Y = [];
     this.Z = [];
     this.t = [];
+    this.orientation = [];
     this.color = Traj.Utils.getColorSource(source) || Traj.Utils.getColorSource(1);
     this.sourceNumber = source || Number(1);
 }
@@ -22,7 +23,14 @@ TimedCurve.prototype.addTimedPoint = function (x, y, z, t) {
     this.X.push(x);
     this.Y.push(y);
     this.Z.push(z);
-    this.t.push(Math.floor(t));
+    this.t.push(Math.floor(t))
+    this.orientation.push([270,0,0]);
+}
+
+// write points into currentCurve object
+TimedCurve.prototype.setOrientationAtIndex = function (orientation, idx) {
+
+    this.orientation[idx] = orientation;
 }
 
 TimedCurve.prototype.spaceScale = function (factor) {
@@ -33,7 +41,7 @@ TimedCurve.prototype.spaceScale = function (factor) {
     }
 }
 
-TimedCurve.prototype.sapceScaleAxis = function(factor,vectorAxis,pointAxis) {
+TimedCurve.prototype.spaceScaleAxis = function(factor,vectorAxis,pointAxis) {
     var point = [],
         distance =0,
         dirVector =[],
@@ -48,7 +56,7 @@ TimedCurve.prototype.sapceScaleAxis = function(factor,vectorAxis,pointAxis) {
     }
 }
 
-TimedCurve.prototype.sapceScaleAxisRange = function(factor,vectorAxis,pointAxis,pointsLine) {
+TimedCurve.prototype.spaceScaleAxisRange = function(factor,vectorAxis,pointAxis,pointsLine) {
         var point = [],
             distance =0,
             dirVector =[],
@@ -136,6 +144,7 @@ TimedCurve.prototype.translate = function(x,y,z) {
     }
 }
 
+//TODO: change or not the orientation?
 TimedCurve.prototype.rotate = function(center,angle) {
     var newXY,
         X,
@@ -190,3 +199,17 @@ TimedCurve.prototype.getDistanceToPoint = function(pos) {
         }
         return distance;
 }
+
+TimedCurve.prototype.getClosestPointIndex = function(pos) {
+        var distance = Infinity,
+            tmp, idx = 0;
+
+        for (var k=0;k<this.X.length;k++) {
+            tmp = Traj.Utils.distanceBtwPoints([this.X[k],this.Y[k]],pos);
+            if (tmp<distance) {
+                distance = tmp;
+                idx = k;
+            }
+        }
+        return idx;
+}

WOB/server/interfaces/js/Utils.js

@@ -136,7 +136,7 @@ Traj.Utils = {
 
     simplifyCurve : function(curve,tolerance) {
         var points = [],
-            pt = {};
+        pt = {};
 
         for (var k=0;k<curve.X.length;k++) {
             var pt = {};
@@ -157,25 +157,25 @@ Traj.Utils = {
         return newCurve;
     },
 
-    findPointsIdx : function(maxTime,lastPoint,curve) {
-        var timeSearch = curve.t[lastPoint],
-            pointIdx = lastPoint,
-            pointsIdx = [];
+    findPointsIdx : function(maxTime,idx,curve) {
+        var timeSearch = curve.t[idx],
+        pointIdx = idx,
+        pointsIdx = [];
         while (timeSearch < maxTime) {
             pointIdx = pointIdx+1;
             timeSearch = curve.t[pointIdx];
         }
-        var nbPoints = pointIdx-1 - lastPoint;
+        var nbPoints = pointIdx-1 - idx;
         var points = 0;
         for (points=1; points<nbPoints+1;points++){
-            pointsIdx.push(lastPoint+points);
+            pointsIdx.push(idx+points);
         }
         return pointsIdx;
     }, 
 
     findPointIdx : function(time,curve) {
         var timeSearch = 0,
-            pointIdx = 0;
+        pointIdx = 0;
         while (timeSearch <= time ) {
             pointIdx = pointIdx+1;
             timeSearch = curve.t[pointIdx];
@@ -187,44 +187,43 @@ Traj.Utils = {
         }
     },
 
-    interpolate : function(now,curve,lastPoint) {
-        if (typeof(lastPoint) == 'undefined') {
-            var lastPoint = Traj.Utils.findPointIdx(now,curve); 
+    interpolate : function(now,curve,idx) {
+        if(typeof(idx)=="undefined"){
+            var idx = Traj.Utils.findPointIdx(now,curve);
+        }
+        var lastTime = curve.t[idx],
+            nextTime = 0, x, y, z;
+
+        if (curve.t[idx+1]!==undefined) {
+            nextTime = curve.t[idx+1] 
+            var diffTime = nextTime - lastTime;
+            x = curve.X[idx]*(nextTime-now)/diffTime + curve.X[idx+1]*(now-lastTime)/diffTime;
+            y = curve.Y[idx]*(nextTime-now)/diffTime + curve.Y[idx+1]*(now-lastTime)/diffTime;
+            z = curve.Z[idx]*(nextTime-now)/diffTime + curve.Z[idx+1]*(now-lastTime)/diffTime;
+        } else {
+            x = curve.X[idx];
+            y = curve.Y[idx];
+            z = curve.Z[idx];
         }
 
-            var lastTime = curve.t[lastPoint],
-                nextTime = 0;
-            if (curve.t[lastPoint+1]!==undefined) {
-                nextTime = curve.t[lastPoint+1] 
-                var diffTime = nextTime - lastTime;
-                var x = curve.X[lastPoint]*(nextTime-now)/diffTime + curve.X[lastPoint+1]*(now-lastTime)/diffTime;
-                var y = curve.Y[lastPoint]*(nextTime-now)/diffTime + curve.Y[lastPoint+1]*(now-lastTime)/diffTime;
-                var z = curve.Z[lastPoint]*(nextTime-now)/diffTime + curve.Z[lastPoint+1]*(now-lastTime)/diffTime;
-            } else {
-                var x = curve.X[lastPoint];
-                var y = curve.Y[lastPoint];
-                var z = curve.Z[lastPoint];
-            }
-        
-            var pointCoord = [];
-            pointCoord.push(curve.sourceNumber);
-            pointCoord.push(x);
-            pointCoord.push(y);
-            pointCoord.push(z);
-            pointCoord.push(now);
+        var pointCoord = [];
+        pointCoord.push(x);
+        pointCoord.push(y);
+        pointCoord.push(z);
+        pointCoord.push(now);
 
-            return pointCoord;
+        return pointCoord;
     },
 
     rotate : function(cx, cy, x, y, angle) {
         var radians = (Math.PI / 180) * angle,
-            cos = Math.cos(radians),
-            sin = Math.sin(radians),
-            nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
-            ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
+        cos = Math.cos(radians),
+        sin = Math.sin(radians),
+        nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
+        ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
         return [nx, ny];
     },
-    
+
     sign : function(x) {
         return x/Math.abs(x);
     },

WOB/server/interfaces/js/View.js

@@ -40,14 +40,6 @@ Traj.View = {
                 col = Traj.Utils.HSVtoRGB(h, 0.95, 0.68);
             this.default_colors[i] = Traj.Utils.rgbToHex(col);
         }
-
-        /*
-        for(var i = 0; i< Traj.Manager.NB_SOURCES;i++){
-            var h = (this.start_hue + i*(1/(1+ Traj.Manager.NB_SOURCES)))%1,
-                col = Traj.Utils.HSVtoRGB(h, 0.95, 0.68);
-            this.default_colors[i] = Traj.Utils.rgbToHex(col);
-        }
-        */
     },
 
     FIRST_POINT_SIZE : 5, //pix
@@ -97,6 +89,13 @@ Traj.View = {
         this.dyn_ctx = initializeCanvasContext(this.dyn_canvas,canvas_width,canvas_height);
         this.current_ctx = initializeCanvasContext(this.current_canvas,canvas_width,canvas_height);
 
+        //loads the speaker image as a sprite
+        this.speaker_image.onload = function() {
+            Traj.View.current_repaint();
+        };
+        this.speaker_image.src = 'css/speaker_icon.png';
+
+
         this.minWH = Math.min(this.dyn_canvas.width, this.dyn_canvas.height); 
         this.pixToValue = this.scaleFactor / this.minWH;
 
@@ -153,6 +152,22 @@ Traj.View = {
         ctx.globalAlpha = 1;
     },
 
+    speaker_image : new Image(),
+
+    drawOrientationForCurve : function(ctx, curve, index, linewidth, alpha, withPoint) {
+        var width = 26;
+        for (var i = 0; i < curve.orientation.length; i++) {
+            var orientation = curve.orientation[i],
+                alpha = orientation[0] *Math.PI / 180,
+                pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[i], curve.Y[i]]);
+                ctx.save();
+                ctx.translate(pos[0]-width/2,pos[1]-width/2);
+                ctx.rotate(alpha);
+                ctx.drawImage(this.speaker_image,0,0, width, width);
+                ctx.restore();
+        }; 
+    },
+
     //////////////////////////////////
     //////// BACKGROUND DRAWING///////
     //////////////////////////////////
@@ -209,6 +224,55 @@ Traj.View = {
         this.bg_ctx.font = '10px Georgia';
 
 
+        var pos = Traj.Utils.convertUnitsIntoCanvasPos([1, 0]);
+        this.bg_ctx.fillText(1, pos[0], pos[1]);
+        pos = Traj.Utils.convertUnitsIntoCanvasPos([-1, 0]);
+        this.bg_ctx.fillText(-1, pos[0], pos[1]);
+        pos = Traj.Utils.convertUnitsIntoCanvasPos([0, 1]);
+        this.bg_ctx.fillText(1, pos[0], pos[1]);
+        pos = Traj.Utils.convertUnitsIntoCanvasPos([0, -1]);
+        this.bg_ctx.fillText(-1, pos[0], pos[1]);
+    },
+
+    //draw the axis
+    drawCircularGrid : function() {
+        this.bg_ctx.globalAlpha = 0.6;
+        this.bg_ctx.beginPath();
+        this.bg_ctx.strokeStyle = this.COLOR_SCALE;
+        this.bg_ctx.lineWidth = 1.2;
+        
+        var radius = 1; //in Traj Units
+        var radius_pix = radius * (1 / this.pixToValue);
+
+        var center_x = Math.floor(this.traj_canvas.width / 2);
+        var center_y = Math.floor(this.traj_canvas.height / 2);
+
+        var max_radius_pix = (center_x< center_y)? center_y : center_x;
+
+        //draw from center with a step
+        for (var radius = radius_pix; (radius <= max_radius_pix) && (radius < 5*radius_pix); radius += radius_pix) {
+              this.bg_ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI, false);
+        }
+
+        this.bg_ctx.stroke();
+
+        //draw the axis
+        this.bg_ctx.globalAlpha = 1;
+        this.bg_ctx.beginPath();
+        this.bg_ctx.strokeStyle = this.COLOR_SCALE;
+        this.bg_ctx.lineWidth = 1;
+        this.bg_ctx.moveTo(Math.floor(this.traj_canvas.width / 2), 0);
+        this.bg_ctx.lineTo(Math.floor(this.traj_canvas.width / 2), this.traj_canvas.height);
+        this.bg_ctx.moveTo(0, Math.floor(this.traj_canvas.height / 2));
+        this.bg_ctx.lineTo(this.traj_canvas.width, Math.floor(this.traj_canvas.height / 2));
+        this.bg_ctx.stroke();
+
+
+        //draw labels for 1 units
+        this.bg_ctx.fillStyle = 'black';
+        this.bg_ctx.font = '10px Georgia';
+