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 02:10:53 UTC
svn commit: r1187139 - in /incubator/wookie/trunk/widgets/butterfly:
config.xml images/brush.png index.html scripts/butterfly.js
Author: scottbw
Date: Fri Oct 21 00:10:53 2011
New Revision: 1187139
URL: http://svn.apache.org/viewvc?rev=1187139&view=rev
Log:
Lots of improvements to the Butterfly widget including: better mobile experience using media queries viewport tag, nicer colour palette buttons, custom crayon pointer, widget resizes nicely to fill larger screens (e.g. mobile in portrait mode) with larger buttons for easier touch control. Tested on Safari, Chrome, Opera, FF, Opera Mobile. Doesn't yet work on Android Browser (but then it didn't before, either)
Added:
incubator/wookie/trunk/widgets/butterfly/images/brush.png (with props)
Modified:
incubator/wookie/trunk/widgets/butterfly/config.xml
incubator/wookie/trunk/widgets/butterfly/index.html
incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js
Modified: incubator/wookie/trunk/widgets/butterfly/config.xml
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/config.xml?rev=1187139&r1=1187138&r2=1187139&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/config.xml (original)
+++ incubator/wookie/trunk/widgets/butterfly/config.xml Fri Oct 21 00:10:53 2011
@@ -18,7 +18,7 @@
id="http://wookie.apache.org/widgets/butterfly"
version="0.1"
width="420"
- height="330"
+ height="350"
>
<name>Butterfly</name>
<description>Paint colourful butterflies!</description>
Added: incubator/wookie/trunk/widgets/butterfly/images/brush.png
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/images/brush.png?rev=1187139&view=auto
==============================================================================
Binary file - no diff available.
Propchange: incubator/wookie/trunk/widgets/butterfly/images/brush.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Modified: incubator/wookie/trunk/widgets/butterfly/index.html
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/index.html?rev=1187139&r1=1187138&r2=1187139&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/index.html (original)
+++ incubator/wookie/trunk/widgets/butterfly/index.html Fri Oct 21 00:10:53 2011
@@ -18,42 +18,85 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>Butterfly</title>
<style type="text/css"><!--
- body{
- margin:0px;
+ * {
+ margin: 0;
+ }
+ html, body{
+ height: 100%;
padding:0px;
- cursor: crosshair;
+ cursor:url(images/brush.png),auto;
+ }
+ #wrapper {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
+ margin: 0 auto -60px;
+ background: url(images/background.jpg) center;
+ }
+ #canvas-wrapper {
+ padding-top: 20px;
+ width: 400px;
+ margin: auto;
}
- #imageView {
- display: block;
- margin: 0; border: 0;
- background: url(images/background.jpg);
- cursor: crosshair;
- position:absolute;
+ #imageView {
+ border: 0;
+ cursor:url(images/brush.png),auto;
+ }
+ #push {
+ height: 60px;
+ clear: both;
}
#toolbox{
- position:absolute;
- margin-top: 300px;
- text-align:center;
background: black;
- width: 400px;
- height: 26px;
+ width: 100%;
+ text-align:center;
+ height: 60px;
+ margin: auto;
+ cursor: pointer;
}
button {
- border: 0;
- width: 32px;
- border: 1px solid gray;
- height: 20px;
- cursor: pointer;
+ border-radius: 3px;
+ width: 38px;
+ border: 2px solid black;
+ height: 50px;
+ box-shadow:inset 0 0 10px #ffffff;
}
+ /*
+ * Make the buttons smaller when we have a shorter screen (e.g. small widget space)
+ * By default the buttons are quite tall to make them easier for touch interfaces
+ */
+ @media all and (max-height: 400px){
+ button{
+ height:20px;
+ }
+ #push, #toolbox{
+ height: 26px;
+ }
+ #wrapper{
+ margin: 0 auto -26px;
+ }
+ }
+ /*
+ * Make the buttons and viewport thinner when short on horizontal space
+ *
+ */
+ @media all and (max-width: 470px){
+ button{
+ width:32px;
+ }
+ }
+
--></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()">
- <canvas id="imageView" width="400" height="300">
+ <div id="wrapper">
+ <div id="canvas-wrapper">
+ <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>
@@ -61,18 +104,21 @@
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>
+ </canvas>
+ </div>
+ <div id="push"></div>
+ </div>
<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>
- <button style="background-color: white" onclick="Controller.setRGB(255,255,255)"></button>
+ <button style="background-color: #F66" onclick="Controller.setRGB(255,64,64);Controller.push(this);"></button>
+ <button style="background-color: #66F" onclick="Controller.setRGB(64,64,255);Controller.push(this);"></button>
+ <button style="background-color: #6F6" onclick="Controller.setRGB(64,255,64);Controller.push(this);"></button>
+ <button style="background-color: #F96" onclick="Controller.setRGB(255,128,64);Controller.push(this);"></button>
+ <button style="background-color: #FF6" onclick="Controller.setRGB(255,255,64);Controller.push(this);"></button>
+ <button style="background-color: #F6F" onclick="Controller.setRGB(255,64,255);Controller.push(this);"></button>
+ <button style="background-color: #909" onclick="Controller.setRGB(128,0,128);Controller.push(this);"></button>
+ <button style="background-color: #9CF" onclick="Controller.setRGB(128,192,255);Controller.push(this);"></button>
+ <button style="background-color: black" onclick="Controller.setRGB(0,0,0);Controller.push(this);"></button>
+ <button style="background-color: white" onclick="Controller.setRGB(255,255,255);Controller.push(this);"></button>
<button style="background: url(images/splat.png) no-repeat" onclick="Controller.fill()"></button>
</div>
</body>
Modified: incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js
URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js?rev=1187139&r1=1187138&r2=1187139&view=diff
==============================================================================
--- incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js (original)
+++ incubator/wookie/trunk/widgets/butterfly/scripts/butterfly.js Fri Oct 21 00:10:53 2011
@@ -39,6 +39,14 @@ var Controller = {
init: function(){
this.init_canvas();
}
+}
+
+Controller.push = function(button){
+ var buttons = document.getElementsByTagName("button");
+ for (var i=0;i<buttons.length;i++){
+ buttons[i].style.border="2px solid black";
+ }
+ button.style.border="2px solid white";
}
Controller.init_canvas = function() {
@@ -56,7 +64,7 @@ Controller.init_canvas = function() {
return;
}
- canvas.style.cursor="crosshair";
+ canvas.style.cursor="url(images/brush.png),auto";
//
// Get the 2D canvas context.
@@ -82,6 +90,7 @@ Controller.init_canvas = function() {
// Attach the mouse and touch event listeners.
canvas.onmousedown = Controller.startDraw;
canvas.onmouseup = Controller.stopDraw;
+
canvas.ontouchstart = Controller.startDraw;
canvas.ontouchstop = Controller.stopDraw;
canvas.ontouchmove = Controller.drawMouse;
@@ -210,7 +219,7 @@ mask = function(){
context.rotate(Math.PI);
context.moveTo(0,300);
// if IE - TODO butterfly image is not quite drawn correctly
- if (canvas.attachEvent) {
+ if (!context.bezierCurveTo) {
context.quadraticCurveTo(80.1783,301.0774,134.5506,273.2636,168.0000,228.0000);
context.quadraticCurveTo(174.6660,215.3346,181.3340,202.6654,188.0000,190.0000);
context.quadraticCurveTo(189.3332,194.9995,190.6668,200.0005,192.0000,205.0000);