Mercurial > MadButterfly

changeset 789:9b2d803701e0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Phone UI example
author Thinker K.F. Li <thinker@codemud.net>
date Tue, 31 Aug 2010 02:36:42 +0800
parents 7ec13634c97d
children fbf26794c02d
files nodejs/phone.js nodejs/phone_ui.svg
diffstat 2 files changed, 545 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/nodejs/phone.js	Tue Aug 31 02:36:42 2010 +0800
@@ -0,0 +1,61 @@
+// -*- indent-tabs-mode: t; tab-width: 4; c-basic-offset: 4; -*-
+// vim: sw=4:ts=8:sts=4:ai
+var mbapp = require("./mbapp");
+var sys=require("sys");
+var animate=require("./animate");
+
+app = new mbapp.app(":0.0", 320, 480);
+app.loadSVG("phone_ui.svg");
+
+var icons = [];
+var r, c;
+var mbname;
+
+for(r = 0; r < 4; r++) {
+    for(c = 0; c < 5; c++) {
+	mbname = "icon" + r + "" + c;
+	icons.push(app.get(mbname));
+    }
+}
+
+var overhint, presshint;
+var overholder, pressholder;
+overhint = app.get("overhint");
+presshint = app.get("presshint");
+overholder = new animate.holder(app, overhint);
+pressholder = new animate.holder(app, presshint);
+
+var dock;
+var dockholder;
+dock = app.get("dock");
+dockholder = new animate.holder(app, dock);
+
+var i;
+var icon;
+for(i = 0; i < icons.length; i++) {
+    icon = icons[i];
+    icon.mouse_event.add_event_observer(1, function(evt) {
+	    var tgt = evt.cur_tgt;
+
+	    overholder.go_center(tgt);
+	});
+    icon.mouse_event.add_event_observer(2, function(evt) {
+	    overholder.home();
+	});
+    icon.mouse_event.add_event_observer(4, function(evt) {
+	    var tgt = evt.cur_tgt;
+
+	    pressholder.go_center(tgt);
+	});
+}
+
+var sw = 0;
+dock.mouse_event.add_event_observer(4, function(evt) {
+	if(sw == 0)
+	    dockholder.shift(0, -300);
+	else
+	    dockholder.home();
+	sw = (sw + 1) % 2;
+    });
+
+app.loop();
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/nodejs/phone_ui.svg	Tue Aug 31 02:36:42 2010 +0800
@@ -0,0 +1,484 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320"
+   height="480"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48+devel r9732"
+   sodipodi:docname="phone_ui.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.90416667"
+     inkscape:cx="312.60279"
+     inkscape:cy="238.21786"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     width="320px"
+     inkscape:window-width="888"
+     inkscape:window-height="684"
+     inkscape:window-x="333"
+     inkscape:window-y="132"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-572.3622)">
+    <rect
+       mbname="icon00"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3599"
+       width="56.328701"
+       height="44.162804"
+       x="30.536106"
+       y="631.01813"
+       inkscape:bbox-x="29.497691"
+       inkscape:bbox-y="376.14285"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-height="46.239633"
+       rx="11.071856"
+       ry="9.7391548"
+       inkscape:tile-cx="82.396311"
+       inkscape:tile-cy="75.207361"
+       inkscape:tile-w="56.328701"
+       inkscape:tile-h="44.162804"
+       inkscape:tile-x0="54.23196"
+       inkscape:tile-y0="53.125959" />
+    <rect
+       mbname="icon01"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="314.31491"
+       inkscape:bbox-x="29.497691"
+       y="692.84607"
+       x="30.536106"
+       height="44.162804"
+       width="56.328701"
+       id="use3685"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon02"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="252.48703"
+       inkscape:bbox-x="29.497691"
+       y="754.67395"
+       x="30.536106"
+       height="44.162804"
+       width="56.328701"
+       id="use3687"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon03"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="190.65909"
+       inkscape:bbox-x="29.497691"
+       y="816.50189"
+       x="30.536106"
+       height="44.162804"
+       width="56.328701"
+       id="use3689"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon04"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="128.83115"
+       inkscape:bbox-x="29.497691"
+       y="878.32983"
+       x="30.536106"
+       height="44.162804"
+       width="56.328701"
+       id="use3691"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon10"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="376.14285"
+       inkscape:bbox-x="97.092132"
+       y="631.01813"
+       x="98.130547"
+       height="44.162804"
+       width="56.328701"
+       id="use3693"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon11"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="314.31491"
+       inkscape:bbox-x="97.092132"
+       y="692.84607"
+       x="98.130547"
+       height="44.162804"
+       width="56.328701"
+       id="use3695"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon12"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="252.48703"
+       inkscape:bbox-x="97.092132"
+       y="754.67395"
+       x="98.130547"
+       height="44.162804"
+       width="56.328701"
+       id="use3697"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon13"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="190.65909"
+       inkscape:bbox-x="97.092132"
+       y="816.50189"
+       x="98.130547"
+       height="44.162804"
+       width="56.328701"
+       id="use3699"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon14"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="128.83115"
+       inkscape:bbox-x="97.092132"
+       y="878.32983"
+       x="98.130547"
+       height="44.162804"
+       width="56.328701"
+       id="use3701"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon20"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="376.14285"
+       inkscape:bbox-x="164.68658"
+       y="631.01813"
+       x="165.72499"
+       height="44.162804"
+       width="56.328701"
+       id="use3703"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon21"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="314.31491"
+       inkscape:bbox-x="164.68658"
+       y="692.84607"
+       x="165.72499"
+       height="44.162804"
+       width="56.328701"
+       id="use3705"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon22"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="252.48703"
+       inkscape:bbox-x="164.68658"
+       y="754.67395"
+       x="165.72499"
+       height="44.162804"
+       width="56.328701"
+       id="use3707"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon23"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="190.65909"
+       inkscape:bbox-x="164.68658"
+       y="816.50189"
+       x="165.72499"
+       height="44.162804"
+       width="56.328701"
+       id="use3709"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon24"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="128.83115"
+       inkscape:bbox-x="164.68658"
+       y="878.32983"
+       x="165.72499"
+       height="44.162804"
+       width="56.328701"
+       id="use3711"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon30"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="376.14285"
+       inkscape:bbox-x="232.28101"
+       y="631.01813"
+       x="233.31943"
+       height="44.162804"
+       width="56.328701"
+       id="use3713"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon31"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="314.31491"
+       inkscape:bbox-x="232.28101"
+       y="692.84607"
+       x="233.31943"
+       height="44.162804"
+       width="56.328701"
+       id="use3715"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon32"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="252.48703"
+       inkscape:bbox-x="232.28101"
+       y="754.67395"
+       x="233.31943"
+       height="44.162804"
+       width="56.328701"
+       id="use3717"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon33"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="190.65909"
+       inkscape:bbox-x="232.28101"
+       y="816.50189"
+       x="233.31943"
+       height="44.162804"
+       width="56.328701"
+       id="use3719"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <rect
+       mbname="icon34"
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239633"
+       inkscape:bbox-width="58.40553"
+       inkscape:bbox-y="128.83115"
+       inkscape:bbox-x="232.28101"
+       y="878.32983"
+       x="233.31943"
+       height="44.162804"
+       width="56.328701"
+       id="use3721"
+       style="fill:#ffe8e8;fill-opacity:1;stroke:#800000;stroke-width:2.07682943;stroke-miterlimit:4;stroke-dasharray:none" />
+    <g
+       id="g3781"
+       inkscape:bbox-x="-1.1059908"
+       inkscape:bbox-y="442.39634"
+       inkscape:bbox-width="321.84332"
+       inkscape:bbox-height="43.133648">
+      <rect
+         inkscape:bbox-height="35.391705"
+         inkscape:bbox-width="320.73734"
+         inkscape:bbox-y="442.39634"
+         inkscape:bbox-x="-1.1059908"
+         y="574.57416"
+         x="-1.1059908"
+         height="35.391705"
+         width="320.73734"
+         id="rect3761"
+         style="fill:#f2f2f2;fill-opacity:1;stroke:none" />
+      <rect
+         inkscape:bbox-height="35.391705"
+         inkscape:bbox-width="320.73734"
+         inkscape:bbox-y="450.13828"
+         inkscape:bbox-x="-2.250144e-06"
+         y="566.83221"
+         x="-2.250144e-06"
+         height="35.391705"
+         width="320.73734"
+         id="rect3761-7"
+         style="fill:#ececec;fill-opacity:1;stroke:none" />
+    </g>
+    <rect
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       inkscape:tile-h="44.162804"
+       inkscape:tile-w="56.328701"
+       inkscape:tile-cy="75.207361"
+       inkscape:tile-cx="82.396311"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239804"
+       inkscape:bbox-width="58.405701"
+       inkscape:bbox-y="372.37318"
+       inkscape:bbox-x="354.93541"
+       y="634.78772"
+       x="355.97391"
+       height="44.162804"
+       width="56.328701"
+       id="rect3599-9"
+       style="fill:none;stroke:#ff1010;stroke-width:2.0769999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       mbname="overhint" />
+    <rect
+       inkscape:tile-y0="53.125959"
+       inkscape:tile-x0="54.23196"
+       inkscape:tile-h="44.162804"
+       inkscape:tile-w="56.328701"
+       inkscape:tile-cy="75.207361"
+       inkscape:tile-cx="82.396311"
+       ry="9.7391548"
+       rx="11.071856"
+       inkscape:bbox-height="46.239804"
+       inkscape:bbox-width="58.405701"
+       inkscape:bbox-y="319.73725"
+       inkscape:bbox-x="355.68193"
+       y="687.42365"
+       x="356.72043"
+       height="44.162804"
+       width="56.328701"
+       id="rect3599-9-3"
+       style="fill:none;stroke:#ff8010;stroke-width:2.0769999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       mbname="presshint" />
+    <g
+       id="g3849"
+       inkscape:bbox-x="1.1059908"
+       inkscape:bbox-y="-313.576"
+       inkscape:bbox-width="317.41979"
+       inkscape:bbox-height="384.87165"
+       mbname="dock">
+      <path
+         inkscape:bbox-height="76.31255"
+         inkscape:bbox-width="317.40625"
+         inkscape:bbox-y="-5.0169"
+         inkscape:bbox-x="1.1195276"
+         inkscape:connector-curvature="0"
+         id="rect2817"
+         d="m 163.68203,981.06655 c -63.1198,0 -120.411185,7.92804 -162.5625024,20.84375 l 0,55.4688 317.4062524,0 0,-57.7188 C 277.22165,988.08365 223.03485,981.06655 163.68203,981.06655 z"
+         style="fill:#4494c2;fill-opacity:0.59174314;stroke:none" />
+      <path
+         id="rect2824"
+         d="m 1.1059908,1054.0488 317.4193392,0 0,311.8894 -317.4193392,0 z"
+         style="fill:#e6f1f7;fill-opacity:1;stroke:none"
+         inkscape:connector-curvature="0"
+         inkscape:bbox-x="1.1059908"
+         inkscape:bbox-y="-313.576"
+         inkscape:bbox-width="317.41934"
+         inkscape:bbox-height="311.8894" />
+      <path
+         style="fill:#6083ff;fill-opacity:1;stroke:#1033ff;stroke-width:2.0769999;stroke-miterlimit:4;stroke-opacity:1"
+         d="m 182.48848,1003.6866 c 0,8.2461 -9.16063,14.9309 -20.46083,14.9309 -11.3002,0 -20.46083,-6.6848 -20.46083,-14.9309 0,-8.24608 9.16063,-14.93086 20.46083,-14.93086 11.3002,0 20.46083,6.68478 20.46083,14.93086 z"
+         id="path3843"
+         inkscape:connector-curvature="0"
+         inkscape:bbox-x="140.52832"
+         inkscape:bbox-y="32.7062"
+         inkscape:bbox-width="42.99866"
+         inkscape:bbox-height="31.93876" />
+    </g>
+  </g>
+</svg>