-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathprojectionproject.html
More file actions
137 lines (133 loc) · 6.9 KB
/
projectionproject.html
File metadata and controls
137 lines (133 loc) · 6.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content='width=device-width, initial-scale=0.5' name='viewport'/>
</head>
<title>Project 1</title>
<body style="font-family: sans-serif;">
<!-- creating a form -->
<form style="border: 1px solid black; text-align:center; padding:20px; border-radius:5px;" id="table_form">
<!-- Table for properly alligning -->
<table style="text-align: left;">
<!--creating rows and column <td></td> is used to leave a column in between empty-->
<tr><td><strong>Length of table top </strong></td><td></td><td><input type="text" value=""/>mm<br/></td></tr>
<tr><td><strong>Breadth of table top </strong></td><td></td><td><input type="text" value=""/>mm<br/></td></tr>
<tr><td><strong>Thickness of table top </strong></td><td></td><td><input type="text" value=""/>mm<br/></td></tr>
<tr><td><strong>Height of legs </strong></td><td></td><td><input type="text" value=""/>mm<br/></td></tr>
<tr><td><strong>Width of legs </strong></td><td></td><td><input type="text" value=""/>mm<br/></td></tr>
<tr><td><strong>Thickness of Legs </strong></td><td></td><td><input type="text" value=""/>mm<br/></td></tr>
<tr><td><button style="height:40px; width:150px; color:white; background:#f1601d; border:none; border-radius:5px;" type="button" onclick="draw()"><strong>CLICK TO DRAW</strong></button>
</td><td><a href="direct.html"><button type="button" onclick="reset()" style="height:40px; width:150px; color:white;background:#f1601d;border:none;border-radius:5px;"><strong>RESET</strong></button></a></td></tr>
</table>
</form><br/>
<div style="text-align: center;">
<!--top view canvas-->
<h1>Top View</h1>
<canvas id="canvas_topview" width="600" height="450" style="border:1px solid black;border-radius:5px; ">
</canvas>
<!--front view canvas-->
<h1>Front View</h1>
<canvas id="canvas_sideview1" width="600" height="450" style="border:1px solid black;border-radius:5px; ">
</canvas>
<!--bottom view canvas-->
<h1>Bottom View</h1>
<canvas id="canvas_bottomview" width="600" height="450" style="border:1px solid black;border-radius:5px; ">
</canvas>
<!--side view canvas-->
<h1>Side View</h1>
<canvas id="canvas_sideview2" width="600" height="450" style="border:1px solid black;border-radius:5px; ">
</canvas>
</div>
<script type="text/javascript">
function draw(){
//form object is created all the values of form are now in this object.
var form=document.getElementById("table_form");
var x=form.elements; //x now contains all the elements(basically inputs) of the form object
var len_table_top=parseInt(form.elements[0].value); //explicitely converted to int type(very important)
var bre_table_top=parseInt(form.elements[1].value);
var height_table_top=parseInt(form.elements[2].value);
var height_table_legs=parseInt(form.elements[3].value);
var wid_table_legs=parseInt(form.elements[4].value);
var len_table_bot=parseInt(form.elements[5].value);
var canvas1=document.getElementById("canvas_topview"); //object of canvas is created by making use id
var context1 = canvas1.getContext("2d");// this tells that we are going to make 2d pictures.
var i=10; //variable to leave some distance in the sides of the drawing.
context1.beginPath();// start the path
context1.moveTo(i,i);//move to(10,10) without drawing anything
context1.lineTo(len_table_top+i,i);//make a line from the earlier point to the given point.
context1.lineTo(len_table_top+i,bre_table_top+i);
context1.lineTo(i,bre_table_top+i);
context1.closePath();//close the curve.
context1.stroke();//only create the edges. fill can be used to fill the color inside
var canvas2 = document.getElementById("canvas_sideview1");
var context2 = canvas2.getContext("2d");
context2.beginPath();
context2.moveTo(i,i);
context2.lineTo(len_table_top+i,i);
context2.lineTo(len_table_top+i,height_table_top+i);
context2.lineTo(i,height_table_top+i);
context2.closePath();
var bythree = len_table_top/5;//divide the length to five parts and leave 1-1 parts in the end and the beggining
context2.moveTo(bythree+i,height_table_top+i);
context2.lineTo(bythree+i,height_table_top+i+height_table_legs);
context2.lineTo(bythree+i+len_table_bot,height_table_top+i+height_table_legs);
context2.lineTo(bythree+i+len_table_bot,height_table_top+i);
var secleg = 4*bythree;//leaving space from the end
context2.moveTo(secleg+i,height_table_top+i);
context2.lineTo(secleg+i,height_table_top+i+height_table_legs);
context2.lineTo(secleg+i-len_table_bot,height_table_top+i+height_table_legs);
context2.lineTo(secleg+i-len_table_bot,height_table_top+i);
context2.stroke();
var canvas3=document.getElementById("canvas_bottomview");
var context3 = canvas3.getContext("2d");
context3.beginPath();
context3.moveTo(i,i);
context3.lineTo(len_table_top+i,i);
context3.lineTo(len_table_top+i,bre_table_top+i);
context3.lineTo(i,bre_table_top+i);
context3.closePath();
var brebyfive = bre_table_top/5;//divide the breadth too in five parts.
var breintofour = 4*brebyfive;
context3.moveTo(i+bythree,i+brebyfive);
context3.lineTo(i+bythree+len_table_bot,i+brebyfive);
context3.lineTo(i+bythree+len_table_bot,i+brebyfive+wid_table_legs);
context3.lineTo(i+bythree,i+brebyfive+wid_table_legs);
context3.closePath();
context3.moveTo(i+secleg,i+brebyfive);
context3.lineTo(i+secleg-len_table_bot,i+brebyfive);
context3.lineTo(i+secleg-len_table_bot,i+brebyfive+wid_table_legs);
context3.lineTo(i+secleg,i+brebyfive+wid_table_legs);
context3.closePath();
context3.moveTo(i+bythree,i+breintofour);
context3.lineTo(i+bythree+len_table_bot,i+breintofour);
context3.lineTo(i+bythree+len_table_bot,i+breintofour-wid_table_legs);
context3.lineTo(i+bythree,i+breintofour-wid_table_legs);
context3.closePath();
context3.moveTo(i+secleg,i+breintofour);
context3.lineTo(i+secleg-len_table_bot,i+breintofour);
context3.lineTo(i+secleg-len_table_bot,i+breintofour-wid_table_legs);
context3.lineTo(i+secleg,i+breintofour-wid_table_legs);
context3.closePath();
context3.stroke();
var canvas4 = document.getElementById("canvas_sideview2");
var context4 = canvas4.getContext("2d");
context4.beginPath();
context4.moveTo(i,i);
context4.lineTo(bre_table_top+i,i);
context4.lineTo(bre_table_top+i,height_table_top+i);
context4.lineTo(i,height_table_top+i);
context4.closePath();
context4.moveTo(brebyfive+i,height_table_top+i);
context4.lineTo(brebyfive+i,height_table_top+i+height_table_legs);
context4.lineTo(brebyfive+i+wid_table_legs,height_table_top+i+height_table_legs);
context4.lineTo(brebyfive+i+wid_table_legs,height_table_top+i);
context4.moveTo(breintofour+i,height_table_top+i);
context4.lineTo(breintofour+i,height_table_top+i+height_table_legs);
context4.lineTo(breintofour+i-wid_table_legs,height_table_top+i+height_table_legs);
context4.lineTo(breintofour+i-wid_table_legs,height_table_top+i);
context4.stroke();
}
</script>
</body>
</html>