/
directcara_version_2.0.html
259 lines (257 loc) · 9.64 KB
/
directcara_version_2.0.html
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Project 1</title>
<style>
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<h1>Projections of a table</h1>
<div class="row">
<div class="col-md-5">
<div id="getvalue" style="border: 1px solid black; margin-bottom:15px;padding: 10px;">
<strong id="stored_values">Give the values</strong><br/><br/>
<strong id="text_change">LENGTH OF TABLE</strong>
<input type="text" class="input-sm"/>
<input type="text" class="input-sm"/>
<input type="text" class="input-sm"/>
<input type="text" class="input-sm"/>
<input type="text" class="input-sm"/>
<input type="text" class="input-sm"/>
<button type="button" onclick="getvalues()" id="valuesbutton" class="btn btn-info">Values</button>
<button type="button" onclick="valuesreset()" id="resetbutton" class="btn btn-info">RESET VALUES</button>
</div>
</div>
<div class="col-md-7">
<div id="all_canvas">
<canvas id="canvas1" width="600" height="450" style="border:1px solid black;border-radius:5px; ">
</canvas><br/>
<button type="button" id="button" value="click me" onclick="executethis()" class="btn btn-info">SHOW TOP VIEW</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//all global variables are stored here.
var form=document.getElementById("getvalue").querySelectorAll("input");// All inputs are stored in array named form
var getvaluesvar; // for getvalues function
var values = new Array(6); //for getvalues function
var canvas = document.getElementById("canvas1"); // canvas is stored here.
var context = canvas.getContext("2d"); //context tells that we are going to draw 2d pictures.
var i = 10, length_legs, length_legs_dist;
var a;
var b;
var legs_even;
var count=0;
//loop for getting values.
for(getvaluesvar=1;getvaluesvar<6;getvaluesvar++){
form[getvaluesvar].style.display = "none";
}
document.getElementById("resetbutton").style.display = "none";
getvaluesvar=0; // again initialize getvaluevar to zero
function getvalues(){
if(form[getvaluesvar].value !="" && form[getvaluesvar].value > 0){
//this is the validation i.e. if input bar is empty or contains zero then do not store value.
if(getvaluesvar < 6){
if(getvaluesvar == 3 && form[getvaluesvar].value < 4){error();}
else{
values[getvaluesvar]=parseInt(form[getvaluesvar].value);
//parseInt is used to tell te browser that the value must be an Integer only.
getvaluesvar++;
if(getvaluesvar<6){
show(getvaluesvar);// shows next input bar and changeg the text.
reset(getvaluesvar);// reset the input bar.
}
}
}
if(getvaluesvar == 6){
document.getElementById("text_change").style.display = "none";
form[getvaluesvar-1].style.display = "none";
document.getElementById("valuesbutton").style.display = "none";
document.getElementById("resetbutton").style.display = "inline";
document.getElementById("stored_values").innerHTML = "Values are stored click on the button to reset values";
}
}
//when input is empty or zero.
else{
alert("the values must not be empty or zero or negative");
}
}
function error(){
alert("The number of legs must be greater than 4");
}
function valuesreset(){
getvaluesvar = 0;
document.getElementById("text_change").style.display = "inline";
document.getElementById("text_change").innerHTML = "LENGTH OF TABLE";
form[getvaluesvar].style.display = "inline";
form[getvaluesvar].value = " ";
document.getElementById("stored_values").innerHTML = "Give the values";
document.getElementById("valuesbutton").style.display = "inline";
document.getElementById("resetbutton").style.display = "none";
}
// function to show next input box
function show(x){
form[x].style.display = "inline";
form[x-1].style.display="none";
form[x].value = " ";
}
// to clear the text in input fields with the help of x
function reset(x){
if(x==1){document.getElementById("text_change").innerHTML = "BREADTH OF TABLE";}
else if(x==2){document.getElementById("text_change").innerHTML = "THICKNESS OF TABLE";}
else if(x==3){document.getElementById("text_change").innerHTML = "NUMBER OF LEGS";}
else if(x==4){document.getElementById("text_change").innerHTML = "HEIGHT OF LEGS";}
else if(x==5){document.getElementById("text_change").innerHTML = "WIDTH OF LEGS";}
}
//Tells which function to run when button is clicked.
function executethis(){
canvasclear();//clear te canvas before drawing
if(count==0){
maketopview();
document.getElementById("button").innerHTML = "SHOW FRONT VIEW";
//change the text in the Button
}
else if(count == 1){
makefrontview();
document.getElementById("button").innerHTML = "SHOW SIDE VIEW";
}
else if(count == 2){
makesideview();
document.getElementById("button").innerHTML = "SHOW BOTTOM VIEW";
}
else if(count == 3){
makebottomview();
document.getElementById("button").innerHTML = "SHOW TOP VIEW";
count = -1;
// Go back to top of the function
}
count++;
}
//Canvas clear function definition
function canvasclear(){
context.clearRect(0,0,600,450);
}
//Top view is made by making use of this function
function maketopview(){
context.beginPath();
context.moveTo(i,i);
context.lineTo(values[0]+i,i);
context.lineTo(values[0]+i,values[1]+i);
context.lineTo(i,values[1]+i);
context.closePath();
context.stroke();
}
//Front view is made by making use of this function
function makefrontview(){
context.beginPath();
context.moveTo(i,i);
context.lineTo(values[0]+i,i);
context.lineTo(values[0]+i,values[2]+i);
context.lineTo(i,values[2]+i);
context.closePath();
checklengthlegs();
a = 1;
makelengthleg(values[0]);
context.stroke();
}
// This function checks wheather the number of legs are even or odd.
function checklengthlegs(){
if(values[3]%2==0){
length_legs = parseInt(values[3]/2);//number of legs visible when front view is shown
legs_even = true;
}
else{
length_legs = parseInt(values[3]/2) + 1;
legs_even = false;
}
}
//This function makes the z number of legs
function makelengthleg(z){
var total = z;
length_legs_dist = (total - (length_legs*values[5]))/(length_legs+1);
//this formula is used to find the distance between each leg
var legs_left = length_legs;//number of legs left to made
for(legs_left;legs_left>0;legs_left--){
makealeg();
}
}
// Each time when this function is called a leg is drawn over th canvas
function makealeg(){
context.moveTo(i+(a*length_legs_dist)+((a-1)*values[5]),i+values[2]);
context.lineTo(i+(a*length_legs_dist)+((a-1)*values[5]),i+values[2]+values[4]);
context.lineTo(i+(a*length_legs_dist)+((a-1)*values[5])+values[5],i+values[2]+values[4]);
context.lineTo(i+(a*length_legs_dist)+((a-1)*values[5])+values[5],i+values[2]);
context.closePath();
context.stroke();
a++;
}
//side view is made by using this link.
function makesideview(){
checklengthlegs();
//alert(Boolean(legs_even));
context.beginPath();
context.moveTo(i,i);
context.lineTo(values[1]+i,i);
context.lineTo(values[1]+i,values[2]+i);
context.lineTo(i,values[2]+i);
context.closePath();
a = 1;
breadthevencheck();
//alert(length_legs);
makelengthleg(values[1]);
}
//checks whether the number of legs are even or odd and assign a value to variable length_legs
function breadthevencheck(){
if(legs_even==true){
length_legs=2;
}
else{
length_legs=3;
}
}
//bottom view is made by using this function
function makebottomview(){
maketopview();
checklengthlegs();
makeblocks();
}
//bottom view of each leg is made by using this function
function makeblocks(){
context.beginPath();
length_legs=2;
var breadth_empty = (values[1] - (length_legs*values[5]))/(length_legs+1);
//empty space between legs while drawing blocks breadth ways.
checklengthlegs();
var length_empty = (values[0] - (length_legs*values[5]))/(length_legs+1);
//empty space between legs while drawing blocks length ways.
for(a=1;a<(length_legs+1);a++){
for(b=1;b<3;b++){
if(legs_even==false && a==length_legs){
length_legs=1;
breadth_empty = (values[1] - (length_legs*values[5]))/(length_legs+1);
}
if(length_legs==1 && b==2){
continue;
}
context.moveTo(i+(a*length_empty)+((a-1)*values[5]),i+(b*breadth_empty)+((b-1)*values[5]));
context.lineTo(i+(a*length_empty)+((a-1)*values[5]),i+(b*breadth_empty)+((b-1)*values[5])+values[5]);
context.lineTo(i+(a*length_empty)+((a-1)*values[5])+values[5],i+(b*breadth_empty)+((b-1)*values[5])+values[5]);
context.lineTo(i+(a*length_empty)+((a-1)*values[5])+values[5],i+(b*breadth_empty)+((b-1)*values[5]));
context.closePath();
context.stroke();
}
}
}
</script>
</body>
</html>