Skip to content
Snippets Groups Projects
Commit 679e881d authored by Zhongfu Bai's avatar Zhongfu Bai
Browse files

Merge branch 'btest1' into 'master'

Btest1

See merge request zhongfu/bezier!2
parents 06904f6a cdb09608
No related branches found
No related tags found
No related merge requests found
No preview for this file type
#pulley{
margin-left: 560px;
margin-top: 40px;
height: 700px;
width: 60%;
position: absolute;
}
.slider{
.uarrowHead{
color: red;
font-size: 30px;
font-weight: bold;
position: absolute;
margin-left: 772px;
margin-top: 792px;
}
.rarrowHead{
color: red;
font-size: 30px;
font-weight: bold;
position: absolute;
margin-left: 776px;
margin-top: 806px;
}
.slider:hover{
......@@ -16,14 +31,14 @@
width: 460px;
min-height: 40%;
top: 110px;
right: 60px;
right: 2%;
position: absolute;
}
.c_subgroup{
width: 80%;
padding-left: 10%;
padding-right: 10%;
width: 100%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 4%;
margin-top: 10px;
border-radius: 20px;
......@@ -85,17 +100,17 @@
#pulley_configuration{
list-style-type: none;
width: 500px;
width: 510px;
min-height: 5%;
position: absolute;
left: 2%;
top: 110px;
top: 105px;
}
#infolist{
border-top: 1px solid;
}
#pulley_configuration #infolist a {
display: inline-block;
width: 100%;
......@@ -106,6 +121,6 @@
text-align: center;
vertical-align: top;
width: 90px;
margin-left: 5px;
margin-left: 8px;
}
File added
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="936.091px" height="936.091px" viewBox="0 0 936.091 936.091" style="enable-background:new 0 0 936.091 936.091;"
xml:space="preserve">
<g>
<path d="M562.292,715.212l-41.747,42.25V178.628l41.747,42.25c20.379,20.625,53.62,20.825,74.245,0.445
c20.625-20.379,20.824-53.619,0.445-74.244L507.071,15.601c-20.379-20.626-53.62-20.825-74.245-0.445L299.554,146.837
c-20.625,20.379-20.824,53.619-0.445,74.244c10.271,10.395,23.806,15.601,37.348,15.601c13.33,0,26.667-5.046,36.897-15.155
l42.192-41.688v576.414l-42.192-41.688c-20.625-20.381-53.865-20.182-74.245,0.445c-20.379,20.625-20.18,53.865,0.445,74.244
l133.272,131.682c9.83,9.713,23.089,15.154,36.898,15.154c0.104,0,0.211,0,0.315,0c13.923-0.084,27.244-5.695,37.03-15.602
l129.911-131.479c20.38-20.625,20.181-53.865-0.444-74.244C615.912,694.386,582.67,694.585,562.292,715.212z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
img/delete.jpeg

7.48 KiB

......@@ -4,17 +4,61 @@
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/library/jquery.min.js"></script>
<script src="js/library/bootstrap-toggle.min.js"></script>
<script>
$( function() {
$( "#config" ).sortable({
start: function(event, ui){
swapStart = ui.item.index();
selected_p = selected_i = selected_id = null;
},
stop: function(event, ui){
swapEnd = ui.item.index();
console.log(swapStart + "->" + swapEnd);
// move target pulley to end index by swapping
let dist = Math.abs(swapStart - swapEnd);
if(swapStart < swapEnd)
for(let i = swapStart; i < swapEnd; ++i)
swapPulley(i, i + 1);
else
for(let i = swapStart; i > swapEnd; --i)
swapPulley(i, i - 1);
}
});
$( "#config" ).disableSelection();
$('#config').sortable({ cancel: '.cancel' });
$('#config').sortable({
items : '.draggable'
});
} );
</script>
<!-- functions.js-->
<script src="js/functions.js"></script>
<div onmousedown="stop_tracing(event)">
<div id="pulley_configuration">
<h4 style="width: 100%; font-weight: bold; text-align: center;">Pulley Configuration</h4>
<div id="infolist"></div>
<h4 style="width: 100%; margin-bottom: 30px; font-weight: bold; text-align: center;">Pulley Configuration</h4>
<div id="infolist">
<label class="list_item">Pulley ID</label>
<label class="list_item" id="diameterInfoLabel">Outer Diameter (cm)</label>
<label class="list_item" id="gwInfoLabel">Groove Width (cm)</label>
<label class="list_item">Direction (clock/counter-clock)</label>
<label class="list_item" id="cdInfoLabel">Pulley Coordinates (cm)</label>
<div id="config"></div>
</div>
</div>
<div id="graph">
<h4 style="font-weight: bold; margin-bottom: -30px; margin-top: 40px; text-align: center;">Interactive Work-surface Panel
<!-- arrow head at the origin-->
<p class="uarrowHead">&uarr;</p>
<p class="rarrowHead">&rarr;</p>
<h4 style="font-weight: bold; left: 630px; top: 100px; text-align: center; position: absolute">
Interactive Work-surface Panel
</h4>
<div id="pulley"></div>
</div>
......@@ -27,8 +71,8 @@
<label> Change Units: </label>
<div class="btn-group" role="group" aria-label="..." >
<!-- action event function is in this the script of this file-->
<button style="padding: 5px 20px;" class="btn btn-default active change-unit" value="1"> Metric (cm) </button>
<button style="padding: 5px 20px;" class="btn btn-default change-unit" value="2"> Imperial (inch) </button>
<button onclick="unitSwitcher(this.value)" style="padding: 5px 20px;" class="btn btn-default active change-unit" value="1"> Metric (cm) </button>
<button onclick="unitSwitcher(this.value)" style="padding: 5px 20px;" class="btn btn-default change-unit" value="2"> Imperial (inch) </button>
</div>
<br><br>
......@@ -37,7 +81,7 @@
<div id="sample"></div>
<div>
<label>Outer Diameter: </label>
<label id="d_label"></label> <label> cm</label><br>
<label id="d_label"></label> <label class="unit"> cm</label><br>
<!-- actual values on slider are pixels-->
<input type="range" min="9.2" max="46" value="30" class="slider" step="0.603" id="d_control" >
<div id="diameter_slide"> </div>
......@@ -45,7 +89,7 @@
<div >
<label>Groove Width: </label>
<label id="GW_label"></label> <label> cm</label> <br>
<label id="GW_label"></label> <label class="unit"> cm</label> <br>
<!-- actual values on slider are pixels-->
<input type="range" min="3" max="37" value="15" class="slider" id="gw_control">
<div id="gw_slide"> </div>
......@@ -61,7 +105,7 @@
<br><br>
<!-- <button onclick="change_direction(this)" class="control_btn" id="dir_button">cw</button>-->
<button onclick="start_tracing()" class="control_btn" id="add_btn"> Add Pulley </button>
<button onclick="clear_all()" class="control_btn"> Reset Pulley </button>
<button onclick="clear_all()" class="control_btn"> clear pulleys </button>
</div>
</div>
......@@ -69,9 +113,15 @@
<div class="c_subgroup">
<h4 class="c_subgroup_title">Display Options</h4> <br>
<input type="checkbox" onclick="show_curve()" checked id="show_curve_btn"> Show threading path </input>
<input type="checkbox" onchange="show_hide_curve(this)" checked id="show_curve_btn">
<label style="color: blue;">Show hand movement trajectory</label>
</input>
<br>
<input type="checkbox" onclick="hide_curve()" id="hide_curve_btn"> Show path control points </input>
<input type="checkbox" onclick="show_hide_Pts(this)" checked id="hide_curve_btn">
<label style="color: red;">Show hand movement control points</label>
</input>
<br>
<input type="checkbox" onclick="show_hide_threading(this)" checked > <label>Show threading path</label> </input>
</div>
......@@ -79,12 +129,12 @@
<h4 class="c_subgroup_title">Data Transfer Options</h4> <br>
<div class="c_subgroup">
<h4>Import: </h4>
<button onclick="download_csv()" class="control_btn"> Pulley Config </button>
<button onclick="upload_csv()" class="control_btn"> Pulley Config </button>
</div>
<div class="c_subgroup">
<h4>Export: </h4>
<button onclick="upload_csv()" class="control_btn"> Pulley Config</button>
<button onclick="download_csv()" class="control_btn"> Control Points </button>
<button onclick="download_pully_csv()" class="control_btn"> Pulley Config</button>
<button onclick="download_ctrPts_csv()" class="control_btn"> Control Points </button>
</div>
</div>
......@@ -98,6 +148,10 @@
<?php include '../anthro/phplibraries/config.php'; ?>
<?php include'../anthro/head2.php';?>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!-- public js library -->
<script src="js/library/b-spline/index.js"></script>
<script src="js/library/d3.min.js"></script>
......@@ -115,26 +169,28 @@
<!-- slider tick marks-->
<script>
// diameter slider's tickmarks
var width3 = 236, height3 = 20;
var width3 = 386, height3 = 20;
margin2 = {left:8, right:8}
var a_dia = d3.scaleLinear()
.domain([3, 15])
.domain([dSliderLeft, dSliderRight])
.range([0, width3]);
var d_axis = d3.axisBottom(a_dia).tickSize(5);
var canvas3 = d3.select("#diameter_slide")
.append("svg")
.attr("transform","translate(-5,0)")
.attr("width", width3 + margin2.left + margin2.right)
.attr("height", height3)
canvas3.append('g').attr("transform","translate(" + (margin2.left) + ",-2)")
.call(d3.axisBottom(a_dia).tickSize(5))
var dSliderMark = canvas3.append('g').attr("transform","translate(" + (margin2.left) + ",-2)")
.call(d_axis)
</script>
<script>
// Groove width slider's tickmarks
var a_gw = d3.scaleLinear()
.domain([0.2, 3.7])
.domain([gwSliderLeft, gwSliderRight])
.range([0, width3]);
var gw_axis = d3.axisBottom(a_gw).tickSize(5).ticks(8);
......@@ -143,7 +199,7 @@
.attr("transform","translate(-5,0)")
.attr("width", width3 + margin2.left + margin2.right)
.attr("height", height3)
canvas4.append('g').attr("transform","translate(" + (margin2.left) + ",-2)")
var gwSliderMark = canvas4.append('g').attr("transform","translate(" + (margin2.left) + ",-2)")
.call(gw_axis)
......@@ -180,34 +236,6 @@
document.getElementById("d_label").innerText = (fd(r * 2)).toFixed(2);
document.getElementById("GW_label").innerText = (GW / 10).toFixed(2);
let list = document.getElementById("infolist");
let id = document.createElement('label');
let diameter = document.createElement('label');
let gw = document.createElement('label');
let direction = document.createElement('label');
let cd = document.createElement('label');
id.setAttribute("class", "list_item");
diameter.setAttribute("class", "list_item");
gw.setAttribute("class", "list_item");
direction.setAttribute("class", "list_item");
cd.setAttribute("class", "list_item");
id.innerText = "Pulley \n ID";
diameter.innerText = "Outer Diameter (cm)";
gw.innerText = "Groove Width (cm)";
direction.innerText = "Direction (clock/counter-clock)";
cd.innerText = "Pulley Coordinates (cm)";
list.appendChild(id);
list.appendChild(diameter);
list.appendChild(gw);
list.appendChild(direction);
list.appendChild(cd);
restart();
</script>
......@@ -223,7 +251,11 @@
update_preview(cursor);
//updating selected pulley
if(selected_id != -1 && (!pulley_overlapped(+selected_p.attr("cx"), +selected_p.attr("cy"), r, selected_id))) {
if(selected_id == -1)
return;
console.log("selected_p: " + selected_p.attr("id"));
let p_index = getindex(selected_p.attr("id").substr(1,1));
if((!pulley_overlapped(+selected_p.attr("cx"), +selected_p.attr("cy"), r, p_index))) {
// add selected pulley's neighbors to array
add_neighbors(selected_id);
update_selected();
......@@ -235,7 +267,7 @@
var gw_label = document.getElementById("GW_label");
gw_control.oninput = function(){
GW = this.value;
gw_label.innerText = (GW / 10).toFixed(2);
gw_label.innerText = (fgw(GW) / 10).toFixed(2);
update_preview(cursor);
//updating selected pulley
......@@ -246,5 +278,4 @@
}
}
</script>
<?php include '../anthro/phplibraries/config.php'; ?>
<?php include'../anthro/head2.php';?>
This diff is collapsed.
......@@ -2,13 +2,20 @@
//introduction: ....
// ----- global constant variables -----
var margin = {left: 50, top:30, right:100, bottom:40};
var margin = {left: 50, top:25, right:25, bottom:40};
var height = 720, width = 337.5;
var ids = new Array(), n = 0;
var n = 0;
var r = 15;
var spin_direction = {0:"cw", 1:"ccw"};
var GW = 15;
var cur_dir = 0;
var ctlPoints = [];
// pulleys and configIds are containers useful for swapping
var pulleys = [];
var imgs = [];
var numbers = [];
var anchors = [];
// x y coordinate values of mouse
var mouse = new Array(2);
// interval is the grid size
......@@ -16,11 +23,26 @@ var x_interval = 6.25, y_interval = 5, buttom_height = 13;
// left most, right most x values and
// top, bottom y values
var x_left = -50, x_right = 50;
var y_top = 253, y_bottom = 13;
// cm: 1, inches: 2
var unit = 1;
var y_top = 253, y_bottom = 13
// sliders variables
// diameter min and max
var d_min = 3, d_max = 15.2;
var gw_min = 3, gw_max = 37;
// diameter slider ranges
var dSliderLeft = 3, dSliderRight = 15;
// groove width slider ranges
var gwSliderLeft = 0.2, gwSliderRight = 3.7;
// helper object for unit switch
// object variable names are acronyms
var variableBox = {x_i: x_interval, y_i: y_interval, buttom_h: buttom_height, x_l: x_left,
x_r: x_right, y_t: y_top, y_b: y_bottom, d_mi: d_min, d_ma:d_max, r_: r,
gw_mi: gw_min, gw_ma: gw_max, GW_: GW, dSl: dSliderLeft, dSr:dSliderRight,
gwSl:gwSliderLeft, gwSr: gwSliderRight};
var listData = {diamter: [], gw: [], cd: []};
// variable for update
var neighbors = new Array();
var tracing_disabled = true;
......@@ -29,23 +51,23 @@ var selected_p = null;
var selected_i = null;
var is_importing = false;
var curve_plotted = true;
var pt_plotted = true;
var show_threading = true;
var swapStart = 0, swapEnd = 0;
// unit switch function needs to call before panel is built
var foo = unitSwitcher();
function unitSwitcher(){
}
// ----- canvas and groups -----
var canvas = d3.select("#pulley").append("svg")
.attr("id", "canvas")
.attr("transform", "translate(0,45)")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("display", "inline-block")
.attr("transform", "translate(" + 560 + "," + 30 + ")")
.on("mousemove", mousemoved)
.on("click", clone);
// let titleG = canvas.append('g').attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var g = canvas.append('g').attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// projection function, axis and grid
......@@ -69,12 +91,16 @@ var a_y = d3.scaleLinear()
// fd scale diameter from pixel to centi-meter
var fd = d3.scaleLinear()
.domain([9.2, 46])
.range([3, 15.2]);
.range([d_min, d_max]);
// inverse fd
var fd_ = d3.scaleLinear()
.range([9.2, 46])
.domain([3, 15.2]);
.domain([d_min, d_max]);
var fgw = d3.scaleLinear()
.domain([3, 37])
.range([gw_min, gw_max]);
// inverse fx and inverse fy: dimension centi-meters to pixel
var fx_ = d3.scaleLinear()
......@@ -89,7 +115,8 @@ var x_group = g.append('g')
.attr("transform", "translate(0" + "," + height + ")");
var x_axis = x_group.call(d3.axisBottom(a_x).tickSize(5).tickValues(d3.range(x_left, x_right + x_interval * 2, x_interval * 2)).tickFormat(function(d){ return d ;}))
.selectAll("text").attr("font-size", "12px").attr("text_anchor","middle").attr("transform", " translate(0,6)");
var y_axis = g.append('g')
var y_group = g.append('g');
var y_axis = y_group
.call(d3.axisLeft(a_y).tickValues(d3.range(y_bottom, y_top + y_interval * 2, y_interval * 2)).tickFormat(function(d){ return d;}))
.selectAll("text")
.attr("font-size", "12px")
......@@ -97,9 +124,7 @@ var y_axis = g.append('g')
// another y_axis just to show the horizontal line
var y_group = g.append('g');
var y_axis2 = y_group.call(d3.axisLeft(a_y).tickSize(-width).tickValues(d3.range(y_bottom, y_top + y_interval, y_interval)));
var y_axis2 = g.append('g').call(d3.axisLeft(a_y).tickSize(-width).tickValues(d3.range(y_bottom, y_top + y_interval, y_interval)));
y_axis2.selectAll("text").remove();
......@@ -157,27 +182,7 @@ var coordinate = canvas.append("text")
.attr("font-size", "15px");
// ----------------- arrows -----------------
var x_arrow = g.append("line")
.attr("x1", width / 2)
.attr("y1", height)
.attr("x2",width / 2)
.attr("y2", height - 20)
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-end","url(#arrow)");
var y_arrow = g.append("line")
.attr("x1", width / 2)
.attr("y1", height)
.attr("x2",width / 2 + 20)
.attr("y2", height)
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-end","url(#arrow)");
// ----------------- other function calls -----------------
// update default tab highlights
set_default_tab();
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment