From 06686ff48010e0957124979fc7fb8abae1d11732 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Tue, 7 Oct 2014 01:37:41 -0400
Subject: background scaling demo

---
 public/assets/test/bg.html | 114 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 public/assets/test/bg.html

(limited to 'public/assets/test/bg.html')

diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html
new file mode 100644
index 0000000..cd7eaa8
--- /dev/null
+++ b/public/assets/test/bg.html
@@ -0,0 +1,114 @@
+<div id="scene"></div>
+<div style="position:fixed;top:419px;left:10px;">
+<input id="url" value="http://i.asdf.us/im/97/imgrid_1400887539_xx_abridged___dmgk.png">
+<input id="scale" type="range" min="0.01" max="10.0" step="0.1" value="1.0">
+<div id="cursor" style="width:30px;height:30px;background:blue;display:inline-block;"></div>
+</div>
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/vendor/loader.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/surface.js"></script>
+<script>
+
+var w = scene.width = 600
+var h = scene.height = 400
+
+var surface = new Surface ()
+surface.add( new Rect( new vec2(10, 100), new vec2(0, 400) ) )
+surface.add( new Rect( new vec2(100, 300), new vec2(200, 400) ) )
+surface.add( new Rect( new vec2(300, 400), new vec2(0, 300) ) )
+surface.add( new Rect( new vec2(400, 500), new vec2(0, 400) ) )
+
+var colors = "#f00 #ff0 #0ff #00f #f0f".split(" ")
+surface.faces.forEach(function(face, i){
+	var el = document.createElement("div")
+	el.style.position = "absolute"
+	el.style.backgroundColor = colors[i%colors.length]
+	el.style.top = face.y.a + "px"
+	el.style.left = face.x.a + "px"
+	el.style.width = face.width() + "px"
+	el.style.height = face.height() + "px"
+	scene.appendChild(el)
+	face.el = el
+})
+
+url.addEventListener("input", updateBackgroundImage)
+scale.addEventListener("input", updateScale)
+
+var bg_w = 1, bg_h = 1, x = 0, y = 0, s = 1
+function updateBackgroundImage(){
+	var img = new Image ()
+	img.onload = function(){
+		x0 = 0
+		y0 = 0
+		bg_w = img.naturalWidth
+		bg_h = img.naturalHeight
+		surface.faces.forEach(function(face, i){
+			face.el.style.backgroundImage = 'url(' + url.value + ')'
+		})
+		update(x,y,bg_w,bg_h)
+	}
+	img.src = url.value
+	img.complete && img.onload()
+}
+function update(x,y,w,h){
+	dx = x
+	dy = y
+	surface.faces.forEach(function(face, i){
+		dx = x-face.x.a
+		dy = y-face.y.a
+		face.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
+		face.el.style.backgroundSize = w*s + 'px ' + h*s + 'px'
+// 		console.log(x,y,' ',dx,dy)
+	})
+}
+updateBackgroundImage()
+
+function updateScale(){
+	s = parseFloat(scale.value)
+	console.log(scale.value, s)
+	update(x,y,bg_w,bg_h)
+}
+
+var leftOffset = 0
+
+var position = new vec2( 40, 40 )
+var dimension = new vec2( 50, 80 )
+var bounds = surface.bounds_at_index_with_dimensions(0, dimension)
+
+var delta = new vec2( 0, 0 )
+
+var dragging = false
+
+var x0 = 0, y0 = 0
+var mymouse = new mouse({
+  el: cursor,
+  down: function(e, cursor){
+  console.log(cursor.x.a, cursor.y.a)
+		dragging = true
+  },
+  drag: function(e, cursor){
+    if (! dragging) return
+    delta = cursor.delta()
+    delta.a = - delta.a
+		x0 = delta.a*s
+		y0 = delta.b*s
+//  console.log(x0,y0)
+		update(x+x0,y+y0,bg_w,bg_h)
+  },
+  up: function(e, cursor, new_cursor){
+    x += delta.a*s
+    y += delta.b*s
+    delta.zero()
+    dragging = false
+  },
+})
+
+
+
+
+</script>
-- 
cgit v1.2.3-70-g09d2