You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@wookie.apache.org by sc...@apache.org on 2011/10/21 15:42:16 UTC
svn commit: r1187338 - in /incubator/wookie/trunk/widgets/butterfly:
index.html scripts/butterfly.js
Author: scottbw
Date: Fri Oct 21 13:42:15 2011
New Revision: 1187338
URL: http://svn.apache.org/viewvc?rev=1187338&view=rev
Log:
Some improvements of the Butterfly widget for the Android browser, in that it at least the widget occupies the screen correctly and draws the shapes. However, the HTML5 canvas clip() function still doesn't work as intended and so drawing on Android doesn't work yet.
Modified:
incubator/wookie/trunk/widgets/butterfly/index.html
incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js
Modified: incubator/wookie/trunk/widgets/butterfly/index.html
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/index.html?rev=1187338&r1=1187337&r2=1187338&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/index.html (original)
+++ incubator/wookie/trunk/widgets/butterfly/index.html Fri Oct 21 13:42:15 2011
@@ -18,7 +18,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+ <meta name="viewport" content="target-densitydpi=device-dpi, width=480, user-scalable=no">
<title>Butterfly</title>
<style type="text/css"><!--
* {
@@ -80,7 +80,7 @@
}
}
/*
- * Make the buttons and viewport thinner when short on horizontal space
+ * Make the buttons thinner when short on horizontal space
*
*/
@media all and (max-width: 470px){
@@ -88,12 +88,21 @@
width:32px;
}
}
+ /*
+ * Make the buttons even thinner when short on horizontal space
+ *
+ */
+ @media all and (max-width: 400px){
+ button{
+ width:20px;
+ }
+ }
--></style>
<!--[if lt IE 9]><script type="text/javascript" src="scripts/flashcanvas.js"></script><![endif]-->
<script type="text/javascript" src="scripts/butterfly.js"></script>
</head>
- <body onload="Controller.init()">
+ <body onload="Controller.init();">
<div id="wrapper">
<div id="canvas-wrapper">
<canvas id="imageView" width="400" height="300">
Modified: incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js?rev=1187338&r1=1187337&r2=1187338&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js (original)
+++ incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js Fri Oct 21 13:42:15 2011
@@ -209,15 +209,19 @@ brush = function (x,y) {
c.fillRect(x-D, y-D, D2, D2);
c.globalCompositeOperation = 'source-in';
c.rect(x-D, y-D, D2, D2);
-};
+};
+
+//
+// This is a hack to compensate for the coords being upside down without applying transforms to the whole canvas :-)
+//
+curveTo = function(cp1x, cp1y, cp2x, cp2y, x, y){
+ context.bezierCurveTo(cp1x, 300-cp1y, cp2x, 300-cp2y, x, 300-y);
+}
mask = function(){
- // the butterfly shape
+ // the butterfly shape
context.save();
context.beginPath();
- context.translate(400,300);
- context.rotate(Math.PI);
- context.moveTo(0,300);
// if IE - TODO butterfly image is not quite drawn correctly
if (!context.bezierCurveTo) {
context.quadraticCurveTo(80.1783,301.0774,134.5506,273.2636,168.0000,228.0000);
@@ -271,63 +275,63 @@ mask = function(){
context.quadraticCurveTo(16.0797,253.5891,-0.2461,262.3976,0.0000,300.0000);
}
else{
- // IE8 took too long to process this...
- context.bezierCurveTo(80.1783,301.0774,134.5506,273.2636,168.0000,228.0000);
- context.bezierCurveTo(174.6660,215.3346,181.3340,202.6654,188.0000,190.0000);
- context.bezierCurveTo(189.3332,194.9995,190.6668,200.0005,192.0000,205.0000);
- context.bezierCurveTo(171.6442,233.3266,148.4269,261.6911,134.0000,295.0000);
- context.bezierCurveTo(134.3333,295.6666,134.6667,296.3334,135.0000,297.0000);
- context.bezierCurveTo(154.8897,289.3127,174.1114,208.2397,205.0000,207.0000);
- context.bezierCurveTo(206.9998,208.6665,209.0002,210.3335,211.0000,212.0000);
- context.bezierCurveTo(213.8325,219.3365,262.2242,296.0280,265.0000,297.0000);
- context.bezierCurveTo(265.3333,296.3334,265.6667,295.6666,266.0000,295.0000);
- context.bezierCurveTo(253.2034,263.5240,229.7223,229.2060,208.0000,205.0000);
- context.bezierCurveTo(209.3332,199.6672,210.6668,194.3328,212.0000,189.0000);
- context.bezierCurveTo(212.3333,189.0000,212.6667,189.0000,213.0000,189.0000);
- context.bezierCurveTo(213.3333,189.0000,213.6667,189.0000,214.0000,189.0000);
- context.bezierCurveTo(235.4263,260.3326,305.6072,300.4202,400.0000,300.0000);
- context.bezierCurveTo(400.7564,260.7574,381.7836,251.4776,376.0000,221.0000);
- context.bezierCurveTo(372.5464,202.8009,374.9546,182.1234,363.0000,173.0000);
- context.bezierCurveTo(352.5150,164.9982,339.5687,168.3028,325.0000,163.0000);
- context.bezierCurveTo(325.0000,162.6667,325.0000,162.3333,325.0000,162.0000);
- context.bezierCurveTo(349.5033,158.3783,352.2077,130.7042,354.0000,109.0000);
- context.bezierCurveTo(345.9678,103.6550,343.8264,100.1513,338.0000,94.0000);
- context.bezierCurveTo(339.8800,86.6748,343.8295,83.7354,341.0000,77.0000);
- context.bezierCurveTo(336.3338,73.6670,331.6662,70.3330,327.0000,67.0000);
- context.bezierCurveTo(311.5394,39.7644,355.2383,26.7068,341.0000,2.0000);
- context.bezierCurveTo(337.2354,0.8094,333.2949,-0.8581,329.0000,1.0000);
- context.bezierCurveTo(327.6668,1.6666,326.3332,2.3334,325.0000,3.0000);
- context.bezierCurveTo(321.9745,19.4608,323.1224,37.2860,309.0000,43.0000);
- context.bezierCurveTo(294.2036,46.5382,273.9450,34.5515,258.0000,41.0000);
- context.bezierCurveTo(230.1233,52.2740,223.0465,111.1756,212.0000,141.0000);
- context.bezierCurveTo(211.3334,141.0000,210.6666,141.0000,210.0000,141.0000);
- context.bezierCurveTo(208.6668,130.3344,207.3332,119.6656,206.0000,109.0000);
- context.bezierCurveTo(204.0002,107.6668,201.9998,106.3332,200.0000,105.0000);
- context.bezierCurveTo(198.0002,105.9999,195.9998,107.0001,194.0000,108.0000);
- context.bezierCurveTo(192.0002,118.6656,189.9998,129.3344,188.0000,140.0000);
- context.bezierCurveTo(188.0000,139.3334,188.0000,138.6666,188.0000,138.0000);
- context.bezierCurveTo(181.3340,119.3352,174.6660,100.6648,168.0000,82.0000);
- context.bezierCurveTo(166.3335,73.6675,164.6665,65.3325,163.0000,57.0000);
- context.bezierCurveTo(159.6670,55.0002,156.3330,52.9998,153.0000,51.0000);
- context.bezierCurveTo(124.5349,29.4373,115.4563,53.0338,91.0000,43.0000);
- context.bezierCurveTo(75.6567,36.7051,77.4912,12.9952,69.0000,0.0000);
- context.bezierCurveTo(65.3654,0.6436,65.9730,0.4032,64.0000,2.0000);
- context.bezierCurveTo(59.0478,4.2801,58.0846,6.9206,56.0000,12.0000);
- context.bezierCurveTo(58.5748,31.4614,74.0400,36.2547,75.0000,60.0000);
- context.bezierCurveTo(70.0342,69.9436,61.4112,73.0454,56.0000,82.0000);
- context.bezierCurveTo(58.6524,86.5103,60.9126,87.5516,62.0000,94.0000);
- context.bezierCurveTo(58.7903,95.8190,48.1997,106.9635,45.0000,111.0000);
- context.bezierCurveTo(51.2644,140.5583,50.9489,147.1374,74.0000,163.0000);
- context.bezierCurveTo(62.8643,167.3318,49.5220,163.8747,41.0000,170.0000);
- context.bezierCurveTo(25.0144,181.4898,28.4368,204.3249,23.0000,226.0000);
- context.bezierCurveTo(16.0797,253.5891,-0.2461,262.3976,0.0000,300.0000);
- }
- context.closePath();
- context.stroke();
- context.restore();
- context.clip();
- context.fillStyle = "rgb(255,255,255)";
- context.fill();
+ // IE8 took too long to process this...
+ context.moveTo(0,0);
+ curveTo(80.1783,301.0774,134.5506,273.2636,168.0000,228.0000);
+ curveTo(174.6660,215.3346,181.3340,202.6654,188.0000,190.0000);
+ curveTo(189.3332,194.9995,190.6668,200.0005,192.0000,205.0000);
+ curveTo(171.6442,233.3266,148.4269,261.6911,134.0000,295.0000);
+ curveTo(134.3333,295.6666,134.6667,296.3334,135.0000,297.0000);
+ curveTo(154.8897,289.3127,174.1114,208.2397,205.0000,207.0000);
+ curveTo(206.9998,208.6665,209.0002,210.3335,211.0000,212.0000);
+ curveTo(213.8325,219.3365,262.2242,296.0280,265.0000,297.0000);
+ curveTo(265.3333,296.3334,265.6667,295.6666,266.0000,295.0000);
+ curveTo(253.2034,263.5240,229.7223,229.2060,208.0000,205.0000);
+ curveTo(209.3332,199.6672,210.6668,194.3328,212.0000,189.0000);
+ curveTo(212.3333,189.0000,212.6667,189.0000,213.0000,189.0000);
+ curveTo(213.3333,189.0000,213.6667,189.0000,214.0000,189.0000);
+ curveTo(235.4263,260.3326,305.6072,300.4202,400.0000,300.0000);
+ curveTo(400.7564,260.7574,381.7836,251.4776,376.0000,221.0000);
+ curveTo(372.5464,202.8009,374.9546,182.1234,363.0000,173.0000);
+ curveTo(352.5150,164.9982,339.5687,168.3028,325.0000,163.0000);
+ curveTo(325.0000,162.6667,325.0000,162.3333,325.0000,162.0000);
+ curveTo(349.5033,158.3783,352.2077,130.7042,354.0000,109.0000);
+ curveTo(345.9678,103.6550,343.8264,100.1513,338.0000,94.0000);
+ curveTo(339.8800,86.6748,343.8295,83.7354,341.0000,77.0000);
+ curveTo(336.3338,73.6670,331.6662,70.3330,327.0000,67.0000);
+ curveTo(311.5394,39.7644,355.2383,26.7068,341.0000,2.0000);
+ curveTo(337.2354,0.8094,333.2949,-0.8581,329.0000,1.0000);
+ curveTo(327.6668,1.6666,326.3332,2.3334,325.0000,3.0000);
+ curveTo(321.9745,19.4608,323.1224,37.2860,309.0000,43.0000);
+ curveTo(294.2036,46.5382,273.9450,34.5515,258.0000,41.0000);
+ curveTo(230.1233,52.2740,223.0465,111.1756,212.0000,141.0000);
+ curveTo(211.3334,141.0000,210.6666,141.0000,210.0000,141.0000);
+ curveTo(208.6668,130.3344,207.3332,119.6656,206.0000,109.0000);
+ curveTo(204.0002,107.6668,201.9998,106.3332,200.0000,105.0000);
+ curveTo(198.0002,105.9999,195.9998,107.0001,194.0000,108.0000);
+ curveTo(192.0002,118.6656,189.9998,129.3344,188.0000,140.0000);
+ curveTo(188.0000,139.3334,188.0000,138.6666,188.0000,138.0000);
+ curveTo(181.3340,119.3352,174.6660,100.6648,168.0000,82.0000);
+ curveTo(166.3335,73.6675,164.6665,65.3325,163.0000,57.0000);
+ curveTo(159.6670,55.0002,156.3330,52.9998,153.0000,51.0000);
+ curveTo(124.5349,29.4373,115.4563,53.0338,91.0000,43.0000);
+ curveTo(75.6567,36.7051,77.4912,12.9952,69.0000,0.0000);
+ curveTo(65.3654,0.6436,65.9730,0.4032,64.0000,2.0000);
+ curveTo(59.0478,4.2801,58.0846,6.9206,56.0000,12.0000);
+ curveTo(58.5748,31.4614,74.0400,36.2547,75.0000,60.0000);
+ curveTo(70.0342,69.9436,61.4112,73.0454,56.0000,82.0000);
+ curveTo(58.6524,86.5103,60.9126,87.5516,62.0000,94.0000);
+ curveTo(58.7903,95.8190,48.1997,106.9635,45.0000,111.0000);
+ curveTo(51.2644,140.5583,50.9489,147.1374,74.0000,163.0000);
+ curveTo(62.8643,167.3318,49.5220,163.8747,41.0000,170.0000);
+ curveTo(25.0144,181.4898,28.4368,204.3249,23.0000,226.0000);
+ curveTo(16.0797,253.5891,-0.2461,262.3976,0.0000,300.0000);
+ }
+ context.closePath();
+ context.stroke();
+ context.fillStyle = "rgb(255,255,255)";
+ context.fill();
+ context.clip();
}