-
Notifications
You must be signed in to change notification settings - Fork 40
/
box.gpkit
33 lines (33 loc) · 2.67 KB
/
box.gpkit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id='ractivecontainer'></div>
<script id='ractivetemplate' type='text/ractive'>
<svg width="400" height="400" version="1.1">
<g transform="scale(0.67)">
<g transform="translate(-62.984716,-899.77797)">
<path d="m 312.98455,1149.7784 100.00001,0 0,100 -100.00001,0 z" style="fill:#552baa;fill-opacity:0.75294118;stroke:none" transform="matrix({{plan.scalex * plan.scale}}, 0, 0, {{plan.scaley * plan.scale}}, {{plan.x + 362.984555 * (1-plan.scalex * plan.scale)}}, {{plan.y + 1199.7784 * (1-plan.scaley * plan.scale)}})" class="plan"></path>
<path d="m 312.98455,1049.7783 100.00001,0 0,100.0001 -100.00001,0 z" style="fill:#00d455;fill-opacity:0.75294118;stroke:none" transform="matrix({{top.scalex * top.scale}}, 0, 0, {{top.scaley * top.scale}}, {{top.x + 362.984555 * (1-top.scalex * top.scale)}}, {{top.y + 1099.77835 * (1-top.scaley * top.scale)}})" class="top"></path>
<path d="m 212.98472,1149.7784 100.00002,0 0,100 -100.00002,0 z" style="fill:#0080ff;fill-opacity:0.50196078;stroke:none" transform="matrix({{left.scalex * left.scale}}, 0, 0, {{left.scaley * left.scale}}, {{left.x + 262.98473 * (1-left.scalex * left.scale)}}, {{left.y + 1199.7784 * (1-left.scaley * left.scale)}})" class="left"></path>
<path d="m 312.98455,1249.7782 100.00001,0 0,100 -100.00001,0 z" style="fill:#00d455;fill-opacity:0.75294118;stroke:none" transform="matrix({{bottom.scalex * bottom.scale}}, 0, 0, {{bottom.scaley * bottom.scale}}, {{bottom.x + 362.984555 * (1-bottom.scalex * bottom.scale)}}, {{bottom.y + 1299.7782 * (1-bottom.scaley * bottom.scale)}})" class="bottom"></path>
<path d="m 412.9847,1149.7784 100.00002,0 0,100 -100.00002,0 z" style="fill:#0080ff;fill-opacity:0.50196078;stroke:none" transform="matrix({{right.scalex * right.scale}}, 0, 0, {{right.scaley * right.scale}}, {{right.x + 462.98471 * (1-right.scalex * right.scale)}}, {{right.y + 1199.7784 * (1-right.scaley * right.scale)}})" class="right"></path>
</g>
</g>
</svg>
<div style="text-align: right; font-weight: 700; font-size: 2em;">{{infeasibilitywarning}}</div>
</script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<script>
var r = {
infeasibilitywarning: "",
bottom: {scalex: 1, scaley: 1, scale: 1, x:0, y:0},
left: {scalex: 1, scaley: 1, scale: 1, x:0, y:0},
plan: {scalex: 1, scaley: 1, scale: 1, x:0, y:0},
right: {scalex: 1, scaley: 1, scale: 1, x:0, y:0},
top: {scalex: 1, scaley: 1, scale: 1, x:0, y:0},
}
$.getScript('http://cdn.ractivejs.org/latest/ractive.min.js', function () {
var ractive = new Ractive({
el: 'ractivecontainer',
template: '#ractivetemplate',
magic: true,
data: r
}) })
</script>