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 2010/02/12 11:08:33 UTC
svn commit: r909329 - in /incubator/wookie/trunk/widgets/butterfly: ./
build.xml config.xml images/ images/background.jpg images/icon.png
index.html legal/ legal/license.txt lib/ scripts/ scripts/butterfly.js style/
Author: scottbw
Date: Fri Feb 12 10:08:32 2010
New Revision: 909329
URL: http://svn.apache.org/viewvc?rev=909329&view=rev
Log:
Added a fun "colour in a butterfly" widget for the kids...
Added:
incubator/wookie/trunk/widgets/butterfly/
incubator/wookie/trunk/widgets/butterfly/build.xml
incubator/wookie/trunk/widgets/butterfly/config.xml
incubator/wookie/trunk/widgets/butterfly/images/
incubator/wookie/trunk/widgets/butterfly/images/background.jpg (with props)
incubator/wookie/trunk/widgets/butterfly/images/icon.png (with props)
incubator/wookie/trunk/widgets/butterfly/index.html
incubator/wookie/trunk/widgets/butterfly/legal/
incubator/wookie/trunk/widgets/butterfly/legal/license.txt
incubator/wookie/trunk/widgets/butterfly/lib/
incubator/wookie/trunk/widgets/butterfly/scripts/
incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js
incubator/wookie/trunk/widgets/butterfly/style/
Added: incubator/wookie/trunk/widgets/butterfly/build.xml
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/build.xml?rev=909329&view=auto
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/build.xml (added)
+++ incubator/wookie/trunk/widgets/butterfly/build.xml Fri Feb 12 10:08:32 2010
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<project default="build-widget" basedir="." name="widget build file">
+ <property name="wookie.widgets.dir" location="../"/>
+ <property name="widget.shortname" value="butterfly"/>
+
+ <import file="../build.xml"/>
+</project>
\ No newline at end of file
Added: incubator/wookie/trunk/widgets/butterfly/config.xml
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/config.xml?rev=909329&view=auto
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/config.xml (added)
+++ incubator/wookie/trunk/widgets/butterfly/config.xml Fri Feb 12 10:08:32 2010
@@ -0,0 +1,46 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<widget xmlns="http://www.w3.org/ns/widgets"
+ id="http://wookie.apache.org/widgets/butterfly"
+ version="0.1"
+ width="420"
+ height="330"
+ >
+ <name>Butterfly</name>
+ <description>Paint colourful butterflies!</description>
+ <content src="index.html"/>
+ <icon src="images/icon.png"/>
+ <author>Apache Wookie (Incubating) Team</author>
+ <licence>Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.</licence>
+
+</widget>
+
+
+
Added: incubator/wookie/trunk/widgets/butterfly/images/background.jpg
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/images/background.jpg?rev=909329&view=auto
==============================================================================
Binary file - no diff available.
Propchange: incubator/wookie/trunk/widgets/butterfly/images/background.jpg
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: incubator/wookie/trunk/widgets/butterfly/images/icon.png
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/images/icon.png?rev=909329&view=auto
==============================================================================
Binary file - no diff available.
Propchange: incubator/wookie/trunk/widgets/butterfly/images/icon.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: incubator/wookie/trunk/widgets/butterfly/index.html
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/index.html?rev=909329&view=auto
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/index.html (added)
+++ incubator/wookie/trunk/widgets/butterfly/index.html Fri Feb 12 10:08:32 2010
@@ -0,0 +1,70 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Butterfly</title>
+ <style type="text/css"><!--
+ body{
+ margin:0px;
+ padding:0px;
+ cursor: crosshair;
+ }
+ #imageView {
+ display: block;
+ margin: 0; border: 0;
+ background: url(images/background.jpg);
+ cursor: crosshair;
+ position:absolute;
+ }
+ #toolbox{
+ position:absolute;
+ margin-top: 300px;
+ }
+ button {
+ border: 0;
+ width: 41px;
+ height: 10px;
+ cursor: pointer;
+ }
+ --></style>
+ <script type="text/javascript" src="scripts/butterfly.js"></script>
+ </head>
+ <body onload="Controller.init()">
+ <canvas id="imageView" width="400" height="300">
+ <p>Unfortunately, your browser is currently unsupported by this widget.
+ We are sorry for the inconvenience. Please use one of the
+ supported browsers listed below:</p>
+ <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a
+ href="http://www.mozilla.com">Firefox</a>, <a
+ href="http://www.apple.com/safari">Safari</a>, and <a
+ href="http://www.konqueror.org">Konqueror</a>.</p>
+ </canvas>
+ <div id="toolbox">
+ <button style="background-color: #F66" onclick="Controller.setRGB(255,64,64)"></button>
+ <button style="background-color: #66F" onclick="Controller.setRGB(64,64,255)"></button>
+ <button style="background-color: #6F6" onclick="Controller.setRGB(64,255,64)"></button>
+ <button style="background-color: #F96" onclick="Controller.setRGB(255,128,64)"></button>
+ <button style="background-color: #FF6" onclick="Controller.setRGB(255,255,64)"></button>
+ <button style="background-color: #F6F" onclick="Controller.setRGB(255,64,255)"></button>
+ <button style="background-color: #909" onclick="Controller.setRGB(128,0,128)"></button>
+ <button style="background-color: #9CF" onclick="Controller.setRGB(128,192,255)"></button>
+ <button style="background-color: black" onclick="Controller.setRGB(0,0,0)"></button>
+ </div>
+ </body>
+</html>
\ No newline at end of file
Added: incubator/wookie/trunk/widgets/butterfly/legal/license.txt
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/legal/license.txt?rev=909329&view=auto
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/legal/license.txt (added)
+++ incubator/wookie/trunk/widgets/butterfly/legal/license.txt Fri Feb 12 10:08:32 2010
@@ -0,0 +1 @@
+The background image used in this widget was taken by Per Ola Wiberg (Powi) and is licensed under a Creative Commons Attribution license. The image is available from http://www.flickr.com/photos/powi/1223494970
\ No newline at end of file
Added: incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js?rev=909329&view=auto
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js (added)
+++ incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js Fri Feb 12 10:08:32 2010
@@ -0,0 +1,185 @@
+var canvas, context, tool;
+
+var Controller = {
+
+ red: 255,
+ green: 255,
+ blue: 64,
+
+ setRGB: function(r,g,b){
+ this.red=r;this.green=g;this.blue=b;
+ },
+
+ init: function(){
+ init_canvas();
+ }
+}
+
+function init_canvas () {
+ // Find the canvas element.
+ canvas = document.getElementById('imageView');
+ if (!canvas) {
+ alert('Error: I cannot find the canvas element!');
+ return;
+ }
+
+ if (!canvas.getContext) {
+ alert('Error: no canvas.getContext!');
+ return;
+ }
+
+ canvas.style.cursor="crosshair";
+
+ // Get the 2D canvas context.
+ context = canvas.getContext('2d');
+ if (!context) {
+ alert('Error: failed to getContext!');
+ return;
+ }
+
+ // Pencil tool instance.
+ tool = new tool_pencil();
+
+ // Mask
+ mask();
+
+ // Attach the mousedown, mousemove and mouseup event listeners.
+ canvas.addEventListener('mousedown', ev_canvas, false);
+ canvas.addEventListener('mousemove', ev_canvas, false);
+ canvas.addEventListener('mouseup', ev_canvas, false);
+ }
+
+ // This painting tool works like a drawing pencil which tracks the mouse
+ // movements.
+ function tool_pencil () {
+ context.lineWidth = 4;
+ var tool = this;
+ this.started = false;
+
+ // This is called when you start holding down the mouse button.
+ // This starts the pencil drawing.
+ this.mousedown = function (ev) {
+ tool.started = true;
+ };
+
+ // This function is called every time you move the mouse. Obviously, it only
+ // draws if the tool.started state is set to true (when you are holding down
+ // the mouse button).
+ this.mousemove = function (ev) {
+ if (tool.started) {
+ // Mirroring
+ brush(ev._x,ev._y);
+ brush(400-ev._x,ev._y);
+ }
+ };
+
+ // This is called when you release the mouse button.
+ this.mouseup = function (ev) {
+ if (tool.started) {
+ tool.mousemove(ev);
+ tool.started = false;
+ }
+ };
+ }
+
+ // The general-purpose event handler. This function just determines the mouse
+ // position relative to the canvas element.
+ function ev_canvas (ev) {
+ if (ev.layerX || ev.layerX == 0) { // Firefox
+ ev._x = ev.layerX;
+ ev._y = ev.layerY;
+ } else if (ev.offsetX || ev.offsetX == 0) { // Opera
+ ev._x = ev.offsetX;
+ ev._y = ev.offsetY;
+ }
+
+ // Call the event handler of the tool.
+ var func = tool[ev.type];
+ if (func) {
+ func(ev);
+ }
+ }
+
+
+brush = function (x,y) {
+ var c = context,
+ D = 15,
+ D2 = D * 2;
+ hardness = 30;
+ opacity = 60;
+ c.globalCompositeOperation = 'source-over';
+ var r = c.createRadialGradient(x, y, hardness / 100 * D - 1, x, y, D);
+ r.addColorStop(0, 'rgba('+Controller.red+','+Controller.green+','+Controller.blue+',' + opacity / 100 + ')');
+ r.addColorStop(0.95, 'rgba('+Controller.red+','+Controller.green+','+Controller.blue+',0)'); // prevent aggregation of semi-opaque pixels
+ r.addColorStop(1, 'rgba('+Controller.red+','+Controller.green+','+Controller.blue+',0)');
+ c.fillStyle = r;
+ c.fillRect(x-D, y-D, D2, D2);
+ c.globalCompositeOperation = 'source-in';
+ c.rect(x-D, y-D, D2, D2);
+};
+
+mask = function(){
+ context.save();
+ context.beginPath();
+ context.translate(400,300);
+ context.rotate(Math.PI);
+ context.moveTo(0,300);
+ 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();
+}
+
+
+