1.1 --- a/canvas/canvas.css
1.2 +++ b/canvas/canvas.css
1.3 @@ -19,24 +19,6 @@
1.4 border-color: black;
1.5 border-width: thin;
1.6 }
1.7 -
1.8 -
1.9 -
1.10 -
1.11 -#frame1
1.12 -{
1.13 - background-color: rgb(178,251,245);;
1.14 -}
1.15 -
1.16 -#frame2
1.17 -{
1.18 - background-color: rgb(157,255,144);
1.19 -}
1.20 -
1.21 -#frame3
1.22 -{
1.23 - background-color: rgb(255,255,144);
1.24 -}
1.25
1.26
1.27 #canvas
1.28 @@ -44,44 +26,8 @@
1.29 margin:10px;
1.30 }
1.31
1.32 -
1.33 -#tabs
1.34 -{
1.35 - width:50px;
1.36 - height:400px;
1.37 - position: absolute;
1.38 - /*margin-left:10px;*/
1.39 - /*margin-top:10px;*/
1.40 -}
1.41 -
1.42 .imtab
1.43 {
1.44 padding-top:10px;
1.45 }
1.46
1.47 -.tab
1.48 -{
1.49 - padding-top=0px;
1.50 - height:100px;
1.51 - background-color: gray;
1.52 - border-style:solid;
1.53 - border-color:black;
1.54 - border-width:thin;
1.55 - text-align:center;
1.56 -}
1.57 -
1.58 -#tab1
1.59 -{
1.60 - background-color: rgb(178,251,245);;
1.61 -}
1.62 -
1.63 -#tab2
1.64 -{
1.65 - background-color: rgb(157,255,144);
1.66 -}
1.67 -
1.68 -#tab3
1.69 -{
1.70 - background-color: rgb(255,255,144);
1.71 -}
1.72 -
2.1 --- a/canvas/canvas.html
2.2 +++ b/canvas/canvas.html
2.3 @@ -10,17 +10,18 @@
2.4 </style>
2.5 </head>
2.6 <body onLoad="init();">
2.7 -<div id="fleches">
2.8 - <img onClick="flechehaut();init();" onKeyPress="" class="imtab" src="images\flechehaut.png" BORDER="0">
2.9 - <img onClick="flechebas();init();" class="imtab" src="images\flechebas.png" BORDER="0">
2.10 - <img onClick="flechedroite();init();" class="imtab" src="images\flechedroite.png" BORDER="0">
2.11 - <img onClick="flechegauche();init();" class="imtab" src="images\flechegauche.png" BORDER="0">
2.12 - <img onClick="plus();init();" class="imtab" src="images\plus.png" BORDER="0">
2.13 - <img onClick="moins();init();" class="imtab" src="images\moins.png" BORDER="0">
2.14 +<div id="arrow">
2.15 + <img onClick="moveVertically(1);" onKeyPress="" class="imtab" src="images\flechehaut.png">
2.16 + <img onClick="moveVertically(-1);" class="imtab" src="images\flechebas.png">
2.17 + <img onClick="moveHorizontally(-1);" class="imtab" src="images\flechegauche.png">
2.18 + <img onClick="moveHorizontally(1);" class="imtab" src="images\flechedroite.png">
2.19 + <img onClick="changeZoomCoef(1);" class="imtab" src="images\plus.png">
2.20 + <img onClick="changeZoomCoef(-1);" class="imtab" src="images\moins.png">
2.21 + <img onClick="resetView();" class="imtab" src="images\firstview.png">
2.22 </div>
2.23
2.24 <div class="fram" id="frame1">
2.25 -<canvas id="canvas" width="400" height="400"></canvas>
2.26 +<canvas id="canvas" width="550" height="400"></canvas>
2.27 </div>
2.28
2.29
3.1 --- a/canvas/canvas.js
3.2 +++ b/canvas/canvas.js
3.3 @@ -1,154 +1,206 @@
3.4 const frameH = 500;
3.5 const frameV = 400;
3.6
3.7 -const deplFleche = 10;
3.8 -const zoomPlus = 1.2;
3.9 -const zoomMoins = 0.8;
3.10 +////
3.11 +var ci = Components.interfaces ;
3.12
3.13 -// tab of Rectangle
3.14 -var tableauDeRect = new Array();
3.15 -var rect0 = [30,30,60,40];
3.16 -var rect1 = [290,230,20,40];
3.17 -var rect2 = [380,360,30,30];
3.18 -var rect3 = [150,150,40,40];
3.19 -tableauDeRect[0] = rect0;
3.20 -tableauDeRect[1] = rect1;
3.21 -tableauDeRect[2] = rect2;
3.22 -tableauDeRect[3] = rect3;
3.23 +var myStatus = Components.classes["@mozilla.org/observer-service;1"]
3.24 + .getService(Components.interfaces.nsIObserverService);
3.25 +
3.26 +var myStatusSpecifications = Components.classes["@instantbird.org/purple/core;1"]
3.27 + .getService(Components.interfaces.purpleICoreService);
3.28 +
3.29 +var buddiesActivity = Components.classes["@mozilla.org/observer-service;1"]
3.30 + .getService(Components.interfaces.nsIObserverService);
3.31 +////
3.32
3.33
3.34
3.35 +const arrowMove = 10;
3.36 +const zoomStep = 0.2;
3.37
3.38 -// tab of Text
3.39 -var tableauDeText = new Array();
3.40 -var text0 = ["text1",90,70];
3.41 -var text1 = ["text2",300,130];
3.42 -tableauDeText[0] = text0;
3.43 -tableauDeText[1] = text1;
3.44 -var tableauDeTextBase = tableauDeText;
3.45 +// horizontal length of displacement
3.46 +var moveHor = 0 ;
3.47 +// vertical length of displacement
3.48 +var moveVer = 0 ;
3.49 +// zoom coefficient
3.50 +var zoomCoef = 1;
3.51 +
3.52 +// Array of Rectangle
3.53 +//var arrayOfRect = new Array();
3.54 +
3.55 +//Array of Circle - my status
3.56 +var arrayCircleMyStatus = new Array();
3.57 +var lengthMyStatus = 0;
3.58 +
3.59 +
3.60 +
3.61 +// Array of Text
3.62 +//var arrayOfText = new Array();
3.63 +
3.64 +//position for circles corresponding to myStatus
3.65 +var myStatusX = 10;
3.66 +var myStatusY = 10;
3.67 +
3.68 +//X-position for square corresponding to buddies notifications
3.69 +var buddiesStatusX = 10;
3.70 +var buddiesSignedOnOff = 10;
3.71
3.72 // move the map
3.73 -function flechedroite()
3.74 +// -1 - left arrow - move to the right
3.75 +// 1 - right arrow - move to the left
3.76 +function moveHorizontally (i)
3.77 {
3.78 - for (var i=0; i < tableauDeRect.length; i++){
3.79 - tableauDeRect[i][0]=tableauDeRect[i][0]-deplFleche;
3.80 - }
3.81 -
3.82 - for (var i=0; i < tableauDeText.length; i++){
3.83 - tableauDeText[i][1]=tableauDeText[i][1]-deplFleche;
3.84 - }
3.85 -
3.86 - drawScene();
3.87 -}
3.88 -
3.89 -// move the map
3.90 -function flechegauche()
3.91 -{
3.92 - for (var i=0; i < tableauDeRect.length; i++){
3.93 - tableauDeRect[i][0]=tableauDeRect[i][0]+deplFleche;
3.94 - }
3.95 -
3.96 - for (var i=0; i < tableauDeText.length; i++){
3.97 - tableauDeText[i][1]=tableauDeText[i][1]+deplFleche;
3.98 - }
3.99 -
3.100 + moveHor += ( arrowMove * i );
3.101 drawScene();
3.102 }
3.103 -
3.104 -// move the map
3.105 -function flechebas()
3.106 +// -1 - bottom arrow
3.107 +// 1 - top arrow
3.108 +function moveVertically(i)
3.109 {
3.110 - for (var i=0; i < tableauDeRect.length; i++){
3.111 - tableauDeRect[i][1]=tableauDeRect[i][1]-deplFleche;
3.112 - }
3.113 -
3.114 - for (var i=0; i < tableauDeText.length; i++){
3.115 - tableauDeText[i][2]=tableauDeText[i][2]-deplFleche;
3.116 - }
3.117 -
3.118 - drawScene();
3.119 -}
3.120 -
3.121 -// move the map
3.122 -function flechehaut()
3.123 -{
3.124 - for (var i=0; i < tableauDeRect.length; i++){
3.125 - tableauDeRect[i][1]=tableauDeRect[i][1]+deplFleche;
3.126 - }
3.127 -
3.128 - for (var i=0; i < tableauDeText.length; i++){
3.129 - tableauDeText[i][2]=tableauDeText[i][2]+deplFleche;
3.130 - }
3.131 -
3.132 + moveVer += ( arrowMove * i );
3.133 drawScene();
3.134 }
3.135
3.136 // zoom the map
3.137 -function plus()
3.138 +// 1 - zoom plus
3.139 +// -1 - zoom minus
3.140 +function changeZoomCoef(i)
3.141 {
3.142 - for (var i=0; i < tableauDeRect.length; i++){
3.143 - for ( var j=0 ; j<tableauDeRect[i].length; j++){
3.144 - tableauDeRect[i][j]=tableauDeRect[i][j]*zoomPlus;
3.145 - }
3.146 - }
3.147 -
3.148 - for (var i=0; i < tableauDeText.length; i++){
3.149 - for ( var j=1 ; j<tableauDeRect[i].length; j++){
3.150 - tableauDeText[i][j]=tableauDeText[i][j]*zoomPlus;
3.151 - }
3.152 - }
3.153 -
3.154 + zoomCoef += ( i * zoomStep );
3.155 drawScene();
3.156 }
3.157
3.158 +function resetView()
3.159 +{
3.160 + moveHor = 0 ;
3.161 + moveVer = 0 ;
3.162 + zoomCoef = 1;
3.163 + drawScene();
3.164 +}
3.165
3.166 -function moins()
3.167 +function drawCircle (absc, ord, size, color)
3.168 {
3.169 - for (var i=0; i < tableauDeRect.length; i++){
3.170 - for ( var j=0 ; j < tableauDeRect[i].length; j++){
3.171 - tableauDeRect[i][j]=tableauDeRect[i][j]*zoomMoins;
3.172 - }
3.173 + ctx.fillStyle = color;
3.174 + ctx.beginPath();
3.175 + ctx.arc(absc, ord, size, 0, Math.PI*2, false);
3.176 + ctx.fill();
3.177 +}
3.178 +
3.179 +function drawScene()
3.180 +{
3.181 + // Fill the background
3.182 + ctx.fillStyle = "white";
3.183 + ctx.fillRect(0,0,550,400);
3.184 + /*
3.185 + for (var i = 0 ; i < arrayOfRect.length ; i++)
3.186 + {
3.187 + ctx.fillStyle = "orange";
3.188 + ctx.fillRect(
3.189 + ( arrayOfRect[i][0] + moveHor ) * zoomCoef ,
3.190 + ( arrayOfRect[i][1] + moveVer ) * zoomCoef ,
3.191 + ( arrayOfRect[i][2] * zoomCoef ),
3.192 + ( arrayOfRect[i][3] * zoomCoef )
3.193 + );
3.194 }
3.195
3.196 - for (var i=0; i < tableauDeText.length; i++){
3.197 - for ( var j=1 ; j<tableauDeRect[i].length; j++){
3.198 - tableauDeText[i][j]=tableauDeText[i][j]*zoomMoins;
3.199 - }
3.200 + for (var i = 0; i < arrayOfText.length; i++)
3.201 + {
3.202 + ctx.fillStyle = "black";
3.203 + ctx.fillText(
3.204 + arrayOfText[i][0] ,
3.205 + ( arrayOfText[i][1] + moveHor ) * zoomCoef ,
3.206 + ( arrayOfText[i][2] + moveVer ) * zoomCoef
3.207 + );
3.208 + }
3.209 + */
3.210 + ctx.fillStyle = "yellow";
3.211 +
3.212 +
3.213 + for (var i = 0; i < arrayCircleMyStatus.length; i++)
3.214 + {
3.215 + drawCircle ( (arrayCircleMyStatus[i][0] + moveHor ) * zoomCoef ,
3.216 + (arrayCircleMyStatus[i][1] + moveVer ) * zoomCoef,
3.217 + arrayCircleMyStatus[i][2] * zoomCoef,
3.218 + arrayCircleMyStatus[i][3]
3.219 + );
3.220 }
3.221
3.222 - drawScene();
3.223 +
3.224 }
3.225
3.226
3.227 +var myStatusObserver =
3.228 +{
3.229 +observe: function(aObject, aTopic, aData) {
3.230 + if (aTopic == "status-changed"){
3.231 + var color;
3.232 + if(myStatusSpecifications.currentStatusType == ci.purpleICoreService.STATUS_AVAILABLE){
3.233 + color = "green";
3.234 + } else if (myStatusSpecifications.currentStatusType == ci.purpleICoreService.STATUS_UNAVAILABLE){
3.235 + color = "red";
3.236 + } else if (myStatusSpecifications.currentStatusType == ci.purpleICoreService.STATUS_AWAY){
3.237 + color = "orange";
3.238 + }
3.239 + arrayCircleMyStatus[lengthMyStatus] = [myStatusX, myStatusY, 5, color];
3.240 + myStatusX+=20;
3.241 + lengthMyStatus++;
3.242 + drawScene();
3.243 + }
3.244 + }
3.245 +};
3.246
3.247 -function drawScene()
3.248 +
3.249 +var buddiesStatusObserver =
3.250 {
3.251 - for (var i=0; i < tableauDeRect.length; i++){
3.252 - ctx.fillStyle = "orange";
3.253 - ctx.fillRect(tableauDeRect[i][0],tableauDeRect[i][1],tableauDeRect[i][2],tableauDeRect[i][3]);
3.254 +observe: function(aObject, aTopic, aData) {
3.255 + if (aTopic == "buddy-away"){
3.256 + ctx.fillStyle = "green";
3.257 + ctx.fillRect(buddiesStatusX,30,10,10);
3.258 + buddiesStatusX+=20;
3.259 + }
3.260 }
3.261 -
3.262 - for (var i=0; i < tableauDeText.length; i++){
3.263 - ctx.fillStyle = "black";
3.264 - ctx.fillText(tableauDeText[i][0],tableauDeText[i][1],tableauDeText[i][2]);
3.265 +};
3.266 +
3.267 +
3.268 +var buddiesSignedOnObserver =
3.269 +{
3.270 +observe: function(aObject, aTopic, aData) {
3.271 + if (aTopic == "buddy-signed-on"){
3.272 + ctx.fillStyle = "yellow";
3.273 + ctx.fillRect(buddiesSignedOnOff,60,10,10);
3.274 + buddiesSignedOnOff+=20;
3.275 + }
3.276 }
3.277 -}
3.278 +};
3.279 +
3.280 +var buddiesSignedOffObserver =
3.281 +{
3.282 +observe: function(aObject, aTopic, aData) {
3.283 + if (aTopic == "buddy-signed-off"){
3.284 + ctx.fillStyle = "blue";
3.285 + ctx.fillRect(buddiesSignedOnOff,60,10,10);
3.286 + buddiesSignedOnOff+=20;
3.287 + }
3.288 + }
3.289 +};
3.290 +
3.291
3.292 function init()
3.293 {
3.294 - ctx = document.getElementById("canvas").getContext("2d");
3.295 -
3.296 -
3.297 - // Fill the background
3.298 - ctx.fillStyle = "cyan";
3.299 - ctx.fillRect(0,0,400,400);
3.300 -
3.301 - drawScene();
3.302 + ctx = document.getElementById("canvas").getContext("2d");
3.303 +
3.304 + drawScene();
3.305
3.306 -
3.307 - Components.classes["@mozilla.org/observer-service;1"]
3.308 - .getService(Components.interfaces.nsIObserverService)
3.309 - .addObserver(msgObserver, "new-text", false);
3.310 -
3.311 +
3.312 + //oberver : "status-changed"
3.313 + myStatus.addObserver(myStatusObserver, "status-changed" , false);
3.314 + //observer : "buddy-away"
3.315 + buddiesActivity.addObserver(buddiesStatusObserver, "buddy-away" , false);
3.316 + //observer : "buddy-signed-on"
3.317 + buddiesActivity.addObserver(buddiesSignedOnObserver, "buddy-signed-on" , false);
3.318 + //observer : "buddy-signed-off"
3.319 + buddiesActivity.addObserver(buddiesSignedOffObserver, "buddy-signed-off" , false);
3.320 +
3.321 }
3.322