Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

performance work for the polygon tool. fixes for curve, line, rect, e…

…llipse. small API change in PaintWeb regarding tool activation. small fix for perf test12 and updated the README file in the perf tests folder.

--HG--
extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%4026
  • Loading branch information...
commit c51d4d94c803ac36ce2d7d74fd18742d1a0f4e57 1 parent ca7c01f
mihai.sucan authored
View
11 CHANGES
@@ -1,3 +1,14 @@
+2009-05-25:
+===========
+
+- Performance and usability work for the polygon tool.
+- Bug fixes for curve, rectangle, line and ellipse tools.
+- A small change to the way tools can cancel the activation.
+- Updated the text tool to use the new activation cancellation. More work on the
+text tool will come.
+- Updated the tests/gsoc2009/0001-perf/README file and a small fix for perf
+test12.
+
2009-05-23:
===========
View
5 TODO
@@ -1,9 +1,9 @@
$Author: Mihai Şucan $
$URL: http://code.google.com/p/paintweb $
-$Date: 2009-05-08 15:10:40 +0300 $
+$Date: 2009-05-25 21:42:38 +0300 $
-TODO 2009-05-08:
+TODO 2009-05-25:
(PaintWeb will be integrated into Moodle and TinyMCE, which means I have started
working an important part of the TODO below: code reorganization.)
@@ -11,7 +11,6 @@ TODO 2009-05-08:
- Complete code reorganization: GUI separation.
- Implement the ColorEditor extension.
- Make shadows work again.
-- Test performance on the XO.
- Application packaging. Currently, all the code is split across multiple files.
For performance reasons, it's best to package all code in a single minified
file.
View
3  src/lang/en.json
@@ -1,5 +1,5 @@
{
- // $Date: 2009-05-21 15:06:16 +0300 $
+ // $Date: 2009-05-25 17:29:44 +0300 $
"errorInitBufferCanvas": "Error: adding the new buffer canvas element failed.",
"errorInitContext": "Error while initializing the canvas context.",
@@ -41,6 +41,7 @@
"lineMousedown": "Hold the Shift key down for vertical/horizontal snapping.",
"pencilActive": "Click and drag to draw.",
"polyActive": "Click anywhere to start drawing a polygon.",
+ "polyAddPoint": "Click to add another point to the polygon.",
"polyMousedown": "Hold the Shift key down for vertical/horizontal snapping.",
"polyEnd": "To end drawing the polygon simply click in the same place as the last point.",
"rectActive": "Click and drag to draw a rectangle.",
View
25 src/paintweb.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-05-23 20:48:07 +0300 $
+ * $Date: 2009-05-25 18:26:38 +0300 $
*/
/**
@@ -51,7 +51,7 @@ function PaintWeb (win_, doc_) {
* PaintWeb build date (YYYYMMDD).
* @type Number
*/
- this.build = 20090523;
+ this.build = 20090525;
/**
* Holds all the PaintWeb configuration.
@@ -1189,14 +1189,25 @@ function PaintWeb (win_, doc_) {
var tool_obj = new tool(_self, ev);
if (!tool_obj) {
- alert(_self.lang.errorToolActivate);
return false;
}
- // The activation of the tool has been cancelled. This can happen via user
- // intervention or due to technical aspects, for example the tool
- // "constructor" determines some APIs are not available.
- if (tool_obj._cancel) {
+ /*
+ * Each tool can implement its own mouse and keyboard events handler.
+ * Additionally, tool objects can implement handlers for the deactivation
+ * and activation events.
+ * Given tool1 is active and tool2 is going to be activated, then the
+ * following event handlers will be called:
+ *
+ * tool2.preActivate
+ * tool1.deactivate
+ * tool2.activate
+ *
+ * In the 'preActivate' event handler you can cancel the tool activation by
+ * returning a value which evaluates to false.
+ */
+
+ if ('preActivate' in tool_obj && !tool_obj.preActivate(ev)) {
tool_obj = null;
return false;
}
View
36 src/tools/curve.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-05-21 15:55:52 +0300 $
+ * $Date: 2009-05-25 18:15:04 +0300 $
*/
/**
@@ -138,16 +138,18 @@ PaintWebInstance.toolAdd('curve', function (app) {
return;
}
+ var n = points.length;
+
// Add the temporary point while the mouse button is down.
if (mouse.buttonDown) {
- if (shiftKey && points.length == 1) {
+ if (shiftKey && n == 1) {
snapXY(points[0][0], points[0][1]);
}
points.push([mouse.x, mouse.y]);
+ n++;
}
- var n = points.length,
- p0 = points[0],
+ var p0 = points[0],
p1 = points[1],
p2 = points[2],
p3 = points[3] || points[2],
@@ -162,6 +164,7 @@ PaintWebInstance.toolAdd('curve', function (app) {
context.clearRect(0, 0, image.width, image.height);
if (!n) {
+ needsRedraw = false;
return;
}
@@ -178,9 +181,12 @@ PaintWebInstance.toolAdd('curve', function (app) {
context.lineWidth = lineWidth;
context.strokeStyle = strokeStyle;
+ needsRedraw = false;
return;
}
+ // Draw the Bézier curve
+
context.beginPath();
context.moveTo(p0[0], p0[1]);
context.bezierCurveTo(
@@ -208,32 +214,42 @@ PaintWebInstance.toolAdd('curve', function (app) {
* @param {Event} ev The DOM Event object.
*/
this.mouseup = function (ev) {
+ var n = points.length;
+
+ // Allow click+mousemove+click, not only mousedown+mousemove+mouseup.
+ // Do this only for the start point.
+ if (n == 1 && mouse.x == points[0][0] && mouse.y == points[0][1]) {
+ mouse.buttonDown = true;
+ return true;
+ }
+
if (timer) {
clearInterval(timer);
timer = null;
}
- var n = points.length;
-
if (n == 1 && ev.shiftKey) {
snapXY(points[0][0], points[0][1]);
}
// We need 4 points to draw the Bézier curve: start, end, and two control
// points.
- if (n < 3) {
- statusShow('curveControlPoint' + n);
+ if (n < 4) {
points.push([mouse.x, mouse.y]);
+ needsRedraw = true;
+ n++;
}
// Make sure the canvas is up-to-date.
shiftKey = ev.shiftKey;
_self.draw();
- if (n == 3) {
+ if (n == 2 || n == 3) {
+ statusShow('curveControlPoint' + (n-1));
+ } else if (n == 4) {
statusShow('curveActive');
- points = [];
layerUpdate();
+ points = [];
}
return true;
View
9 src/tools/ellipse.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-05-20 19:53:02 +0300 $
+ * $Date: 2009-05-25 18:07:12 +0300 $
*/
/**
@@ -171,6 +171,7 @@ PaintWebInstance.toolAdd('ellipse', function (app) {
h = recty1-recty0;
if (!w || !h) {
+ needsRedraw = false;
return;
}
@@ -231,10 +232,13 @@ PaintWebInstance.toolAdd('ellipse', function (app) {
/**
* End the drawing operation, once the user releases the mouse button.
+ *
+ * @param {Event} ev The DOM Event object.
*/
- this.mouseup = function () {
+ this.mouseup = function (ev) {
// Allow click+mousemove, not only mousedown+move+up
if (mouse.x == x0 && mouse.y == y0) {
+ mouse.buttonDown = true;
return true;
}
@@ -243,6 +247,7 @@ PaintWebInstance.toolAdd('ellipse', function (app) {
timer = null;
}
+ shiftKey = ev.shiftKey;
_self.draw();
layerUpdate();
statusShow('ellipseActive');
View
8 src/tools/line.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-05-20 19:53:44 +0300 $
+ * $Date: 2009-05-25 18:08:21 +0300 $
*/
/**
@@ -170,10 +170,13 @@ PaintWebInstance.toolAdd('line', function (app) {
/**
* End the drawing operation, once the user releases the mouse button.
+ *
+ * @param {Event} ev The DOM Event object.
*/
- this.mouseup = function () {
+ this.mouseup = function (ev) {
// Allow users to click then drag, not only mousedown+drag+mouseup.
if (mouse.x == x0 && mouse.y == y0) {
+ mouse.buttonDown = true;
return true;
}
@@ -182,6 +185,7 @@ PaintWebInstance.toolAdd('line', function (app) {
timer = null;
}
+ shiftKey = ev.shiftKey;
_self.draw();
statusShow('lineActive');
layerUpdate();
View
271 src/tools/poly.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-05-13 23:19:34 +0300 $
+ * $Date: 2009-05-25 17:54:46 +0300 $
*/
/**
@@ -33,15 +33,17 @@
// TODO: Merge behaviour with line tool, and improve usability (mousedown and
// mouseup feedback).
PaintWebInstance.toolAdd('poly', function (app) {
- var _self = this,
- config = app.config,
- context = app.buffer.context,
- image = app.image,
- layerUpdate = app.layerUpdate,
- MathAbs = Math.abs,
- mouse = app.mouse,
- snapXY = app.toolSnapXY,
- statusShow = app.statusShow;
+ var _self = this,
+ MathAbs = Math.abs,
+ clearInterval = window.clearInterval,
+ config = app.config,
+ context = app.buffer.context,
+ image = app.image,
+ layerUpdate = app.layerUpdate,
+ mouse = app.mouse,
+ setInterval = window.setInterval,
+ snapXY = app.toolSnapXY,
+ statusShow = app.statusShow;
/**
* Holds the points in the polygon being drawn.
@@ -49,117 +51,120 @@ PaintWebInstance.toolAdd('poly', function (app) {
* @private
* @type Array
*/
- this.points = [];
+ var points = [];
/**
- * Tells if the drawing operation has been started or not.
+ * The interval ID used for invoking the drawing operation every few
+ * milliseconds.
*
* @private
- * @type Boolean
+ * @see PaintWeb.config.toolDrawDelay
*/
- this.started = false;
+ var timer = null;
/**
- * The <code>click</code> event handler.
- *
- * <p>This method adds the points in the polygon shape. If the mouse
- * coordinates are close to the first/last point, then the drawing operation
- * is ended.
+ * Tells if the <kbd>Shift</kbd> key is down or not. This is used by the
+ * drawing function.
*
- * @param {Event} ev The DOM Event object.
- * @returns {Boolean} True if the event handler executed, or false if not.
+ * @private
+ * @type Boolean
+ * @default false
*/
- this.click = function (ev) {
- if (_self.started) {
- if (ev.shiftKey) {
- snapXY(_self.x1, _self.y1);
- }
-
- var diffx1 = MathAbs(mouse.x - _self.x0),
- diffy1 = MathAbs(mouse.y - _self.y0),
- diffx2 = MathAbs(mouse.x - _self.x1),
- diffy2 = MathAbs(mouse.y - _self.y1);
-
- // End the polygon if the new point is close enough to the first/last point.
- if ((diffx1 < 5 && diffy1 < 5) || (diffx2 < 5 && diffy2 < 5)) {
- // Add the start point to complete the polygon shape.
- _self.points.push([_self.x0, _self.y0]);
+ var shiftKey = false;
- _self.mousemove();
- _self.points = [];
- _self.started = false;
-
- statusShow('polyActive');
- layerUpdate();
+ /**
+ * Tells if the drawing canvas needs to be updated or not.
+ *
+ * @private
+ * @type Boolean
+ * @default false
+ */
+ var needsRedraw = false;
- return true;
- }
+ /**
+ * The tool deactivation method, used for clearing the buffer.
+ */
+ this.deactivate = function () {
+ if (timer) {
+ clearInterval(timer);
+ timer = null;
}
- // Remember the last pointer position.
- _self.x1 = mouse.x;
- _self.y1 = mouse.y;
+ if (points.length) {
+ context.clearRect(0, 0, image.width, image.height);
+ }
- if (!_self.started) {
- _self.started = true;
+ needsRedraw = false;
+ points = [];
- // Remember the first pointer position.
- _self.x0 = mouse.x;
- _self.y0 = mouse.y;
+ return true;
+ };
- statusShow('polyMousedown');
+ /**
+ * The <code>mousedown</code> event handler.
+ *
+ * @param {Event} ev The DOM Event object.
+ * @returns {Boolean} True if the event handler executed, or false if not.
+ */
+ this.mousedown = function (ev) {
+ if (points.length == 0) {
+ points.push([mouse.x, mouse.y]);
}
- _self.points.push([mouse.x, mouse.y]);
-
- // Users need to know how to end drawing the polygon.
- if (_self.points.length > 3) {
- statusShow('polyEnd');
+ if (!timer) {
+ timer = setInterval(_self.draw, config.toolDrawDelay);
}
- _self.mousemove();
+ shiftKey = ev.shiftKey;
+ needsRedraw = false;
+
+ statusShow('polyMousedown');
return true;
};
/**
- * The <code>mousemove</code> event handler. This method performs the actual
- * polygon drawing operation.
+ * Store the <kbd>Shift</kbd> key state which is used by the drawing function.
*
* @param {Event} ev The DOM Event object.
- * @returns {Boolean} True if the polygon was drawn, false if not.
*/
this.mousemove = function (ev) {
- var p, i, n = _self.points.length,
- fillStyle = context.fillStyle;
+ shiftKey = ev.shiftKey;
+ needsRedraw = true;
+ };
- if (!_self.started || !n || (n == 1 && !ev)) {
- return false;
+ /**
+ * Draw the polygon.
+ *
+ * @see PaintWeb.config.toolDrawDelay
+ */
+ this.draw = function (ev) {
+ if (!needsRedraw) {
+ return;
}
- // Store the last mouse.x and mouse.y, for later use.
- if (ev) {
- _self.ex = mouse.x;
- _self.ey = mouse.y;
+ var n = points.length;
+
+ if (!n || (n == 1 && !mouse.buttonDown)) {
+ needsRedraw = false;
+ return;
}
// Snapping on the X/Y axis for the current point (if available).
- if (ev && ev.shiftKey) {
- snapXY(_self.x1, _self.y1);
+ if (mouse.buttonDown && shiftKey) {
+ snapXY(points[n-1][0], points[n-1][1]);
}
context.clearRect(0, 0, image.width, image.height);
context.beginPath();
- context.moveTo(_self.points[0][0], _self.points[0][1]);
+ context.moveTo(points[0][0], points[0][1]);
// Draw the path of the polygon
- for (i = 0; i < n; i++) {
- p = _self.points[i];
- context.lineTo(p[0], p[1]);
+ for (var i = 0; i < n; i++) {
+ context.lineTo(points[i][0], points[i][1]);
}
- // If there's a current event, then draw the temporary point as well.
- if (ev) {
+ if (mouse.buttonDown) {
context.lineTo(mouse.x, mouse.y);
}
@@ -167,35 +172,73 @@ PaintWebInstance.toolAdd('poly', function (app) {
context.fill();
}
+ // In the case where we only have a straight line, draw a stroke even if no
+ // stroke should be drawn, such that the user has better visual feedback.
if (config.shapeType != 'fill' || n == 1) {
- // In the case where we only have a straight line, draw a stroke even if no stroke should be drawn, such that the user has better visual feedback.
+ context.stroke();
+ }
+
+ context.closePath();
+
+ needsRedraw = false;
+ };
- if (n == 1 && ev && config.shapeType == 'fill') {
- var strokeStyle = context.strokeStyle,
- lineWidth = context.lineWidth;
+ /**
+ * The <code>mouseup</code> event handler.
+ *
+ * @param {Event} ev The DOM Event object.
+ * @returns {Boolean} True if the event handler executed, or false if not.
+ */
+ this.mouseup = function (ev) {
+ var n = points.length;
+
+ // Allow click+mousemove+click, not only mousedown+mousemove+mouseup.
+ // Do this only for the first point in the polygon.
+ if (n == 1 && mouse.x == points[n-1][0] && mouse.y == points[n-1][1]) {
+ mouse.buttonDown = true;
+ return true;
+ }
- context.strokeStyle = context.fillStyle;
- context.lineWidth = 1;
- context.stroke();
- context.strokeStyle = strokeStyle;
- context.lineWidth = lineWidth;
- } else {
- context.stroke();
- }
+ if (timer) {
+ clearInterval(timer);
+ timer = null;
}
- context.closePath();
+ shiftKey = ev.shiftKey;
+ needsRedraw = true;
+
+ if (ev.shiftKey) {
+ snapXY(points[n-1][0], points[n-1][1]);
+ }
- // Draw blue squares for each point to provide live feedback for the user. The squares will not show when the final drawing is complete.
- if (ev) {
- context.fillStyle = '#0000ff';
- for (i = 0; i < n; i++) {
- p = _self.points[i];
- context.fillRect(p[0], p[1], 4, 4);
- }
- context.fillStyle = fillStyle;
+ var diffx1 = MathAbs(mouse.x - points[0][0]),
+ diffy1 = MathAbs(mouse.y - points[0][1]),
+ diffx2 = MathAbs(mouse.x - points[n-1][0]),
+ diffy2 = MathAbs(mouse.y - points[n-1][1]);
+
+ // End the polygon if the new point is close enough to the first/last point.
+ if ((diffx1 < 5 && diffy1 < 5) || (diffx2 < 5 && diffy2 < 5)) {
+ // Add the start point to complete the polygon shape.
+ points.push(points[0]);
+
+ _self.draw();
+ points = [];
+
+ statusShow('polyActive');
+ layerUpdate();
+
+ return true;
+ }
+
+ if (n > 3) {
+ statusShow('polyEnd');
+ } else {
+ statusShow('polyAddPoint');
}
+ points.push([mouse.x, mouse.y]);
+ _self.draw();
+
return true;
};
@@ -206,38 +249,42 @@ PaintWebInstance.toolAdd('poly', function (app) {
* end the drawing operation.
*
* @param {Event} ev The DOM Event object.
+ *
* @returns {Boolean} True if the keyboard shortcut was recognized, or false
* if not.
*/
this.keydown = function (ev) {
- if (!_self.started || (ev.kid_ != 'Escape' && ev.kid_ != 'Enter')) {
+ var n = points.length;
+ if (!n || (ev.kid_ != 'Escape' && ev.kid_ != 'Enter')) {
return false;
}
+ if (timer) {
+ clearInterval(timer);
+ timer = null;
+ }
+ mouse.buttonDown = false;
+
if (ev.kid_ == 'Escape') {
context.clearRect(0, 0, image.width, image.height);
+ needsRedraw = false;
} else if (ev.kid_ == 'Enter') {
- // Add the point of the last mousemove event, and the start point, to complete the polygon.
- _self.points.push([_self.ex, _self.ey]);
- _self.points.push([_self.x0, _self.y0]);
- _self.mousemove();
-
+ // Add the point of the last mousemove event, and the start point, to
+ // complete the polygon.
+ points.push([mouse.x, mouse.y]);
+ points.push(points[0]);
+ needsRedraw = true;
+ _self.draw();
layerUpdate();
}
- _self.points = [];
- _self.started = false;
-
+ points = [];
statusShow('polyActive');
return true;
};
-
- // TODO: check this ...
- return true;
});
// vim:set spell spl=en fo=wan1croqlt tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
-
View
9 src/tools/rect.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-05-20 19:52:37 +0300 $
+ * $Date: 2009-05-25 18:07:48 +0300 $
*/
/**
@@ -159,6 +159,7 @@ PaintWebInstance.toolAdd('rect', function (app) {
h = MathAbs(mouse.y - y0);
if (!w || !h) {
+ needsRedraw = false;
return;
}
@@ -190,10 +191,13 @@ PaintWebInstance.toolAdd('rect', function (app) {
/**
* End the drawing operation, once the user releases the mouse button.
+ *
+ * @param {Event} ev The DOM Event object.
*/
- this.mouseup = function () {
+ this.mouseup = function (ev) {
// Allow click+mousemove, not only mousedown+move+up
if (mouse.x == x0 && mouse.y == y0) {
+ mouse.buttonDown = true;
return true;
}
@@ -202,6 +206,7 @@ PaintWebInstance.toolAdd('rect', function (app) {
timer = null;
}
+ shiftKey = ev.shiftKey;
_self.draw();
layerUpdate();
statusShow('rectActive');
View
49 src/tools/text.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-05-16 21:24:54 +0300 $
+ * $Date: 2009-05-25 18:31:57 +0300 $
*/
/**
@@ -45,12 +45,6 @@ PaintWebInstance.toolAdd('text', function (app) {
statusShow = app.statusShow,
toolActivate = app.toolActivate;
- if (!context.fillText || !context.strokeText) {
- alert(app.lang.errorTextUnsupported);
- this._cancel = true;
- return false;
- }
-
/**
* Holds the previous tool ID.
*
@@ -59,19 +53,36 @@ PaintWebInstance.toolAdd('text', function (app) {
*/
var prevTool = app.tool._id;
- // Reset mouse coordinates in the center of the image, for the purpose of
- // placing the text there.
- mouse.x = Math.round(image.width / 2);
- mouse.y = Math.round(image.height / 2);
+ /**
+ * Tool preactivation code. This method is invoked when the user attempts to
+ * activate the text tool.
+ *
+ * @returns {Boolean} True if the tool can be activated successfully, or false
+ * if not.
+ */
+ this.preActivate = function () {
+ if (!context.fillText || !context.strokeText) {
+ alert(app.lang.errorTextUnsupported);
+ return false;
+ }
+
+ // Reset mouse coordinates in the center of the image, for the purpose of
+ // placing the text there.
+ mouse.x = Math.round(image.width / 2);
+ mouse.y = Math.round(image.height / 2);
- // Show the text options.
- elems.textOptions.className = '';
+ // Show the text options.
+ elems.textOptions.className = '';
+
+ return true;
+ };
/**
* Setup the <code>textUpdate()</code> event handler for several inputs. This
* allows the text rendering to be updated automatically when some value
* changes.
*
+ * @private
* @param {String} act The action to perform: 'add' or 'remove' the event
* listeners.
*/
@@ -139,10 +150,11 @@ PaintWebInstance.toolAdd('text', function (app) {
/**
* The tool activation code. This runs after the text tool is constructed, and
- * after the previous tool has been destructed. This method simply references
- * the <code>textUpdate()</code> method.
+ * after the previous tool has been deactivated.
*/
- this.activate = this.textUpdate;
+ this.activate = function () {
+ setup('add');
+ };
/**
* The tool deactivation simply consists of removing the event listeners added
@@ -177,11 +189,6 @@ PaintWebInstance.toolAdd('text', function (app) {
return true;
};
-
- setup('add');
-
- // TODO: check this..
- return true;
});
// vim:set spell spl=en fo=wan1croqlt tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
View
33 tests/gsoc2009/0001-perf/README
@@ -1,5 +1,5 @@
$URL: http://code.google.com/p/paintweb $
-$Date: 2009-05-14 13:08:20 +0300 $
+$Date: 2009-05-25 15:07:15 +0300 $
Minimal tests for the purpose of optimizing drawing on the OLPC XO.
@@ -802,6 +802,35 @@ Performance-wise the drawing feels the same in test10, on both test machines.
The test runs about 0.3 seconds slower on the XO, both in Opera and Firefox.
+test12:
+------
+
+The Gecko-based browser on the XO renders pages on 134 DPI, instead of the
+default 96 DPI. This means that all elements in the page are scaled up using
+a bilinear filter. This is what makes painting on the canvas feel very sluggish.
+
+Test12 is the same as test11, but with additional code in the initialization
+function. This code down-scales the canvas element such that Gecko cancels the
+scaling.
+
+In Gecko 1.9.1 the DPI can be detected using CSS 3 Media Queries.
+In Gecko 1.9.0 the DPI cannot be detected. For the XO I am required to do
+user-agent sniffing. I set the default 134 DPI.
+
+Additionally, normal Gecko builds only scale pages using integer factors - like
+1, 2, 3. However, Gecko on the XO is patched to scale pages using a non-integer
+factor. Yay! :)
+
+Opera has no support for rendering pages using some DPI value other than 96. It
+only implements zoom, thus Opera's zoom level is detected and cancelled. The
+cancellation of the zoom level semi-works. Opera doesn't support CSS floating
+point pixel values - only integers.
+
+Zoom in Gecko is harder to determine, so the script does not try it.
+
+This work has been integrated into PaintWeb.
+
+
Conclusions
===========
@@ -821,7 +850,7 @@ performance impact on all rendering of images - bilinear image resampling is
used.
We need to avoid such resizing of the canvas element, or Browse.xo must somehow
-become faster when scaling images.
+become faster when scaling images. Test12 avoids the canvas element scaling.
If layout.css.dpi is set to 96, drawing with the touchpad is live/real-time on
the XO. It's even faster than Opera 10! Lovely. ;)
View
18 tests/gsoc2009/0001-perf/test12.js
@@ -2,7 +2,7 @@
* © 2009 ROBO Design
* http://www.robodesign.ro
*
- * $Date: 2009-05-23 20:43:34 +0300 $
+ * $Date: 2009-05-25 21:48:09 +0300 $
*/
function tool_pencil (app) {
@@ -111,8 +111,8 @@ var PaintWebInstance = new (function () {
scale = _self.win.innerHeight / height;
scale = MathRound(scale * 10) / 10;
- console.log('scale ' + scale + ' innerHeight ' + _self.win.innerHeight +
- ' height ' + height);
+ /*console.log('scale ' + scale + ' innerHeight ' + _self.win.innerHeight +
+ ' height ' + height);*/
} else if (width && !isNaN(width) && width != dpiOptimal) {
// Page DPI detection. This only works in Gecko 1.9.1.
@@ -121,7 +121,7 @@ var PaintWebInstance = new (function () {
// The scaling factor is the same as in Gecko.
scale = Math.floor(dpiLocal / dpiOptimal);
- console.log('dpiLocal ' + dpiLocal + ' scale ' + scale);
+ //console.log('dpiLocal ' + dpiLocal + ' scale ' + scale);
} else if (_self.win.navigator.userAgent.indexOf('olpc') != -1) {
// Support for the default Gecko included on the OLPC XO-1 system.
@@ -137,19 +137,19 @@ var PaintWebInstance = new (function () {
scale = appUnitsPerCSSPixel / Math.floor(appUnitsPerDevPixel);
- console.log('dpiLocal ' + dpiLocal + ' scale ' + scale +
+ /*console.log('dpiLocal ' + dpiLocal + ' scale ' + scale +
' devPixelsPerCSSPixel ' + devPixelsPerCSSPixel +
- ' appUnitsPerDevPixel ' + appUnitsPerDevPixel);
+ ' appUnitsPerDevPixel ' + appUnitsPerDevPixel);*/
}
if (scale != 1) {
image.zoom = 1 / scale;
- var sw = canvas.width / scale;
+ var sw = canvas.width / scale,
sh = canvas.height / scale;
- console.log('w ' + canvas.width + ' h ' + canvas.height + ' sw ' + sw +
- ' sh ' + sh);
+ /*console.log('w ' + canvas.width + ' h ' + canvas.height + ' sw ' + sw +
+ ' sh ' + sh);*/
canvas.style.width = sw + 'px';
canvas.style.height = sh + 'px';
Please sign in to comment.
Something went wrong with that request. Please try again.