[Personalrobots-commit] SF.net SVN: personalrobots:[23776] pkg/trunk/sandbox/web/webui/src/webui/ mod/webui/jslib/pr2_widgets.js

[<rob...@us...>]

Revision: 23776
          http://personalrobots.svn.sourceforge.net/personalrobots/?rev=23776&view=rev
Author:   rob_wheeler
Date:     2009-09-03 20:07:37 +0000 (Thu, 03 Sep 2009)

Log Message:
-----------
Call draw on image load instead of just during init

Modified Paths:
--------------
    pkg/trunk/sandbox/web/webui/src/webui/mod/webui/jslib/pr2_widgets.js

Modified: pkg/trunk/sandbox/web/webui/src/webui/mod/webui/jslib/pr2_widgets.js
===================================================================
--- pkg/trunk/sandbox/web/webui/src/webui/mod/webui/jslib/pr2_widgets.js	2009-09-03 19:59:58 UTC (rev 23775)
+++ pkg/trunk/sandbox/web/webui/src/webui/mod/webui/jslib/pr2_widgets.js	2009-09-03 20:07:37 UTC (rev 23776)
@@ -2,45 +2,39 @@
   initialize: function(domobj) {
     this.domobj = domobj;
     this.topics = [domobj.getAttribute("topic")];
+    this.img = new Element('img', {'src' : '/webui/webui/templates/images/toolbar/battery_gray.png', 'width': 41, 'height': 16});
+    this.canvas = new Element('canvas', {'width': this.img.width, 'height': this.img.height});
+    this.domobj.appendChild(this.canvas);
+    this.span = new Element('span', {'style':"font-size:11px;position:relative;top:-3"});
+    this.domobj.appendChild(this.span);
+    this.img.onload = this.draw.bind(this);
   },
 
   draw: function() {
-    var canvas = this.domobj.childNodes[0];
-    var span = this.domobj.childNodes[1];
-    var ctx = canvas.getContext('2d');  
-    ctx.drawImage(this.img,0,0);  
-    var width = 32 * this.percent / 100;
-    ctx.beginPath();  
-    ctx.moveTo(38-width, 1);  
-    ctx.lineTo(38, 1);  
-    ctx.lineTo(40, 4);  
-    ctx.lineTo(40,11);  
-    ctx.lineTo(38,15);  
-    ctx.lineTo(38-width,15);  
-    ctx.lineTo(38-width,1);  
-    if (this.percent > 30)
-      ctx.fillStyle = "rgb(0, 200, 0)";
-    else
-      ctx.fillStyle = "rgb(200, 0, 0)";
-    ctx.fill();  
-    span.innerHTML = ' ' + this.percent + '%';
+    if (this.img.complete) {
+      var ctx = this.canvas.getContext('2d');  
+      ctx.drawImage(this.img,0,0);  
+      var width = 32 * this.percent / 100;
+      ctx.beginPath();  
+      ctx.moveTo(38-width, 1);  
+      ctx.lineTo(38, 1);  
+      ctx.lineTo(40, 4);  
+      ctx.lineTo(40,11);  
+      ctx.lineTo(38,15);  
+      ctx.lineTo(38-width,15);  
+      ctx.lineTo(38-width,1);  
+      if (this.percent > 30)
+        ctx.fillStyle = "rgb(0, 200, 0)";
+      else
+        ctx.fillStyle = "rgb(200, 0, 0)";
+      ctx.fill();  
+    }
+    this.span.innerHTML = ' ' + this.percent + '%';
   },
 
   init: function() {
-    this.img = new Image();  
-    this.img.src = '/webui/webui/templates/images/toolbar/battery_gray.png';  
-    this.domobj.innerHTML = '<canvas width=41 height=16></canvas><span style="font-size:11px;position:relative;top:-3"></span>'
-
-    var width = this.domobj.getAttribute("width");
-    if(!width) width=120;
-    else width = parseInt(width);
-
-    var height = this.domobj.getAttribute("height");
-    if(!height) height=120;
-    else height = parseInt(height);
-
     this.percent = 0;
-    //this.draw();
+    this.draw();
   },
 
   receive: function(topic, msg) {


This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.