diff options
| -rwxr-xr-x | public/assets/stylesheets/app.css | 11 | ||||
| -rw-r--r-- | public/assets/test/bg.html | 114 |
2 files changed, 123 insertions, 2 deletions
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1c20493..eb3bd87 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -414,12 +414,16 @@ iframe.embed { .page h1 { font-size: 80px; font-weight: 100; - padding: 20px 0 25px 0; + padding: 60px 0 25px 0; float: left; width: 100%; border-top: 1px solid; } +.page p { + margin: 20px; +} + /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */ .docs .content { @@ -1425,6 +1429,7 @@ h4 { input[type=range] { -webkit-appearance: none; -moz-appearance: none; + cursor: pointer; background-color: black; width: 180px; height:3px; @@ -1532,13 +1537,14 @@ input[type="range"]::-webkit-slider-thumb { .settings { padding: 10px 12px 12px 12px; - bottom: 20px; + bottom: 10px; right: 10px; font-size: 12px; -webkit-transform: translateY(450px); -webkit-transition: -webkit-transform 0.2s ease-in-out; transform: translateY(450px); transition: -webkit-transform 0.2s ease-in-out; + width: 210px; } .settings.active { @@ -1590,6 +1596,7 @@ input[type="range"]::-webkit-slider-thumb { .settings input[type="text"] { border: 1px solid #000; font-size: 15px; + max-width: 100%; padding: 5px; } 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> |