.gitignore
_attachments/javascripts/screen.js
vendor/jquery/_attachments/jquery.svg.js
vendor/jquery/_attachments/jquery.svganim.js
@@ -1,7 +1,7 @@
{
"env": {
"default": {
- "db": "http://localhost:5984/hi_sam"
+ "db": "http://localhost:5984/boom_amazing"
}
}
-}
\ No newline at end of file
+}
.couchapprc
@@ -1,27 +1,21 @@
<!DOCTYPE html>
<html>
<head>
- <title>hi_sam</title>
+ <title>boom_amazing</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
<link rel="stylesheet" href="style/jquery.svg.css" type="text/css">
</head>
<body>
- <h1>hi_sam</h1>
- <ul id="controls">
- <li><button id="rotate_left">rotate left</button></li>
- <li><button id="rotate_right">rotate right</button></li>
- </ul>
- <div id="content">
-
- </div>
+ <div id="content"></div>
+ <p class="hint">Move: click & drag mouse, rotate: [ctrl] + move, scale: [alt] + move</p>
</body>
<script src="/_utils/script/json2.js"></script>
<script src="/_utils/script/jquery.js?1.2.6"></script>
<script src="/_utils/script/jquery.couch.js?0.8.0"></script>
<script src="./vendor/couchapp/jquery.couchapp.js"></script>
- <!--script src="./vendor/raphael/raphael.js"></script-->
<script src="./vendor/sammy/sammy.js"></script>
- <script src="./javascripts/jquery.svg.js"></script>
- <script src="./javascripts/jquery.svganim.js"></script>
+ <script src="./vendor/jquery/jquery.svg.js"></script>
+ <script src="./vendor/jquery/jquery.svganim.js"></script>
+ <script src="./javascripts/screen.js"></script>
<script src="./javascripts/app.js"></script>
</html>
_attachments/index.html
@@ -4,93 +4,15 @@ $.CouchApp(function(app) {
});
var content = $('#content');
-
-var sammy = $.sammy(function() { with(this) {
- element_selector = '#content';
-}});
+// var sammy = $.sammy(function() { with(this) {
+// element_selector = '#content';
+// }});
canvas = null;
$(function() {
- //canvas = Raphael('content', 800, 600);
- //var circle = canvas.circle(50, 40, 10);
- // Sets the fill attribute of the circle to red (#f00)
- //circle.attr("fill", "#f00");
- // Sets the stroke attribute of the circle to white (#fff)
- //circle.attr("stroke", "#fff");
- //circle.animate({cx: 20, r: 20}, 2000);
-
-
- $('#content').svg({loadURL: './talk.svg', onLoad: function(_svg) {
- canvas = _svg;
- var all = $('svg *');
- all.remove();
- group = canvas.group(canvas.root(), {'trasnform': 'translate(50,50)'});
- $(group).append(all);
-
- var scale = 1, rotate = 0, rot_x = 0, rot_y = 0, translate_x = 0, translate_y = 0;
- var previouse_mouse_x = null, previouse_mouse_y = null;
- var mouse_down = false;
- var key_down = null;
-
- var update_canvas = function() {
- canvas.change(group, {'transform': 'translate(' + translate_x + ',' + translate_y + '), rotate(' + rotate + ') scale(' + scale + ' ' + scale + ')'});
- };
-
- var translate = function(delta_x, delta_y) {
- translate_x += delta_x;
- translate_y += delta_y;
- };
-
- var do_scale = function(delta_x, delta_y) {
- scale += delta_y / 100.0;
- };
-
- $('html').keydown(function(_event) {
- if(event.altKey) {
- key_down = 'scale';
- }
- });
-
- $('html').keyup(function(event) {
- key_down = null;
- });
-
- $('#rotate_left').click(function() {
- rotate -= 1;
- update_canvas();
- });
-
- $('#rotate_right').click(function() {
- rotate += 1;
- update_canvas();
- });
-
- $('#content').mousedown(function(event) {
- mouse_down = true;
- });
-
- $('#content').mouseup(function(event) {
- mouse_down = false;
- });
-
- $('#content').mousemove(function(event) {
- if(previouse_mouse_x != null) {
- var delta_x = event.clientX - previouse_mouse_x;
- var delta_y = event.clientY - previouse_mouse_y;
- if(key_down == null && mouse_down) {
- translate(delta_x, delta_y);
- } else if(key_down == 'scale') {
- do_scale(delta_x, delta_y);
- };
- update_canvas();
- }
- previouse_mouse_x = event.clientX;
- previouse_mouse_y = event.clientY;
- });
-
- }});
+ Screen.init('#content', './talk.svg');
+});
- // var svg = $('#content').svg('get');
//sammy.run('#/');
-});
+ //});
_attachments/javascripts/app.js
@@ -1,7 +1,16 @@
/* add styles here */
+body {
+ font-family: sans-serif;
+ font-size: 1.0em;
+}
+
+.hint {
+ color: gray;
+}
+
#content {
- width:800px;
- height:600px;
+ width:1000px;
+ height:650px;
border: 1px solid black;
}
\ No newline at end of file
_attachments/style/main.css
_attachments/javascripts/jquery.svg.js
_attachments/javascripts/jquery.svganim.js
vendor/raphael/_attachments/raphael.js
c1160555285ad163f995e5039d343844eb807f1c
Alexander Lang
alex@upstream-berlin.com
http://github.com/langalex/boom_amazing/commit/f585c8103f5198979f6a095195d9346ceea93239
f585c8103f5198979f6a095195d9346ceea93239
2009-05-23T12:06:12-07:00
2009-05-23T12:06:12-07:00
removed raphael, refactored svg control into screen object
fd8903abbfb6398bd731f1580b3a8c7ef8e4cd62
Alexander Lang
alex@upstream-berlin.com